ZK Essentials/Displaying Information Using Grid, MVC and composite components/Displaying the Data

This article is out of date, please refer to http://books.zkoss.org/zkessentials-book/master/ for more up to date information.

Data presentation in ZK involves preparing the Model and Controller in association with the View (ZK components). Once an association is established among these three parts, the data presented in ZK components are automatically updated whenever the data model is changed. In the previous section, we declared the basic UI skeleton, now we'll look into how to prepare a data model and write a renderer to populate the Grid component.

Where the View, Model, and Renderer Come Together

To associate our Product View (Grid component) with a Model, we'll implement a controller class which extends the ZK utility class SelectorComposer. In its SelectorComposer.doAfterCompose(Component) method, the ZK components declared in mark up are wired with the component instances declared in the controller for our manipulation, while the events fired are automatically forwarded to this controller for event handling. Therefore, in our controller class, we override and call SelectorComposer.doAfterCompose(Component) method of its super class and implement the code that assigns a model and renderer to our Product View Grid.

For more information on the intracacies of this relationship please refer to link needed here.

public class ProductViewCtrl extends SelectorComposer<Div> {

	@Wire
	private Grid prodGrid;


	@Override
	public void doAfterCompose(Div comp) throws Exception {
		super.doAfterCompose(comp);

		List<Product> prods = DAOs.getProductDAO().findAllAvailable();

		ListModelList<Product> prodModel = new ListModelList<Product>(prods);
		prodGrid.setModel(prodModel);
	}

	...

}

Notice that the Grid reference "prodGrid" in ProductViewCtrl.java is auto-wired with the Grid declared in mark up whose ID is "prodGrid".

<div id="PrdoDiv" apply="demo.web.ui.ctrl.ProductViewCtrl">
	<grid id="prodGrid">
		<columns sizable="true">
			<column image="/image/Bullet-10x10.png"
						align="center" width="100px" />
			<column label="Name" width="100px" />
			<column label="Price" width="50px" />
			<column label="Quantity" width="50px" />
			<column label="Arrive Date" width="110px" />
			<column label="operation" />
		</columns>
	</grid>
</div>

Wrapping Data Object with ListModel

The implementations of ZK's ListModel interface provide a wrapper for Java Collections to work with ZK's data modeling mechanisms. For Grid and Listbox components, we use the ListModelList implementation; adding or removing entries in the ListModelList would cause the associated Listbox to update its content accordingly.

In the snippet below, the ListModelList takes in a product list fetched from a DAO object as its argument. At line 6, we assign the ListModelList object as the model for the Product View Grid by using Grid's setModel method.

ProductViewCtrl.java

public void doAfterCompose(Component comp) throws Exception {
		
		List<Product> prods = DAOs.getProductDAO().findAllAvailable();

		ListModelList<Product> prodModel = new ListModelList<Product>(prods);
		prodGrid.setModel(prodModel);

        ...
		});
	}

Using a template and composite component to display the information

The end goal is to provide an interface that looks like the following image:

To recreate this developers should make use of the new template functionality which affords developers the ability to define ZUML fragments which will be used when rendering each row. In this case our ZUML fragment needs to contain a row and then a control for each column. Here is the final template to recreate the interface.

<template name="model">
	<row value="${each}">
		<image height="70px" width="70px" src="${each.imgPath}" />
		<label value="${each.name}" />
		<label value="${each.price}" />
		<label value="${each.quantity}" />
		<label value="${each.createDate}" />
		<productOrder maximumQuantity="${each.quantity}" product="${each}" />
	</row>
</template>

The next section introduces what is happening in this fragment.