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

• Creating a layout descriptor

• Creating an XML layout definition

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:

Creating an XML layout definition

To create an XML layout definition:

1. Start the exteNd Director development environment and open the project of interest.

2. Select File>New>File.

   The New File dialog appears:

   

3. Click the Portal tab.

   

4. Click Advanced, then choose Layout Definition and click OK.

   

   The layout definition editor displays.

   

5. 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.

6. 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.

7. 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.

8. To delete a section, select the section and click Delete Section.

9. To delete a section container, select the container and click Delete Container.

10. Select File>Save.

11. 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

To edit the layout attributes:

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

2. 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.

3. (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

4. (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.

   

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

To create a layout descriptor:

1. Start the exteNd Director development environment and open the project of interest.

2. Select File>New>File.

   The New File dialog appears:

   

3. Click the Portal tab.

   

4. Click Advanced, then choose Layout and click OK.

   

   The layout descriptor editor displays.

   

5. 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 details about these elements of the layout descriptor file, see Layout descriptor file.

6. 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.

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

7. 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.

Copyright © 2004 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved.  more ...