Associate UI Components with Data Source"
m |
m |
||
| Line 1: | Line 1: | ||
| + | {{Old Version | ||
| + | |url=http://books.zkoss.org/wiki/ZK_Developer's_Reference/Data_Binding | ||
| + | |}} | ||
{{ZKDevelopersGuidePageHeader}} | {{ZKDevelopersGuidePageHeader}} | ||
| − | + | After adding source data, activating data-binding manager, you have to define required UI objects, and associate them with the data source. Use ZUML annotation expression to tell data-binding manager the relationship between the data source and UI components. Its usage is very straightforward, simply declare the annotation into the component's attribute directly. | |
| + | |||
| + | <tt><component-name attribute-name="@{bean-name.attribute-name}'''"'''/></tt> | ||
| + | |||
| + | * <tt>component-name</tt> represents a UI component | ||
| + | * <tt>attribute-name</tt> represents an attribute of UI component or the data source | ||
| + | * <tt>bean-name </tt>represents a data source | ||
| + | |||
| + | We use <tt>Grid</tt> as an example, and associate it with the data source, a <tt>Person</tt> instance. In this example, data-binding manager will automates the synchronization between UI components and the data source automatically. | ||
<source lang="xml" > | <source lang="xml" > | ||
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?> | <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?> | ||
| − | |||
| − | + | <window> | |
| + | <zscript><![CDATA[ | ||
| + | //prepare the example person object | ||
| + | Person person = new Person(); | ||
| + | person.setFirstName("George"); | ||
| + | person.setLastName("Bush"); | ||
| + | ]]> | ||
| + | </zscript> | ||
| − | + | <grid width="400px"> | |
| − | + | <rows> | |
| − | + | <row> First Name: <textbox value="@{person.firstName}"/></row> | |
| + | <row> Last Name: <textbox value="@{person.lastName}"/></row> | ||
| + | <row> Full Name: <label value="@{person.fullName}"/></row> | ||
| + | </rows> | ||
| + | </grid> | ||
| + | </window> | ||
| + | </source> | ||
=Version History= | =Version History= | ||
Revision as of 04:51, 18 January 2011
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.
After adding source data, activating data-binding manager, you have to define required UI objects, and associate them with the data source. Use ZUML annotation expression to tell data-binding manager the relationship between the data source and UI components. Its usage is very straightforward, simply declare the annotation into the component's attribute directly.
<component-name attribute-name="@{bean-name.attribute-name}"/>
- component-name represents a UI component
- attribute-name represents an attribute of UI component or the data source
- bean-name represents a data source
We use Grid as an example, and associate it with the data source, a Person instance. In this example, data-binding manager will automates the synchronization between UI components and the data source automatically.
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window>
<zscript><![CDATA[
//prepare the example person object
Person person = new Person();
person.setFirstName("George");
person.setLastName("Bush");
]]>
</zscript>
<grid width="400px">
<rows>
<row> First Name: <textbox value="@{person.firstName}"/></row>
<row> Last Name: <textbox value="@{person.lastName}"/></row>
<row> Full Name: <label value="@{person.fullName}"/></row>
</rows>
</grid>
</window>
Version History
| Version | Date | Content |
|---|---|---|