Theme:
Processing...
Description & Source Code

The Auto Paging feature determines the page size based on the dynamic height of the Grid component; ridding developers the need to specify the page size for the Grid. This feature is also built-in in the Listbox component.

auto_paging.zul
<panel id="container" height="400px" apply="demo.grid.auto_paging.AutoPagingController">
	<panelchildren>
		<grid id="demoGrid" mold="paging" pagingPosition="both"
			model = "${$composer.allPurchases}"
			autopaging="true" vflex="true">
			<columns>
				<column width="80px" label="Order #" align="left" />
				<column label="Item Purchased" align="center" />
				<column label="Purchased Time" align="center" />
				<column width="80px" label="Paid" align="center" />
			</columns>
			<template name="model">
				<row>
					<label value="${each.id}" />
					<label value="${each.item}" />
					<timebox value="${each.time}" 
						disabled="true" cols="12" format="a hh:mm:ss" mold="rounded" />
					<checkbox checked="${each.paid}" disabled="true"/>
				</row>
			</template>
		</grid>
	</panelchildren>
</panel>
auto_paging_config.zul
<zk>
	<zscript><![CDATA[
		void changeHeight(String height){
			container.height = height;
		}
		void changeMold(String mold){
			demoGrid.pagingChild.mold = mold;
		}
	]]></zscript>
	<vlayout>
		<radiogroup onCheck="changeHeight(self.selectedItem.label)">
			<vbox>
			<label value="Select Container's Height"/>
			<radio label="200px" />
			<radio label="300px" />
			<radio label="400px" checked="true" />
			<radio label="500px" />
			<radio label="600px" />
			</vbox>
		</radiogroup>		
	</vlayout>
	<separator height="10px"/>
	<radiogroup onCheck="changeMold(self.selectedItem.label)">
		<vbox>
			<label value="Select a Mold for the Paging:"/>
			<radio label="default" checked="true" />
			<radio label="os" />
		</vbox>
	</radiogroup>
</zk>
AutoPagingController.java
package demo.grid.auto_paging;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zul.ListModelList;

import demo.data.Purchase;
import demo.data.PurchaseData;

public class AutoPagingController extends SelectorComposer<Component>{
	private static final long serialVersionUID = 1L;
	
	private PurchaseData data = new PurchaseData();
	private ListModelList<String> availableItems;
	
	public AutoPagingController(){
		availableItems = new ListModelList<String>(data.getAvailableItems());
	}
	
	public ListModelList<Purchase> getAllPurchases() {
		return new ListModelList<Purchase>(data.getAllPurchases());
	}
	
	public ListModelList<String> getAvailableItems() {
		return availableItems;
	}
}
PurchaseData.java
package demo.data;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Random;

public class PurchaseData {
	
	private final List<String> availableItems = new ArrayList<String>();
	
	private List<Purchase> allPurchases = new ArrayList<Purchase>();
	private int TOTAL_PURCHASES = 25;
	private Random randomGenerator = new Random();
	
	public PurchaseData() {
		availableItems.add("Java");
		availableItems.add("Latte");
		availableItems.add("Lungo");
		availableItems.add("Macchiato");
		availableItems.add("Mocha");
		generatePurchases();
	}
	
	
	public List<Purchase> getAllPurchases() {
		return this.allPurchases;
	}
	
	public List<String> getAvailableItems() {
		return availableItems;
	}
	
	private void generatePurchases() {
		for(int i=0; i<TOTAL_PURCHASES; i++) {
			int id = (i + 101);
			String purchasedItem = availableItems.get(randomGenerator.nextInt(availableItems.size()));
			Date randomDate = new Date(Math.abs(System.currentTimeMillis() - randomGenerator.nextInt(1000000)));
			boolean paid = randomGenerator.nextBoolean();
			allPurchases.add(new Purchase(id, purchasedItem, randomDate, paid));
		}
	}
}
Purchase.java
package demo.data;

import java.util.Date;

public class Purchase {
	private int id;
	private String item;
	private Date time;
	private boolean paid;
	
	public Purchase(int orderId, String orderItem, Date purchaseTime, boolean paid) {
		this.id = orderId;
		this.item = orderItem;
		this.time = purchaseTime;
		this.paid = paid;
	}

	public int getId() {
		return id;
	}

	public void setId(int orderId) {
		this.id = orderId;
	}

	public String getItem() {
		return item;
	}

	public void setItem(String orderedItem) {
		this.item = orderedItem;
	}

	public Date getTime() {
		return time;
	}

	public void setTime(Date purchaseTime) {
		this.time = purchaseTime;
	}

	public boolean isPaid() {
		return paid;
	}

	public void setPaid(boolean paid) {
		this.paid = paid;
	}

}