How to Layout Components"
m (Created page with '{{ZKEssentialsPageHeader}} ==How to Layout Components== ===Taking Web Pages to a Higher Dimension with Ajax=== The content in a static web page is bounded by its page size and it…') |
m |
||
Line 30: | Line 30: | ||
|} | |} | ||
+ | ZK offers a variety layouts that incorporates these elements to bring flexible layout to our Ajax applications. We'll explore each briefly next. | ||
+ | |||
+ | ===ZK Layouts=== | ||
+ | |||
+ | ====Portal Layout==== | ||
+ | |||
+ | ====Border Layout==== | ||
+ | |||
+ | ====Table Layout==== | ||
+ | |||
+ | ====Column Layout==== | ||
+ | |||
+ | ====VLayout / HLayout==== | ||
{{ZKEssentialsPageFooter}} | {{ZKEssentialsPageFooter}} |
Revision as of 07:51, 19 October 2010
This article is out of date, please refer to http://books.zkoss.org/zkessentials-book/master/ for more up to date information.
How to Layout Components
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 layouts that incorporates these elements to bring flexible layout to our Ajax applications. We'll explore each briefly next.
ZK Layouts
Portal Layout
Border Layout
Table Layout
Column Layout
VLayout / HLayout