
	Portal Guide

CHAPTER 14 Creating Custom Layouts

This chapter explains how to create custom layouts by using the exteNd Workbench. It contains the following sections:

About the Portal Layout and Portal Layout Definition Wizards

You create a new layout by using the Portal Layout and Portal Layout Definition wizards, which are available in the exteNd Workbench.

The Portal Layout Wizard creates a layout descriptor file. This file provides a display name, description, and preview image file for the layout. The layout descriptor file also includes a reference to the layout definition file.

The Portal Layout Definition Wizard creates a layout definition file for an XML layout. This file describes the sections within the layout, as well as the width of the main page and the width of each section. The layout definition also specifies how components within a particular section flow (left to right or top to bottom).

Creating a layout descriptor

Procedure To create a layout descriptor:

Start exteNd Workbench.
Select File>New.

The New File dialog appears:
Click the Portal tab.
Choose Portal Layout and click OK.

The layout descriptor editor displays.
In the layout descriptor editor, specify the settings for the layout descriptor file.

For details about the elements of 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 the Core Development Guide.

Creating an XML layout definition

Procedure To create an XML layout definition:

Start exteNd Workbench.
Select File>New.

The New File dialog appears:
Click the Portal tab.
Choose Portal 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. Specify the flow, style, and width for the new section:
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.
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.
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.

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 the Core Development Guide.

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

Procedure To edit the definition of a section:

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

Select one of the following Flow attributes:

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

(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.
(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 is typically expressed as a percentage.


	Portal Guide