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.
<?xml version="1.0" encoding="utf-8"?>
<?init class="zkdemo.ui.controler.HelloWorldInit"?>
<window id="helloWindow" title="Welcome window" border="normal"
use="zkdemo.ui.controler.HelloWorldCtrler">
<label id="messageBoard" value="${helloMsg}"/>
<button label="What's the time on a server?" onClick="helloWindow.showTime()"/>
</window>
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.
