How to Layout Components"

From Documentation
m
m (Redirected page to ZK Essentials)
 
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
#REDIRECT [[ZK Essentials]]
 +
 
{{ZKEssentialsPageHeader}}
 
{{ZKEssentialsPageHeader}}
−
==How to Layout Components==
+
__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 having 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 the Ajax elements enabling us to this additional degrees of freedom in page layout:
+
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]]
+
||  [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]],  
+
||  [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]],  
+
||  [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]]
+
||  [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]]
+
||  [http://www.zkoss.org/zkdemo/layout/splitter Splitter], [http://www.zkoss.org/zkdemo/layout/border_layout Border Layout]
 
|-
 
|-
 
|}
 
|}
 +
<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>
 +
Please see the following references for these ZK components:<br>
 +
*Border Layout
 +
**[[ZK_Component_Reference/Layouts/Borderlayout |Component Reference]]
 +
**[http://www.zkoss.org/zkdemo/layout/border_layout Demo]
 +
 +
*Portal Layout
 +
**[[ZK_Component_Reference/Layouts/Portallayout |Component Reference]]
 +
**[http://www.zkoss.org/zkdemo/layout/business_portal Demo]
 +
 +
*Column Layout
 +
**[[ZK_Component_Reference/Layouts/Columnlayout |Component Reference]]
 +
**[http://www.zkoss.org/zkdemo/layout/column_layout Demo]
 +
 +
*Table Layout
 +
**[[ZK_Component_Reference/Layouts/Tablelayout |Component Reference]]
 +
**[http://www.zkoss.org/zkdemo/layout/table_layout Demo]
 +
 +
*Tab Box
 +
**[[ZK Component Reference/Containers/Tabbox |Component Reference]]
 +
**[http://www.zkoss.org/zkdemo/tabbox Demo]
 +
 +
*Group Box
 +
**[[ZK Component Reference/Containers/Groupbox |Component Reference]]
 +
**[http://www.zkoss.org/zkdemo/layout/group_box Demo]
  
−
ZK offers a variety of layouts to meet the demands of building diverse web applications. <br>
+
*Vlayout
−
Refer to the following ZK Demo:
+
**[[ZK Component Reference/Layouts/Vlayout |Component Reference]]
−
* [[http://www.zkoss.org/zkdemo/layout/business_portal Portal Layout]]
+
**[http://www.zkoss.org/zkdemo/layout/light_boxes Demo]
−
* [[http://www.zkoss.org/zkdemo/layout/border_layout Border Layout]]
 
−
* [[http://www.zkoss.org/zkdemo/layout/table_layout Table Layout]]
 
−
* [[http://www.zkoss.org/zkdemo/layout/column_layout Column Layout]]
 
−
* [[http://www.zkoss.org/zkdemo/layout/box Boxes]]
 
  
 +
*Hlayout
 +
**[[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:

Stop.png 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:



Last Update : 2013/03/29

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Essentials/Laying_out_Your_ZK_Components/How_to_Layout_Components&oldid=36729"