How to Layout Components"
m |
Tmillsclare (talk | contribs) m (Redirected page to ZK Essentials) |
||
(10 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
+ | #REDIRECT [[ZK Essentials]] | ||
+ | |||
{{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; 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 | + | 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 (<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 how the Ajax elements enable us to manage the page layout freely: |
{| border="1" | {| border="1" | ||
|- | |- | ||
Line 10: | Line 13: | ||
|| Overlay | || Overlay | ||
|| Stack contents up in a fixed area on the same page | || Stack contents up in a fixed area on the same page | ||
− | || | + | || [http://www.zkoss.org/zkdemo/tabbox Tabbox] |
|- | |- | ||
|| Folding | || Folding | ||
|| Allow "show and hide" for contents dependent on other contents | || Allow "show and hide" for contents dependent on other contents | ||
− | || | + | || [http://www.zkoss.org/zkdemo/grid/hierarchy Hierarchical Grid], [http://www.zkoss.org/zkdemo/grid/master_detail Master Detail], |
|- | |- | ||
|| Pop-up | || Pop-up | ||
|| Allow contents contained in an area to be evoked on top of its parent page with its position adjustable | || Allow contents contained in an area to be evoked on top of its parent page with its position adjustable | ||
− | || | + | || [http://www.zkoss.org/zkdemo/window/modal_dialog Modal Window], [http://www.zkoss.org/zkdemo/menu/pop-ups Pop-ups], |
|- | |- | ||
|| Collapsible / Closable | || Collapsible / Closable | ||
|| Allow contents to be hidden so page space is disclosed | || Allow contents to be hidden so page space is disclosed | ||
− | || | + | || [http://www.zkoss.org/zkdemo/layout/business_portal Portal Layout], [http://www.zkoss.org/zkdemo/layout/border_layout Border Layout] |
|- | |- | ||
|| Splittable | || Splittable | ||
|| Allow the contents area size to be adjustable | || Allow the contents area size to be adjustable | ||
− | || | + | || [http://www.zkoss.org/zkdemo/layout/splitter Splitter], [http://www.zkoss.org/zkdemo/layout/border_layout Border Layout] |
|- | |- | ||
|} | |} | ||
<br> | <br> | ||
+ | |||
+ | ===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. <br> | ZK offers a variety of layouts that incorporates these elements to bring flexible layout to meet the demands of building diverse web applications. <br> | ||
− | Please | + | Please see the following references for these ZK components:<br> |
*Border Layout | *Border Layout | ||
− | **[ | + | **[[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 | ||
− | **[ | + | **[[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 | ||
− | **[ | + | **[[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 | ||
− | **[ | + | **[[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 | ||
− | **[ | + | **[[ZK Component Reference/Containers/Tabbox |Component Reference]] |
− | |||
**[http://www.zkoss.org/zkdemo/tabbox Demo] | **[http://www.zkoss.org/zkdemo/tabbox Demo] | ||
*Group Box | *Group Box | ||
− | **[ | + | **[[ZK Component Reference/Containers/Groupbox |Component Reference]] |
− | |||
**[http://www.zkoss.org/zkdemo/layout/group_box Demo] | **[http://www.zkoss.org/zkdemo/layout/group_box Demo] | ||
*Vlayout | *Vlayout | ||
− | **[http:// | + | **[[ZK Component Reference/Layouts/Vlayout |Component Reference]] |
+ | **[http://www.zkoss.org/zkdemo/layout/light_boxes Demo] | ||
*Hlayout | *Hlayout | ||
− | **[http:// | + | **[[ZK Component Reference/Layouts/Hlayout |Component Reference]] |
+ | **[http://www.zkoss.org/zkdemo/layout/light_boxes Demo] | ||
{{ZKEssentialsPageFooter}} | {{ZKEssentialsPageFooter}} |
Latest revision as of 00:00, 29 March 2013
Redirect to:
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
- Portal Layout
- Column Layout
- Table Layout
- Tab Box
- Group Box
- Vlayout
- Hlayout