ZK Listbox: Inplace Editing with Renderer and MVVM

Introduction

This article describe how to implement the inplace editing with renderer in MVVM.

Pre-request

ZK Listbox: Event Processing with Renderer and MVVM
http://ben-bai.blogspot.tw/2012/12/zk-listbox-event-processing-with.html

The Program

index.zul

A simple View that get/set value from ViewModel and trigger some Command as needed.

<zk>
    <!-- Tested with ZK 6.0.2 -->
    <div apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('test.viewmodel.TestVM')">
        <hlayout>
            <vlayout>
                <listbox width="400px" model="@load(vm.personModel)"
                    selectedIndex="@bind(vm.selectedIndex)"
                    itemRenderer="test.renderer.InplaceEditingPersonRenderer"
                    onModelDataChange="@command('updateModelData')">
                </listbox>
                <hlayout>
                    <button label="show current data" onClick="@command('displayCurrentData')" />
                    <button label="add new" onClick="@command('addNew')" />
                    <button label="delete selected" onClick="@command('delSel')" />
                </hlayout>
            </vlayout>
            <textbox rows="10" width="350px" value="@load(vm.currentData)" />
        </hlayout>
    </div>
</zk>

TestVM.java

Provide data and handle data changed event as needed.

package test.viewmodel;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

import test.data.Person;
import test.event.ModelDataChangeEvent;

/**
 * tested with ZK 6.0.2
 * @author ben
 *
 */
public class TestVM {
    private ListModelList<Person> _personModel;
    private int _selectedIndex = -1;
    /**
     * The hard coded person model
     * @return ListModelList contains several Person
     */
    public ListModel<Person> getPersonModel () {
        if (_personModel == null) {
            List<Person> l = new ArrayList<Person>();
            l.add(new Person("First Name One", "Last Name One", 21));
            l.add(new Person("First Name Two", "Last Name Two", 23));
            l.add(new Person("First Name Three", "Last Name Three", 25));
            _personModel = new ListModelList<Person>(l);
        }
        return _personModel;
    }
    /**
     * save the selected index while select a listitem
     * @param selectedIndex
     */
    public void setSelectedIndex (int selectedIndex) {
        _selectedIndex = selectedIndex;
    }
    /**
     * update selected index while delSel
     * @return
     */
    public int getSelectedIndex () {
        return _selectedIndex;
    }
    /**
     * return all Persons' data, can be considered as "save data"
     * @return
     */
    public String getCurrentData () {
        StringBuilder sb = new StringBuilder("");
        if (_personModel != null) {
            if (_selectedIndex >= 0) {
                Person p = _personModel.getElementAt(_selectedIndex);
                if (isValidPerson(p)) {
                    sb.append("Selected Person: \r\n")
                        .append(p.getFirstName()).append(" ")
                        .append(p.getLastName()).append(", age = ")
                        .append(p.getAge()).append("\r\n\r\n");
                }
            }
            for (Person p : _personModel.getInnerList()) {
                if (isValidPerson(p)) {
                    sb.append(p.getFirstName()).append(" ")
                        .append(p.getLastName()).append(", age = ")
                        .append(p.getAge()).append("\r\n");
                }
            }
        }
        return sb.toString();
    }
    /**
     * add a new Person to _personModel,
     * added to tail if no selected index,
     * added below current selected item if selected idnex >= 0
     */
    @Command
    public void addNew () {
        if (_selectedIndex >= 0) {
            _personModel.add(_selectedIndex+1, new Person("", "", null));
        } else {
            _personModel.add(new Person("", "", null));
        }
    }
    /**
     * remove selected Person from model
     */
    @Command
    @NotifyChange("_selectedIndex")
    public void delSel () {
        if (_selectedIndex >= 0) {
            _personModel.remove(_selectedIndex);
            _selectedIndex = -1;
        }
    }
    /**
     * update the value of a Person based on the index and Data
     * in the ModelDataChangeEvent
     * @param event ModelDataChangeEvent contains the information with respect the index and changed data
     */
    @Command
    public void updateModelData (
            @ContextParam(ContextType.TRIGGER_EVENT) ModelDataChangeEvent event) {
        Person oldPerson = _personModel.get(event.getIndex());;
        Person newPerson = (Person)event.getData();
        oldPerson.setFirstName(newPerson.getFirstName());
        oldPerson.setLastName(newPerson.getLastName());
        oldPerson.setAge(newPerson.getAge());
    }
    /**
     * simply notify that the currentData should be updated
     */
    @Command
    @NotifyChange("currentData")
    public void displayCurrentData () {

    }
    /**
     * confirm all fields of a Person is valid
     * @param p the Person to check
     * @return whether all fields of the Person is valid
     */
    private boolean isValidPerson (Person p) {
        return !(p.getFirstName() == null
                || p.getFirstName().isEmpty()
                || p.getLastName() == null
                || p.getLastName().isEmpty()
                || p.getAge() == null
                || p.getAge() < 0);
    }
}

InplaceEditingPersonRenderer.java

Render listheaders and listitems, initial sorting, the inner textbox/intbox will handle the onChange event and pass it to listbox as needed.

package test.renderer;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zul.Intbox;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listhead;
import org.zkoss.zul.Listheader;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;
import org.zkoss.zul.Textbox;

import test.data.Person;
import test.data.PersonComparator;
import test.event.ModelDataChangeEvent;

/**
 * tested with ZK 6.0.2
 * @author ben
 *
 */
public class InplaceEditingPersonRenderer implements ListitemRenderer<Person> {
    @SuppressWarnings("unchecked")
    /**
     * render Person to a listitem
     */
    public void render (Listitem listitem, Person data, int index) {
        Listbox listbox = listitem.getListbox();
        if (index == 0 && listbox.getListhead() == null) {
            createListhead().setParent(listbox);
        }
        listitem.setValue(data);

        addTextboxCell(listitem, data.getFirstName())
            .addEventListener(Events.ON_CHANGE, getFirstnameChangedListener(listbox, data, listitem));
        addTextboxCell(listitem, data.getLastName())
            .addEventListener(Events.ON_CHANGE, getLastnameChangedListener(listbox, data, listitem));
        Intbox ibx = addIntboxCell(listitem, data.getAge());
        ibx.addEventListener(Events.ON_CHANGE, getAgeChangedListener(listbox, ibx, data, listitem));
    }
    /**
     * create listhead
     * @param listbox, append the listhead to it
     */
    private Listhead createListhead () {

        Listhead lh = new Listhead();
        createListheader("First Name", "firstName").setParent(lh);
        createListheader("Last Name", "lastName").setParent(lh);
        createListheader("Age", "age").setParent(lh);
        return lh;
    }
    /**
     * create a listheader
     * @param label the label of the listheader
     * @param fieldToCompare the value to set to PersonComparator's 'field' field
     * @return
     */
    private Listheader createListheader (String label, String fieldToCompare) {
        Listheader lhr = new Listheader(label);
        lhr.setSortAscending(new PersonComparator(true, fieldToCompare));
        lhr.setSortDescending(new PersonComparator(false, fieldToCompare));
        return lhr;
    }
    /**
     * add a listcell contains a textbox and return the textbox
     * @param listitem the listitem to append this listcell
     * @param value the value to set to the textbox
     * @return Textbox the created textbox
     */
    private Textbox addTextboxCell (Listitem listitem, String value) {
        Listcell lc = new Listcell();
        Textbox tbx = new Textbox(value);
        tbx.setParent(lc);
        lc.setParent(listitem);
        return tbx;
    }
    /**
     * add a listcell contains an intbox and returh the intbox
     * @param listitem the listitem to append this listcell
     * @param value the value to set to the intbox
     * @return Intbox the created intbox
     */
    private Intbox addIntboxCell (Listitem listitem, Integer value) {
        Listcell lc = new Listcell();
        Intbox ibx = new Intbox();
        if (value != null) {
            ibx.setValue(value);
        }
        ibx.setParent(lc);
        lc.setParent(listitem);
        return ibx;
    }
    /**
     * The EventListener for firstName changed
     * @param listbox the listbox, post event to it
     * @param oldData the original Person, need the lastName and age of it
     * @param listitem the listitem contains the textbox of this event, need the index of it
     * @return EventListener that listen to firstName changed
     */
    @SuppressWarnings("rawtypes")
    private EventListener getFirstnameChangedListener (final Listbox listbox, final Person oldData, final Listitem listitem) {
        return new EventListener () {
            public void onEvent (Event event) {
                InputEvent ievent = (InputEvent)event;
                Events.postEvent(ModelDataChangeEvent
                    .getModelDataChangeEvent(listbox,
                        new Person(ievent.getValue(), oldData.getLastName(), oldData.getAge()),
                        listitem.getIndex()));
            }
        };
    }
    /**
     * The EventListener for lastName changed
     * @param listbox the listbox, post event to it
     * @param oldData the original Person, need the firstName and age of it
     * @param listitem the listitem contains the textbox of this event, need the index of it
     * @return EventListener that listen to lastName changed
     */
    @SuppressWarnings("rawtypes")
    private EventListener getLastnameChangedListener (final Listbox listbox, final Person oldData, final Listitem listitem) {
        return new EventListener () {
            public void onEvent (Event event) {
                InputEvent ievent = (InputEvent)event;
                Events.postEvent(ModelDataChangeEvent
                    .getModelDataChangeEvent(listbox,
                        new Person(oldData.getFirstName(), ievent.getValue(), oldData.getAge()),
                        listitem.getIndex()));
            }
        };
    }
    /**
     * The EventListener for age changed
     * @param listbox the listbox, post event to it
     * @param oldData the original Person, need the firstName and lastName of it
     * @param listitem the listitem contains the intbox of this event, need the index of it
     * @return EventListener that listen to age changed
     */
    @SuppressWarnings("rawtypes")
    private EventListener getAgeChangedListener (final Listbox listbox, final Intbox intbox, final Person oldData, final Listitem listitem) {
        return new EventListener () {
            public void onEvent (Event event) {
                Events.postEvent(ModelDataChangeEvent
                    .getModelDataChangeEvent(listbox,
                        new Person(oldData.getFirstName(), oldData.getLastName(), intbox.getValue()),
                        listitem.getIndex()));
            }
        };
    }
}

ModelDataChangeEvent.java

Contains the changed data and the index to apply this change in it.

package test.event;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;

/**
 * tested with ZK 6.0.2
 * @author ben
 *
 */
public class ModelDataChangeEvent extends Event {
    private static final long serialVersionUID = 3645653880934243558L;

    // the changed data, can be any Object
    private final Object _data;
    // the index to apply this change
    private int _index;

    /**
     * Get a ModelDataChangeEvent
     * @param target the target to post this event
     * @param data the changed data
     * @param index the index to apply this change
     * @return ModelDataChangeEvent
     */
    public static ModelDataChangeEvent getModelDataChangeEvent (Component target, Object data, int index) {
        return new ModelDataChangeEvent("onModelDataChange", target, data, index);
    }
    /**
     * 
     * @param name event name, should starts with "on"
     * @param target
     * @param data
     * @param index
     */
    public ModelDataChangeEvent (String name, Component target, Object data, int index) {
        super(name, target);
        _data = data;
        _index = index;
    }
    public Object getData () {
        return _data;
    }
    public int getIndex () {
        return _index;
    }
}

Person.java

Contains some fields of a Person, simple POJO.

package test.data;

public class Person {
    private String _firstName;
    private String _lastName;
    private Integer _age;

    public Person (String firstName, String lastName, Integer age) {
        _firstName = firstName;
        _lastName = lastName;
        _age = age;
    }
    public void setFirstName (String firstName) {
        _firstName = firstName;
    }
    public void setLastName (String lastName) {
        _lastName = lastName;
    }
    public void setAge (Integer age) {
        _age = age;
    }
    public String getFirstName () {
        return _firstName;
    }
    public String getLastName () {
        return _lastName;
    }
    public Integer getAge () {
        return _age;
    }
}

PersonComparator.java

Use it to compare two person, on specific field, in ascending or descending way.

package test.data;

import java.util.Comparator;

/**
 * the Comparator to compare a Person of fields firstName,
 * lastName or age in ascending or descending order
 * @author ben
 *
 */
public class PersonComparator implements Comparator<Person> {
    private boolean _asc;
    private String _field;

    /**
     * Constructor
     * @param asc true: ascending, false: descending
     * @param field to compare, firstName, lastName or age
     */
    public PersonComparator (boolean asc, String field) {
        _asc = asc;
        _field = field;
    }
    /**
     * compare two person
     */
    public int compare(Person p1, Person p2) {
        int result = 0,
            mult =  _asc ? 1 : -1;
        result = "firstName".equals(_field)?
                    p1.getFirstName().compareTo(p2.getFirstName()) * mult
                : "lastName".equals(_field)?
                    p1.getLastName().compareTo(p2.getLastName()) * mult
                : "age".equals(_field)?
                    compareAge(p1.getAge(), p2.getAge()) * mult
                : 0;
        return result;
    }
    /**
     * function for compare age
     */
    private int compareAge (Integer a1, Integer a2) {
        int a = (a1 == null || a1 < 0)? 0 : a1.intValue();
        int b = (a2 == null || a2 < 0)? 0 : a2.intValue();
        return a > b? 1
                : a < b? -1
                : 0;
    }
}

The Result

View demo on line
http://screencast.com/t/YhtUpCtDW

Download

Project at github
https://github.com/benbai123/ZK_Practice/tree/master/Pattern/MVVM/ListboxMVVMInplaceEditing

Demo flash
https://github.com/benbai123/ZK_Practice/blob/master/demo_src/swf/Pattern/MVVM/Renderer_MVVM_Inplace_Editing.swf