Associate UI Components with a Collection"

From Documentation
m
Line 50: Line 50:
  
 
=Version History=
 
=Version History=
Last Update : {{REVISIONYEAR}}/{{REVISIONMONTH}}/{{REVISIONDAY}}
+
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content

Revision as of 08:03, 17 December 2010


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 components, and 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, Grid, and Tree.
  3. 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 &lt; count; ++j) {
			Person personx = new Person();
			personx.setFirstName("Tom"+j);
			personx.setLastName("Hanks"+j);      
			persons.add(personx);
		}
     ]]>
 	</zscript>

	<listbox rows="4" model="@{persons}">
		<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 : 2010/12/17


Version Date Content
     



Last Update : 2010/12/17

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