From Documentation
This documentation is for an older version of ZK. For the latest documentation 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 |
---|---|---|