ZK Essentials/Displaying Information Using Grid/The Final Grid

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

The Final Grid

File:Product view.png

In the previous section, we saw how the renderer assigns UI components (for example, Image and Label) into rows of a Grid for UI presentation.
ProductViewCtrl.java - Rendering Rows

public void doAfterCompose(Component comp) throws Exception {
		...
		prodGrid.setRowRenderer(new RowRenderer() {
			public void render(Row row, Object data) throws Exception {
				final Product prod = (Product)data;
				
				Image img = new Image(prod.getImgPath());
				img.setWidth("70px");
				img.setHeight("70px");
				img.setParent(row);
				new Label(prod.getName()).setParent(row);
				new Label(""+prod.getPrice()).setParent(row);
				new Label(""+prod.getQuantity()).setParent(row);
				new Label(YYYY_MM_DD_hh_ss.format(prod.getCreateDate())).setParent(row);
				initOperation(prod).setParent(row);
			}
			...
			
		});
	}

The last column contains a Cell component (returned by the method initOperation) which allows end users to ADD items to be purchased. In this section, we'll look into the implementation of this functionality which fulfills the requirements for the Product View Grid.
ProductViewCtrl.java - Implementation for "Adding" Items to Purchase

        private Cell initOperation(final Product prod){
		         Cell cell = new Cell();
		         final Spinner spinner = new Spinner(1);
		         spinner.setConstraint("min 1 max "+prod.getQuantity());
		         spinner.setParent(cell);
				
		         Button button = new Button("add");
		         button.setImage("/image/ShoppingCart-16x16.png");
		         button.setParent(cell);
				
		         final Label errorLb = new Label();
		         errorLb.setParent(cell);
				
		         button.addEventListener(ON_CLICK, new EventListener() {
			     public void onEvent(Event event) throws Exception {
			     ShoppingCartCtrl ctrl = ShoppingCartViewCtrl.getInstance(desktop);
			     try{
				 ctrl.addItem(prod, spinner.getValue());	
				 errorLb.setValue("");
			     }catch(WrongValueException e){
				 errorLb.setValue(e.getMessage());
			     }
			     }
			});
			return cell;
			}

The Cell Component

In the initOperation method, Spinner and Button are created programmatically to allow end users to select and submit the quantity of the items to be purchased; the Cell is set as the parent component for these components, serving as a container.

Setting Constraints for an Input UI Component

All ZK components implementing the InputElement interface can call the InputElement.setConstraint(String constr) method to set an upper and lower bound on the allowable input value. For instance, value selected for the Spinner component is only meaningful if it's between 1 and the quantity remained in stock for each product; hence, we could cal the setConstraint to impose the allowable range:

spinner.setConstraint("min 1 max "+prod.getQuantity());

This convenient method offers us an easy way to impose a simple validation mechanism for the input components such as Textbox, Intbox, Datebox, and Combobox.

Registering an Event Listener

When users click the "add" button, we need to verify whether the quantity from all orders combined does not exceed the quantity in stock for each product. Since we are creating the button here programmatically, we'll need to add an event listener manually, as oppose to making button declaration in ZUL and rely on the GenericForwardComposer facilitate this process.

        private Cell initOperation(final Product prod){
			...
		         Button button = new Button("add");
				
		         button.addEventListener(ON_CLICK, new EventListener() {
			     public void onEvent(Event event) throws Exception {
			     //event handling code here...
			});
			return cell;
			}

Utilizing Session Scope Attributes

        private Cell initOperation(final Product prod){
		         ...
		         Button button = new Button("add");
		         ...	
		         final Label errorLb = new Label();
		         ...
				
		         button.addEventListener(ON_CLICK, new EventListener() {
			     public void onEvent(Event event) throws Exception {
			     ShoppingCartCtrl ctrl = ShoppingCartViewCtrl.getInstance(desktop);
			     try{
				 ctrl.addItem(prod, spinner.getValue());	
				 errorLb.setValue("");
			     }catch(WrongValueException e){
				 errorLb.setValue(e.getMessage());
			     }
			     }
			});
			return cell;
			}