ZK Essentials/Displaying information using the Listbox/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 to 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 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 retrieve the relative item from the event using the SelectEvent.getSelectedItems() method which returns the relevant selected items. This is the only one in this case. The value is then retrieved and cast 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.