How to Layout Components"
m |
|||
| Line 1: | Line 1: | ||
{{ZKEssentialsPageHeader}} | {{ZKEssentialsPageHeader}} | ||
| + | __TOC__ | ||
==How to Layout Components== | ==How to Layout Components== | ||
===Taking Web Pages to a Higher Dimension with Ajax=== | ===Taking Web Pages to a Higher Dimension with Ajax=== | ||
| Line 30: | Line 31: | ||
|} | |} | ||
| − | ZK offers a variety of layouts to meet the demands of building diverse web applications. <br> | + | ZK offers a variety of layouts that incorporates these elements to bring flexible layout to meet the demands of building diverse web applications. Please refer to the table for references on the ZK components:<br> |
| + | |||
Refer to the following ZK Demo: | Refer to the following ZK Demo: | ||
Revision as of 04:26, 20 October 2010
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 of layouts that incorporates these elements to bring flexible layout to meet the demands of building diverse web applications. Please refer to the table for references on the ZK components:
Refer to the following ZK Demo: