ZK Client-side Reference/General Control/iZUML

Overview

Available in ZK PE and EE only

iZUML is a client-side version of ZUML. iZUML is interpreted at the client. You could embed and use iZUML in any Web page, including a ZUML document and pure HTML pages. However, for sake of description, here we only illustrate the use in pure HTML pages. With some modification, readers could apply it to ZUML document, JSP and other technologies too.

For composing UI in JavaScript at the client, please refer to the Client-side UI Composing section.

How to Embed iZUML into HTML

It is typically placed inside an HTML DIV tag, though you can choose other kind of tags. Furthermore, it is suggested to enclose the iZUML document with an HTML comment (&lt!-- and -->) such that the page can be interpreted correctly by the browser. For example,

<div id="main" display="none">
	<!--
	<window>
		What's your name? <textbox onOK="sayHello(this)"/>
	</window>
	<separator bar="true"/>
	-->
</div>

Of course, you construct an iZUML document dynamically such as follows.

var zuml = '<window title="' + title +'">What\'s your name? <textbox/></window>';

Specify ZK JavaScript Files

Before using iZUML or other client-side feature, ZK's JavaScript files must be specified (and loaded). If you are using with ZUML, they are loaded automatically. However, if you are using so-called pure-client approach (such as a static HTML file), you have to specify them explicitly as follows.

<script type="text/javascript" src="/zkdemo/zkau/web/js/zk.wpd" charset="UTF-8">
</script>
<script type="text/javascript" src="/zkdemo/zkau/web/js/zk.zuml.wpd" charset="UTF-8">
</script>

Notice that it is not required if you are using with a ZUML document.

How to Create Widgets from iZUML

If the iZUML document is embedded in a HTML tag, you can use Parser.createAt(String, Map, Map, Function) to create widgets. If you construct the iZUML document as a string, you could use Parser.create(Widget, String, Map, Function).

EL Expression

The EL expression supported by iZUML is actually a JavaScript snippet. It could be any valid JavaScript expression.

Here is a list of built-in variables (aka., implicit objects) that you can access in the EL expressions.

table name

Name	Description
this	It references the widget has been created. If the EL expression is part of the if and unless attribute, this is the parent widget. If the EL expression is part of other attribute, this is the widget being created. <window title="some"> ${this.getTitle()}... <texbox if="${this.border}"/> </window> where this refers to the window widget in both EL expressions. <window title="some"> <textbox value="${this.parent.getTitle()}"> </window> where this refers to the textbox widget.
_	The context passed to the argument named var of Parser.createAt(String, Map, Map, Function) and Parser.create(Widget, String, Map, Function). ${_.info.name}

Built-in Attributes

forEach

<window title="Test" border="normal">
 	<label forEach="${[this.getTitle(), this.getBorder()}"/>
</window>

• Notice
  • Unlike widget attributes, this references to the parent widget, which is window in the above case.

if

<button label="Edit" if="${_.login}/>

unless

<button label="View" unless="${_.inEditMode}"/>

Built-in Element

attribute

<button label="Click">
	<attribute name="onClick">
	this.parent.setTitle("Click");
	</attribute>
</button>

is equivalent to

<button label="Click onClick="this.parent.setTitle('click')"/>

zk

The zk element doesn't represent a widget.

<zk forEach="${[1, 2, 3]}">
	${each} <textbox value="${each}"/>
</zk>

Notes

script

When <script> is specified in iZUML, it actually refers to the script widget (Script) (rather than HTML SCRIPT tag).

style

When <style> is specified in iZUML, it actually refers to the style widget (Style) (rather than HTML STYLE tag).

Example

For a more complete example, please refer to Small Talk: ZK 5.0 and Client-centric Approach.

Version History

Last Update : 2010/12/1

Version	Date	Content