[置顶] ZK（The leading enterprise Ajax framework）入门指南

1. Why ZK

JavaEE领域从来就不缺少Framework尤其是Web Framework，光是比较流行的就有：SpringMVC、Struts2、JSF系列……

其它不怎么流行的、小众的、非主流的全加起来估计上百，让人眼花缭乱。

那为什么还要去学习ZK这个知名度不高的框架呢？ZK官网关于Why ZK列出了很多特性：http://www.zkoss.org/whyzk/features

下面给出我最看重的ZK优于其他框架的独特优势：

• 纯Java“端到端”Web解决方案
• 提供丰富的页面组件和声明式的用户界面描述语言（ZUML）
• 支持MVVM模式数据绑定
• 支持自动化功能测试

虽然只有这几点，但是每一个都非常有价值，解决了我们多年以来开发Web应用过程中很头疼的几个问题，后面会分别展开介绍。

2. ZK总体架构

前面说到Web框架种类繁多，但是仔细研究发现它们可以分成以下3种类型：

• 请求响应模型的MVC框架：struts1、webwork2、struts2、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）也是极好的学习材料。