Channels ▼
RSS

Global Developer

The ZK Framework

Source Code Accompanies This Article. Download It Now.


Andrzej is a systems developer in Oslo. He can be contacted at andrzej.sekula@gmail.com.


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>


Listing One

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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video