The Final Listbox

This article is out of date, please refer to http://books.zkoss.org/zkessentials-book/master/ for more up to date information.

In the previous section, we saw how the renderer assigns UI to the items of a Listbox for UI presentation. This section explores the additional functionality come with the shopping cart view implementation.

We also need to display a picture of the product which is selected.

Displaying an image when selecting the relevant order

This functionality is the reason that the Listbox was chosen for the particular task as it provides an onSelect event when the user selects a relevant item. In this case we would like to display an item’s image in a Image component below the Listbox. The ZUL file contains the following:

Index.zul

<listbox>
	…
</listbox>
<textbox id="descTxb" rows="10" width="200px" value="Note for this order." />
<image id="cartItemImage" />

To capture the onSelect event we need to create a method with a specific signature. We use the event name followed by a $ and followed by the component name. In addition the method should take the argument of type SelectEvent. In this case the method signature would be:

public void onSelect$shoppingCartListbox(SelectEvent event){
	…
}

Then we need retieve the relative item from the event using the SelectEvent.getSelectedItems() method which returns the relevant selected items, in this case only one. The value is then retrieved and casted to a Cartitem and set as the cartitemImage’s source.

public void onSelect$shoppingCartListbox(SelectEvent event){
	Listitem item = (Listitem) new ArrayList(event.getSelectedItems()).get(0);
	CartItem cartItem = (CartItem) item.getValue();
	cartItemImage.setSrc(cartItem.getProduct().getImgPath());
}

We have explored how to use a Listbox. The next section introduces databinding with the Grid.