ZK8 Series: UI Template Injection

From Documentation

WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!


DocumentationSmall Talks2015FebruaryZK8 Series: UI Template Injection
ZK8 Series: UI Template Injection

Author
Jumper Chen, Senior Engineer, Potix Corporation
Date
February 3, 2015
Version
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}">: <textbox value="${phone.value}"/>
        </forEach>
    </if>
</div>



Comments



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