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
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.
- Prepare the data source of collection
- Associate the collection with model attribute of those supported UI components, ex. Listbox and Grid.
- 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.
- Define a template of UI component
- 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.
- 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
Version | Date | Content |
---|---|---|