IZUML

From Documentation

Overview

iZUML is a stripped-down version of ZUML. iZUML is embedded in a Web page and interpreted at the client.

How to embed iZUML into a HTML page

It is typically placed inside a DIV tag, though you can choose other kind of tags. Furthermore, it is placed inside a comment (&lt!-- and -->) such that the page can be interpreted correctly by the browser, as show below. Since it has zero dimension, it is optional to specify display:none in the enclosing tag.

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

Of course, you construct it dynamically such as follows.

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

How to create widgets from iZUML

If the iZUML content is embedded in a HTML tag, you can use zk.zuml.Parser#createFromNode to create widgets. If it is a string, use zk.zuml.Parser#createWidgets.

EL Expression

The EL expression is actually a JavaScript snippet. It could be anything.

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

<window title="some">${this.getTitle()}...

${_.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 (zul.utl.Script) (rather than HTML SCRIPT tag).

style

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