Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Channels ▼

Web Development

The ZK Framework

Source Code Accompanies This Article. Download It Now.

Defining of Forms

The most convenient way of describing web pages in the ZK environment is via the ZUL language—a subset of XML for describing web UIs. ZUL document tags correspond to graphic controls on forms and are nested in the same way as the controls are embedded on the page. This is an idea borrowed from XUL and developed by Mozilla. A similar concept is XAML implemented in the most recent version of Windows. Compared to traditional methods of creating UIs via specialized APIs (as in GWT), such a declarative solution results in shorter, more lucid code, reducing development time and making maintenance easier.

Listing Two is a ZUL document, and Figure 2 is a page rendered on its basics (with some enhancements). This page consists of a window that embodies page content, a label for displaying messages, and a button triggering server-side action. On a display request, ZK creates a page initiator object of the type HelloWorldInit and window controller HelloWorldCtrler. The identifier helloWindow is a reference to the controller object and allows for calling its methods inside scriptlets placed on ZUL pages.

[Click image to view at full size]

Figure 2: Example MDI interface in ZK.

<?xml version="1.0" encoding="utf-8"?>
<?init class="zkdemo.ui.controler.HelloWorldInit"?>

<window id="helloWindow" title="Welcome window" border="normal"
   <label id="messageBoard" value="${helloMsg}"/>
   <button label="What's the time on a server?" onClick="helloWindow.showTime()"/>
Listing Two

Listing Three (available online) is the initiator of this page. Its task is to set up the helloMsg variable in the page context before rendering. The variable is accessible for EL ("Expression Language"), the same language as in standard JSP.

The HelloWorldCtrler class (Listing Four, online) enhances the component definition org.zkoss.zul.Window. Its showTime method invokes getFellow from the base class to find a Label component. A change of state of this component is automatically reflected on the client side, without the need to reload the whole page and without web developers writing a single line of JavaScript code.

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.