27/09/2012

Healthcare IT EMR PMS: ZK 5 Databinding

PA1SIDHHU.K

Search
Share

More

Next Blog

Healthcare IT EMR PMS

Techno-functional 12 Years EMR/PMS experience.Love to work in Practice Management software. EDI 4010, EDI 5010, CMS 15
Email : vbsenthilinnet@gmail.com

Showing posts with label ZK 5 Databinding. Show all posts

Monday, 28 May 2012

List item Data Binding

Now let us see how we can load the items in the list item using Data binding.
Step 1:

Create a Zul Project as follows

Step 2 :

Create Person POJO Class

Java Code
package mydomain;
public class Person {
private String _firstName = "";
private String _lastName = "";
// 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) {

emrpms.blogspot.in/search/label/ZK 5 Databinding

1/6

27/09/2012

Healthcare IT EMR PMS: ZK 5 Databinding

// do nothing.
}
public String getFullName() {
return _firstName + " " + _lastName;
}
}

Step 3 :

Demo.Zul File
<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./myWin" ?>
<zk>
<window id='myWin' title="MVC example" border="normal"
apply="mydomainUI.DemoComposer">
Example for "for each" using MVC Controller
<listbox model="@{myWin$DemoComposer.persons}">
<listhead sizable="true">
<listheader label="First Name" width="100px" />
<listheader label="Last Name" width="285px" />
</listhead>
<listitem self="@{each=person}">
<listcell label="@{person.firstName}" />
<listcell label="@{person.LastName}" />
</listitem>
</listbox>
</window>
</zk>

Step 4:

Composer
package mydomainUI;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;
import mydomain.Person;
public class DemoComposer extends GenericForwardComposer {
private List<Person> persons = new ArrayList<Person>();

public void doAfterCompose(Component comp) throws Exception {

super.doAfterCompose(comp);
Person p1 = new Person();
p1.setFirstName("John");
p1.setLastName("Robert");
persons.add(p1);
p1 = new Person();
p1.setFirstName("Rosy");
p1.setLastName("Sean");
persons.add(p1);
}
public List<Person> getPersons() {
return persons;
}

emrpms.blogspot.in/search/label/ZK 5 Databinding

2/6

27/09/2012

Healthcare IT EMR PMS: ZK 5 Databinding

Step 5:

Run the ZUL File, The output as follows

Posted by Senthil Muthiah at 21:54

No comments:

Recommend this on Google

Labels: ZK 5 Databinding

ZK Data Binding
This is based on ZK 5 Data binding using Data Bind Manager org.zkoss.zkplus.databind.AnnotateDataBinderInit
Data binding is a mechanism that automates the data-copy plumbing code (CRUD) between UI components and the data source. Application developers only
have to tell the data binding manager about the associations between UI components and the data source. Then, the data -binding manager will do all the
loading (loading data from the data source to UI components) and saving (saving data from UI component into the data source) jobs automatically
Now, let us start with simple example. You can find more details in ZK 5 Developer Reference Document.
The following example uses MVC Pattern design + ZK 5 Data binding concepts.
Step 1:
Create ZK Project as shown.

Step 2:
First of all, we have to define a data source as a data bean. In this example, we use Person class as an example
that holds the information of a person, say, first name, and last name

Here is the Code

package mydomain;
public class Person {
private String _firstName = "";
private String _lastName = "";
// getter and setters
public void setFirstName(String firstName) {
_firstName = firstName;
}

Step 3:

public String getFirstName() {

return _firstName;
}
public void setLastName(String lastName) {
_lastName = lastName;
}

Activates Data Binding Manager

public String getLastName() {
return _lastName;
}

The Data Binding Manager can be activated by defining the page Initializer at the top of every page.

emrpms.blogspot.in/search/label/ZK 5 Databinding

3/6

27/09/2012

Healthcare IT EMR PMS: ZK 5 Databinding

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
Demo.zul File

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="ZK Data Binding" border="normal">

Step

<grid width="400px">
<rows>
<row>
First Name:
<textbox />
</row>
<row>
Last Name:
<textbox />
4:
</row>
<row>
Full Name:
<label />
</row> with Data Source
Associate UI Components
</rows>
</grid>
</window>
</zk>

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}'''"'''/>
Example
<textbox value="@{person.firstName}"

Data binding works with ZK MVC such as that:

1. Controller class provides a getter method to obtain the bean, or Collection.
2. Declare the bean, or Collection, as the value for a UI component in ZUL. The data binder will call the Controller class' getter method to append
data to UI.

Modified Demo.Zul File

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="win" title="ZK Data Binding" border="normal" apply="UI.DemoComposer">
<grid width="400px">
<rows>
<row>
First Name:
<textbox value="@{win$DemoComposer.person.firstName}"/>
</row>
<row>
Last Name:
<textbox value="@{win$DemoComposer.person.LastName }"/>
</row>
<row>
Modified DemoComposer.Java
Full Name:
<label />
</row>
</rows>
</grid>
package UI;
</window>
</zk>
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;
import mydomain.Person;

public class DemoComposer extends GenericForwardComposer {

Person person = new Person();

public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);

emrpms.blogspot.in/search/label/ZK 5 Databinding

4/6

27/09/2012

Healthcare IT EMR PMS: ZK 5 Databinding

Please remember the following always

Data binding works with ZK MVC such as that:
1. Controller class provides a getter method to obtain the bean, or Collection.
2. Declare the bean, or Collection, as the value for a UI component in ZUL. The data binder will call the Controller class' getter method to append
data to UI.

In the composer, instead of writing getter for each property, we can get return the object of the bean as follows without changing any thing on the zul file as shown
below

package UI;
import
import
import
import

org.zkoss.zk.ui.Component;
org.zkoss.zk.ui.util.GenericForwardComposer;
org.zkoss.zul.Textbox;
mydomain.Person;

public class DemoComposer extends GenericForwardComposer {

Person person = new Person();
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
// prepare the example person object
person.setFirstName("George");
person.setLastName("Bush");
}
/*
* public String getFirstName() { return person.getFirstName(); } public
* String getLastName() { return person.getLastName(); }
*/
public Person getPerson() {
return this.person;
}
}

Posted by Senthil Muthiah at 02:08

No comments:

Recommend this on Google

Labels: ZK 5 Databinding

Wednesday, 23 May 2012

ZK Data Binding Part 1

Before seeing the ZK Data binding concept , first let us learn the for each attribute in zk
The following zul file is simple which has the list items
<?page title="Example1" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Example1" border="normal">
Example for "for each"
<listbox>
<listitem label="Apple" />
<listitem label="Orange" />
<listitem label="Strawberry" />
</listbox>
</window>
</zk>

The output can be expected if you use for each attribute as follows

<?page title="Example2" contentType="text/html;charset=UTF-8"?>

<zk>

emrpms.blogspot.in/search/label/ZK 5 Databinding

5/6

27/09/2012

Healthcare IT EMR PMS: ZK 5 Databinding

<window title="Example2" border="normal">

Example for "for each"
<listbox>
<listitem label="${each}"
forEach="Apple, Orange, Strawberry" />
</listbox>
</window>
</zk>

The forEach attribute is used to specify a collection of object such that the XML element it belongs will be evaluated repeatedly for each object of the collection.
Posted by Senthil Muthiah at 00:11

No comments:

Recommend this on Google

Labels: ZK 5 Databinding, ZK Foreach

Home

Older Posts

Subscribe to: Posts (Atom)

Awesome Inc. template. Powered by Blogger.

emrpms.blogspot.in/search/label/ZK 5 Databinding

6/6