ZK Listbox: Event Processing with Renderer and MVVM

Introduction

Usually we will use template and binding data directly in listbox while using MVVM, but there are some issues such like the zul file and ViemModel might be tightly coupled by the event processing in template, or you cannot use template since some framework limitation, or your data cannot rendered by template well.

However, finally you make a decision that to use ListitemRenderer and you still need to process some events, instead of go through the 'binding vm via java code', you can also try add EventListener in ListitemRenderer and pass some custom event with required data to listbox then bind that custom event of Listbox to ViewModel.

This article will describe how to pass event to listbox from inner item.

Note: You can just ignore the 'template' and 'binding vm via java code' mentioned above, they are actually not so related to this article.

Pre-request

ZK Basic MVVM Pattern
http://ben-bai.blogspot.tw/2012/12/zk-basic-mvvm-pattern.html

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

ZK Listening/Processing Event in ZUL Page or Java Code
http://ben-bai.blogspot.tw/2012/12/zk-listeningprocessing-event-in-zul.html

Pass Event to Other Component
http://ben-bai.blogspot.tw/2012/12/pass-event-to-other-component.html

ZK Listbox: Using ListitemRenderer to Render Complex Data in Listbox
http://ben-bai.blogspot.tw/2012/12/zk-listbox-using-listitemrenderer-to.html

The Program

index.zul

In the zul file, we get model from vm, assign renderer to listbox, and execute some command in vm wile the custom onOrderEvent event of listbox is triggered.

As you can see, this is a very simple View for MVVM.

<zk>
    <!-- Tested with ZK 6.0.2 -->
    <div apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('test.viewmodel.TestVM')">
        <hbox>
            <!-- simply get itemModel from vm, use ItemRenderer
                to render items and to preprocess inner event
                and trigger orderItem event while the onOrderEvent
                custom event -->
            <listbox width="400px" model="@load(vm.itemModel)"
                itemRenderer="test.renderer.ItemRenderer"
                onOrderEvent="@command('orderItem')">
                <listhead>
                    <listheader label="Item Name" />
                    <listheader label="Available Amount" />
                    <listheader label="Order Amount" />
                    <listheader label="Order Button" />
                </listhead>    
            </listbox>
            <!-- simply get orderModel from vm, use OrderRenderer
                to render items and to preprocess inner event
                and trigger cancelOrder event while the onOrderEvent
                custom event -->
            <listbox width="400px" model="@load(vm.orderModel)"
                itemRenderer="test.renderer.OrderRenderer"
                onOrderEvent="@command('cancelOrder')">
                <listhead>
                    <listheader label="Item Name" />
                    <listheader label="Ordered Amount" />
                    <listheader label="Cancel Button" />
                </listhead>
            </listbox>
        </hbox>
    </div>
</zk>

TestVM.java

In the ViewModel, there is a Model ShoppingCart in it, and have some getter to provide model, and some command that will be triggered by OrderEvent.

As you can see, this is a very simple ViewModel for MVVM

package test.viewmodel;

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 test.data.Item;
import test.data.Order;
import test.data.ShoppingCart;
import test.event.OrderEvent;

/**
 * Tested with ZK 6.0.2
 * 
 * The VM interact with the view
 * 
 * @author benbai123
 *
 */
public class TestVM {
    ShoppingCart _cart = new ShoppingCart();

    public ListModel<Item> getItemModel () {
        return _cart.getItemModel();
    }
    public ListModel<Order> getOrderModel () {
        return _cart.getOrderModel();
    }
    @Command
    @NotifyChange({"itemModel", "orderModel"})
    public void orderItem (
            @ContextParam(ContextType.TRIGGER_EVENT) OrderEvent event) {
        _cart.orderItem(event);
    }
    @Command
    @NotifyChange({"itemModel", "orderModel"})
    public void cancelOrder (
            @ContextParam(ContextType.TRIGGER_EVENT) OrderEvent event) {
        _cart.cancelOrder(event);
    }
}

Item.java

Contains information of an item

package test.data;

/**
 * Item class contains item name and amount
 * @author benbai123
 *
 */
public class Item {
    private String _itemName;
    private int _amount;

    public Item (String itemName, int amount) {
        _itemName = itemName;
        _amount = amount;
    }
    public String getItemName () {
        return _itemName;
    }
    public void setAmount (int amount) {
        _amount = amount;
    }
    public int getAmount () {
        return _amount;
    }
}

Order.java

Contains information of an order.

package test.data;

/**
 * Order class contains item (the Item class) and item index
 * (item index received while order that item) 
 * @author benbai123
 *
 */
public class Order {
    private Item _item;
    private int _itemIndex;

    public Order (Item item, int itemIndex) {
        _item = item;
        _itemIndex = itemIndex;
    }
    public Item getItem () {
        return _item;
    }
    public int getItemIndex () {
        return _itemIndex;
    }
}

ShoppingCart.java

Contains a list of item and a list of order, also handle the 'order item' and 'cancel order' in it.

package test.data;

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

import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

import test.event.OrderEvent;

/**
 * The shoppingcart contains the item model and order model
 * also handle the orderItem and cancelOrder here
 * 
 * @author benbai123
 *
 */
public class ShoppingCart {
    private ListModelList<Item> _itemModel;
    private ListModelList<Order> _orderModel;

    public ListModel<Item> getItemModel () {
        if (_itemModel == null) {
            List<Item> items = new ArrayList<Item>();
            items.add(new Item("Item One", 5));
            items.add(new Item("Item Two", 3));
            items.add(new Item("Item Three", 10));
            _itemModel = new ListModelList<Item>(items);
        }
        return _itemModel;
    }
    public ListModel<Order> getOrderModel () {
        if (_orderModel == null) {
            _orderModel = new ListModelList<Order>(new ArrayList<Order>());
        }
        return _orderModel;
    }

    public void orderItem (OrderEvent event) {
        addOrder (event.getItemName(), event.getAmount(), event.getItemIndex());
        decreaseItemAmount (event.getItemIndex(), event.getAmount());
    }

    public void cancelOrder (OrderEvent event) {
        removeOrder (event.getItemName());
        increaseItemAmount (event.getItemIndex(), event.getAmount());
    }
    private void decreaseItemAmount (int index, int amount) {
        Item item = _itemModel.getElementAt(index);
        item.setAmount(item.getAmount() - amount);
    }
    private void increaseItemAmount (int index, int amount) {
        Item item = _itemModel.getElementAt(index);
        item.setAmount(item.getAmount() + amount);
    }
    private void addOrder (String itemName, int amount, int itemIndex) {
        Order order = getOrderByName(itemName);
        if (order != null) {
            Item item = order.getItem();
            item.setAmount(item.getAmount() + amount);
        } else {
            order = new Order(new Item(itemName, amount), itemIndex);
            _orderModel.add(order);
        }
    }
    private void removeOrder (String itemName) {
        Order order = getOrderByName(itemName);;
        if (order != null) {
            _orderModel.remove(order);
        }
    }
    private Order getOrderByName (String itemName) {
        int size = _orderModel.getSize();
        Order order;
        for (int i = 0; i < size; i++) {
            order = _orderModel.getElementAt(i);
            if (itemName.equals(order.getItem().getItemName())) {
                return order;
            }
        }
        return null;
    }
}

ItemRenderer.java

Renderer to render a list of Item.

The order button will process the onClick event itself, and pass the OrderEvent with required data to listbox as needed. This let us only need to face the event we are interested (the OrderEvent of the Item List) instead of face all button click then handle all situation in ViewModel.

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.util.Clients;

import org.zkoss.zul.Button;
import org.zkoss.zul.Intbox;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.ListitemRenderer;
import org.zkoss.zul.Listitem;

import test.data.Item;
import test.event.OrderEvent;

/**
 * Tested with ZK 6.0.2
 * 
 * ItemRenderer render Item class to listitem
 * @author benbai123
 *
 */
public class ItemRenderer implements ListitemRenderer<Item> {
    @SuppressWarnings({ "unchecked", "rawtypes" })
    public void render (final Listitem listitem, final Item data, final int index) {
        final Listbox lb = listitem.getListbox();
        // item name and available amount
        new Listcell(data.getItemName()).setParent(listitem);
        new Listcell(data.getAmount() + "").setParent(listitem);

        // intbox for input the amount to order
        Listcell lc = new Listcell();
        final Intbox intbox = new Intbox();
        intbox.setParent(lc);
        lc.setParent(listitem);

        // button to perform the order action
        lc = new Listcell();
        Button orderBtn = new Button("Order Item");
        orderBtn.addEventListener(Events.ON_CLICK, new EventListener() {
            public void onEvent (Event event) {
                // if the value is not grater zero or over the available amount
                // show alert message
                int amount = intbox.getValue() == null? 0 : intbox.getValue();
                if (amount <= 0) {
                    Clients.alert(" positive value only");
                } else if (amount > data.getAmount()) {
                    Clients.alert(" over available amount ");
                } else {
                    // post an OrderEvent to listbox
                    // to inform order action with the
                    // item name and the amount to order
                    Item item = new Item(data.getItemName(), amount);
                    Events.postEvent(OrderEvent.getOrderEvent(lb, item, index));
                }
            }
        });
        orderBtn.setParent(lc);
        lc.setParent(listitem);
    }
}

OrderRenderer.java

Renderer to render a list of Order.

Similar to the order button, the cancel button will process the onClick event itself, and pass the OrderEvent with required data to listbox as needed.

package test.renderer;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;

import org.zkoss.zul.Button;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;

import test.data.Item;
import test.data.Order;
import test.event.OrderEvent;

/**
 * Tested with ZK 6.0.2
 * 
 * OrderRenderer render Order class to listitem
 * @author benbai123
 *
 */
public class OrderRenderer implements ListitemRenderer<Order> {
    @SuppressWarnings({ "unchecked", "rawtypes" })
    public void render (final Listitem listitem, final Order data, final int index) {
        final Listbox lb = listitem.getListbox();

        // get item from order
        Item item = data.getItem();
        // item name and ordered amount
        new Listcell(item.getItemName()).setParent(listitem);
        new Listcell(item.getAmount() + "").setParent(listitem);

        // button to perform the cancel action
        Listcell lc = new Listcell();
        Button cancelBtn = new Button("Cancel Order");
        cancelBtn.addEventListener(Events.ON_CLICK, new EventListener() {
            public void onEvent (Event event) {
                // post an OrderEvent to listbox
                // to inform cancel action with the
                // item name and the ordered amount to restore
                Events.postEvent(
                    OrderEvent.getOrderEvent(lb, data.getItem(), data.getItemIndex())
                );
            }
        });
        cancelBtn.setParent(lc);
        lc.setParent(listitem);
    }
}

OrderEvent.java

Contains the data of an order for both to order item or to cancel order.

package test.event;

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

import test.data.Item;

/**
 * Tested with ZK 6.0.2
 * @author benbai123
 *
 */
public class OrderEvent extends Event {
    private static final long serialVersionUID = 3645653880934243558L;

    private final String _itemName;
    // itemIndex denotes the index to restore the amount
    private final int _itemIndex;
    private final int _amount;

    public static OrderEvent getOrderEvent (Component target, Item data, int index) {
        return new OrderEvent("onOrderEvent", target, data.getItemName(), index, data.getAmount());
    }
    public OrderEvent (String name, Component target, String itemName, int itemIndex, int amount) {
        super(name, target);
        _itemName = itemName;
        _itemIndex = itemIndex;
        _amount = amount;
    }
    public String getItemName () {
        return _itemName;
    }
    public int getItemIndex () {
        return _itemIndex;
    }
    public int getAmount () {
        return _amount;
    }
}

The Result

View demo online
http://screencast.com/t/XZNxVOzbs

Extended Reading

http://stackoverflow.com/questions/13818305/pure-java-binding-in-zk-listbox-with-itemrenderer

http://www.zkoss.org/forum/listComment/20938-Listbox-using-template-how-can-I-get-the-previous-row-so-can-use-in-logic-for-current-row

Download

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

Full project at github
https://github.com/benbai123/ZK_Practice/tree/master/Pattern/MVVM/RendererWithMVVM