The ZK Framework

ZK is a framework for building web applications. It was developed by Potix (www.potix.com) and distributed under both GNU and commercial licenses. The main idea behind ZK is to introduce event-handling programming—backed by an AJAX engine—to web applications. This lets you focus on designing forms and programming reactions on possible events. Low-level HTTP communication between the browser and server is therefore the exclusive duty of the framework.

Another ZK feature is the use of the XML User Interface Language (XUL) as a description language of graphical forms. (ZK refers to the description language as "ZUL.") XUL lets you define forms as XML documents where individual tags correspond to controls on a form, simplifying the process of designing web interfaces. You can also create forms in Java using a dedicated API, somewhat like using the Swing library. ZK refers to this method as using"richlets."

Using the 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 servlet for handling requests for displaying new pages.
• A servlet for intercepting events that happened on the pages.
• A listener for performing cleanup work after session timeout.

The servlets zkLoader and auEngine (Listing One) are responsible for "double-track" service of HTTP requests arriving from a browser. A program configured this way is available online; it also collects all samples from the article (see code at http://www.ddj.com/code/).

 
<?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>
   <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>

Figure 1 is the typical flow control in ZK-based applications. To start, users initiate connection with a server by entering the address of a requested page in a browser. On the server side, the ZK engine loads the ZUL or ZHTML page (or passes control to a richlet, if it is responsible for rendering the page). A method from your page controller is called for handling the pageinit event. This method collects data from a database for visualizing to users. Next, on the basis of the page definition, the framework creates a tree of components describing the page, which displays the data collected in the previous stage. The tree of components is responsible for recursively rendering HTML code that ZK sends to the browser.

[Click image to view at full size]

Figure 1: The ZK Framework architecture.

Let's say users clicked a button on the page displayed in the browser, or modified a field on a form. If a handler for this event was registered, the ZK AJAX engine notifies the server about the event. ZK receives the event on the server side, and actualizes a state of components representing page elements. Changes made by users on the form are introduced to the component tree reflecting form elements. An appropriate event handler is then called. The method can read updated data from the form, perform some operations on the database, then decide about modification of displayed data or page structure, displaying validation messages or some question directed to the user. ZK passes these orders back to the JavaScript engine working on the browser side, which executes appropriate modifications of HTML DOM.