Design

The ZK Framework

Source Code Accompanies This Article. Download It Now.

ZK is a framework that introduces event-handling programming—backed by an AJAX engine—to web applications.

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/).

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.

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.

Video

This month's Dr. Dobb's Journal

This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!