Associate UI Components with a Collection"
From Documentation
(moved ZK Developer's Guide/ZK in Depth/Data Binding/Associate UI Components with a Collection to ZK Developer's Reference/Data Binding/Associate UI Components with a Collection) |
m |
||
Line 1: | Line 1: | ||
− | # | + | {{ZKDevelopersGuidePageHeader}} |
+ | |||
+ | 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. | ||
+ | |||
+ | # Prepare the data source of Collection | ||
+ | # Associate the collection with <tt>model</tt> attribute of those supported UI components, ex. <tt>Listbox</tt>, <tt>Grid</tt>, and <tt>Tree</tt>. | ||
+ | # 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. | ||
+ | ## Associate UI components with the variable<br/> <component-name attribute-name="@{variable-name.attribute-name}"/> | ||
+ | |||
+ | In the following example, we demonstrate how to associate a collection with <tt>Listbox</tt> to display a list of persons. | ||
+ | |||
+ | <source lang="xml" > | ||
+ | <?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); | ||
+ | } | ||
+ | ]]> | ||
+ | </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> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | =Version History= | ||
+ | {{LastUpdated}} | ||
+ | {| border='1px' | width="100%" | ||
+ | ! Version !! Date !! Content | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | {{ZKDevelopersGuidePageFooter}} |
Revision as of 04:39, 18 January 2011
This documentation is for an older version of ZK. For the latest one, please click here.
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.
- Prepare the data source of Collection
- Associate the collection with model attribute of those supported UI components, ex. Listbox, Grid, and Tree.
- 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);
}
]]>
</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
Version | Date | Content |
---|---|---|