ZK8 Series: UI Template Injection"
Jumperchen (talk | contribs) (Created page with "{{Template:UnderConstruction}} {{Template:Smalltalk_Author| |author=Jumper Chen, Senior Engineer, Potix Corporation |date=February 3, 2015 |version=ZK 8.0.0-FL, ZUTI 1.0.0-FL }}...") |
Jumperchen (talk | contribs) |
||
Line 8: | Line 8: | ||
= Introduction = | = 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 [http://w3c.github.io/webcomponents/spec/shadow/ 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 user. | ||
+ | In fact, the shadow element is not visible when application developer to manipulate ZK components. | ||
+ | |||
+ | For example, | ||
+ | |||
+ | <source lang="xml" high="2,4"> | ||
+ | <div> | ||
+ | <if test="${user.editable}"> | ||
+ | User Name: <textbox value="${user.name}"/> | ||
+ | <forEach items="${user.phones}" var="phone"> | ||
+ | <label value="${phone.name}">: <textbox value="${phone.value}"/> | ||
+ | </forEach> | ||
+ | </if> | ||
+ | </div> | ||
+ | </source> | ||
+ | |||
+ | [[File:Pseudo_in_Pseudo.png |frame]] | ||
+ | |||
Revision as of 10:18, 30 January 2015
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 user. 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}">: <textbox value="${phone.value}"/>
</forEach>
</if>
</div>
Comments
Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |