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

image

 

Step 2 :

Create Person POJO Class

image

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) {
// 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;
}



}

 

Step 5:


Run the ZUL File, The output as follows


image



No comments:

Post a Comment