写在前面

我们要了解一项新技术，一般都是先去了解它是干什么的，使用场景，然后就是跟着手册去建立一个工程，运行起来，再看它的工作过程是怎样的。

建立工程

工程示例：https://github.com/zzyymaggie/ZK_HelloWorld

这是一个maven工程，首先确保你有maven环境，然后下载该项目到本地。
然后按照readme文件执行，访问就可以看到效果了。

原理

工作过程

客户端第一次访问ZK web应用的时候，客户端浏览器会downloadZK框架在客户端的运行部分（ZK客户端），而ZK客户端会检测用户在客户端的动作，然后发送对应的ZK request 到服务端，而ZK框架的Au Service（更新服务）会根据ZK request来发送ZK response给ZK客户端接收，ZK客户端然后进行处理。

代码剖析

这是一个JavaWeb工程，我们先看一下web.xml。

web.xml

ZK Loader
当web服务器收到用户发来的URL请求时，ZK Loader是用来加载ZUML页面的servlet。它可以被用来处理所有的基于HTTP的请求，包括ajax,mil(Mobile Interactive Language) 及其他的。

    <servlet>
        <description>
        The ZK loader for ZUML pages</description>
        <servlet-name>zkLoader</servlet-name>
        <servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
        <init-param>
            <param-name>update-uri</param-name>
            <param-value>/zkau</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>zkLoader</servlet-name>
        <url-pattern>*.zul</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>zkLoader</servlet-name>
        <url-pattern>*.zhtml</url-pattern>
    </servlet-mapping>

ZK AU Engine
ZK AU Engine，也叫ZK Update Engine,它是一个异步请求ajax请求的servlet. 这里要注意的是它的URL pattern必须与ZK Loader的update-uri参数一致。

    <servlet>
        <description>
        The asynchronous update engine for ZK</description>
        <servlet-name>auEngine</servlet-name>
        <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>auEngine</servlet-name>
        <url-pattern>/zkau/*</url-pattern>
    </servlet-mapping>

还有一些配置，这里没有使用到，比如
- ZK Session Cleaner
- ZK Filter
- DSP Loader
more : https://www.zkoss.org/wiki/ZK%20Configuration%20Reference/web.xml

zk.xml

WEB-INF/zk.xml 是zk的配置文件.这是一个可选的文件，如果你需要改变一些默认配置，就可以在zk.xml中配置。注意，它必须放在WEB-INF目录下。

创建组件

创建组件有两种方式，一是采用Java创建；二是采用基于XML的ZUL创建。还可以采用混合的模式。ZK提供了一种XML格式的语言，叫ZK User Interface Markup Language (ZUML)。每一个xml元素都会被ZK Loader创建为一个组件。每个XML属性的值将会分配为组件的属性。

Write a ZUL
https://github.com/zzyymaggie/ZK_HelloWorld/blob/master/src/main/webapp/index.zul

<window apply="org.sophia.helloworld.HelloWorldComposer">
    <label id="lbl"></label>
    <button label="show" id="btn"/>
</window>

Line 1: 给该组件指定一个controller
Line 2: 给组件赋值id,在composer中就可以通过该id操作该组件。

操作组件
https://github.com/zzyymaggie/ZK_HelloWorld/blob/master/src/main/java/org/sophia/helloworld/HelloWorldComposer.java
1. Wire Components 联入组件
  In org.zkoss.zk.ui.select.SelectorComposer, 当在一个字段或setter方法你使用a @Wire注解, SelectorComposer会自动找到这个组件，并赋给这个字段或传递到setter方法。它默认会找到类型一致和id相等的组件。

    @Wire
    private Label lbl;

这段代码的意思是SelectorComposer 会找到一个id='lbl'的Label，并赋值给lbl变量。
2. Initialize the View
有时候我们需要根据一些数据来初始化界面，这是我们可以override doAfterCompose(Component)方法来设置数据初始化界面。
3. Events & Event Listeners
ZK是一个事件驱动的框架，用户操作最终会被作为组件的事件处理。

    @Listen("onClick=#btn")
    public void onShowContent(Event event){
        lbl.setValue("Hello World !!!!!!!!!!!!");
    }

Line1 : 监听id=’btn’的元素的onClick事件。

参考

[1] http://books.zkoss.org/zkessentials-book/master/index.html
[2] http://every-best.iteye.com/blog/701407
[3] https://www.zkoss.org/wiki/ZK%20Configuration%20Reference/web.xml

zzyymaggie

发布了37 篇原创文章 · 获赞 9 · 访问量 19万+

私信关注

ZK框架学习（一）