Friday, 8 June 2012

List Item Double click event on selected Item

In this example, let us see how we can handle the double click event on list item on the selected item.
Before going into example, we will see the concepts

Custom Renderer

Listbox allow developers to separate the view and the model by implementing ListModel . Once the model is assigned (with Listbox.setModel(org.zkoss.zul.ListModel) ), the display of the listbox is controlled by the model, and an optional renderer. The model is used to provide data, while the renderer is used to provide the custom look.

Step 1 :
Project Structure

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
    <window id='myWin' title="MVC example" border="normal"
        Example for Double Click Listitem and Selected Item Attribute
        <listbox id="listPerson"
            <listhead sizable="true">
                <listheader label="First Name" width="100px" />
                <listheader label="Last Name" width="285px" />
            <listitem self="@{each=p1}">
                <listcell label="@{p1.firstName}" />
                <listcell label="@{p1.LastName}" />


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;


package mydomainUI;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.sys.ComponentsCtrl;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;
import org.zkoss.zul.Messagebox;
import mydomain.Person;

@SuppressWarnings({ "rawtypes", "serial" })
public class ListItemDoubleClickEventCtrl extends GenericForwardComposer {

    private List<Person> persons = new ArrayList<Person>();
    private Listbox listPerson;

    public void doAfterCompose(Component comp) throws Exception {
        Person p1 = new Person();

        p1 = new Person();

        listPerson.setItemRenderer(new ListitemRenderer() {
            public void render(Listitem item, Object arg1, int arg2)
                    throws Exception {
                Person value = (Person) arg1;
                item.appendChild(new Listcell(value.getLastName()));
                item.appendChild(new Listcell(value.getFirstName()));
                item.setAttribute("data", arg1);

    public void onDoubleClicked(Event event) throws Exception {
        // get the selected object
        Listitem item = listPerson.getSelectedItem();
        Person p1= (Person) item.getAttribute("data");;
    public List<Person> getPersons1() {
        return persons;


Now you can run the zul file and double click on the Lisitem.

Download the source as war file

No comments:

Post a Comment