ZK Listbox: Using ListitemRenderer to Render Complex Data in Listbox

Introduction

This article describe how to implement a ListitemRenderer to display the data of a specific class in listitem.

From official site:

ListitemRenderer:
When a listbox is assigned with a model, a default renderer is assigned too. The default renderer will assume that each item has only one column, and it converts the data into a string directly. If you want to display multiple columns or retrieve a particular field of the data, you have to implement ListitemRenderer to handle the rendering.

ListModel:
Listbox and Grid allow developers to separate the view and the model by implementing ListModel. Once the model is assigned (with Listbox.setModel(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. By default, the data is shown as a single-column grid/listbox. If it is not what you want, please refer to the View section for writing a custom renderer


Pre-request

(must)
ZK Basic MVC Pattern with GenericForwardComposer
http://ben-bai.blogspot.tw/2012/10/zk-basic-mvc-pattern-with.html

(must)
ZK Build View in ZUL file or Java Code (the java code part)
http://ben-bai.blogspot.tw/2012/12/zk-build-view-in-zul-file-or-java-code.html

The Program

listbox_with_model_and_renderer.zul

In this file, simply declare 3 listboxes with different ID and apply the ListboxModelRendererComposer, the model and renderer will be assigned to listboxes in composer.

<zk>
    <!-- Tested with ZK 6.0.2 -->

    <div style="margin: 10px;"
        apply="test.listbox.composer.ListboxModelRendererComposer">
        <vbox>
            <label value="listbox with string data in ListModel, do not need renderer" />
            <div height="10px" />
            <listbox id="lbOne" />
            <div height="30px" />

            <label value="listbox with Person in ListModel but no renderer, cannot display data well" />
            <div height="10px" />
            <listbox id="lbTwo" />
            <div height="30px" />

            <label value="listbox with Person in ListModel and ListitemRenderer, display person data without any problem" />
            <div height="10px" />
            <listbox id="lbThree" />
        </vbox>
    </div>
</zk>

ListboxModelRendererComposer.java

After components composed, assign the model/renderer to listboxes.

package test.listbox.composer;

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.ListModel;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Listbox;

import test.data.bean.Person;
import test.listbox.renderer.PersonListitemRenderer;

/**
 * Tested with ZK 6.0.2
 * @author benbai
 *
 */
public class ListboxModelRendererComposer extends GenericForwardComposer {
    Listbox lbOne;
    Listbox lbTwo;
    Listbox lbThree;

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

        // set models and render to listbox after comopsed
        lbOne.setModel(getSimpleStringModel());
        lbTwo.setModel(getPersonModel());
        lbThree.setModel(getPersonModel());

        lbThree.setItemRenderer(new PersonListitemRenderer());
    }

    public ListModel getSimpleStringModel () {
        List l = new ArrayList();

        // simply add some Strings to a list
        // than wrap the list by a ListModelList
        l.add("data one");
        l.add("data two");
        l.add("data three");

        return new ListModelList(l);
    }
    public ListModel getPersonModel () {
        List l = new ArrayList();

        // simply add some Persons to a list
        // than wrap the list by a ListModelList
        l.add(new Person("First Name One", "Last Name One", 21));
        l.add(new Person("First Name Two", "Last Name Two", 22));
        l.add(new Person("First Name Three", "Last Name Three", 23));

        return new ListModelList(l);
    }
}

Person.java

The class that contains some attributes of a person.

package test.data.bean;

public class Person {
    private String _firstName = "";
    private String _lastName = "";
    private int _age = 1;

    public Person(String firstName, String lastName, int age) {
        _firstName = firstName;
        _lastName = lastName;
        _age = age;
    }

    public String getFirstName() {
        return _firstName;
    }
    public String getLastName() {
        return _lastName;
    }
    public String getFullName() {
        return _firstName + " " + _lastName;
    }
    public int getAge () {
        return _age;
    }
}

PersonListitemRenderer.java

Implements ListitemRenderer, used to render a Person object while render Listitem, also build listheaders.

package test.listbox.renderer;

import org.zkoss.zul.Label;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.Listhead;
import org.zkoss.zul.Listheader;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.ListitemRenderer;

import test.data.bean.Person;

/**
 * Tested with ZK 6.0.2
 * @author benbai
 *
 */
public class PersonListitemRenderer implements ListitemRenderer {
    /**
     * The method to implements of a renderer,
     * will be called by listbox automatically while render items
     */
    public void render (Listitem listitem, Object value, int index) {
        Person p = (Person)value;

        // keep value in listitem
        listitem.setValue(value);

        addListcell(listitem, p.getFirstName());
        addListcell(listitem, p.getLastName());
        addListcell(listitem, p.getAge() + "");
        addListcell(listitem, p.getFullName());

        // create list headers while render first item
        if (index == 0) {
            renderListheads(listitem.getListbox());
        }
    }
    private void addListcell (Listitem listitem, String value) {
        Listcell lc = new Listcell ();
        Label lb = new Label(value);
        lb.setParent(lc);
        lc.setParent(listitem);
    }
    private void renderListheads (Listbox listbox) {
        Listhead lh = new Listhead();

        new Listheader("First Name").setParent(lh);
        new Listheader("Last Name").setParent(lh);
        new Listheader("Age").setParent(lh);
        new Listheader("Full Name").setParent(lh);

        lh.setParent(listbox);
    }
}

The Result

Reference

http://books.zkoss.org/wiki/ZK_Component_Reference/Data/Listbox

http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/Model/List_Model

http://books.zkoss.org/wiki/ZK_Developer's_Reference/MVC/View/Renderer/Listbox_Renderer

Download

Files at github

listbox_with_model_and_renderer.zul
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/listbox_with_model_and_renderer.zul

Person.java
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/src/test/data/bean/Person.java

ListboxModelRendererComposer.java
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/src/test/listbox/composer/ListboxModelRendererComposer.java

PersonListitemRenderer.java
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/src/test/listbox/renderer/PersonListitemRenderer.java