利用狀態圖實做使用者介面(User Interface) -以紅綠燈控制器為範例

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

紅綠燈控制器的狀態圖與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)”表

表達狀態圖的“事件-行動(event-action)”表
(縮略圖,點擊圖片鏈接看原圖)

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

實做紅綠燈控制器的部分範例程式碼
(縮略圖,點擊圖片鏈接看原圖)

以 Statechart 協助建構 UI 的好處

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

文章導覽

   

共有 6 則迴響

  1. Hello SpongeBob:

    Yes, 這本可說是討論 StateChart 的經典,尤其應用在 UI 的建構設計上。

    至於您所提的問題,基本上會設計一個 “form control” object,來執行 form 狀態的變化。

    這些是程式設計的技巧範疇,過一陣子,有空時,我會再補上可執行程式碼的範例。(幾年前利用 Java 寫過,但找不到了)。

發佈回覆給「Kenming Wang」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *