[Solar2D] 程式設計教學：圖形介面程式的要素 ─ 元件 (Widgets)、事件 (Events)、處理器 (Handlers)

[注意事項] Corona 已改名為 Solar2D。

從程式設計的角度來看，Solar2D (原 Corona SDK) 應用程式是一種圖形介面程式，在這類程式中，會採用事件導向 (event-driven) 的方式來撰寫程式。簡單地說，程式圍繞著 UI 元件 (widgets 或 components)、事件 (events) 和其相關的事件處理器 (event handlers) 所組成。本文會從簡單的範例來看如何撰寫這類程式。

在初學的終端機程式 (console applications)，程式的執行是線性的，基本上是依程式碼的順序來執行，當所有的程式都執行完畢就離開該程式。而在圖形介面程式中，程式通常不會直接結束掉，而會在初始化後進入一個事件迴圈 (event loops) 中；這時，主程式是等待狀態，待使用者觸發 (trigger) 某個事件後，再執行相對應的事件處理器代碼。一個常見的事件是按按鈕。

接著，我們寫一個簡單的例子，該程式可藉由按按鈕來改變程式上的文字。完整的專案放在這裡，本文僅節錄部分內容。

專案的示意圖如下：

{{< figure src="/img/corona-sdk/button-widget.png" alt="在 Solar2D 程式中，藉由按鈕觸發事件" class="phone" >}}

這個範例也相當簡單，實際有作用的元件就是按鈕的部分，至於文字部分沒有事件處理器，僅被動經由按鈕改變文字。

我們的程式很簡單，也是放在單一的 main.lua 命令稿中，但程式碼略長，故我們分段展示。如果讀者想追蹤完整的程式碼，請到上述的專案網址。

一開始，我們引入 widget 套件，這是為了待會要建立按鈕物件。

-- Import widget.
local widget = require("widget")

我們使用一個局部變數 count 做為按鈕次數的計數器 (counter)，將其初始化為 0。

-- The internal counter.
local count = 0

接著，建立 text 物件，呼叫先前建立的 count 做為一開始的文字內容的一部分。同樣地，將 text 物件設置為黑色 (black)。

-- Init the text.
local text = display.newText({
    text = count .. " click",
    x = display.contentCenterX,
    y = display.contentHeight * 0.5,
    fontSize = 24,
})

-- Set the color of the text.
text:setFillColor(0 / 255, 0 / 255, 0 / 255)

接著，建立按鈕元件所需的事件處理器 btnListener，在此處理器中，我們會偵測 event.phase，當 event.phase 為 "ended" 時，引發指定的行為。此處指定的行為會將 count 以 11 為單位輪轉 (利用餘數除法)，再依據 count 的值修改 text 物件的文字。

-- Declare the listener of the button.
local function btnListener(event)
  if event.phase == "ended" then
    -- Update the counter.
    count = (count + 1) % 11

    -- Update the text according to our internal counter.
    if count <= 1 then
      text.text = count .. " click"
    else
      text.text = count .. " clicks"
    end
  end
end

最後，我們建立 button 物件，並將 btnListener 和此物件連結起來。值得注意的是，我們將 fillColor 設成兩種不同的顏色，這樣在按按鈕時就會有提示使用者的效果。其餘的參數設定方式請到這裡觀看官方 API。

-- Init the button.
local button = widget.newButton({
    x = display.contentCenterX,
    y = display.contentHeight * 0.7,
    label = "Tap Me",
    isEnabled = true,
    onEvent = btnListener,
    shape = "rounedRect",
    labelColor = {
      default = { 0 / 255, 0 / 255, 0 / 255},
      over = { 0 / 255, 0 / 255, 0 / 255},
    },
    fillColor = {
      default = { 180 / 255, 255 / 255, 255 / 255},
      over = { 110 / 255, 255 / 255, 255 / 255},
    }
})

在本例中，程式的行為相當簡單，把行為直接寫在事件處理器中即可。對於複雜的程式行為，則建議將行為的部分拉出來，做成單獨的模組，在維護上會比較容易。