写在前面
我们要了解一项新技术,一般都是先去了解它是干什么的,使用场景,然后就是跟着手册去建立一个工程,运行起来,再看它的工作过程是怎样的。
建立工程
工程示例: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属性的值将会分配为组件的属性。
<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
- Wire Components 联入组件
Inorg.zkoss.zk.ui.select.SelectorComposer
, 当在一个字段或setter方法你使用a @Wire
注解,SelectorComposer
会自动找到这个组件,并赋给这个字段或传递到setter方法。 它默认会找到类型一致和id相等的组件。
- Wire Components 联入组件
@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