ZK(7.0.1)的简单示例

1. 新建一个Web项目，导入zk所需的jar包。

2. 在web.xml配置zk相关的listener和servlet：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">

	<listener>
		<description>Used to cleanup when a session is destroyed</description>
		<display-name>ZK Session cleaner</display-name>
		<listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
	</listener>
	
	<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>
	
	<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>

	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
		<welcome-file>index.zul</welcome-file>
	</welcome-file-list>
	
</web-app>

3. 配置zk.xml：

<?xml version="1.0" encoding="UTF-8"?>
<zk>

</zk>

(如果在eclipse中安装了zk插件，可以选择建立zk项目，在此之前的步骤都可以省略，zk项目已经自动部署好这些配置)

4. zul页面index.zul：

<?page title="Hello ZK" contentType="text/html;charset=UTF-8"?>
<zk>
<!-- apply属性将页面上的控件与JavaBean绑定起来 -->
<window title="Hello ZK" border="normal"
	apply="com.huey.zk.controller.SimpleMsgController">
	<vbox>
		<hbox>msg: <label id="msgLabel" /></hbox>
		<hbox>
			<textbox id="msgTextbox" />
			<button id="ctrlButton" label="OK" />
		</hbox>
	</vbox>
</window>
</zk>

5. ZK组件控制器SimpleMsgController：

package com.huey.zk.controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Label;
import org.zkoss.zul.Textbox;

/** 
 * ZK组件控制器SimpleMsgController
 * @author huey2672 
 * @version 1.0 
 * @created 2014-8-8
 */ 
public class SimpleMsgController extends SelectorComposer<Component> {

	/**
	 * 
	 */
	private static final long serialVersionUID = 35698036153044181L;

	// 与页面的id为msgLabel的控件绑定
	@Wire
	private Label msgLabel;
	// 与页面的id为msgTextbox的控件绑定
	@Wire
	private Textbox msgTextbox;
	
	// 监听id为ctrlButton的控件的onClick事件
	@Listen("onClick=#ctrlButton")
	public void sendMsg() {
		String msg = msgTextbox.getValue();
		msgLabel.setValue(msg);
	}
	
}

6. 启动tomcat，运行项目。