軟體設計必讀經典(9)優質使用者介面，源自好的狀態圖設計

狀態機圖（State-Machine Diagram）是描述系統行為時常見的技術。自1960年代以來，狀態機圖就被廣泛運用在即時、嵌入式系統的狀態設計上，而UML規格的制訂，更將它納入，成為重要標準設計圖之一。物件導向技術經常使用狀態機圖表示系統中的各種行為，例如：針對單一類別畫出它的狀態機圖，顯示單一物件在生命周期中的行為。

一般UML書籍對狀態機圖的論述，仍是著墨甚少，焦點依然擺在對單一物件的行為描述，事實上，利用狀態機捕捉某一個體的複雜狀態，威力可是非常強大，它有助於我們釐清狀態之間轉移（Transition）的變化情形。這類型圖表經常運用在控制器（Controller），例如十字路口的紅綠燈、捷運站閘門、販賣機等內嵌控制器，以及使用者介面（UI），尤其是UI，它呈現了因為事件（Event）的觸發，而導致諸多UI元件彼此之間的狀態連動情形，以有效的控管，並追蹤與測試，維持UI一定的品質。

《Constructing the User Interface with Statecharts》討論的重點，正是運用狀態圖（Statechart）技術而建構使用者介面，包括傳統Windows Form、Web-based介面開發的ASP.NET/JSF，以及熱門的Ajax等UI 技術，都是以事件驅動（Event-Driven）的介面開發。

實作程式碼之前，先掌握狀態設計精髓

本書分為四大部分。第一部分為UI建構的概念引導。從命列列模式的UI開始講起，到Windows-Based多樣化的UI畫面，以提供更人性化的操作介面。雖然系統廠商提供諸多豐富的UI元件，並提供開發者直覺式的UI開發環境，讓你拉一拉圖形元件（Ｗidget），似乎就能建構出美美的畫面。

工具的確幫了開發者不少忙，但是，它只能幫你定義個別UI元件所相對應的事件處理函式，後續內部的實作程式碼，仍需要開發者自行撰寫，並且往往也需要在此寫上與其它UI元件關連的狀態操作等。UI元件彼此之間的狀態連動，牽涉範圍可能很廣，若沒有一個好的規範，便容易出錯。

基於這個問題，作者提出對UI設計極為重要的UCM（User Interface-Control-Model）架構，藉以釐清UI 元件、事件處理者（Event Handler）與控制物件（Control Object）三層之間的責任分派。你會發現，層次分明的好處就在於，Event Handler並不直接處理邏輯，而是交給控制物件統一維護所有UI元件的狀態，讓UI元件回歸到最單純的責任──視覺化的呈現。

UCM其實等同於Java Struts提出的MVC框架（Model-View-Controller），只是名稱不同而已。不過，此說法僅限在UI展示層（Presentation-Tier）對UI設計的MVC而已，並非對企業整體系統的三層式（3-tier）MVC架構。不要把兩者混淆在一起，導致UI層與企業邏輯層的耦合性（Coupling）太重。

第一部分的最後一章節，介紹狀態機的設計語法，並藉此比較有限狀態機（Finite-State Machine）與狀態圖（Statecharts）的不同。實際上，有限狀態機與狀態圖本質相同，均是捕捉狀態的轉移，差別在於有限狀態機並沒有層次的觀念，所以會在設計圖上表達太多細節，這並不妥。我們可以把許多複雜的狀態轉移、群組，再抽象出更上一層，而封裝了內部複雜的狀態轉移，便成為超狀態（Super State）與子狀態（Sub State）的層次關係。

第二部分是對Statecharts基礎技術的建立。包括構成狀態圖的諸多表達語法，以及真實狀態的各種變化情形，包括上述所提的層次深度、並行、延遲與逾時、瞬變（Transient）狀態、事件的優先、參數化的狀態等。這部分最有意思的是歷史機制（在狀態圖上是以H加上圓框符號構成），在轉移離開超狀態、又再次轉移進入後，到底是要進入哪一個子狀態，這就有賴歷史狀態記錄，是非常實用的技巧。

後半章節，開始Step-by-Step教學，教你如何畫出狀態圖，對每個狀態命名、給予狀態變數，再整理成一張「事件──行動表」（Event-Action Table），未來便可以依據該表格轉化為程式碼。

第九章提供設計狀態圖的提示與原則，建議設計人員可以經常回頭翻閱本章，它能帶給你許多啟發。

第三部分提供3個案例分析，從計算器、Bug Reporting 到學生資料庫應用程式等，讓你看到這些應用程式的畫面呈現，以及如何利用狀態圖捕捉畫面的狀態轉移情形。讓你知道頂尖UI技術團隊，在設計UI畫面時所用到的技巧與其開發程序。

看完前面四分之三的內容，總讓許多讀者感到挫折，因為還是不知道如何將狀態圖轉移到實作階段。第四部分總算揭露從轉移到實作程式碼的階段與步驟。不過，作者僅列出實作狀態圖的程式設計步驟，以及如何以虛擬程式碼呈現而已，並未列出完整程式碼範例。

不過真的要堅持。我曾經花了一個星期研究「紅綠燈+方向燈」的控制器案例，從狀態圖的塑模，到實作出Java 程式碼。當畫面可以顯示紅綠燈號的狀態轉移，而且是依循狀態圖的設計規格實作，其中的成就感不言而喻。這也代表即使在C#.NET 實作，設計圖也都不需要變動。

狀態機圖適用於跨平臺產品開發，提高可攜性與維護性

我對本書相當著迷，也為此實際進行狀態機圖的程式開發，並整理成教材納入UML課程內容。但是，實務上是否有必要利用狀態圖設計畫面？若產品開發要能呈現在多平臺的畫面，便有必要，它能夠提高可攜性與維護性。

曾有讀者問我，UI設計該如何測試？當你作好狀態圖設計後，也就代表可以針對UI Controller撰寫測試程式碼，依據測試案例作自動化測試，達成高品質UI設計，通用於ASP.NET、JSF、Ajax等UI框架。

能專注於狀態機圖的設計書少之又少，本書能協助你設計UI畫面，釐清複雜事件處理的狀態控管，值得花心思閱讀，雖然這一本書似乎已絕版，但二手書也要180美元，證明它的價值經得起考驗。

Constructing the User Interface with Statecharts

Ian Horrocks /著

Addison-Wesly出版

售價：200美元

Amazon四顆星

《作者簡介》

王克明

台北工專五專部電子科畢業。HSDc軟體設計顧問，擔任包括鋼鐵、保險、股票等多項領域系統架構開發顧問，以及軟體設計課程專職講師。

熱門新聞