Associate UI Components with a Collection

This article is out of date, please refer to https://docs.zkoss.org/zk_dev_ref/ for more up to date information.

It can be very useful to associate a collection with a UI component and the Data Binding Manager will convert the collection into UI components accordingly.

1. Prepare the data source of collection
2. Associate the collection with model attribute of those supported UI components, ex. Listbox and Grid.
3. If the UI component is a selection type one such as Listbox or Combobox, you can also associate a variable with selectedItem attribute of the UI component. The Data Binding Manager will hold in the variable the currently selected collection item for you.
4. Define a template of UI components
   1. Define a variable, whatever you want, to represent each instance in the Collection with self attribute.<component-name self="@{each='variable-name'}"/> The variable-name could only be seen by the component-name and its child components.
   2. Associate UI components with the variable
      <component-name attribute-name="@{variable-name.attribute-name}"/>

In the following example, we demonstrate how to associate a collection with Listbox to display a list of persons.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<window width="500px">
	<zscript><![CDATA[ 
     //prepare the example persons List
		int count = 30;
		List persons = new ArrayList();
		for(int j= 0; j < count; ++j) {
			Person personx = new Person();
			personx.setFirstName("Tom"+j);
			personx.setLastName("Hanks"+j);      
			persons.add(personx);
		}
		Person selected = persons.get(0);        
     ]]>
 	</zscript>

	<listbox rows="4" model="@{persons}" selectedItem="@{selected}">
		<listhead>
			<listheader label="First Name" width="100px" />
			<listheader label="Last Name" width="100px" />
			<listheader label="Full Name" width="100px" />
		</listhead>
		<!-- define variable person here-->
		<listitem self="@{each='person'}">
			<listcell>
				<textbox value="@{person.firstName}" />
			</listcell>
			<listcell>
				<textbox value="@{person.lastName}" />
			</listcell>
			<listcell label="@{person.fullName}" />
		</listitem>
	</listbox>
</window>