The Developer's Reference

A map of custom attributes associated with the Web application. It is the same as the getAttributes method in the org.zkoss.zk.ui.WebApp interface.

A Web application is a WAR, and each Web application has an independent set of custom attributes. These attributes are used mainly to communicate among different desktops and sessions.

If the client is based on HTTP, such as a Web browser, this is the same map of attributes stored in javax.servlet.ServletContext. In other words, you could use it communicate with other servlets, such as JSF.

The arg argument passed to the createComponents method in the org.zkoss.zk.ui.Executions class. It might be null, depending on how createComponents is called.

It is the same as self.desktop.execution.arg.

params.put("name", "John");
Executions.createComponents("/my.zul", null, params);

Then, in my.zul,

<window title="${arg.name}">
...

Notice that arg is available only when creating the components for the included page, say my.zul. On the other hand, all events, including onCreate, are processed later. Thus, if you want to access arg in the onCreate's listener, use the getArg method of the org.zkoss.zk.ui.event.CreateEvent class.

A map of custom attributes associated with the component. It is the same as the getAttributes method in the org.zkoss.zk.ui.Component interface.

The current desktop. It is the same as self.desktop.

desktop.getPage("main");

A map of custom attributes associated with the desktop. It is the same as the getAttributes method in the org.zkoss.zk.ui.Desktop interface.

It is mainly used to communicate among pages in the same desktop.

The current item of the collection being iterated, when ZK evaluates an iterative element. An iterative element is an element with the forEach attribute.

<listbox width="100px">
<listitem label="${each}" forEach="${contacts}"/>
</listbox>

The current event. Available for the event listener only.

<textbox onChanging="react(event.value)"/>
<combobox onChanging="autoComplete()"/>
<zscript>
void react(String value) {
...
}
void autoComplete() {
String value = event.getValue();
...
}
</zscript>

The current execution.

The status of an iteration. ZK exposes the information relative to the iteration taking place when evaluating the iterative element.

<zk>
<zscript>
grades = new String[] {"Best", "Better", "Good"};
</zscript>
<listbox width="100px">
<listitem label="${forEachStatus.index}: ${each}" forEach="${grades}"/>
</listbox>
</zk>

Note: forEachStatus.index is absolute with respect to the underlying collection, array or other type. For example, if forEachBegin is 5, then the first value of forEachStatus.index with be 5.

The current page. It is the same as self.page.

The current page context used to retrieve the request, response, variable resolver and so on.

A map of custom attributes associated with the current page. It is the same as the getAttributes method in the org.zkoss.zk.ui.Page interface.

A map of custom attributes associated with the current execution. It is the same as getAttributes method in the org.zkoss.zk.ui.Execution interface.

The component itself. In other words, it is the closest component, depicted as follows.

<listbox>
<zscript>self.getItems();</zscript><!-- self is listbox -->
<listitem value="ab" label="${self.value}"/><!-- self is listitem -->
<zscript>self.getSelectedIndex();</zscript><!-- self is listbox -->
</listbox>

The session. It is similar to javax.servlet.http.HttpSession^[1].

A map of custom attributes associated with the session. It is the same as the getAttributes method in the org.zkoss.zk.ui.Session interface.

If the client is based on HTTP, such as a Web browser, this is the same map of attributes stored in javax.servlet.http.HttpSession. In other words, you could use it communicate with other servlets, such as JSF.

The space owner of this component. It is the same as self.spaceOwner.

A map of custom attributes associated with the ID space containing this component.

<?component name="myName" macroURI="/mypath/my.zul" [inline="true|false"] [apply="composer"] [prop1="value1"] [prop2="value2"]... ?>

<?component name="myName" [class="myPackage.myClass"] [extends="nameOfExistComponent"] [moldName="myMoldName"] [moldURI="/myMoldURI"] [apply="composer"] [prop1="value1"] [prop2="value2"]... ?>

Defines a new component. There are two formats: by-macro and by-class.

<?component name="window" extends="window" class="MyWindow"?>
...
<window>
...
</window>

<window use="MyWindow">
...
</window>

<?component name="button" extends="button" sclass="blue"?>

<?component name="button" extends="button" label="OK"?>

<?component name="window" extends="window" apply="BaseComposer"?>

<?evaluator [name="..."] [class="..."] [import="..."]?>

It specifies how to evaluate XEL expressions.

<?evaluator name="mvel"?>
<window id="w" title="MVEL Demo">
    ${new org.zkoss.zul.Textbox().setParent(w)}    
</window>

<config>
    <xel-config>    
        <evaluator-name>Super</evaluator-name><!-- case insensitive -->        
        <evaluator-class>my.SuperEvaluator</evaluator-class>        
    </xel-config>    
</config>

<?evaluator class="org.zkoss.zkmax.xel.mvel.MVELFactory"?>
<window id="w" title="MVEL Demo">
    ${new org.zkoss.zul.Textbox().setParent(w)}    
</window>

<?evaluator class="org.zkoss.zkmax.xel.mvel.MVELFactory"
import="org.zkoss.zul.Datebox,org.zkoss.zul.Combobox"?>
<window id="w" title="MVEL Demo">
    ${new Datebox().setParent(w)}    

<?forward uri="..." [if="..."] [unless="..."]?>

It specifies the URI to forward the request to, and the condition to decide whether to forward. If the condition is satisfied or not specified, this page won't be rendered, and the request is, instead, forwarded to the URI specified in the uri attribute.

Notes

<?function-mapper class="..." [arg0="..."] [arg1="..."] [arg2="..."] [arg3="..."]?>

Specifies the function mapper that will be used by the EL expressions to resolve unknown function. The specified class must implement the org.zkoss.xel.FunctionMapper interface.

You can specify multiple function mappers with multiple function-mapper directives. The later declared one has higher priority.

Notice that the function-mapper directives are evaluated before the init directives.

<?function-mapper class="foo.Foo" whatever="anything"?>

<?import uri="..."?><?import uri="..." directives="..."?>

It imports the directives, such as component definitions (<?component?>) and initiators (<?init?>), defined in another ZUML page.

A typical use is that you put a set of component definitions in one ZUML page, and then import it in other ZUML pages, such that they share the same set of component definitions, additional to the system default.

<!-- special.zul: Common Definitions -->
<?init zscript="/WEB-INF/macros/special.zs"?>
<?component name="special" macroURI="/WEB-INF/macros/special.zuml" class="Special"?>
<?component name="another" macroURI="/WEB-INF/macros/another.zuml"?>

where the Special class is assumed to be defined in /WEB-INF/macros/special.zs.

Then, other ZUML pages can share the same set of component definitions as follows.

<?import uri="special.zul"?>
...
<special/><!-- you can use the component defined in special.zul -->

Notes

<?import uri="/template/taglibs.zul" directives="taglib, xel-method"?>

<?init class="..." [arg0="..."] [arg1="..."] [arg2="..."] [arg3="..."]?>

<?init zscript="..."?>

There are two formats. The first format is to specify a class that is used to do the application-specific initialization. The second format is to specify a zscript file to do the application-specific initialization.

Since 3.6.2, you can use any (readable) name instead of arg0 and so on. For example,

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" root="./abc"?>

The initialization takes place before the page is evaluated and attached to a desktop. Thus, the getDesktop, getId and getTitle method will return null, when initializing. To retrieve the current desktop, you could use the org.zkoss.zk.ui.Execution interface.

You could specify any number of the init directive. The specified class must implement the org.zkoss.zk.ui.util.Initator interface.

<?init class="MyInit1"?>
<?init class="MyInit2"?>

<?link [href="uri"] [name0="value0"] [name1="value1"] [name2="value2"]?><?meta [name0="value0"] [name1="value1"] [name2="value2"]?><?script type="text/javascript" [src="uri"] [charset="encoding"] [content="javascript"]?>

These are so-called header elements in HTML. They are generated inside the HEAD element. The meta tags are generated before ZK default JavaScript and CSS files, while the other tags are generated after ZK default JavaScript and CSS files. Currently only HTML-based clients (so-called browsers) support them.

Developers can specify whatever attributes with these header directives. ZK only encodes the URI of the href and src attribute (by use of the encodeURL method of the Executions class). ZK generates all other attributes directly to the client.

Notice that these header directives are effective only for the main ZUL page. In other words, they are ignored if a page is included by another pages or Servlets. Also, they are ignored if the page is a zhtml file.

<?link rel="alternate" type="application/rss+xml" title="RSS feed"
href="/rssfeed.php"?><?link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"?>
<?link rel="stylesheet" type="text/css" href="~./zul/css/ext.css.dsp"?>
<?script type="text/javascript" src="/js/foo.js"?>
<?script type="text/javascript" content="var foo = true;

if (zk.ie) foo = false;"?>

<window title="My App">
    My content    
</window>

<?page [id="..."] [title="..."] [style="..."] [cacheable="false|true"] [language="xul/html"] [zscriptLanguage="Java"] [contentType="text/html;charset=UTF-8"] [docType="tag PUBLIC &quot;doctype name&quot; &quot;doctype UI&quot;"] [xml="version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;"] [complete="true|false"]?>

It specifies how a page shall be handled. The id and title arguments are the two most important ones.

//includer.jsp
<jsp:include page="includee.zhtml"/>

<?page complete="true"?>
    <html xmlns="http://www.zkoss.org/2005/zk/native"><head>    
        <title>My Title</tile>        
    </head>    
    <body>    
        My Content        

<?DOCTYPE value="svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"">

<?page style="width:100%;height:100%"?>

<?page title="${param.title}"?>

<?page xml="version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;"?>

<?page zscriptLanguage="JavaScript"?>

<zscript>
    var m = round(box.value); //JavaScript is assumed.    
</zscript>

<?root-attributes any-name1="any-value2" any-name2="any-value2"?>

It specifies the additional attributes for the root element of the generated output, which depends on the device types.

Currently, only Ajax devices support this feature and the root element is the html tag. In other words, the attributes specified in the root-attribute directives will become the attributes of the html element of the generated output. For example,

<?root-attributes xmlns:v="urn:schemas-microsoft-com:vml"?>

will cause the HTML output to be generated with the following snippet

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:v="urn:schemas-microsoft-com:vml">

Note: xmlns="http://www.w3.org/1999/xhtml" is always generated.

Note: If the value is specified with an EL expression and it is evaluated to null, the corresponding attribute won't be generated.

<?tablib uri="myURI" prefix="my"?>

This directive is used to load a taglib file, which defines a set of EL functions. The format of a taglib file is the same as that of JSP taglib files.

In the following example, we loads functions defined in the built-in TLD files identified as http://www.zkoss.org/dsp/web/core and then use one of these function called l.

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<window title="${c:l('my.title')}">
...
</window>

Tip: ZK searches all TLD files defined in the /metainfo/tld/config.xml file from the classpath. If you want ZK to load your custom TLD files, add them to class path and then specify the following content in the /metainfo/tld/config.xml file. <taglib><taglib-uri>http://your-domain.com/your-path</taglib-uri><taglib-location>/the/path/of/your/tld/file</taglib-location></taglib>

If you to load a TLD file from your Web application, you can specify the path as follows.

<?taglib uri="/WEB-INF/tld/my.tld" prefix="my"?>

<?variable-resolver class="..." [arg0="..."] [arg1="..."] [arg2="..."] [arg3="..."]?>

Specifies the variable resolver that will be used by the zscript interpreter to resolve unknown variables. The specified class must implement the org.zkoss.xel.VariableResolver interface.

You can specify multiple variable resolvers with multiple variable-resolver directives. The later declared one has higher priority.

Notice that the variable-resolver directives are evaluated before the init directives, so the zscript codes referenced by the init directives are affected by the variable resolver.

The following is an example when using ZK with the Spring framework. It resolves Java Beans declared in the Spring framework, such that you access them directly.

<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>

<?variable-resolver class="foo.Foo" whatever="anything"?>

<?xel-method prefix="..." name="..." class="..."signature="..."?>

Specifies a method that shall be imported by the EL evaluator. For example,

<?xel-method prefix="c" name="forName"class="java.lang.Class"signature="java.lang.Class forName(java.lang.String)"?><textbox value="${c:forName('java.util.List')}"/>        

If there is name conflicts, you could specify the XML name space:

http://www.zkoss.org/2005/zk

<zk:attribute xmlns:zk="http://www.zkoss.org/2005/zk">
...

<attribute name="myName" [trim="true|false"]>myValue</attribute>

It defines a XML attribute of the enclosing element. The content of the element is the attribute value, while the name attribute specifies the attribute name. It is useful if the value of an attribute is sophisticated, or the attribute is conditional.

<button label="Hi">
<attribute name="onClick">alert("Hi")</attribute>
</button>

It is equivalent to

<button label="Hi" onClick="alert(&quot;Hi&quot;)"/>

Another example:

<button>
<attribute name="label" if="${param.happy}">Hello World!</attribute>
</button>

In addition, you can specify a XML fragment as the value of the attribute. The XML fragment is so-called the native content.

<html>
    <attribute name="content">    
        <ol>        
            <li forEach="${values}">${each}</li>            

</ol>

</attribute>

</html>

where ol and li are part of the native content. They are not ZK components. They will be eventually converted to a String instance and assigned to the specified attribute. If values has three elements, the above example is equivalent to the following:

<html>
    <attribute name="content"><![CDATA[    
        <ol>        
            <li>${values[0]}</li>            
            <li>${values[1]}</li>            
            <li>${values[2]}</li>            
        </ol>        
    ]]></attribute>    
</html>

<custom-attributes [scope="component|space|page|desktop|session|application] attr1="value1" [attr2="value2"...]/>

It defines a set of custom attributes of the specified scope. You could specify as many as attributes you want. These attributes can be retrieved by the getAttribute method of the Component interface with the specified scope.

<custom-attributes cd="${param.cd}" a.b="ab"/>

<custom-attributes simple="apple, ${more}" composite="list"/>

<custom-attributes simple="juice=apple, flavor=${more}" composite="map"/>

<variables [local="false|true] var1="value1" [var2="value2"...]/>

It defines a set of variables for the ID space it belongs. It is equivalent to the setVariable method of Component, if it has a parent component, and Page, if it is declared at the page level.

You could specify as many as variables you want. These variables are stored to the namespace of the ID space it belongs. Thus, they can be accessible by the interpreters and EL expressions.

<variables cd="${param.cd}" less="more"/>

<variables simple="apple, ${more}" composite="list"/>

<variables simple="juice=apple, flavor=${more}" composite="map"/>

<zk>...</zk>

It 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 doesn't represent any component. For example,

<window><zk><textbox/><textbox/></zk></window>

is equivalent to

<window>
        <textbox/><textbox/>        
</window>

The main use is to represent multiple root elements in XML format.

<?page title="Multiple Root"?>
<zk>
    <window title="First">    
    ...    
    </window>    
    <window title="Second" if="${param.secondRequired}">    
    ...    
    </window>    
</zk>

The other use is to iterate over versatile components.

<window>
    <zk forEach="${mycols}">    
        <textbox if="${each.useText}"/>        
        <datebox if="${each.useDate}"/>        
        <combobox if="${each.useCombo}"/>        
    </zk>    
</window>

<zk swtich="${condition}"/>

<zk case="apple"/>

<zk case="/a[a-z]*/"/>

<zk case="apple, ${special}"/>

<zk choose="">

<zk when="${fruit == 'apple'}">

<zscript [language="Java|JavaScript|Ruby|Groovy"]>Scripting codes</zscript><zscript src="uri" [language="Java|JavaScript|Ruby|Groovy"]/>

It defines a piece of scripting codes that will be interpreted when the page is evaluated. The language of the scripting codes is, by default, Java. You can select a different language by use the language attribute^[3].

The zscript element has two formats as shown above. The first format is used to embed the scripting codes directly in the page. The second format is used to reference an external file that contains the scripting codes.

<zscript>
alert("Hi");
</zscript>
<zscript src="/codes/my.bs"/>

Like other ZK elements, it is not a component but a special XML element.

apply="a-class-name"apply="class1, class2,..."apply="${EL_returns_a_class_or_a_collection_of_classes}"apply="${EL_returns_an_instance_or_a_collection_of_Composer_instances}"

It specifies a class, a collection of classes that are used to initialize the component. The class must implement the org.zkoss.zk.util.Composer interface. And then, you can do the initialization in the doAfterCompose method, since it is called after the component and all its children are instantiated.

<window apply="MyComposer"/>

In addition, you specify a Composer instance, or a collection of Composer instances by use of EL expressions.

Note: the EL expressions are, if specified, evaluated before the component is instantiated. So you cannot reference to the component. Moreover, the self variable references to the parent component, if any, or the current page, if it is the root component, in the EL expressions specified in this attribute.

If you want more control such as handling the exception, you can also implement the org.zkoss.zk.util.ComposerExt interface.

forEach="${an-EL-expr}"forEach="an-value, ${an-EL-expr}"

There are two formats. First, you specify a value without comma. The value is usually a collection of objects, such that the associated element will be evaluated repeatedly against each object in the collection. If not specified or empty, this attribute is ignored. If non-collection object is specified, it is evaluated only once as if a single-element collection is specified.

Second, you can specify a list of values by separating them with comma. Then, the associated element will be evaluated repeatedly against each value in the list.

For each iteration, two variables, each and forEachStatus, are assigned automatically to let developers control how to evaluate the associated element.

<hbox>
<zscript>
classes = new String[] {"College", "Graduate"};
grades = new Object[] {
new String[] {"Best", "Better"}, new String[] {"A++", "A+", "A"}
};
</zscript>
<listbox width="200px" forEach="${classes}">
<listhead>
<listheader label="${each}"/>
</listhead>
<listitem label="${forEachStatus.previous.each}: ${each}"
forEach="${grades[forEachStatus.index]}"/>
</listbox>
</hbox>

forEachBegin="${an-EL-expr}"

It is used with the forEach attribute to specify the index (starting from 0) that the iteration shall begin at. If not specified, the iteration begins at the first element, i.e., 0 is assumed.

If forEachBegin is greater than or equals to the number of elements, no iteration is performed.

Note: forEachStatus.index always starts from 0, no matter what forEachBegin is.

forEachEnd="${an-EL-expr}"

It is used with the forEach attribute to specify the index (starting from 0) the iteration shall ends at (inclusive). If not specified, the iterations ends at the last element.

If forEachEnd is greater than or equals to the number of elements, the iteration ends at the last element.

forward="orginalEvent=targetId1/targetId2.targetEvent"forward="orginalEvent=targetId1/targetId2.targetEvent(eventData)"forward="originalEvent=${el-target}.targetEvent(${el-eventdata})"forward="targetEvent"

It is used to forward an event, that is targeting a specific component, to another component in another event name. It is called the forward condition.

The forward event is an instance of the org.zkoss.zk.ui.event.ForwardEvent class. you can invoke the getOrigin method to retrieve the original event.

The original event is optional. If it is omitted, onClick is assumed. Similarly, the target ID is also optional. If omitted, the space owner is assumed.

The data specified in the parenthesis is the application-specific data, which can be retrieved by calling the getData method.

<button forward="onCancel(abort)"/><!-- "abort" is passed -->

<button forward="onPrint(${inf})"/><!-- the object returned by ${inf} is passed -->

If you want to forward several events, you can specify these conditions in the forward attribute by separating them with the comma (,):

<textbox forward="onChanging=onUpdating, onChange=some.onUpdate"/>

The target component and the event data can be specified in EL expressions, while the event names cannot.

fulfill="event-name"fulfill="target-id.event-name"fulfill="id1/id2/id3.event-name"fulfill="${el-expr}.event-name"

It is used to specify when to create the child components. By default (i.e., fulfill is not specified), the child components are created right after its parent component, at the time the ZUML page is loaded.

If you want to defer the creation of the child components, you can specify the condition with the fulfill attribute. The condition consists of the event name and, optionally, the target component's identifier or path. It means that the child elements won't be processed, until the event is received by, if specified, the target component. If the identifier is omitted, the same component is assumed.

If an EL expression is specified, it must return a component, an identifier or a path.

<div fulfill="b1.onClick, b2.onOpen"
onFulfill="Components.wireVariables(self, controller)">

if="${an-EL-expr}"

It specified the condition to evaluate the associated element. In other words, the associated element and all its child elements are ignored, if the condition is evaluated to false.

unless="${an-EL-expr}"

It specified the condition not to evaluate the associated element. In other words, the associated element and all its child elements are ignored, if the condition is evaluated to true.

use="a-class-name"use="${EL_returns_a_class_or_a_class_name_or_a_component}"

It specifies a class to create a component instead of the default one. In the following example, MyWindow is used instead of the default class, org.zkoss.zul.html.Window.

<window use="MyWindow"/>

Notice that, if the expression returns a component, the component shall not belong to any page.

EL expressions can be used

A map of application-scoped attributes (String, Object).

A map of cookies of the request. (String, Cookie).

A map of headers of the request. (String, String).

A map of headers of the request. (String, String[]).

A map of page-scoped attributes (String, Object).

Notice: the page concept is a bit different from JSP because a ZK page exists across requests.

A map of parameters of the request (String, String).

A map of parameters of the request. (String, String[]).

A map of request-scoped attributes (String, Object).

A map of session-scoped attributes (String, Object).

A skeletal implementation of Component. Though it is OK to implement Component from scratch, this class simplifies some of the chores.

A skeletal implementation for an input box with format. .

A skeletal implementation for a header.

A skeletal implementation for headers, the parent of a group of HeaderElement.

A skeletal implementation for HTML based components. It simplifies to implement methods common to HTML based components.

InputElement is a super class for components which provie user key input, such as Textbox, Intbox, etc.

Some features are implemented in this class, such as constraint, disabled, maxlength, name, readonly, etc.

You sholuld not deirectly use this class, please use the inherited class.

A HTML element with a label.

A HTML element with a label and an image.

This class represents a region in a layout manager.

A skeletal implementation for number-type input box.

The fundamental class for XUL elements.

An audio component is used to play the audio at the browser. Like image, you could use the src property to specify an URL of an audio resource, or the setContent method to specify a dynamically generated audio.

Depending on the browser and the audio plugin, developers might be able to control the play of an audio by the play, stop and pause methods. Currently, Internet Explorer with Media Player is capable of such controls.

<audio id="audio" height="20"/>

Used to define a collection of auxiliary headers (Auxheader).

<grid>
    <auxhead>    
        <auxheader label="H1'07" colspan="6"/>        
        <auxheader label="H2'07" colspan="6"/>        
    </auxhead>    
    <auxhead>    
        <auxheader label="Q1" colspan="3"/>        
        <auxheader label="Q2" colspan="3"/>        
        <auxheader label="Q3" colspan="3"/>        
        <auxheader label="Q4" colspan="3"/>        
    </auxhead>    
    <columns>    
        <column label="Jan"/><column label="Feb"/><column label="Mar"/>        
        <column label="Apr"/><column label="May"/><column label="Jun"/>        
        <column label="Jul"/><column label="Aug"/><column label="Sep"/>        
        <column label="Oct"/><column label="Nov"/><column label="Dec"/>        
    </columns>    
    <rows>    
        <row>        
        <label value="1,000"/><label value="1,100"/><label value="1,200"/>        
        <label value="1,300"/><label value="1,400"/><label value="1,500"/>        
        <label value="1,600"/><label value="1,700"/><label value="1,800"/>        
        <label value="1,900"/><label value="2,000"/><label value="2,100"/>        
        </row>        
    </rows>    

</grid>

An auxiliary header.

<grid>
    <auxhead>    
        <auxheader label="H1'07" colspan="6"/>        
        <auxheader label="H2'07" colspan="6"/>        
    </auxhead>    
    <auxhead>    
        <auxheader label="Q1" colspan="3"/>        
        <auxheader label="Q2" colspan="3"/>        
        <auxheader label="Q3" colspan="3"/>        
        <auxheader label="Q4" colspan="3"/>        
    </auxhead>    
    <columns>    
        <column label="Jan"/><column label="Feb"/><column label="Mar"/>        
        <column label="Apr"/><column label="May"/><column label="Jun"/>        
        <column label="Jul"/><column label="Aug"/><column label="Sep"/>        
        <column label="Oct"/><column label="Nov"/><column label="Dec"/>        
    </columns>    
    <rows>    
        <row>        
        <label value="1,000"/><label value="1,100"/><label value="1,200"/>        
        <label value="1,300"/><label value="1,400"/><label value="1,500"/>        
        <label value="1,600"/><label value="1,700"/><label value="1,800"/>        
        <label value="1,900"/><label value="2,000"/><label value="2,100"/>        
        </row>        
    </rows>    

</grid>

A band box is a special text box that embeds a customizable popup window (aka., a dropdown window). Like comboboxes, a bandbox consists of an input box and a popup window. The popup window is opened automatically, when users presses Alt+DOWN or clicks the

button.

Unlike comboboxes, the popup window of a bandbox could be anything. It is designed to give developers the maximal flexibility. A typical use is to represent the popup window as a search dialog.

        <bandboxid="bd">        
        <bandpopup>        
                <vbox>                
            <hbox>Search<textbox/></hbox>            
            <listboxwidth="200px"            
            onSelect="bd.value=self.selectedItem.label;bd.closeDropdown();">            
            <listhead>            
                    <listheaderlabel="Name"/>                    
                    <listheaderlabel="Description"/>                    
            </listhead>            
            <listitem>            
                    <listcelllabel="John"/>                    
                    <listcelllabel="CEO"/>                    
            </listitem>            
            <listitem>            
                    <listcelllabel="Joe"/>                    
                    <listcelllabel="Engineer"/>                    
            </listitem>            
            <listitem>            
                    <listcelllabel="Mary"/>                    
                    <listcelllabel="Supervisor"/>                    
            </listitem>            
        </listbox>        
        </vbox>        
        </bandpopup>        
    </bandbox>    

The popup that belongs to a Bandbox instance.

Developer usually listen to the onOpen event that is sent to Bandbox and then creates proper components as children of this component.

        <bandboxid="bd">        
        <bandpopup>        
                <vbox>                
            <hbox>Search<textbox/></hbox>            
            <listboxwidth="200px"            
            onSelect="bd.value=self.selectedItem.label;bd.closeDropdown();">            
            <listhead>            
                    <listheaderlabel="Name"/>                    
                    <listheaderlabel="Description"/>                    
            </listhead>            
            <listitem>            
                    <listcelllabel="John"/>                    
                    <listcelllabel="CEO"/>                    
            </listitem>            
            <listitem>            
                    <listcelllabel="Joe"/>                    
                    <listcelllabel="Engineer"/>                    
            </listitem>            
            <listitem>            
                    <listcelllabel="Mary"/>                    
                    <listcelllabel="Supervisor"/>                    
            </listitem>            
        </listbox>        
        </vbox>        
        </bandpopup>        
    </bandbox>    

A calendar displays a 'flat' calendar and allows user to select a day from it.

<hbox>
    <calendar id="cal" onChange="in.value = cal.value"/>    
    <datebox id="in" onChange="cal.value = in.value"/>    
</hbox>

The layout component is a nested component. The parent component is borderlayout, and its children components include north, south, center, west, and east. The combination of children components of borderlayout is free.

<borderlayout height="500px">
    <north size="50%" border="0">    
        <borderlayout>        
            <west size="25%" border="none" flex="true">            
                <div style="background:#B8D335">                
                    <label value="25%"                    
                        style="color:white;font-size:50px" />                        
                </div>                
            </west>            
            <center border="none" flex="true">            
                <div style="background:#E6D92C">                
                    <label value="25%"                    
                        style="color:white;font-size:50px" />                        
                </div>                
            </center>            
            <east size="50%" border="none" flex="true">            
                <label value="Here is a non-border"                
                    style="color:gray;font-size:30px" />                    
            </east>            
        </borderlayout>        
    </north>    
    <center border="0">    
        <borderlayout>        
            <west size="30%" flex="true" border="0">            
                <div style="background:#E6D92C">                
                    <label value="30%"                    
                        style="color:white;font-size:50px" />                        
                </div>                
            </west>            
            <center>            
                <label value="Here is a border"                
                    style="color:gray;font-size:30px" />                    
            </center>            
            <east size="30%" flex="true" border="0">            
                <div style="background:#B8D335">                
                    <label value="30%"                    
                        style="color:white;font-size:50px" />                        
                </div>                
            </east>            
        </borderlayout>        
    </center>    
</borderlayout>

The box model of XUL is used to divide a portion of the display into a series of boxes. Components inside of a box will orient themselves horizontally or vertically. By combining a series of boxes and separators, you can control the layout of the visual presentation.

A box can lay out its children in one of two orientations, either horizontally or vertically. A horizontal box lines up its components horizontally and a vertical box orients its components vertically. You can think of a box as one row or one column from an HTML table.

<zk>
    <box orient="vertical">    
        <button label="Button 1"/>        
        <button label="Button 2"/>        
    </box>    
    <box orient="horizontal">    
        <button label="Button 3"/>        
        <button label="Button 4"/>        
    </box>    
</zk>

You could assign a label and an image to a button by the label and image properties. If both are specified, the dir property control which is displayed up front, and the orient property controls whether the layout is horizontal or vertical.

<button label="Left" image="/img/folder.gif" width="125px"/>
<button label="Right" image="/img/folder.gif" dir="reverse" width="125px"/>
<button label="Above" image="/img/folder.gif" orient="vertical" width="125px"/>
<button label="Below" image="/img/folder.gif" orient="vertical" dir="reverse" width="125px"/>

A captcha component can generate a special distortion image, also called a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) image. Developers could set height and width for dimension of captcha. By default, captcha render the image with a randomly generated text, and developers can set value to assign a purposive text.

<vbox>
<captcha id="cpa" length="5" width="200px" height="50px"/>
</vbox>

A header for a Groupbox. It may contain either a text label, using LabelElement.setLabel(java.lang.String), or child elements for a more complex caption.

<zk>
<window border="normal" width="350px">
<caption label="This is a caption"/>
        <groupbox width="300px">        
                 <caption label="fruits"/>                
        <radiogroup onCheck="fruit.value = self.selectedItem.label">        
        <radio label="Apple"/>        
    <radio label="Orange"/>    
    <radio label="Banana"/>     
        </radiogroup>        
        </groupbox>        
</window>
            </zk>            

This component is a center region. The default class of CSS is specified "layout-region-center".

<borderlayout height="500px">
    <north size="50%" border="0">    
        <borderlayout>        
            <west size="25%" border="none" flex="true">            
                <div style="background:#B8D335">                
                    <label value="25%"                    
                        style="color:white;font-size:50px" />                        
                </div>                
            </west>            
            <center border="none" flex="true">            
                <div style="background:#E6D92C">                
                    <label value="25%"                    
                        style="color:white;font-size:50px" />                        
                </div>                
            </center>            
            <east size="50%" border="none" flex="true">            
                <label value="Here is a non-border"                
                    style="color:gray;font-size:30px" />                    
            </east>            
        </borderlayout>        
    </north>    
    <center border="0">    
        <borderlayout>        
            <west size="30%" flex="true" border="0">            
                <div style="background:#E6D92C">                
                    <label value="30%"                    
                        style="color:white;font-size:50px" />                        
                </div>                
            </west>            
            <center>            
                <label value="Here is a border"                
                    style="color:gray;font-size:30px" />                    
            </center>            
            <east size="30%" flex="true" border="0">            
                <div style="background:#B8D335">                
                    <label value="30%"                    
                        style="color:white;font-size:50px" />                        
                </div>                
            </east>            
        </borderlayout>        
    </center>    
</borderlayout>

A chart is used to show a set of data as a graph. It helps users to judge things with a snapshot. To use a chart component , developers must prepare a ChartModel and a ChartEngine. Developers also set proper chart type, and the threeD (3D) attribute to draw proper chart. The model and type must match to each other; or the result is unpredictable. The 3D chart is not supported on all chart type.