Using ZK Borderlayout

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

Using ZK Border Layout

Suppose in our shopping cart application, we have the following requirements:

The borderlayout divides a page into five sections: North, East, Center, West, South.

The attributes involved in the configuration of border layout is listed in the table below:

Attributes	Sample	Description
size	<north size="20%">...</north> <south size="180px">...</south>	set size in pixels or a percentage relative to its parent component
border	<east border="normal">...</east>	show/hide border; "normal" shows border, while "none" hides border
collapsible	<west collapsible="true">...</west>	allow the whole division to show/hide
maxsize/minsize	<south splitter="true" maxsize="500px" minisize="200px">...</south>	set the maximum and minimum allowable size for a component;
splittable	<north splittable="true">...</north>	allow the contents area size to be adjustable

Some rules to oblige to when working with the border layout:

The center component does not take size attributes; its height is dependent on the north and south components, while its width is dependent on the east and west components
Each children component of borderlayout, ie. north, east, center, west, and south, are allowed only one child component; therefore, wrap multiple components in container components such as
or <window> when placing them in borderlayout's children components.
The borderlayout component itself (not its children: north, west, etc..) do not have the "border" attribute

Border Layout stands out as the obvious choice because it supports:

splittable, so we could adjust the dimensions of the views by dragging the splitters.
collapsible, so views could be collapsed to make room for other views.

Using the Borderlayout, we could outline the shopping cart application like the following:

Last Update : 2010/10/20