Liferay 6.1: Layout

There are two layers of abstraction to generate a portal page in Liferay.

The first layer is with a theme, which generates these components in a tightly coupled way on a page.


The second layer is the layout, a fragment that fits inside a page generated by theme but wraps
the portlets to control how portlets will be arranged on a portal page.

Layouts are usually grid-like structures and are mostly created in HTML tables with rows and columns or CSS-based containers separated by div tags.

Liferay Portal has some built-in layout templates in its release.

These templates are available for administrator or other users with Manage Pages permission to apply individually on a portal page.

1) Log into the Liferay portal as test@liferay.com

2) Go to Manage/Page Layout.


3) Select 2 Columns (50/50) layout template, and then click on Save button
to save the change.

4) Try to add more portlets, e.g Loan Calculator and Currency Converter. Observe the effects.


5) Change the page's layout to use a different layout template. Click on Manage | Page Layout link in the Dockbar area, then click on 2 Columns (30/70) layout template, and then click the Save button to save the change



The layout is a fragment that fits inside a page generated by the velocity file portal_normal.vm of a Liferay theme.

The content area of each portal page consists of a set of portlets wrapped by the layout. This is the second level of abstraction of presentation.

While the theme controls the general visual appearance of a page, a layout is a separate component invoked in a theme to wrap the way portlets are rendered and presented on a portal page.

Different theme and layout template can be applied independently to a portal page during runtime.

However, it is always the combination of one particular theme and one particular layout that works together for the general look and feel of any particular portal page at any particular runtime.

CREATING LAYOUT


1) Run Eclipse.

2) Create New Project.
project name : my-3-column
display name: My 3 Column
select Layout plug-in type
click Finish

3) Check that your  project folder contains:

docroot
-META-INF
-WEB-INF
...my-3column.png
...my-3column.tpl
...my-3-column.wap.tpl
...build.xml

4) Double-click my-3-column.tpl

5) Use GUI editor to arrange the layout.


6) Sometimes, you need to inspect the XML codes. Right-click the tpl file and choose to open as text file.