Associate UI Components with Data Source"
From Documentation
Line 5: | Line 5: | ||
<tt><component-name attribute-name="@{bean-name.attribute-name}'''"'''/></tt> | <tt><component-name attribute-name="@{bean-name.attribute-name}'''"'''/></tt> | ||
− | * <tt>component-name</tt> represents a UI component | + | * <tt>component-the name</tt> represents a UI component |
− | * <tt>attribute-name</tt> represents an attribute of UI component or the data source | + | * <tt>attribute- the name</tt> represents an attribute of UI component or the data source |
− | * <tt>bean-name </tt>represents a data source | + | * <tt>bean-the 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. | 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. |
Revision as of 01:38, 25 July 2011
After adding the source data and activating the data-binding manager, you have to define the required UI objects and then associate them with the data source. ZUML annotation expression can be used to tell the data-binding manager the relationship between the data source and UI components. Its usage is very straightforward, simply by declaring the annotation into the component's attribute directly.
<component-name attribute-name="@{bean-name.attribute-name}"/>
- component-the name represents a UI component
- attribute- the name represents an attribute of UI component or the data source
- bean-the 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 |
---|---|---|