Introduction

In general, when we develop a website with ZK, we divide the webpage into header, body and footer with the borderlayout. However, there are times when we can utilize a layout component such as the columnlayout to effectively make use of the space of the page layout. Unlike the borderlayout, when the height of the content is larger than the default height in case of a columnlayout, a vertical scrollbar will appear on the right side of the browser instead of the content itself.

Example Scenario

Suppose we want to create an online shopping website where users can read news about the latest items and can browse the various kinds of items easily. Finally, we also need a function that is able to show the statistics of online shoppers.

Layout

The following figure illustrates the structure and how the columnlayout is placed on screen. This particular webpage uses the columnlayout as the body part.

Live Demo

Screenshots

The following screenshots illustrates the corresponding side bar and content that’s inside the columnlayout shown in the figure above:

Layout Code

Layout’s code can be simplified as follows.

<vlayout> <div sclass="header">...</div> <columnlayout sclass="body"> <columnchildren sclass="sidebar"> ... </columnchildren> <columnchildren sclass="content"> ... </columnchildren> </columnlayout> <div sclass="footer">...</div> </vlayout>

Source: https://github.com/huangnoah/zkstore

References:

http://books.zkoss.org/wiki/Small_Talks/2008/June/Using_Columnlayout_Component

http://books.zkoss.org/wiki/ZK_Component_Reference/Layouts/Columnlayout