How to Layout Components"
Line 3: | Line 3: | ||
===Taking Web Pages to a Higher Dimension with Ajax=== | ===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. | 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 | + | 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 then a traditional HTML page. A clear illustration of that is the tabs (<javadoc>org.zkoss.zul.Tabbox</javadoc>) 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 that the Ajax elements enable us to manage this additional degrees of freedom in page layout: |
{| border="1" | {| border="1" | ||
|- | |- |
Revision as of 09:43, 22 June 2011
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; 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 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 that the Ajax elements enable us to manage 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 following references for these ZK components:
- Border Layout
- Portal Layout
- Column Layout
- Table Layout
- Tab Box
- Group Box
- Vlayout
- Hlayout