How to Layout Components"

From Documentation
m
m (Redirected page to ZK Essentials)
 
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
#REDIRECT [[ZK Essentials]]
 +
 
{{ZKEssentialsPageHeader}}
 
{{ZKEssentialsPageHeader}}
 
__TOC__
 
__TOC__
−
==How to Layout Components==
+
 
 
===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 11: 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]
  
−
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>
+
*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]
  
−
Refer to the following ZK Demo:
+
*Vlayout
−
* [http://www.zkoss.org/zkdemo/layout/business_portal Portal Layout]
+
**[[ZK Component Reference/Layouts/Vlayout |Component Reference]]
−
* [http://www.zkoss.org/zkdemo/layout/border_layout Border Layout]
+
**[http://www.zkoss.org/zkdemo/layout/light_boxes Demo]
−
* [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"