Develop ZK Applications with Eclipse

Author
Andrew Ho, Principal Engineer, Potix Corporation

Date
Jun 1, 2006

Version
ZK Studio 0.9

Downloading ZK

Click here to download ZK.

Installation of Tomcat 5.5

You should install the most updated Tomcat first. You can find the document from Tomcat Setup.

Installation of Eclipse

It's easy to install Eclipse. You just download it and unpack it to a directory, ex c:/eclipse.

Eclipse Web Tools Platforms

Web Tools Platforms is a plug-in for developing web applications.

1. Install WTP

• Open eclipse
• From menu, Help/Software Updates/Find and Install...
• Selected "Search for new feature..."
• Click "New Remote Site" button
• The dialog setting should looks like:

Name: Web Tools Platform (WTP)

URL: http://download.eclipse.org/webtools/updates/

2. Define a Server Runtime

• From menu Window/Preferences...
• In Server > Installed Runtime, Click "Add"
• Select Apache > Apache Tomcat v5.5 and click Next
• Browse to and select your Tomcat root directory e.g. C:\Program Files\Apache Software Foundation\Tomcat 5.5
• Select JDK 1.5
• Finish & OK

3. Define a Server Instance

• From menu, Windows/Show Views/Others...,
• Select Servers/Servers
• In the "Servers" view, right click mouse(context menu) to add a new server

• In the next dialog, you clicked "Next" button to add your projects to work with the server instance.

4. zul file extension with XML editor

• From menu, Window/Preferences...
• General > Content Types > XML, add "*.zul" file extension

5. New a ZK project

• Create a Dynamic Web Project

• From menu, File > New > Project
• Select Web > Dynamic Web Project
• Named your new project
• Unpack your zk-bin-xxx.zip
• Copy zk*/dist/lib/* & zk*/dist/lib/ext/* jar files to your $PRJ/WebContent/WEB-INF/lib
• Updated your $PRJ/WebContent/WEB-INF/web.xml for ZK

<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
...

<!-- //// -->
<!-- ZK -->
<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>ZK loader for ZUML pages</description>
	<servlet-name>zkLoader</servlet-name>
	<servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
	<!-- Must. Specifies URI of the update engine (DHtmlUpdateServlet).
	It must be the same as <url-pattern> for the update engine.
	-->
	<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>
<!-- //// -->

<!-- /////////// -->
<!-- Miscellaneous -->
<session-config>
	<session-timeout>120</session-timeout>
</session-config>

<welcome-file-list>
	<welcome-file>index.zul</welcome-file>
	<welcome-file>index.zhtml</welcome-file>
	...
</welcome-file-list>
</web-app>

• Your first ZK file, helloworld.zul

<?xml version="1.0" encoding="utf-8"?>
<?page title="ZK::Hello World!"?>

<window title="My First window" border="normal" width="200px">
	Hello, World!
</window>

• Verification

Start/debug server from the "Servers" view

• Browse it http://localhost:8080/$PRJ

Download the sample

• You can download the sample helloworld.zip and unpack it.
• Then, you open the eclipse and do File/Import... and select "Existing Projects into Workspace".
• You can see the source code of the first page from "helloworld/WebContent/helloworld.zul"
• Browse it to http://localhost:8080/helloworld or http://localhost:8080/helloworld/helloworld.zul and you have it!

Reference

• How to Setup Eclipse WTP
• How to setup Eclipse WTP for ZK by Thomas Muller

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.