Associate UI Components with a GroupsModel"
From Documentation
Tmillsclare (talk | contribs) |
|||
Line 1: | Line 1: | ||
{{ZKDevelopersReferencePageHeader}} | {{ZKDevelopersReferencePageHeader}} | ||
− | Similar to section [[ZK_Developer's_Reference/Data_Binding/Associate_UI_Components_with_a_Collection | Associate UI Components with a Collection]], you can also associate a <javadoc type="interface">org.zkoss.zul.GroupsModel</javadoc> with UI components, and Data Binding Manager will convert the GroupsModel into UI components accordingly. | + | Similar to the previous section [[ZK_Developer's_Reference/Data_Binding/Associate_UI_Components_with_a_Collection | Associate UI Components with a Collection]], you can also associate a <javadoc type="interface">org.zkoss.zul.GroupsModel</javadoc> with UI components, and Data Binding Manager will convert the GroupsModel into UI components accordingly. |
# Prepare the data source of GroupsModel | # Prepare the data source of GroupsModel |
Revision as of 02:07, 25 July 2011
Similar to the previous section Associate UI Components with a Collection, you can also associate a GroupsModel with UI components, and Data Binding Manager will convert the GroupsModel into UI components accordingly.
- Prepare the data source of GroupsModel
- Associate the GroupsModel with model attribute of those supported UI components, ex. Listbox and Grid.
In the following example, we demonstrate how to associate a GroupsModel with Listbox.
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<window width="500px">
<zscript><![CDATA[
//prepare the example group model
Object[][] data = {
{"cell 1-0", "cell 1-1"}, //group 1
{"cell 2-0", "cell 2-1", "cell 2-2"}, //group 2
{"cell 3-0", "cell 3-1", "cell 3-2", "cell 3-3"} //group 3
};
Object[] heads = { "group 1", "group 2", "group 3"};
GroupsModel groupsmodel = new SimpleGroupsModel(data, heads);
String selected = "cell 1-0";
]]>
</zscript>
<listbox height="300px" model="@{groupsmodel}" selectedItem="@{selected}">
</listbox>
<label value="@{selected}"/>
</window>
Version History
Version | Date | Content |
---|---|---|