第6章
この章では、ポータル修飾子を使用してポートレットの外観を制御する方法について説明します。この章の節は次のとおりです。
「ポータル修飾子」は、ポートレットで生成されたダイナミックコンテンツを修飾するXSLスタイルシートです。
ポータルアグリゲータはランタイム時にポータル要求を受け取ると、要求されたページに生成するコンテンツを記述したXMLドキュメントを作成します。 ポータルアグリゲータは各ページのポートレットに修飾が必要かどうかを判断し、必要な場合はweb.xmlでPortalDecoratorStyleとして指定したポータル修飾子スタイルシートを適用します。
ポートレット用に生成されたXMLの一部を次に示します。これは簡易ポータルアプリケーションの企業ホーム共有ページに表示されます。 Minimize、Restore、およびMaximizeの3つのオプションが修飾されており、XMLコードで強調表示されています。
<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>
次のコンテンツが修飾されます。
ウィンドウの状態によってポートレットが修飾される方法は異なります。 たとえば、ポートレットのウィンドウ状態がminimizedの場合、ポートレットの本文とフッタは表示されないため、これらの要素は修飾「されません」。
次の状況で修飾が必要です。
exteNd Directorには、リソースセットのportal-styleディレクトリに配置されたPortalDefaultDecorator.xslというポータル修飾子スタイルシートがデフォルトで用意されています。 このスタイルシートはweb.xmlでデフォルトの修飾子スタイルシートとして次のように指定されています。
<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>
デフォルトのポータル修飾子スタイルシートでは、各ポートレットの3つの領域(タイトルバー、ポートレット本文、およびフッタ)をそれぞれ別個のHTMLテーブルで指定します。 各テーブルの内部では、スタイルシートがCSSクラスを使用して、生成されるHTML要素を指定します。 修飾子スタイルシートのCSSクラスは、テーマスタイルシートにある同じCSSクラスに対応しています。 この関連づけにより、修飾された対象は現在選択されているテーマに定義された表示特性に準拠するようになります。
たとえば、タイトルバー領域のテーブルタグは、s3-titleBarBorderLeftをそのクラスの1つとして指定します。 次のBasicBlue theme.cssファイルの例のように、このクラスの表示特性はテーマのCSSファイルで定義されます。
.nv-titleBarBorderLeft, .s3-titleBarBorderLeft {
background-image : url(images/TitlebarLeft.gif);
background-repeat : no-repeat;
background-position : top left;
width : 12px;
}
テーマとポートレット修飾子間の通信の詳細については、を参照してください。
タイトルバー 次の抜粋では、デフォルトの修飾子スタイルシートがタイトルバーの修飾を指定する方法を示します。
<!-- TitleBar Fragment --> <table border="0" cellpadding="0" cellspacing="0" class="s3-titleBarContainer" width="100%"> <tr> <td class="s3-titleBarBorderLeft">\xc2 </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">\xc2 </td> </tr> </table>
ポートレット本文 次の抜粋では、デフォルトの修飾子スタイルシートがポートレット本文の修飾を指定する方法を示します。
<!-- Portlet Body --> <table border="0" cellpadding="0" cellspacing="0" class="s3-bodyContainer" width="100%"> <tr> <td class="s3-bodyBorderLeft">\xc2 </td> <td> <xsl:apply-templates select="../portlet-data"/> </td> <td class="s3-bodyBorderRight">\xc2 </td> </tr> </table>
フッタ 次の抜粋では、デフォルトの修飾子スタイルシートがフッタの修飾を指定する方法を示します。
<!-- Footer Fragment Nonbreaking Space:   --> <table border="0" cellpadding="0" cellspacing="0" class="s3-footerContainer" width="100%"> <tr> <td class="s3-footerBorderLeft">\xc2 </td> <td class="s3-footerContentLeft">\xc2 </td> <td class="s3-footerContentRight">\xc2 </td> <td class="s3-footerBorderRight">\xc2 </td> </tr> </table>
カスタム修飾子を作成するには、XSLスタイルシートを作成し、web.xmlでスタイルシートの名前を置換する必要があります。カスタムスタイルシートはテーマのスタイルシートであるtheme.cssファイルで指定したクラスと同じクラスを使用する必要があります。 次の手順は、デフォルトの修飾子スタイルシートをコピーしてカスタム修飾子を作成する方法を説明します。
プロジェクトのリソースセットにあるportal-styleディレクトリでPortalDefaultDecorator.xslを開きます。
プロジェクトのWEB-INFディレクトリにあるweb.xmlを開き、PortalDecoratorStyleを右クリックして［プロパティ］を選択します。
［パラメータ値］フィールドでPortalDecoratorStyleを、使用する修飾子スタイルシートの名前に置き換えます。
Copyright © 2004 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved. more ...
