How to Layout Components

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

How to Layout Components

Taking Web Pages to a Higher Dimension with Ajax

The content in a static web page is bounded by its page size and its layout; introducing new information to a static web page means redirecting to a new page. With Ajax, new information and presentation could be dynamically loaded onto a page by replacing pieces of the existing DOM elements, making an Ajax enabled web page analogous to having a higher order of dimension then a traditional HTML page. A clear illustration of that is the tabs (Tabbox) widget, which allows document content to be stacked up in an area with fixed size on a single page. In the table below, we summarize the Ajax elements enabling us to this additional degrees of freedom in page layout:

Ajax Element	Usage	Demo
Overlay	Stack contents up in a fixed area on the same page	[Tabbox]
Folding	Allow "show and hide" for contents dependent on other contents	[Hierarchical Grid], [Master Detail],
Pop-up	Allow contents contained in an area to be evoked on top of its parent page with its position adjustable	[Modal Window], [Pop-ups],
Collapsible / Closable	Allow contents to be hidden so page space is disclosed	[Portal Layout], [Border Layout]
Splittable	Allow the contents area size to be adjustable	[Splitter], [Border Layout]

ZK offers a variety layouts that incorporates these elements to bring flexible layout to our Ajax applications. We'll explore each briefly next.

ZK Layouts

Portal Layout

Border Layout

Column Layout