Portal Guide

CHAPTER 19

Creating Custom Layouts

This chapter explains how to create custom layouts using the exteNd Director development environment. It contains the following sections:

About the Portal Layout and Portal Layout Definition Wizards

You create a new layout by creating a layout definition first and then a layout descriptor., as follows:

Use:	To:
Portal Layout Definition Wizard	Create a layout definition file for an XML layout that specifies: Sections within the layout Width of main page Width of sections How portlets flow within a particular section (left to right or top to bottom)
Portal Layout Wizard	Create a layout descriptor file that provides: Display name Description Preview image file Reference to layout definition file

Use:

To:

Portal Layout Definition Wizard

Create a layout definition file for an XML layout that specifies:

Sections within the layout
Width of main page
Width of sections
How portlets flow within a particular section (left to right or top to bottom)

Portal Layout Wizard

Create a layout descriptor file that provides:

Display name
Description
Preview image file
Reference to layout definition file

Creating an XML layout definition

Procedure To create an XML layout definition:

Start the exteNd Director development environment and open the project of interest.
Select File>New>File.

The New File dialog appears:
Click the Portal tab.
Click Advanced, then choose Layout Definition and click OK.

The layout definition editor displays.
To add a section container of type row and an initial section, click Add Row.

The layout definition editor creates the section container and adds a new section with an ID of 1.

TIP: Specify the flow, style, and width attributes for the new section container, as described in Editing the attributes of a section or section container.
To add a section container of type column and an initial section, click Add Column.

The layout definition editor creates the section container and adds a new section. The ID for the new section is 1 higher than the last section you added.

Specify the flow, style, and width attributes for the new section container, as described in Editing the attributes of a section or section container.
To add a section within a section container, select the target section container and click Add Section.

The layout definition editor adds a new section. The ID for the new section is 1 higher than the last section you added.

Specify the flow, style, and width attributes for the new section, as described in Editing the attributes of a section or section container.
To delete a section, select the section and click Delete Section.
To delete a section container, select the container and click Delete Container.
Select File>Save.
Specify a name for the layout definition file and click Save.

TIP:   By convention, the layout definition file has the same name as the descriptor file, with Def (for definition) appended. For example, if the descriptor file is called HeaderContent.xml, the associated layout definition file might be called HeaderContentDef.xml. This naming convention is recommended, but not required.

The layout definition file is saved in the portal-layout directory within a resource set.

    For more information about where files are located in a resource set, see the section on subdirectories for resources and Java classes in Developing exteNd Director Applications.

    For details about the elements of the layout definition file, see Layout definition file.

Editing the attributes of a section or section container

Procedure To edit the layout attributes:

In the layout definition editor, select the section or section container you want to edit.

Select one of the following Flow attributes:

Flow attribute	Description
horizontal	Indicates that portlets should flow from left to right within the section or section container
vertical	Indicates that portlets should flow from top to bottom within the section or section container.

(Optional) Specify a Style setting. When the section is translated into HTML, the style setting is applied to the style attribute for the generated table row or column.

You can specify any style for the TD cell, including:
Style

Values
padding
padding-bottom

padding-top

padding-right

padding-left
alignment
vertical-align

horizontal-align
(Optional) Specify a Width setting. When the section is translated into HTML, the width setting is applied to the width attribute for the generated table row or column. The width can be expressed as a percentage or in pixels.

Style	Values
padding	padding-bottom padding-top padding-right padding-left
alignment	vertical-align horizontal-align

Here is an example of section container definitions:

  <section-container type="row">
  <s3-section flow="horizontal" id="1" style="padding-right:5px;padding-bottom:5px;vertical-align:top" width="100%"/>
  </section-container>
  <section-container type="row">
  <s3-section flow="vertical" id="2" style="padding-bottom:5px;padding-right:5px" width="25%"/>
  <s3-section flow="vertical" id="3" style="padding-bottom:5px;padding-right:5px" width="50%"/>
  <s3-section flow="vertical" id="4" style="padding-bottom:5px;padding-right:5px" width="25%"/>
  </section-container>

Creating a layout descriptor

Procedure To create a layout descriptor:

Start the exteNd Director development environment and open the project of interest.
Select File>New>File.

The New File dialog appears:
Click the Portal tab.
Click Advanced, then choose Layout and click OK.

The layout descriptor editor displays.

In the layout descriptor editor, click the General Settings tab to specify the general settings for the layout descriptor file, as follows:

General setting:	What to specify:
Display Name	Enter a name for the layout. NOTE: This name will identify the layout in the user interface of a portal application.
Description (optional)	Enter a description for the layout.
Preview Image (optional)	Enter the path to a preview image.The path can be a fully qualified URL or an URL that contains portal replacement strings, as described in Portal Replacement Strings. To search for the image file, click the ellipsis button: To open the image file, click the arrow button:
Definition Format	Select a layout definition format from the dropdown menu.
Definition File	Enter the path to the layout definition file. To search for the layout definition file, click the ellipsis button: To open the layout definition file, click the arrow button:

For more information For details about these elements of the layout descriptor file, see Layout descriptor file.

In the layout descriptor editor, click the Security tab to specify the security settings for the layout descriptor file, as follows:

Security setting:	What to specify:
List Roles (optional)	Select a list role from the Available List Roles list and click the right arrow button. Repeat this procedure for each list role you want to select.
Run Roles (optional)	Select a run role from the Available Run Roles list and click the right arrow button. Repeat this procedure for each run role you want to select. IMPORTANT: If you specify a run-role-map for a layout, you should select the equivalent list role.

Security setting:

What to specify:

List Roles

(optional)

Select a list role from the Available List Roles list and click the right arrow button. Repeat this procedure for each list role you want to select.

Run Roles

(optional)

Select a run role from the Available Run Roles list and click the right arrow button. Repeat this procedure for each run role you want to select.

IMPORTANT: If you specify a run-role-map for a layout, you should select the equivalent list role.

For more information For details about security settings in the layout descriptor file, see Layout descriptor file.

Select File>Save.

The layout descriptor file is saved in the portal-layout directory within a resource set. The ID for the layout is the name of its descriptor file, without the XML extension.

For more information about where files are located in a resource set, see the section on subdirectories for resources and Java classes in Developing exteNd Director Applications.