iZUML"

From Documentation
(Created page with '{{ZKDevelopersReferencePageHeader}} =Version History= {{LastUpdated}} {| border='1px' | width="100%" ! Version !! Date !! Content |- |   |   |   |} {{ZKDeveloper…')
 
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
 +
= Overview =
 +
 +
[http://www.zkoss.org/product/edition.dsp Available in ZK PE and EE only]
 +
 +
iZUML is a client-side version of [[ZUML Reference|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 [[ZK Developer's Reference/UI Composing/Client-side UI Composing|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,
 +
 +
<source lang="xml">
 +
<div id="main" display="none">
 +
<!--
 +
<window>
 +
What's your name? <textbox onOK="sayHello(this)"/>
 +
</window>
 +
<separator bar="true"/>
 +
-->
 +
</div>
 +
</source>
 +
 +
Of course, you construct an iZUML document dynamically such as follows.
 +
 +
<source lang="javascript">
 +
var zuml = '<window title="' + title +'">What\'s your name? <textbox/></window>';
 +
</source>
 +
 +
== 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.
 +
 +
<source lang="xml">
 +
<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>
 +
</source>
 +
 +
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 <javadoc method="createAt(_global_.String, _global_.Map, _global_.Map, _global_.Function)" directory="jsdoc">zk.zuml.Parser</javadoc> to create widgets. If you construct the iZUML document as a string, you could use <javadoc method="create(zk.Widget, _global_.String, _global_.Map, _global_.Function)" directory="jsdoc">zk.zuml.Parser</javadoc>.
 +
 +
 +
= 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.
 +
 +
{|border="1" cellspacing="0" width="100%"
 +
|+ table name
 +
|-
 +
! Name
 +
! Description
 +
|-
 +
| <code>this</code>
 +
| It references the widget has been created.
 +
 +
If the EL expression is part of the <code>if</code> and <code>unless</code> attribute, <code>this</code> is the parent widget.
 +
If the EL expression is part of other attribute, <code>this</code> is the widget being created.
 +
 +
<source lang="xml">
 +
<window title="some">
 +
  ${this.getTitle()}...
 +
  <texbox if="${this.border}"/>
 +
</window>
 +
</source>
 +
 +
where <code>this</code> refers to the window widget in both EL expressions.
 +
 +
<source lang="xml">
 +
<window title="some">
 +
  <textbox value="${this.parent.getTitle()}">
 +
</window>
 +
</source>
 +
 +
where <code>this</code> refers to the textbox widget.
 +
 +
|-
 +
| <code>_</code>
 +
| The context passed to the argument named <code>var</code> of <javadoc method="createAt(_global_.String, _global_.Map, _global_.Map, _global_.Function)" directory="jsdoc">zk.zuml.Parser</javadoc> and <javadoc method="create(zk.Widget, _global_.String, _global_.Map, _global_.Function)" directory="jsdoc">zk.zuml.Parser</javadoc>.
 +
 +
<source lang="javascript">
 +
${_.info.name}
 +
</source>
 +
|}
 +
 +
= Built-in Attributes =
 +
 +
== forEach ==
 +
<source lang="xml">
 +
<window title="Test" border="normal">
 +
<label forEach="${[this.getTitle(), this.getBorder()}"/>
 +
</window>
 +
</source>
 +
 +
* Notice
 +
** Unlike widget attributes, <code>this</code> references to the parent widget, which is <code>window</code> in the above case.
 +
 +
== if ==
 +
<source lang="xml">
 +
<button label="Edit" if="${_.login}/>
 +
</source>
 +
 +
== unless ==
 +
<source lang="xml">
 +
<button label="View" unless="${_.inEditMode}"/>
 +
</source>
 +
 +
= Built-in Element =
 +
 +
== attribute ==
 +
 +
<source lang="xml">
 +
<button label="Click">
 +
<attribute name="onClick">
 +
this.parent.setTitle("Click");
 +
</attribute>
 +
</button>
 +
</source>
 +
 +
is equivalent to
 +
 +
<source lang="xml">
 +
<button label="Click onClick="this.parent.setTitle('click')"/>
 +
</source>
 +
 +
== zk ==
 +
 +
The zk element doesn't represent a widget.
 +
 +
<source lang="xml">
 +
<zk forEach="${[1, 2, 3]}">
 +
${each} <textbox value="${each}"/>
 +
</zk>
 +
</source>
 +
 +
= Notes =
 +
== script ==
 +
When <code>&lt;script&gt;</code> is specified in iZUML, it actually refers to the script widget (<javadoc directory="jsdoc">zul.utl.Script</javadoc>) (rather than HTML SCRIPT tag).
 +
 +
== style ==
 +
When <code>&lt;style&gt;</code> is specified in iZUML, it actually refers to the style widget (<javadoc directory="jsdoc">zul.utl.Style</javadoc>) (rather than HTML STYLE tag).
 +
 +
=Example=
 +
For a more complete example, please refer to [[Small Talks/2009/July/ZK 5.0 and Client-centric Approach|Small Talk: ZK 5.0 and Client-centric Approach]].
  
 
=Version History=
 
=Version History=
{{LastUpdated}}
+
Last Update : {{REVISIONYEAR}}/{{REVISIONMONTH}}/{{REVISIONDAY}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content

Revision as of 01:37, 1 December 2010

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
     



Last Update : 2010/12/01

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