Model

The model is the data an application handles. Depending on the application requirement, it could be anything, though usually abstracted as beans and DAO.

However, many ZK components operates based on an abstract model (a Java interface), such that the view and the model can be separated clearly. For example, Listbox and Grid support ListModel, and Chart supports ChartModel.

In additions to implementing these models, you could use one of predefined implementation such as SimpleListModel and SimplePieModel. For detailed description, please refer to the following sections.

How to Assign Model to UI

Depending on the requirement, there are a few way to assign a model to a UI component.

Use Composer to Assign Model

A typical way is to use a composer to assign the model. For example, assume the UI component is a grid and we have a method called getFooModel returning the data to show on the grid, then we could implement a composer, say foo.FooComposer as follows:

public class FooComposer implements Composer {
    public void doAfterCompose(Component comp) throws Exception {
        ((Grid)comp).setModel(getFooModel());
    }
}

Then, you could assign it in ZUML as follows:

<grid apply="foo.FooComposer">
...

Use Databinder

If you are using data binding to handle the database, you could have the data binder to assign the model for you. For example, assume you have a collection called persons (an implementation of java.util.List), then:

<listbox model="@{persons}">
...

Use EL Expressions

EL is another common way to assign the model. For example, assume you have a variable resolver called foo.FooVariableResolver implementing VariableResolver as follows.

public class FooVariableResolver implements VariableResolver {
    public Object resolveVariable(String name) {
        if ("persons".equals(name)) //found
            return getPersons(); //assume this method returns an instance of ListModel 
        //... you might support more other variables
       return null; //not found
    }
}

Then, you could specify it in ZUML as follows:

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

<listbox model="${persons">
...

The other approach is to use the function mapper. For example, assume you have an implementation called foo.CustomerListModel, then you could use it to drive a listbox as follows.

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<listbox model="${c:new('foo.CustomerListModel')}"/>

Use zscript

If you are building a prototype, you could use zscript to assign the model directly. For example,

<zk>
	<zscript>
	ListModel infos = new ListModelArray(
		new String[][] {
			{"Apple", "10kg"},
			{"Orange", "20kg"},
			{"Mango", "12kg"}
		});
	</zscript>			
	<listbox model="${infos}">
		<template name="model">
			<listitem>
				<listcell label="${each[0]}"/>
				<listcell label="${each[1]}"/>
			</listitem>
		</template>
	</listbox>
</zk>

Notice that, since the performance of zscript is not good and the mix of Java code in ZUML is not easy to maintain, it is suggested not to use this approach in a production system. Please refer to Performance Tips for more information.