Associate UI Components with a Collection"
From Documentation
m |
m (remove empty version history (via JWB)) |
||
(11 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{{ZKDevelopersReferencePageHeader}} | {{ZKDevelopersReferencePageHeader}} | ||
− | It can be very useful to associate a collection with a UI | + | 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 | + | # 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> and <code>Grid</code>. |
− | # Define a template of UI | + | # If the UI component is a selection type one such as <code>Listbox</code> or <code>Combobox</code>, you can also associate a variable with <code>selectedItem</code> attribute of the UI component. The Data Binding Manager will hold in the variable the currently selected collection item for you. |
− | ## '''Define a variable''', whatever you want, to represent each instance in the Collection with < | + | # Define a template of UI components |
+ | ## '''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 the 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" > | ||
Line 25: | Line 26: | ||
persons.add(personx); | persons.add(personx); | ||
} | } | ||
+ | Person selected = persons.get(0); | ||
]]> | ]]> | ||
</zscript> | </zscript> | ||
− | <listbox rows="4" model="@{persons}"> | + | <listbox rows="4" model="@{persons}" selectedItem="@{selected}"> |
<listhead> | <listhead> | ||
<listheader label="First Name" width="100px" /> | <listheader label="First Name" width="100px" /> | ||
Line 49: | Line 51: | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{{ZKDevelopersReferencePageFooter}} | {{ZKDevelopersReferencePageFooter}} |
Latest revision as of 04:33, 5 February 2024
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
andGrid
. - If the UI component is a selection type one such as
Listbox
orCombobox
, you can also associate a variable withselectedItem
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 components
- 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 the 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);
}
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>