Associate UI Components with a Collection"
From Documentation
m |
m (correct highlight (via JWB)) |
||
Line 7: | Line 7: | ||
# Prepare the data source of Collection | # Prepare the data source of Collection | ||
− | # Associate the collection with < | + | # Associate the collection with <code>model</code> attribute of those supported UI components, ex. <code>Listbox</code>, <code>Grid</code>, and <code>Tree</code>. |
# 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 < | + | ## '''Define a variable''', whatever you want, to represent each instance in the Collection with <code>self</code> attribute.<code><component-name self="@{each='variable-name'}"/></code> 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}"/> | ## 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 < | + | In the following example, we demonstrate how to associate a collection with <code>Listbox</code> to display a list of persons. |
<source lang="xml" > | <source lang="xml" > |
Latest revision as of 10:39, 19 January 2022
This documentation is for an older version of ZK. For the latest one, please click here.
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
, andTree
. - 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}"/>
- Define a variable, whatever you want, to represent each instance in the Collection with
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 |
---|---|---|