[置頂] ZK（The leading enterprise Ajax framework）入門指南

1. Why ZK

JavaEE領域歷來就不缺乏Framework尤爲是Web Framework，光是比較流行的就有：SpringMVC、Struts二、JSF系列……

其它不怎麼流行的、小衆的、非主流的全加起來估計上百，讓人眼花繚亂。

那爲何還要去學習ZK這個知名度不高的框架呢？ZK官網關於Why ZK列出了不少特性：http://www.zkoss.org/whyzk/features

下面給出我最看重的ZK優於其餘框架的獨特優點：

• 純Java「端到端」Web解決方案
• 提供豐富的頁面組件和聲明式的用戶界面描述語言（ZUML）
• 支持MVVM模式數據綁定
• 支持自動化功能測試

雖然只有這幾點，可是每個都很是有價值，解決了咱們多年以來開發Web應用過程當中很頭疼的幾個問題，後面會分別展開介紹。

2. ZK整體架構

前面說到Web框架種類繁多，可是仔細研究發現它們能夠分紅如下3種類型：

• 請求響應模型的MVC框架：struts一、webwork二、struts二、springmvc、apache wicket、grails、play
• 事件模型的RIA組件框架：jsf系的n種實現、gwt系列（好幾個分支）、vaddin、zk
• REST風格架構：最近出現的一種新的架構風格，前端採用UI框架如Ext、JQueryUI、HTML5，後端REST服務框架（如SpringMVC）提供數據（json、xml）。

ZK屬於第二種類型——事件模型的RIA組件框架，具體的，用ZK開發一個Web應用只要作兩件事：

• 用 ZK的UI組件搭建用戶界面
• 基於ZK框架處理用戶界面上發生的事件

而後其它的事情就都由ZK搞定了，這就是所謂透明的AJAX；

2.1. AJAX處理流程

ZK應用處理一個典型客戶端AJAX請求的完整過程以下：

1. 用戶的某個操做觸發Client Event發送給Widget
2. Event被Widget一路向上轉發到了ZK Clent Engine
3. Clent Engine發出AJAX Request給位於服務端的ZK Update Engine
4. Update Engine通知ZK Component處理AJAX Request
5. Component生成服務端Event發送到ZK Event Queue；
6. ZK框架調用Event Listener處理Event；
7. Event Listener執行業務邏輯，並更新Component狀態 或 生成新的Event發送到Queue；
8. Update Engine收集全部Component狀態的修改並轉換成指令集合返回客戶端；
9. Client Engine根據指令更新Widget狀態；
10. Widget更新DOM Tree改變用戶界面；

上述十個步驟構成了一個AJAX請求的處理流程，用戶在瀏覽器中的全部操做都是上述步驟的循環；

可是在這個循環開始前，還有一個環節——請求ZK頁面：

1. 瀏覽器請求一個頁面URL
2. ZK框架load對應的ZUL頁面，並根據ZUL定義來建立和組裝Components Tree
3. ZK根據ZUL定義渲染HTML返回客戶端；若是是第一次請求，還會連同Client Engine一塊兒返回；
4. Client Engine渲染頁面建立DOM Tree，生成用戶界面；
5. 而後Client Engine就常駐瀏覽器中，處理用戶操做產生的Event；

若干個ZUL頁面就構成了一個完整的ZK應用。

2.2. ZUL與控制器

對於ZK應用開發人員來講，一個ZK應用就是由一組ZUL頁面及其控制器組成的，

其中，ZUL負責以聲明式方式定義頁面（聲明頁面由哪些組件構成以及組件之間的關係——佈局），控制器負責處理頁面組件產生的各類事件；

ZUL與控制器之間的關聯也是在ZUL中定義的，所以ZK有點像Web層的SpringFramework（XML定義Bean及其依賴關係，Bean封裝服務）；

ZK很是的靈活，既能夠用ZUL（一種XML）聲明式方式定義用戶界面，也能夠採用相似Swing的編程式方式，

前者定義包 含大量組件的複雜頁面時很是簡單，後者優點是靈活動態，

並且兩種模式能夠混合使用——用ZUL定義一個複雜頁面的大框架，而後在控制器中填充或修改部分需特殊處理的UI；

3. ZK的優點

3.1. 純Java「端到端」Web解決方案

3.1.1. 分工的代價

一般狀況下，一個Web開發人員除了要掌握一種服務端技術（JavaEE、.Net、PHP或RoR）之外，還必須熟悉Html、CSS、JavaScript這三種技術才能獨立完成一個Web應用，

由於缺乏了上述任何一項技能，都沒法開發出一個完整Web應用的哪怕很小的一個功能模塊，或者作出的東西質量不合格（例如界面醜陋、交互性很差、瀏覽器兼容性很差等）。

同時精通上述全部技能的開發人員很是少並且昂貴，因而不少團隊經過分工來解決這個問題——將開發人員進一步分紅前端開發、後端開發，另外前端開發可能還依賴美工提供頁面素材；

現代軟件工程方法（尤爲是敏捷開發和精益開發方法）提倡「全功能團隊」，反對嚴格的分工，認爲分工會帶來高昂的溝通成本和集成成本、更容易出現生產力瓶頸、形成大量資源浪費；

關於全功能團隊的更多內容見http://www.infoq.com/cn/articles/hk-build-full-function-team，本文不作過多論述。

總之，因爲傳統Web開發須要掌握的技術領域多達4種（並且每個領域能包含不少內容，光JS就涉及N多框架和庫），致使開發團隊分工，進而嚴重影響開發效率。

3.1.2. 端到端的開發

相比之下ZK的優點十分明顯——無需Html、CSS和JavaScript只用Java便可實現一個完整的Web應用，扔掉了前端和美工這兩根「柺杖」，開發人員的生產力水平產生巨大提高，

不再會出現那種「後端等前端前端等美工 或者 後端人不夠前端美工沒事作」的局面。

另一個不容忽視的因素就是Java語言相對於JS語言的優點，Java語法嚴格、有編譯器和IDE約束、便於調試、便於單元測試、可讀性好，更適合大型團隊和長期維護的項目！

ZK應用在客戶端看來仍是標準的Web應用——接受Http請求返回標準Html、CSS和Javascript，ZK只不過將這些Web底層技術細節對ZK應用開發人員屏蔽了，

ZK將Html、CSS和Javascript視爲Web領域的彙編語言，將開發人員從Web技術細節中解放出來去更多的專一於實現業務邏輯。

3.2. 豐富的組件和聲明式的用戶界面

XML標籤是描述複雜頁面最簡單直觀也容易維護的方式，例如XHTML、JSP、FreeMarker等，

ZK屏蔽了HTML細節同時爲開發人員提供了更高層面的抽象——頁面組件，本來須要大量HTML標籤繪製的頁面，使用ZUL只需不多的ZK組件標籤就能夠定義出來。

另外ZUL標籤語法簡潔、嚴格，可讀性和可維護性都比HTML更好。下面示例爲一個表單頁面的定義及其效果：

<window id="win" title="Car Inventory Editor" width="400px" border="normal"
    apply="demo.getting_started.input.EditController">
    <grid>
        <rows>
            <row>
                Title:
                <textbox id="titleTextbox" value="${win$composer.inventoryItem.title}"
                    constraint="no empty" />
            </row>
            <row>
                Created Date (yyyy/MM/dd):
                <datebox id="createdDatebox" value="${win$composer.inventoryItem.createdDate}"
                    format="yyyy/MM/dd" constraint="no empty" />
            </row>
            <row>
                Bar Code:
                <intbox id="barcodeIntbox" value="${win$composer.inventoryItem.barcode}"
                    format="000000" constraint="no empty,no negative" />
            </row>
            <row>
                Unit Price:
                <doublebox id="unitPriceDoublebox" value="${win$composer.inventoryItem.unitPrice}"
                    format=",###.#" constraint="no empty,no negative" />
            </row>
            <row>
                Quantity:
                <spinner id="quantitySpinner" value="${win$composer.inventoryItem.quantity}"
                    format=",###" constraint="no empty,min 0" />
            </row>
            <row>
                Location (click location to edit):
                <textbox id="locationTextbox" value="${win$composer.inventoryItem.location}"
                    inplace="true" />
            </row>
        </rows>
    </grid>
    <button id="submitButton" label="Submit" />
</window>

3.3. MVVM模式

MVVM模式是著名的MVC模式的改良，它進一步的下降了Controller與View的耦合——只有View依賴Controller，消除了Controller對View的依賴，

由於View發生變化的頻率很是高，因此MVVM極大的減小了因頁面需求變化致使的對Controller的沒必要要修改，提升了可維護性。

3.4. 自動化功能測試

Web應用的自動化功能測試一直沒有理想的解決方案，Selenium之類的跨進程測試工具運行速度很慢，並且基於最終Html的測試腳本很是囉嗦脆弱而難以維護，

ZK附帶的功能測試框架ZATS完美的解決了這一難題，ZATS針對ZUL進行本地調用的測試，運行速度飛快並且代碼簡潔容易維護。

3.5. 文檔與社區

ZK有豐富的官方文檔（http://www.zkoss.org/documentation#Small_Talks）和活躍的社區（http://forum.zkoss.org/questions/），

其在線演示站點（http://www.zkoss.org/zkdemo）也是極好的學習材料。