紅綠燈控制器的狀態圖與UI

（縮略圖，點擊圖片鏈接看原圖）

說明

• 該控制器主要有三個狀態： 紅燈、綠燈與黃燈。
• 三個主要的狀態轉移是以定時器(Timer)來設定事件的觸發。
• 紅燈狀態內部又有兩個子狀態，一個是純紅燈訊號；另一個為紅燈+右轉燈訊號。兩個子狀態視交通情況而可以動態調整切換(Toggle)。
• 從黃燈訊號轉移回紅燈主狀態訊號時，會參考歷史狀態(H符號)來決定進入的是哪一個子狀態；若為第一次進入，則預設(箭頭所指向)為純紅燈訊號。

實做狀態圖轉程式碼的步驟

1. 利用 IDE 工具新增使用者介面物件 (UI Objects)。
2. 新增狀態變數 (State Variables)。
   • 每一個狀態均設定一個狀態編號。ex. 1, 2, 3…
   • 利用狀態變數來記錄同一階層(level)的狀態變化。
   • ex. 紅綠燈控制器利用狀態變數 A 紀錄目前所在的狀態(紅燈 or 綠燈 or 黃燈)。
3. 新增狀態程序 (ex. go_state_xx() )。
   • 實做一個 UI 控制(Control)物件，接收從 UI 物件所傳送的事件，並定義各狀態程序以處理接受的事件。
4. 實做定義於 “事件-行動(event-action)” 狀態表的狀態轉移。

表達狀態圖的“事件-行動(event-action)”表

（縮略圖，點擊圖片鏈接看原圖）

實做紅綠燈控制器的部分範例程式碼

（縮略圖，點擊圖片鏈接看原圖）

以 Statechart 協助建構 UI 的好處

• 快速而且可以很容易地撰寫出程式碼。
• 可以以黑箱的方式來測試 UI 的品質。
• 在系統生命週期內可以持續地擴充改進。
• 修正時產生的副作用機率最低。
• 回歸測試時不需要完全重新測試。