From Documentation

Jump to: navigation, search


If you are not familiar with XML, please take a look at XML Background first.

An XML Element Represents a Component

Each XML element represents a component, except for special elements like <zk> and <attribute>. Thus, the following example will cause three components (window, textbox and button) being created when ZK Loader processes it.


In addition, the parent-child relationship of the created components will follow the same hierarchical structure of the XML document. In the previous example, window will be the parent of textbox and button, while textbox is the first child and button is the second.

Special XML Elements

There are a few elements dedicated to special functionality rather than a component. For example,


The zk element is a special element used to aggregate other components. Unlike a real component (say, hbox or div), it is not part of the component tree being created. In other words, it does not represent any components. For example,

     <zk if="${whatever}">

is equivalent to

     <textbox if="${whatever}"/>
     <textbox if="${whatever}"/>

For more information about special elements, please refer to ZUML Reference.

A XML Attribute Assigns a Value to a Component's Property or Event Listener

Each attribute, except for special attributes like if and forEach, represents a value that should be assigned to a property of a component after it is created. The attribute name is the property name, while the attribute value is the value to assign. For example, the following example assigns "Hello" to the window's title property. More precisely, Window.setTitle(String) will be called "Hello".

<window title="Hello"/>

Like JSP, you could use EL for the value of any attributes. The following example assigns the value of the request parameter called name to window's title.

<window title="${}"/>

For more information about EL expressions, please refer to ZUML Reference.

Assign Event Listener if the Name Starts With on

If the attribute name starts with on and the third letter is uppercase, an event listener is assigned. For example, we can register an event listener to handle the onClick event as follows:

<button onClick="do_something_in_Java())"/>

The attribute value must be a valid Java code, and it will be interpreted[1] when the event is received. You could specify different languages by prefixing the language name. For example, we could write the event listener in Groovy as follows.

<vlayout onClick="groovy:self.appendChild(new Label('New'));">
Click me!

  1. ZK uses BeanShell to interpret it at run time

Special Attributes

There are a few special attributes dedicated to special functionality rather than assigning properties or handling events. For example, the forEach attribute is used to specify a collection of object such that the XML element it belongs will be evaluated repeatedly for each object of the collection.

    <listitem forEach="${customers}" label="${}"/>

For more information about special attributes, please refer to the Iterative Evaluation section and the ZUML Reference

A XML Text Represents Label Component or Property's Value

In general, a XML text is interpreted as a label component. For example,

  Begin ${foo.whatever}

is equivalent to

  <label value="Begin ${foo.whatever}"/>

A XML Text as Property's Value

Depending on the component's implementation, the text nested in a XML element can be interpreted as the value of a component's particular property. For example, Html is one of this kind of components, and

<html>Begin ${foo.whatever}</html>

is equivalent to

<html content="Begin ${foo.whatever}"/>

This is designed to make it easy to specify multiple-line value. This is usually used by a particular component that requires a multiple-lines value. For a complete list of components that interprets the XML text as a property's value, please refer to the ZUML Reference.

A XML Processing Instruction Specifies the Page-wide Information

Each XML processing instruction specifies the instruction on how to process the XML document. It is called directives in ZK. For example, the following specifies the page title and style.

<?page title="Grey background" style="background: grey"?>

Notice that there should be no whitespace between the question mark and the processing instruction's name (i.e., page in the above example).

The other directives include the declaration of components, the class for initializing a page, the variable resolver for EL expressions, and so on. For more information about directives, please refer to ZUML Reference.

Version History

Last Update : 2011/9/19

Version Date Content

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.

You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum