ZK Sample Application

Author
Michael Lee, Principal Systems Analyst, The Kowloon Motor Bus Co. (1933) Limited

Date
May 29, 2006

Version

Purpose

ZK is a powerful Ajax framework which let developer create "Rich" web application without using any Javascript, just Java. Although a very attractive Live Demo available, new comer (like me) still wonder how to get started with an application. This article try to show you how an application can be easily build and some of the possibilities with ZK. (Due to my limited experience with the framework - less than 3 months, it is not the best approach).

Approach

I ported the first Java Web Application I encountered (2-3 years ago) to ZK, it is the example application that come with Struts. During this process, all business objects of Struts-Example has been reused without amendment. This is a very simple example, however it can demonstrate how to implement screen flow, how to perform data validation and how to access business logic layer. Also, in this sample, I have used the Live Data listbox with a custom ListitemRenderer to display multiple columns, implement a custom event, passing parameter on window creation and other skills required to create a real-life application.

Screenshots

Following is the screenshots for original and transformed application.

Screenshots of Strut Sample Application

Screenshots of ZK Sample Application

Steps

To port the application, follows steps performed:

• Design the UI for the application. If you have desktop application development experience, this should not be a problem.
• Review the source code for Struts-Example. Actually, only business logic layer will be retained. Form beans and Struts actions is not required in a ZK application. However, we need to examine the source code and see how to invoke the bundled business logic.
• Remove Struts dependent code from business layer. In this case, I need to convert a Struts Plug-in (class: MemoryDatabasPlugIn) to a ServletContextListener.
• Create ZUL pages using Zk's build-in component. Add necessary constraints and event handler code to input UI (such as check repeat password against password on item change - OnChange).
• Code methods to perform required functionality by invoking Struts-Example's business layer. Validation on input field need to perform again since constraints will not block further processing automatically. (Alternate approach may be : only enable submit button when all input fields are okay).

Installation

To run ZK, you need a Web Container which support Servlet 2.4. If you have ZK installed, just deploy the zk-sample.war to the Container. For Tomcat, it means copy it to webapps. To install the sample application bundled with ZK (1.2.0 RC3), use zk-sample-full.war.

Downloads

• For implementation details, please refer to the source code, which are part of zk-sample.war and zk-sample-full.war.
• The source codes of the Struts example is here.

Todo

• Internationalization the application using ZK's build-in feature
• Code refactorization to reduce code duplication and uniform when to use Java Class, when to use zscript.

Michael Lee is a Principal Systems Analyst working for The Kowloon Motor Bus Co. (1933) Limited (Hong Kong). His major responsibility is on application design and implementation on client/server architecture using Powerbuilder. Experience on Java and Web development is limited.

Copyright © Michael Lee. This article is licensed under GNU Free Documentation License.