iZUML"

From Documentation
m (correct highlight (via JWB))
 
(18 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{ZKDevelopersReferencePageHeader}}
+
{{ZKClient-sideReferencePageHeader}}
 +
{{Deprecated_Content}}
 
= Overview =
 
= Overview =
  
  [http://www.zkoss.org/product/edition.dsp Available in ZK PE and EE only]
+
  ZK 7+: support discontinued since ZK7 and above
 +
ZK 6: Available in all editions
 +
ZK 5: [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.
+
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. But, for the 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.
 
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.
Line 23: Line 26:
 
</source>
 
</source>
  
Of course, you construct an iZUML document dynamically such as follows.
+
Of course, you construct an iZUML document dynamically such as the follows.
  
 
<source lang="javascript">
 
<source lang="javascript">
Line 48: Line 51:
 
= EL Expression =
 
= EL Expression =
  
The EL expression supported by iZUML is actually a JavaScript snippet. It could be any valid JavaScript expression.
+
The EL expression supported by iZUML is actually a JavaScript snippet. It could be any valid JavaScript expression. Unlike ZUML, iZUML's EL expressions start with <code>#{</code> and end with <code>}</code><ref>For 5.0.7 and older version, iZUML's expressions start with <code>${</code>. Since 5.0.8, <code>#{</code> is recommended, thought <code>${</code> is still valid (for backward compatibility) but deprecated.</ref>. Because the starting character of EL expressions is different, it is easier to embed iZUML's EL expression in a ZUML page.
  
 
Here is a list of built-in variables (aka., implicit objects) that you can access in the EL expressions.
 
Here is a list of built-in variables (aka., implicit objects) that you can access in the EL expressions.
Line 59: Line 62:
 
|-
 
|-
 
| <code>this</code>
 
| <code>this</code>
| It references the widget has been created.
+
| It references that a 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 the <code>if</code> and <code>unless</code> attribute, <code>this</code> is the parent widget.  
Line 66: Line 69:
 
<source lang="xml">
 
<source lang="xml">
 
<window title="some">
 
<window title="some">
   ${this.getTitle()}...
+
   #{this.getTitle()}...
   <texbox if="${this.border}"/>
+
   <texbox if="#{this.border}"/>
 
</window>
 
</window>
 
</source>
 
</source>
Line 75: Line 78:
 
<source lang="xml">
 
<source lang="xml">
 
<window title="some">
 
<window title="some">
   <textbox value="${this.parent.getTitle()}">
+
   <textbox value="#{this.parent.getTitle()}">
 
</window>
 
</window>
 
</source>
 
</source>
Line 86: Line 89:
  
 
<source lang="javascript">
 
<source lang="javascript">
${_.info.name}
+
#{_.info.name}
 
</source>
 
</source>
 
|}
 
|}
 +
 +
<blockquote>
 +
----
 +
<references/>
 +
</blockquote>
  
 
= Built-in Attributes =
 
= Built-in Attributes =
Line 95: Line 103:
 
<source lang="xml">
 
<source lang="xml">
 
<window title="Test" border="normal">
 
<window title="Test" border="normal">
  <label forEach="${[this.getTitle(), this.getBorder()}"/>
+
  <label forEach="#{[this.getTitle(), this.getBorder()}"/>
 
</window>
 
</window>
 
</source>
 
</source>
Line 104: Line 112:
 
== if ==
 
== if ==
 
<source lang="xml">
 
<source lang="xml">
<button label="Edit" if="${_.login}/>
+
<button label="Edit" if="#{_.login}/>
 
</source>
 
</source>
  
 
== unless ==
 
== unless ==
 
<source lang="xml">
 
<source lang="xml">
<button label="View" unless="${_.inEditMode}"/>
+
<button label="View" unless="#{_.inEditMode}"/>
 
</source>
 
</source>
  
Line 135: Line 143:
  
 
<source lang="xml">
 
<source lang="xml">
<zk forEach="${[1, 2, 3]}">
+
<zk forEach="#{[1, 2, 3]}">
${each} <textbox value="${each}"/>
+
#{each} <textbox value="#{each}"/>
 
</zk>
 
</zk>
 
</source>
 
</source>
Line 151: Line 159:
  
 
=Version History=
 
=Version History=
Last Update : {{REVISIONYEAR}}/{{REVISIONMONTH}}/{{REVISIONDAY}}
+
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| &nbsp;
+
| 5.0.8
| &nbsp;
+
| August 2011
| &nbsp;
+
| The starting character of iZUML's EL expressions is changed to <code>#{</code>, so it is easier to embed iZUML in a ZUML page. For backward compatibility, <code>${</code> is still valid but deprecated.
 +
|-
 +
| 6.0.0
 +
| October 2011
 +
| iZUML is available to all editions, including CE, PE and EE.
 
|}
 
|}
  
{{ZKDevelopersReferencePageFooter}}
+
{{ZKClient-sideReferencePageFooter}}

Latest revision as of 03:22, 18 January 2022


Icon info.png Note: The content of this page has been deprecated/removed in the latest version.

Overview

ZK 7+: support discontinued since ZK7 and above
ZK 6: Available in all editions
ZK 5: 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. But, for the 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 the 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. Unlike ZUML, iZUML's EL expressions start with #{ and end with }[1]. Because the starting character of EL expressions is different, it is easier to embed iZUML's EL expression in a ZUML page.

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 that a 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}

  1. For 5.0.7 and older version, iZUML's expressions start with ${. Since 5.0.8, #{ is recommended, thought ${ is still valid (for backward compatibility) but deprecated.

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 : 2022/01/18


Version Date Content
5.0.8 August 2011 The starting character of iZUML's EL expressions is changed to #{, so it is easier to embed iZUML in a ZUML page. For backward compatibility, ${ is still valid but deprecated.
6.0.0 October 2011 iZUML is available to all editions, including CE, PE and EE.



Last Update : 2022/01/18

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