Develop ZK Applications with Eclipse

From Documentation
Revision as of 06:15, 10 September 2010 by Elton776 (talk | contribs) (Created page with '{{Template:Smalltalk_Author| |author=Andrew Ho, Principal Engineer, Potix Corporation |date=Jun 1, 2006 |version=ZK Studio 0.9 }} =Downloading ZK= Click [http://zkoss.org/down…')
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
DocumentationSmall Talks2006JuneDevelop ZK Applications with Eclipse
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/

Wtp.png


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

Srvrt.png

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

Srv1.png

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

Srv2.png

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

Srvst.png

Download the sample

H.png

Reference




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