2. Step by Step Tutorial

  1. Create Web Project

Create a development directory under $TOMCAT_HOME\webapps. Say myZK. The structure of development directory is shown below:(ex.C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\myZK\)

+myZK 
    +WEB-INF     
    web.xml     
index.zul 
  1. Deploy ZK library

Unzip zk-bin-3.x.x.zip file, and copy the following jar files to the $TOMCAT_HOME\webapps\$PROJECT_NAME\WEB-INF\lib (ex.C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\myZK\WEB-INF\lib)

  1. Create web.xml

Create web.xml under $TOMCAT_HOME\webapps\myZK, and Copy the following lines into web.xml

<!-- ZK --> 
<listener> 
<description>Used to clean up 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>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> 
  1. Create First Web Page

Create index.zul under $TOMCAT_HOME\webapps\myZK\, and copy the following lines into it.

<window title="My First window" border="normal" width="200px"> 
Hello, World! 
</window> 
  1. Activates Tomcat Server

Use Tomcat Monitor to activates the Server.

  1. Browse the Application

    Browse to http://localhost:8080/myZK/.