ZK Essentials/Displaying Information in a Grid Using Data Binding/The Concept of Data Binding

The Concept of Data Binding

ZK's annotated data binding mechanism involves the following players to make it work:

• Data Bean
• ZK UI Components declared in ZUL file
• ZK's annotated data binding manager utility

In a nutshell, a bean's particular property is associated with a specified component attribute, such that whenever a value is modified, the annotated data binding manager calls the data bean's getter and setter methods to keep the values in sync between the bean and the component.
The syntax for declaring this association in ZUML is

<component-name attribute-name="@{bean-name.attribute-name}"/>

A Basic Example of ZK Annotated Data Binding

Here we walk through a basic annotated data binding sample step by step.

1. Prepare the Data Bean - create a data oject "Person" with two properties:

public class Person {
    private String _firstName = "";
    private String _lastName = "";
    private Boolean _married = true;
 
    public Person(){
    	
    }
    public Person(String firstName, String lastName, Boolean married){
    	_firstName = firstName;
    	_lastName = lastName;
    	_married = married;
    }
    // getter and setters
    public void setFirstName(String firstName) {
        _firstName = firstName;
    }
 
    public String getFirstName() {
        return _firstName;
    }
 
    public void setLastName(String lastName) {
        _lastName = lastName;
    }
 
    public String getLastName() {
        return _lastName;
    }
 
    public void setFullName(String f) {
        // do nothing.
    }
 
    public String getFullName() {
        return _firstName + " " + _lastName;
    }
}
</source?

<source lang="java">
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window>
    <zscript><![CDATA[
        //prepare the person object
       	import bean.Person;
        Person person = new Person();
        person.setFirstName("Max");
        person.setLastName("Planck");
    ]]>
    </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>