ZK Framework

1. ZK Framework
(http://www.zkoss.org/)
Rupalli Das
Developer
MESTECH Services Pvt. Ltd
Phone No: 8446309467

2. What is ZK ?
• ZK framework is a highly productive open source Java framework for building amazing enterprise web and
mobile applications.
• ZK's architecture is based on units of modularization which are pluggable and replaceable, enabling developers
to extend and customize.
• ZK uses ZK User Interface Markup Language (ZUML) makes the design of rich user interfaces as simple as
authoring HTML pages. ZUML is a variant of XUL inheriting all features available to XML, and separates the UI
definition from the run-time logic.
• ZUML also allows developers to automate CRUD between UI components and the data source with
annotations, data binding and MVVM.
• The main idea behind ZK is to introduce event-handling programming to web applications.
• ZK refers to the description language as "ZUL."
System requirements :
• JRE version 1.4 or later
• A Web server supporting Servlet 2.3 or later

3. How to use the ZK
framework ?
• To use the framework, copy libraries from the ZK distribution
(directories dist/lib and dist/zkforge) into a directory WEB-
INF/lib in your project. Then configure file web.xml by defining:
a) A servlet for handling requests for displaying new pages.
b) A servlet for intercepting events that happened on the pages.
c) A listener for performing cleanup work after session timeout.
d) The servlets zkLoader and auEngine (Listing One) are
responsible for "double-track" service of HTTP requests arriving
from a browser.

4. <?xml version="1.0" encoding="UTF-8"?>
<web-app id="ZKdemo" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>ZKdemo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.zul</welcome-file>
</welcome-file-list>
<servlet>
<description>ZK loader for evaluating ZK 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). —>
<init-param>
<param-name>update-uri</param-name>
<param-value>/zkau</param-value>
</init-param>
<load-on-startup>1</load-on-startup><!— MUST —>
</servlet>

5. <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>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-mapping>
<servlet-name>auEngine</servlet-name>
<url-pattern>/zkau/*</url-pattern>
</servlet-mapping>
<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>
</web-app>

6. Create a new ZK Project
• Click [File]/[New]/[Other...]/[ZK Project] in Eclipse main menu.
• Type the project name. Eclipse will automatically include the default ZK package configured in the ZK
Package preferences, however, you can select any other installed ZK package by selecting it from the
combo box. Then, click Next.
• You can modify the Source folders and Default output folder if you like. Then, click Next.
• You can modify Context root or Content directory if you like. Then, Click Finish.
• After clicking Finish, the New Project Wizard will setup the ZK Project ready for development.
• [you will find a top right icon includes a ZK mark to show that the project has ZK Studio support]

7. Creating a New ZUL File
• You can create new ZUL file using the [File]/[New]/[File] command in Eclipse's main menu.
• However, you have to write the ".zul" extension yourself and the newly create zul file will not contain any
template code.
• Click [File]/[New]/[Other] in Eclipse's main menu and then using the wizard to filter zul. Select zul from
the listbox and then click Next.
• Type the file name and optional page title name, click Finish.
• The newly created ZUL File will be opened in ZUL Editor.

8. Running the ZK Project
• Configuring Apache Tomcat for Eclipse
– You are required to create a valid Apache Tomcat Server configuration. Configuration of Apache with
Eclipse is done in the Server/Runtime Environments preference page.
• To create a server instance to run a web application the server needs to be defined.

9. EXAMPLE FOR DESIGNING COMBOBOX
• <hbox pack="center" align="top" width="100%" height="400px">
<div height="278px" width="443px">
<separator spacing="40px" />
<hbox width="440px>
<vlayout>
<separator spacing="20px" />
<label value="Color/>
<combobox id="cmbColor" width="150px">
<comboitem label="@load(each)“
image="@load(vm.getIconImage(each))" />
</combobox>
</ vlayout>
</hbox>
</div>
• </hbox>