Associate UI Components with Data Source"
From Documentation
m |
|||
| Line 1: | Line 1: | ||
| − | {{ | + | {{ZKDevelopersReferencePageHeader}} |
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. | 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. | ||
| Line 33: | Line 33: | ||
</source> | </source> | ||
| + | =Version History= | ||
| + | Last Update : {{REVISIONYEAR}}/{{REVISIONMONTH}}/{{REVISIONDAY}} | ||
| + | {| border='1px' | width="100%" | ||
| + | ! Version !! Date !! Content | ||
| + | |- | ||
| + | | | ||
| + | | | ||
| + | | | ||
| + | |} | ||
| − | {{ | + | {{ZKDevelopersReferencePageFooter}} |
Revision as of 04:11, 20 October 2010
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
Last Update : 2010/10/20
| Version | Date | Content |
|---|---|---|