Associate UI Components with Data Source"
m |
m (correct highlight (via JWB)) |
||
| Line 6: | Line 6: | ||
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. | ||
| − | < | + | <code><component-name attribute-name="@{bean-name.attribute-name}'''"'''/></code> |
| − | * < | + | * <code>component-name</code> represents a UI component |
| − | * < | + | * <code>attribute-name</code> represents an attribute of UI component or the data source |
| − | * < | + | * <code>bean-name </code>represents a data source |
| − | We use < | + | We use <code>Grid</code> as an example, and associate it with the data source, a <code>Person</code> 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" > | ||
Latest revision as of 10:39, 19 January 2022
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-namerepresents a UI componentattribute-namerepresents an attribute of UI component or the data sourcebean-namerepresents 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 |
|---|---|---|