From Documentation

Jump to: navigation, search




  • Author
    Jumper Chen, Engineer, Potix Corporation
  • Date
    Aug 13, 2008
  • Version
    Applicable to zk-3.5.0-FL-2008-08-13 and later.



Contents

Introduction

In the previous Using Columnlayout Component, we have shown you how to use Columnlayout component. In this article, we will be guiding you how to use Portallayout, which is similar to Columnlayout and more brilliant. A portal layout is a template that defines how a set of selected portlets should appear on a page. Each personal, shared, and container page in a portal application uses a portal layout to specify how the selected portlets should be arranged on the page. Portal application keeps the user's selected portlets separate from the portal layout, so that a page layout can be changed without affecting the selected portlets.

Live Demo

Let's have a look at the real demo - iGoogle-like application.


Example in the following fragments,

...
  <portallayout>
    <portalchildren width="30%">
      <panel height="150px" title="Google Tools">
        <panelchildren>
          ...
        </panelchildren>
      </panel>
      <panel height="300px" title="LabPixies Clock">
        <panelchildren>
          ...
        </panelchildren>
      </panel>
    </portalchildren>
    <portalchildren width="30%">
      <panel height="150px" title="Google Tools">
        <panelchildren>
          ...
        </panelchildren>
    </portalchildren>
    
  </portallayout>
...

As you can see, a Portallayout can have more than one column (i.e. Portalchildren). Each Portalchildren can be specified with percentage or fixed pixel width but the height is determined by its contents. Notice that you can only put panel components in Portalchildren, but you can put other ZK components in a panel. If the column height is higer than the height of the Portallayout, it is cropped by default.

Download

Download the portallayout-demo.zip for the article here.

Summary

In this small talk, we have demonstrated you the power of Portal Layout, and it enhances the designing layout level for ZK. If you came up with any problem, please feel free to ask us on ZK forum.




Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum