Image:stop.png This documentation is for an older version of ZK. For the latest documentation please click here.
2. Step by Step Tutorial

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/.