Portal Guide
CHAPTER 6
This chapter explains how to use portal decorators to control the appearance of portlets. It contains the following sections:
A portal decorator is an XSL style sheet that decorates the dynamic content generated by a portlet.
When a portal request is received at runtime, the Portal Aggregator responds by building an XML document that describes the content to be generated on the requested page. For each portlet on the page, the Portal Aggregator determines whether decoration is required and if so, applies the portal decorator style sheet specified as PortalDecoratorStyle in web.xml.
Here is an excerpt of the XML generated for the Stock Quote portlet that is displayed on the Corporate Home shared page in the Express Portal application. Three options are decorated—Minimize, Restore, and Maximize—as shown highlighted in the XML code:
<portlet-decoration> <display-name>Stock Quote</display-name> <options> <option> <option-id>minimize</option-id> <display-name>Minimize</display-name> <option-text>Min</option-text> <option-link>?urlType=Render&amp;wsrp-windowstate=minimized&amp;novl-regid=StockQuotePortlet&amp;novl-inst=CorporateHome_StockQuotePortlet </option-link> <link-target/> <tool-tip>Minimize this content</tool-tip> <hide-states> <hide-state>minimized</hide-state> <hide-state>maximized</hide-state> </hide-states> <images> <normal>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/minimize.gif</normal> <onmouseout>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/minimize.gif</onmouseout> <onmousedown>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/minimize.gif</onmousedown> <onmouseover>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/minimize.gif</onmouseover> </images> </option> <option> <option-id>restore</option-id> <display-name>Restore</display-name> <option-text>Restore</option-text> <option-link>?urlType=Render&amp;wsrp-windowstate=normal&amp;novl-regid=StockQuotePortlet&amp;novl-inst=CorporateHome_StockQuotePortlet </option-link> <link-target/> <tool-tip>Restore window state</tool-tip> <hide-states> <hide-state>normal</hide-state> </hide-states> <images> <normal>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/restore.gif</normal> <onmouseout>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/restore.gif</onmouseout> <onmousedown>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/restore.gif</onmousedown> <onmouseover>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/restore.gif</onmouseover> </images> </option> <option> <option-id>maximize</option-id> <display-name>Maximize</display-name> <option-text>Max</option-text> <option-link>?urlType=Render&amp;wsrp-windowstate=maximized&amp;novl-regid=StockQuotePortlet&amp;novl-inst=CorporateHome_StockQuotePortlet </option-link> <link-target>_new</link-target> <tool-tip>Maximize this portlet</tool-tip> <hide-states> <hide-state>maximized</hide-state> </hide-states> <images> <normal>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/maximize.gif</normal> <onmouseout>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/maximize.gif</onmouseout> <onmousedown>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/maximize.gif</onmousedown> <onmouseover>http://localhost:8080/Director/resource/portal-theme/DottedBorder/images/maximize.gif</onmouseover> </images> </option> </options> </portlet-decoration>
The following content is decorated:
Window state influences how portlets are decorated. For example, the portlet body and footer are not decorated when the portlet's window state is minimized because these elements are not displayed in that state.
Decoration is required in the following situations:
By default, exteNd Director provides a portal decorator style sheet called PortalDefaultDecorator.xsl, located in the portal-style directory of the resource set. This style sheet is specified as the default decorator style sheet in web.xml, as follows:
<context-param>
<param-name>PortalDecoratorStyle</param-name>
<param-value>PortalDefaultDecorator</param-value>
<description>This stylesheet is used to decorate the portlet data. Titlebar, border, options, etc...</description>
</context-param>
The default portal decorator style sheet specifies three areas for each portlet—title bar, portlet body, and footer—each in a separate HTML table. Inside each table, the style sheet uses CSS classes to specify the HTML elements to be generated. The CSS classes in the decorator style sheet correspond to the same CSS classes in the theme style sheet. This association ensures that the decorated conforms to the display characteristics defined for the currently selected theme.
For example, the table tag for the title bar area specifies s3-titleBarBorderLeft as one of its classes. The display characteristics of this class are defined in the CSS file for the theme, as in this example from the BasicBlue theme.css file:
.nv-titleBarBorderLeft, .s3-titleBarBorderLeft {
background-image : url(images/TitlebarLeft.gif);
background-repeat : no-repeat;
background-position : top left;
width : 12px;
}
For more information on the interaction between themes and portlet decorators, see Working with Portal Themes.
Title bar This excerpt shows how the default decorator style sheet specifies decoration for the title bar:
<!-- TitleBar Fragment --> <table border="0" cellpadding="0" cellspacing="0" class="s3-titleBarContainer" width="100%"> <tr> <td class="s3-titleBarBorderLeft">Â </td> <td class="s3-titleBarContentLeft" nowrap="true"> <xsl:value-of select="display-name"/> </td> <td class="s3-titleBarContentRight"> <xsl:apply-templates select="options"/> </td> <td class="s3-titleBarBorderRight">Â </td> </tr> </table>
Portlet body This excerpt shows how the default decorator style sheet specifies decoration for the portlet body:
<!-- Portlet Body --> <table border="0" cellpadding="0" cellspacing="0" class="s3-bodyContainer" width="100%"> <tr> <td class="s3-bodyBorderLeft">Â </td> <td> <xsl:apply-templates select="../portlet-data"/> </td> <td class="s3-bodyBorderRight">Â </td> </tr> </table>
Footer This excerpt shows how the default decorator style sheet specifies decoration for the footer:
<!-- Footer Fragment Nonbreaking Space:   --> <table border="0" cellpadding="0" cellspacing="0" class="s3-footerContainer" width="100%"> <tr> <td class="s3-footerBorderLeft">Â </td> <td class="s3-footerContentLeft">Â </td> <td class="s3-footerContentRight">Â </td> <td class="s3-footerBorderRight">Â </td> </tr> </table>
To create a custom decorator, you must create an XSL style sheet and substitute the name of your style sheet in web.xml. Your custom style sheet must use the same classes as those specified in the theme.css files, the style sheets for themes. The following procedure explains how to create a custom decorator by copying the default decorator style sheet.
Open PortalDefaultDecorator.xsl from the portal-style directory in the project's resource set.
Modify the style sheet as desired, preserving the classes that correspond to theme classes.
Open web.xml in your project's WEB-INF directory, right-click PortalDecoratorStyle, and select Properties.
Substitute the name of your decorator style sheet in the Parameter value field in place of PortalDecoratorStyle.
Copyright © 2004 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved. more ...
