Associate UI Components with a Collection"

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

Revision as of 02:01, 25 July 2011


DocumentationZK Developer's ReferenceData BindingAssociate UI Components with a Collection
Associate UI Components with a Collection


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 component
    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 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>


Version History

Last Update : 2011/07/25


Version Date Content
     



Last Update : 2011/07/25

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