Latest

Working with Portal Layouts

Jumper Chen, Engineer, Potix Corporation
Aug 13, 2008

Version

Applicable to zk-3.5.0-FL-2008-08-13 and later.

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.

Comments

hw_alex

2008-08-13

非常棒的组件

Ichiro

2008-08-14

I love it!

2008-08-14

That is a great new tool, very nicely implemented.

simon

2008-08-16

i was very impressed by the new bbc.co.uk front page that has something similar with javascript enabled drag and drop 'virtual portlets'. it is very impressive to see zk have such a thing now which is so easy to impliment without a heavy jsr168 backend ('real portlets').

it was not long ago that the company that i work for started paying millions of dollars a year to run ibm portal server for their 15000 user intranet site without ajax and cross browser javascript. i hope that they will turn off those very expensive and overloaded servers and rewrite their intranet with such new technology.

rewriting their intranet site with zk could save them a significant part of thier $5m annual budget. users can reorder 'virtual portlets' just in the browser without a trip to the server and zk can update the content of one 'virtual portlet' using its built in AJAX approach without a full page refresh reqired of jsr168 'real portlets'. that should be much less server and network load.

it would seem that zk is rewriting the rulebook...

a question: how would the users chosen layout be persisted? if the order and state of the portals on the page could be persisted with jdbc then this zk approach will be a true replacement for a jsr168 container.

2008-08-16

This is great, everytime I need a new feature in ZK it seems to appear within a week of me needing it.

Great stuff.

Ged

Bernd

2008-08-16

Amazing, as always !

Greetings
Bernd

Bernd

2008-08-16

Hi,

do you plan to add a portal example in the ZK explorer of 3.50 ?

Greetings
Bernd

2008-08-18

@Simon:

->how would the users chosen layout be persisted?

In fact, when a portlet is moved, it will fire an onPortalMove event, then Application Developer should be able to store the state of the portal layout as a personal preference.

Lucky

2008-08-18

Excellent job!
However there's a problem when you have a scrollable list inside a panelchildren. In that case when you try to scroll the list, the 'portlet' starts dragging.

Lucky

2008-08-18

...another funny behavior: sometimes (apparently on random basis) clicking on a component inside a panelchildren, makes the container portlet to be moved on the top of its column (on IE) or on the topleft corner (on Mozilla).
I've experienced this kind of problem clicking on listitems or tabpanels.
:(

2008-08-20

@Lucky:

Thanks for the information.
We will fix it as soon as possible.

ehols

2008-08-20

Excellent component!
I used liferay in my project.
But I wish use purity ZK code ...
Good job!thank you!

ferdinando

2008-08-25

Moving a panel with an iframe in it causes the iframe to be reloaded (with disastrous results if it contains a webapp). Is this a problem in portallayout, iframe, or just to be expected?

2008-08-26

@ferdinando:

Reloaded iframe is expected.
By the way, you can refer to Igoogle Website, and the result is the same.

nithin

2008-08-26

i am new to zk
i am using latest version of zk i.e zk 3.0.7
if i try to use the panel it gives me following error .....
org.zkoss.zk.ui.metainfo.DefinitionNotFoundException: Component definition not found: panel

djmada

2008-09-09

i had the same error :(
org.zkoss.zk.ui.metainfo.DefinitionNotFoundException: Component definition not found: panel
i tried it with 3.0.5; 3.0.6 and 3.0.7 but unfortunately i always had that error message:( what is the problem? (i would like to try the code which in the demo page)

xiaobin

2008-09-12

好强大啊

2008-10-07

I'am experiencing the same error message when trying the portallayout. I'am using version 3.5.0 of ZK and ZK Studio in Version 0.8.3. Maybe it's caused by the "old" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd" entry, which gets inserted by the Eclipse Plugin?

Any Ideas?


	Post


	Preview