Constructing the User Interface with Statecharts ———————————– 作者／Ian Horrocks /著 出版社／Addison-Wesly 出版 ISBN／0-201-34278-2

內容簡介
Behind most non-trivial user interface screens lie complex webs of code that many practitioners in the software industry find difficult to control. Despite the obvious power and sophistication of user interface development tools, the majority of user interface software is difficult to understand because it is coded without an overall design. In this book, Ian Horrocks presents a proven technique for designing event-driven software using the UCM architecture and the statechart notation. The statechart approach to constructing user interface software results in code that can be:

* written quickly and easily,
* tested using white box techniques,
* repeatedly enhanced over the lifetime of a system,
* modified with a minimal risk of introducing unwanted side-effects,
* regression tested without the need for full re-tests.

This book provides a practical guide to constructing real user interfaces for real projects. It is primarily written for practising software engineers, but will also be invaluable to students wishing to gain an insight into user interface construction.

前言

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

我是覺得一般 UML 書籍對狀態機圖的論述，仍是著墨甚少，且焦點還是擺在對單一物件的行為描述，而領域性的物件 (domain object)，如“訂購 (order)”，其狀態的變化可能還是少了些，利用簡單的欄位值描述就可以了。
事實上，利用狀態機圖來捕捉某一個體複雜狀態，威力可是非常強大，它有助於讓我們釐清狀態之間轉移 (transition)的變化情形。最常被運用到的範疇，包括控制器 (controller)，例如十字路口的紅綠燈，或者捷運站閘門、販賣機等，都是內嵌了控制器；以及使用者介面 (UI)，尤以後者，它呈現了因為事件 (event)的觸發，而導致諸多 UI 元件彼此之間的狀態連動，該如何對其作有效的控管，並期能追蹤與測試，以維持 UI 一定的品質。

本期書評的主角，正是運用狀態圖 (statechart)的技術來建構使用者介面。包括傳統的 Windows Form，至現以 Web-based 介面開發的 ASP.NET, JSF, 乃至於最熱門的 AJAX 等 UI 技術，其本質都是一樣的—均為以事件驅動 (event-driven)的介面開發。

本書道盡了狀態設計的精髓與本質

這一本書薄薄的，含附錄也才 250 頁，不過字體實在甚小，閱讀起來實在傷眼，還有，內容也稍微艱澀了一些，可要耐下性子，你才能逐漸理解狀態機用在 UI 設計的觀念與技巧，以及寫出程式碼。

本書共分為四大部分。第一部份是對 UI 建構上的概念引導。從命列列模式的 UI 開始講起，到 windows-based 多樣化的 UI 畫面，以能更提供人性化的操作介面。雖然系統廠商提供了諸多豐富的 UI 元件，並呈現給 developer 直覺式的 UI 開發環境，似乎拉一拉圖形元件 (widget) 就可以就建構出美美的畫面，你也不用再管到這些視窗之間的互動細節。這些工具的確幫助開發者不少，但是，在幫你定義好個別 UI 元件所相對應的事件處理函式之後，在其內的實作程式碼，仍是需要由開發者自行撰寫，並且往往也需要在此寫上關連與其它 UI 元件的狀態操作等。UI 元件彼此之間的狀態連動可能會牽涉到很廣，若沒有一個好的規範，則常會出錯，而這往往也是造成複雜畫面凌亂難以維護的主因。這裡 Horrocks 提出了對 UI 設計極為重要的 UCM (user interface-control-model) 架構 (p.28)，藉以釐清在 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 加上圓框符號構成的)，在轉移出超狀態、又再次轉移進入後，到底是要進入哪一個子狀態，這就端賴於“H”這個歷史狀態記錄了，是非常實用的一個技巧。本部分後半章節，開始教你 step-by-step，如何從畫出狀態圖開始，並對每一個狀態命名、給予狀態變數，再整理成一張“事件-行動表 (event-action table)”，未來即是可以依據該表格來轉化為程式碼的。第九章則是提供給讀者在設計狀態圖上的提示與原則，未來在實作設計上，可是經常回頭翻閱本章，會帶給設計人員許多的啟發。
第三部分提供了三個案例分析，從計算器、But Reporting 到學生資料庫應用程式等，讓你實際看到這些應用程式的畫面呈現，以及是該如何利用狀態圖來捕捉這些複雜畫面的狀態轉移情形。大致瀏覽一下，也讓你可以知道頂尖的 UI 技術團隊，在設計 UI 畫面時所用到的技巧與其開發程序。

看到四分之三的內容，讓許多讀者會挫折的是，怎麼還是不知道該如何將狀態圖轉移到實作的階段？ 第四部分總算揭露出轉移到實作程式碼的階段與步驟了。不過 Horrocks 僅列出實作狀態圖的程式設計步驟 (p.187)，以及以虛擬程式碼呈現而已 (看起來應該是以 Pascal 語法來表達的)。並沒有列出相當完整的程式碼範例，這讓許多想要“眼見為憑”的讀者會大失所望的。不過真的要堅持，當初我整整花了一個星期以一個“紅綠燈+方向燈”的控制器案例，從狀態圖的塑模，到實作出 Java 程式碼，當在畫面上可以秀出紅綠燈號的狀態轉移，並且是依循狀態圖的設計規格來實作，這也代表者我即使在 C#.NET 實作，設計圖都不用變動，那種成就感真的是相當喜悅。

高品質的 UI 畫面從狀態圖設計開始

我對本書相當著迷，也為此實作狀態機圖的程式開發，並將之整理成教材納入在 我所教授的 UML 的課程教育上。但是在實務上是否有必要利用狀態圖來設計畫面呢？ 我是以為若產品開發是要能呈現在多個平台的畫面上，那真的是有必要，它可以讓可攜性與維護性提高。還有曾有讀者問過我，UI 設計該如何作測試呢？ 當你作好 UI 的狀態圖設計後，也就代表了可以針對 UI controller 撰寫測試程式碼，依據測試案例來作自動化的測試，達成高品質的 UI 設計，無論是對 ASP.NET, JSF, AJAX 等 UI 框架，道理都是一樣的，好處真的是多多。
我發現到本書在 Amazon 評價是四顆星，有趣的是，11 位評論者有 6 位給滿分五顆星，3位給四顆星，另外兩位則只給 1 顆星。給一顆星的理由是因為看不懂，所以無法應用在實務上。這實在可惜，那6位給滿分的可是評價甚高，而事實上，能專注於狀態機圖的設計書籍，實在少之又少，況且又能協助你在 UI 畫面的設計上，並以釐清複雜事件處理的狀態控管，實在了不得。喔，還有，本來我以為眼花了，當初我在「天朧書局」買本書時只有 NT$ 750，但在 Amazon 看到的價錢是 U$ 200 元，二手書也要 US$ 180 呢。看來應該是絕版書籍，物以稀為貴吧，同時也證明本書的價值的確是經得起考驗的。