Working with Portal Layouts"
m (Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=Aug 13, 2008 |version=Applicable to zk-3.5.0-FL-2008-08-13 and later. }} =Introductio…') |
|||
| (2 intermediate revisions by one other user not shown) | |||
| Line 10: | Line 10: | ||
=Introduction= | =Introduction= | ||
| − | In the previous [ | + | In the previous [[Small_Talks/2008/June/Using_Columnlayout_Component | 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= | =Live Demo= | ||
| Line 16: | Line 16: | ||
Let's have a look at the real demo - iGoogle-like application. | Let's have a look at the real demo - iGoogle-like application. | ||
| − | <gflash width="800" height="600"> | + | <gflash width="800" height="600">Demo4.swf</gflash> |
Example in the following fragments, | Example in the following fragments, | ||
Latest revision as of 06:55, 8 December 2010
Jumper Chen, Engineer, Potix Corporation
Aug 13, 2008
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.
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |