Envisage ZK 6.0: Rendering List and Tree Model with Templates

Author
Tom Yeh, Potix Corporation

Date
July 20, 2011

Version
ZK 5.1

This page is under construction, so we cannot guarantee the accuracy of the content!

The Story

Before 5.1, the custom renderer must be implemented in Java. It is the most powerful since you could do anything with Java. However, in many cases, it is tedious since an additional Java class have to create and maintain and it is more about View than Control in MVC terminologies.

With 5.1, a concept called template is introduced. It allows UI designers to specify templates right in a ZUML page, and then the model can be rendered based on the template without any Java code.

What Is Template

A template is a segment of a ZUML page enclosed with the template element as shown below.

<window>
    <template name="foo">
      <textbox/>
      <grid>
         <columns/>
      </grid>
   </template>
...

The template could contain any ZUML elements you want, even including another templates. When ZK interprets a template, ZK won't interpret its content immediately. Rather, it stores it as an instance of org.zkoss.zk.ui.util.Template into the component, such that it can be retrieved later to create components by the application or the component.

Listbox Model Rendering with Template

With 5.1, the custom renderer can be done with a template without any Java code. For example, assume we want to render a two-dimensional array, then we could do as follows.

<?variable-resolver class="foo.FruitProvider"?>

<listbox model="${fruits}">
	<listhead>
		<listheader label="Name" sort="auto"/>
		<listheader label="Weight" sort="auto"/>
	</listhead>
	<template name="model">
		<listitem>
			<listcell label="${each[0]}"/>
			<listcell label="${each[1]}"/>
		</listitem>
	</template>
</listbox>

where fruits is a two-dimensional array that can be retrieved by use of a variable resolver (VariableResolver) called foo.FruitProvider as shown below.

public class FruitProvide implements VariableResolver {
    public Object resolveVariable(String name) {
        if ("fruits".equals(name))
            return new ListModelArray(
                new String[][] {
                    {"Apple", "10kg"},
                    {"Orange", "20kg"},
                    {"Mango", "12kg"}
                });
        return null;
    }
}

As shown, the custom rendering is defined by a template called model. The template's name is important since you could associate any number of templates to one component. Furthermore, when the template is rendered, a variable called each is assigned with the data being rendered.

---

Grid Model Rendering with Template

Similarly, we could define a customer rendering with a template for a grid:

<grid model="${books}">
	<columns>
		<column label="ISBN" sort="auto"/>
		<column label="Name" sort="auto"/>
		<column label="Description"/>
	</columns>
	<template name="model">
		<row>
			<label value="${each.isbn}"/>
			<label value="${each.name}"/>
			<label value="${each.description}"/>
		</row>
	</template>
</grid>

where we assume books is an instance of ListModel that contains a list of the Book instances. And, each Book instances has at least three getter methods: getIsbn, getName and getDescription.

Comments

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