How to Layout Components"
From Documentation
m |
m |
||
| Line 1: | Line 1: | ||
{{ZKEssentialsPageHeader}} | {{ZKEssentialsPageHeader}} | ||
__TOC__ | __TOC__ | ||
| − | |||
===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. | ||
| Line 34: | Line 33: | ||
Please refer to the following references for these ZK components:<br> | Please refer to the following references for these ZK components:<br> | ||
*Border Layout | *Border Layout | ||
| − | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/The_Layout_Components | + | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/The_Layout_Components Developer's Guide] |
| + | **[http://books.zkoss.org/wiki/ZK_Component_Reference/Layouts/Borderlayout Component Reference] | ||
**[http://www.zkoss.org/zkdemo/layout/border_layout Demo] | **[http://www.zkoss.org/zkdemo/layout/border_layout Demo] | ||
*Portal Layout | *Portal Layout | ||
| − | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/More_Layout_Components#Portallayout | + | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/More_Layout_Components#Portallayout Developer's Guide] |
| + | **[http://books.zkoss.org/wiki/ZK_Component_Reference/Layouts/Portallayout Component Reference] | ||
**[http://www.zkoss.org/zkdemo/layout/business_portal Demo] | **[http://www.zkoss.org/zkdemo/layout/business_portal Demo] | ||
*Column Layout | *Column Layout | ||
| − | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/More_Layout_Components#Portallayout | + | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/More_Layout_Components#Portallayout Developer's Guide] |
| + | **[http://books.zkoss.org/wiki/ZK_Component_Reference/Layouts/Columnlayout Component Reference] | ||
**[http://www.zkoss.org/zkdemo/layout/column_layout Demo] | **[http://www.zkoss.org/zkdemo/layout/column_layout Demo] | ||
*Table Layout | *Table Layout | ||
| − | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/More_Layout_Components#Portallayout | + | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/More_Layout_Components#Portallayout Developer's Guide] |
| + | **[http://books.zkoss.org/wiki/ZK_Component_Reference/Layouts/Tablelayout Component Reference] | ||
**[http://www.zkoss.org/zkdemo/layout/table_layout Demo] | **[http://www.zkoss.org/zkdemo/layout/table_layout Demo] | ||
*Tab Box | *Tab Box | ||
| − | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/Tab_Boxes Documentation] | + | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/Tab_Boxes Developer's Guide] |
| + | **[http://books.zkoss.org/index.php?title=ZK%20Component%20Reference/Containers/Tabbox Documentation] | ||
**[http://www.zkoss.org/zkdemo/tabbox Demo] | **[http://www.zkoss.org/zkdemo/tabbox Demo] | ||
*Group Box | *Group Box | ||
| − | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/More_Layout_Components#Group_boxes | + | **[http://books.zkoss.org/wiki/ZK_Developer's_Guide/ZUL_Components/Layout_and_Windows/More_Layout_Components#Group_boxes Developer's Guide] |
| + | **[http://books.zkoss.org/index.php?title=ZK%20Component%20Reference/Containers/Groupbox Component Reference] | ||
**[http://www.zkoss.org/zkdemo/layout/group_box Demo] | **[http://www.zkoss.org/zkdemo/layout/group_box Demo] | ||
| + | *Vlayout | ||
| + | **[http://books.zkoss.org/index.php?title=ZK%20Component%20Reference/Layouts/Vlayout Component Reference] | ||
| + | |||
| + | *Hlayout | ||
| + | **[http://books.zkoss.org/index.php?title=ZK%20Component%20Reference/Layouts/Hlayout Component Reference] | ||
{{ZKEssentialsPageFooter}} | {{ZKEssentialsPageFooter}} | ||
Revision as of 08:45, 28 October 2010
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 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 following references for these ZK components:
- Border Layout
- Portal Layout
- Column Layout
- Table Layout
- Tab Box
- Group Box
- Vlayout
- Hlayout