[置顶] 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）也是极好的学习材料。