ZK8 Series: UI Template Injection"
Jumperchen (talk | contribs) |
Jumperchen (talk | contribs) |
||
| Line 32: | Line 32: | ||
User Name: <textbox value="${user.name}"/> | User Name: <textbox value="${user.name}"/> | ||
<forEach items="${user.phones}" var="phone"> | <forEach items="${user.phones}" var="phone"> | ||
| − | <label value="${phone.name | + | <label value="${phone.name}"/> |
</forEach> | </forEach> | ||
</if> | </if> | ||
Revision as of 10:21, 30 January 2015
This page is under construction, so we cannot guarantee the accuracy of the content!
Jumper Chen, Senior Engineer, Potix Corporation
February 3, 2015
ZK 8.0.0-FL, ZUTI 1.0.0-FL
Introduction
ZK 8 is moving to a next generation framework for application developer and web designer to cowork on a different aspect of the view. The main feature of ZK 8 is to introduce a new Shadow Element concept, which is inspired from Shadow DOM to enable better composition of the ZK components and support with ZK DataBinding (MVVM) mechanism.
The current supported shadows are:
- Apply: an executable tags to allows you to choose wihch template' to be applied.
- ForEach: allows you to iterate over a collection of objects. You specify the collection using the items attribute, and the current item is available through a variable named by the var attribute.
- Choose/When/Otherwise: performs conditional block execution by the embedded <when> subtags. It renders the body of the first <when> tag whose test condition evaluates to true. If none of the test conditions of nested <when> tags evaluates to true, then the body of an <otherwise> tag is evaluated, if present.
- If: allows the conditional execution of ites body according to the value of the test attribute.
Note: you can customize yourown shadow element if needed.
Shadow Element Concept
A shadow element is like a boilerplate template to help application developer to compose the html layout with some dynamical data and the web designer can predefine the template for application developer to use. In fact, the shadow element is not visible when application developer to manipulate ZK components.
For example,
<div>
<if test="${user.editable}">
User Name: <textbox value="${user.name}"/>
<forEach items="${user.phones}" var="phone">
<label value="${phone.name}"/>
</forEach>
</if>
</div>
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |