Associate UI Components with Data Source

From Documentation

Stop.png This documentation is for an older version of ZK. For the latest one, please click here.

DocumentationZK Developer's GuideZK in DepthData BindingAssociate UI Components with Data Source
Associate UI Components with Data Source


Stop.png 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

Last Update : 2022/01/19


Version Date Content
     



Last Update : 2022/01/19

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.