|
|
| Line 1: |
Line 1: |
| − | {{ZKDevelopersReferencePageHeader}}
| + | #REDIRECT [[ZK Developer's Reference/MVVM/Data Binding]] |
| − | | |
| − | 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 the Data Binding Manager will convert the GroupsModel into UI components accordingly.
| |
| − | | |
| − | # Prepare the data source of GroupsModel
| |
| − | # Associate the GroupsModel with <tt>model</tt> attribute of those supported UI components, ex. <tt>Listbox</tt> and <tt>Grid</tt>.
| |
| − | | |
| − | In the following example, we demonstrate how to associate a GroupsModel with <tt>Listbox</tt>.
| |
| − | | |
| − | <source lang="xml" >
| |
| − | <?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>
| |
| − | </source>
| |
| − | | |
| − | | |
| − | =Version History=
| |
| − | {{LastUpdated}}
| |
| − | {| border='1px' | width="100%"
| |
| − | ! Version !! Date !! Content
| |
| − | |-
| |
| − | |
| |
| − | |
| |
| − | |
| |
| − | |}
| |
| − | | |
| − | {{ZKDevelopersReferencePageFooter}}
| |