ZK Essentials/Laying out Your ZK Components/How to Layout Components

Redirect to:

• ZK Essentials

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

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; for example, 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 have a higher order of dimension than 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 how the Ajax elements enable us to manage the page layout freely:

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

A Rundown on ZK's Layout Components

ZK offers a variety of layouts that incorporates these elements to bring flexible layout to meet the demands of building diverse web applications.
Please see the following references for these ZK components:

• Border Layout
  • Component Reference
  • Demo

• Portal Layout
  • Component Reference
  • Demo

• Column Layout
  • Component Reference
  • Demo

• Table Layout
  • Component Reference
  • Demo

• Tab Box
  • Component Reference
  • Demo

• Group Box
  • Component Reference
  • Demo

• Vlayout
  • Component Reference
  • Demo

• Hlayout
  • Component Reference
  • Demo