第5章
この章では、ポータルテーマを使用してexteNd Directorポータルアプリケーションの見た目と使い心地を制御する方法について説明します。この章の節は次のとおりです。
「ポータルテーマ」は、exteNd Directorポータルアプリケーション全体に適用される視覚的な特性のセットです。ポータルアプリケーションにテーマを設定すると、テーマに関連付けられた設定はグローバルに適用されます。 これらの設定は、ポータルページ、ポートレット(PIDページとJSPページの両方)、および個人、共有、コンテナページの外観を変える可能性があります。テーマは、ポータルアプリケーション全体を通して一貫した外観を確保する簡単な方法を提供します。
exteNd Directorには、事前定義されたテーマが付属しています。
これらのテーマは、portal_core_resource.jarで定義されます。
ヒント: これらのテーマをプレビューするには、次のURLをブラウザに入力して、テーマテ スタページを表示します。
http://host/project context/portal/pages/ThemeTester.html
ポータルテーマは、複数のファイルで構成されます。
|
ファイル |
説明 |
|---|---|
|
テーマを説明します。このファイルは、テーマの表示名、説明、プレビューイメージファイル、およびサムネイルイメージファイルを提供します。 テーマ記述子ファイルには、theme.xmlという名前を付ける必要があります。ポータルアプリケーションに使用される各テーマは、個別のtheme.xmlファイルを持つことが必要です。 テーマ記述子ファイルを参照してください。 |
|
|
表示されるときのテーマの外観を定義する属性およびプロパティをすべて含みます。 CSSファイルには、theme.cssという名前を付ける必要があります。ポータルアプリケーションに使用される各テーマは、個別のtheme.cssファイルを持つことが必要です。 テーマスタイルシートを参照してください。 |
|
|
テーマに使用されるさまざまなイメージを定義します。 これらのグラフィックファイルは、imagesという名前のディレクトリに保存されています。 |
theme.cssファイルとtheme.xmlファイル、およびimagesディレクトリはすべて、「themeフォルダ」に保存されています。テーマフォルダは、リソースセット内のポータルテーマディレクトリにあるサブディレクトリです。テーマフォルダの名前はテーマのキーを提供し、テーマを一意に識別します。
たとえば、BasicBlueテーマのディレクトリ構造は次のようになります。
リソースセット内のファイル場所の詳細については、『exteNd Directorアプリケーションの開発』の「exteNd Directorアプリケーションのリソースセットの使用に関する章を参照してください。
「カスタムテーマの作成」で説明されているように、exteNd Director開発環境のポータルテーマウィザードを使用して、カスタムテーマを作成できます。
ポータルアプリケーションの各テーマには、theme.xmlというテーマ記述子ファイルが必要です。 テーマ記述子ファイルは、次のテーマ情報を指定します。
|
要素名 |
説明 |
|---|---|
|
portal-theme |
ポータルテーマのルートノード。 |
|
display-name |
ポータルアプリケーションのユーザインタフェースでテーマの識別に使用される名前。 |
|
description |
テーマの説明。 |
|
preview-image |
表示時のテーマの外観を示すイメージ。 テーマセレクタは、「ポータルのテーマの設定」で説明されているように、各テーマのプレビューイメージを表示します。 このイメージのパスは、完全修飾されたURLまたはポータル置換文字列を含むURLです。
|
|
thumbnail-image |
表示時のテーマの外観を示す小さなイメージ。このイメージは通常、使用できるテーマを一覧表示するユーザインタフェースで使用されます。 このイメージのパスは、完全修飾されたURLまたはポータル置換文字列を含むURLです。
|
BasicBlueテーマの記述子ファイルは、次のとおりです。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE portal-theme PUBLIC "-//SilverStream Software, LLC//DTD Portal Theme 5.0//EN" "portal-theme_5_0.dtd"> <portal-theme> <display-name>Basic Blue</display-name> <description>Basic Blue theme, smooth plastic</description> <preview-image>$RESOURCE_URL$/portal-theme/BasicBlue/images/preview.gif </preview-image> <thumbnail-image>$RESOURCE_URL$/portal-theme/BasicBlue/images/thumbnail.gif </thumbnail-image> </portal-theme>
exteNd Directorが付属している各テーマには、テーマに関連付けられたファイルで説明されているように、その独自のtheme.xmlファイルがあります。
ポータルテーマの作成を参照してください。
アプリケーションの各テーマには、theme.cssというスタイルシートが必要です。 このファイルは、Netscape 6およびMicrosoft Internet Explorer 5 (およびそれ以降のバージョン)で機能する標準カスケーディングスタイルシート(CSS)です。 exteNd Directorが付属している各テーマには、その独自のtheme.cssファイルがあります。
スタイルシートは、クラスのセットを定義します。これらは、exteNd Directorスタイル用とJava Portlet 1.0準拠ポートレットスタイル用です。 これらのスタイルは、ポータルページ、およびポータルページに表示されるポートレットやXForms 1.0-準拠Webフォームの表示後に使用できます。
新しいクラスを定義し、事前定義されたexteNd Directorスタイルの設定を編集して、独自のスタイルを作成できます。
テーマスタイルシートの位置については、テーマに関連付けられたファイルを参照してください。
theme.cssファイルの標準exteNd Directorスタイル定義には、nv-ラベルが含まれています。
exteNd Directorスタイルクラスには何種類かあり、それぞれ固有の接頭辞が付いてます。
変更する表示特性のタイプに応じてグループ化される、事前定義されたexteNd Directorスタイル定義のリストは、次のとおりです。
exteNd Directorは、Java Portlet 1.0仕様で定義される標準CSSクラスもサポートしています。
これらのクラスは、この例のように、接頭辞.portletで定義されています。
.portlet-font {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
}
各スタイル定義のリストおよび説明については、Java Portlet 1.0仕様のCSSスタイル定義を参照してください。
ポートレットに定義されたスタイルにより、テーマ開発者はページ上のポートレットランタイム表示を大幅に制御できます。
ポートレットスタイルを使用してポートレットをテーマ対応にする詳細については、テーマ対応のポートレットの作成を参照してください。
慣習で、各標準exteNd Directorスタイルクラスは、HTMLプロパティの共通のセットに値を指定します。ただし、クラス定義は、クラスに通常関連付けられるHTMLプロパティのすべてに値を指定する必要はありません。
インストールされたテーマの一部標準クラスは、非標準接頭辞を使用して、一定のプロパティ設定をコメントアウトします。 ブラウザは認識しない接頭辞を見ると、単にプロパティを無視します。 次の例は、接頭辞x-を使用して、フッタコンテナスタイルの可視プロパティをコメント化します。
.nv-footerContainer {
x-visibility : hidden;
font-size:2pt;
height:16px;
width : 100%;
}
テーマCSSファイルの作成を参照してください。
テーマは、ユーザにテーマの外観を示すプレビューおよびサムネイルイメージを含むことができます。ランタイム時に実際に表示されるテーマのイメージも含むことができます。これらには、背景イメージ、前景イメージ、およびポータルオプションの外観を制御するテーマオプションイメージも含めることができます。
テーマプレビューイメージファイルは通常、表示時にテーマがどのように見えるかを示すスクリーンショットです。 BlackNBlueテーマのプレビューイメージファイルは、次のとおりです。
プレビューイメージのサイズは、320x320です。
サムネイルイメージファイルは、テーマの外観を示す小さなイメージです。 BlackNBlueテーマのプthumbnailイメージは、次のとおりです。
このイメージは通常、ユーザインタフェースで使用できるテーマの一覧表示に使用されます。このプレビューイメージのサイズは、45x45です。
テーマは、ポータルオプションの外観を変更できます。 たとえば、ポートレットのタイトルバーは、ユーザがポートレットの編集、最小化、または復元ができるボタンを提供するとします。 ボタンイメージがユーザのイベントに応答して変わるように、各ボタンに複数のイメージを関連付けることができます。テーマは、各ユーザイベントのイメージを変更でき、ユーザがテーマを変更すると、一貫した外観が与えられます。
各テーマは、ポータルオプションに関連付けられたさまざまなイベントに、固有のイメージセットを指定できます。ただし、これらのイメージのファイル名は、各ポータルテーマと同じであることが必要です。 一貫した命名規則をすべてのテーマに使用すると、選択されたテーマに関係なく、各ユーザイベントが表示するイメージを持っていることを確認できます。
たとえば、edit_onmouseover.gifというイメージを作成して、ポートレット編集モードに関連付けられたEditオプションの編集ユーザイベント処理できます。 この場合、アプリケーションにサポートされる各テーマは、同じ名前のファイルを含むことが必要なので、onmouseoverイベントは表示するイメージを常に持ちます。
ポータルページは、テーマのサポートを提供できます。ユーザが新しいテーマを選択したときに、PISまたはJSPページが外観を変更できるようにするには、ページのソースに変更を加える必要があります。
テーマ対応なページを作成するには、次の操作が必要です。
現在選択されているテーマCSSファイルを参照するページのヘッドセクションに、<link>タグを含めます。
JSPページにリンクを含める詳細については、JSPページへのCSSリンクの含有を参照してください。PIDページにリンクを含める詳細については、PIDページへのCSSリンクの含有を参照してください。
テーマCSSファイルで定義されたクラスを利用するページに、HTMLタグまたはポートレットを追加します。CSSファイルのクラスにタグをマップすることにより、これらのタグが、現在選択されているテーマの表示特性に従って外観を変えることを確認できます。 たとえば、ページの各アンカータグを、CSSファイルのA.nv-Anchorクラスにマップします。
<p><a class="A.nv-Anchor" href="http://www.novell.com">link</a> that changes styles on a hover.</p>
標準Directorクラス定義(nvラベルを含む名前を持つもの)、またはCSSファイルで定義するカスタムクラス定義を使用できます。
現在選択されているテーマを参照するJSPページのヘッドセクションに<link>タグを含めるには、getThemeLinkタグを使用する必要があります。
この実行方法を示す例は、次のとおりです。
<html> <head> <title>My Theme-Enabled Page</title> <%@ taglib uri="/portal" prefix="ep" %> <ep:getThemeLink /> </head> ...
getThemeLinkタグは、ページに生成されたHTMLに<link>タグを追加します。<link>タグは、テーマのCSSファイルへのパスを含みます。パスのテーマフォルダは、選択されたテーマに設定されます。たとえば、ユーザがBasicBlueテーマを選択すると、<link>タグは次のようになります。
<html> <head> <title>My Theme-Enabled Page</title> <lnk rel=\x91 stylesheet\x92 type="text/css" href=\x91 http://localhost/Director/MyEar/Portal/main/resource/portal-theme/BasicBlue/theme.css\x92 /> </head> ...
現在選択されているテーマを参照するPIDページのヘッドセクションに<link>タグを含めるには、s3-componentタグを使用して、PortalUrlHelperポートレットをページに追加する必要があります。 PortalUrlHelperポートレットの引数は、<link>タグの構文を含みます。
この実行方法を示す例は、次のとおりです。
<html> <head> <title>My Theme-Enabled Page</title> <s3-component id="PortalUrlHelper" instance="Helper" SUBST_STRING="<link rel=\qstylesheet\q type=\qtext/css\q href=\q$THEME_URL$/theme.css\q/>"/> </head> ...
PortalUrlHelperポートレットは、ページに生成されたHTMLに<link>タグを追加します。<link>タグは、テーマのCSSファイルへのパスを含みます。パスのテーマフォルダは、選択されたテーマに設定されます。たとえば、ユーザがBasicBlueテーマを選択すると、<link>タグは次のようになります。
<html> <head> <title>My Theme-Enabled Page</title> <lnk rel=\x91 stylesheet\x92 type="text/css" href=\x91 http://localhost/Director/MyEar/Portal/main/resource/portal-theme/BasicBlue/theme.css\x92 /> </head> ...
ポートレットは、theme.cssファイルのほとんどのスタイル定義を使用できます。 たとえば、HTMLポートレットは、1つまたは複数のフォントやカラースタイルを使用して、テキストやコントロールの外観を変更できます。 次の例で、ポートレットにより生成されたHTMLテーブルは、テーマ固有のフォントスタイルを使用します。また、番号の付いた2つのカラースタイルを使用して、行の色を変更します。
<table class="nv-fontExtraSmall" width="99%" border="0" cellspacing="0" cellpadding="1"> <tr class="nv-table-row-even"> <td width="40%"> Bill Lumbergh</td> <td width="40%">781-555-1171</td> <td width="20%"><div align="center"></div> </td> </tr> <tr class="nv-table-row-odd"> <td> Peter Gibbons </td> <td>781-555-3457</td> <td><div align="center"></div> </td> </tr> <tr class="nv-table-row-even"> <td> Michael Bolton </td> <td>781-555-3566</td> <td><div align="center"></div> </td> </tr> <tr class="nv-table-row-odd"> <td> Milton Waddams </td> <td>781-555-3442</td> <td><div align="center"></div> </td> </tr> <tr class="nv-table-row-even"> <td> Samir Nayeenanajar </td> <td>781-555-3316</td> <td><div align="center"></div> </td> </tr> </table>
HTMLポートレットは、doView()メソッドで文字列連結技術を使用して、このデータを生成できます。 XMLポートレットでは、スタイルはXSLスタイルシートで指定できます(次を参照)。
<!-- Alternate the color of each row in the table --> <xsl:template match="employee"> <xsl:choose> <xsl:when test="position() mod 2 = 1"> <xsl:call-template name="employee_data"> <xsl:with-param name="StyleClass">nv-backgroundColor3</xsl:with-param> </xsl:call-template> </xsl:when> <xsl:otherwise> <xsl:call-template name="employee_data"> <xsl:with-param name="StyleClass">nv-backgroundColor5 </xsl:with-param> </xsl:call-template> </xsl:otherwise> </xsl:choose> </xsl:template>
ポートレットのランタイム表示は、ポータル修飾子により制御されます。 「ポータル修飾子」は、ページのポートレットのさまざまな表示要素を作成するJavaクラスです。exteNd Directorは、com.sssw.portal.core packageでEboDefaultPortalDecoratorという「デフォルト修飾子」クラスを提供します。
ポートレットにタイトルバー、本文、およびフッタを表示するために、デフォルト修飾子は3つの個別のHTMLテーブルを生成します。これらのテーブルは、theme.cssファイルで提供されるクラス定義を使用して、現在選択されているテーマに表示が適切であることを確認します。
EboDefaultPortalDecoratorクラスから抽出した次のものは、標準ポートレットクラス定義を使用してポートレットを表示する方法を示します。theme.cssファイルで定義された各クラス名は、ソースコードで選択されます。
package com.sssw.portal.core;
import com.sssw.portal.api.*;
public class EboDefaultPortalDecorator extends EboComponentDecorator{
public String decorateComponentData(EbiPortalContext context, String componentID, String componentData) {
return "<DIV class=nv-componentContainer>"
+ getTitleBarFragment(context)
+ getBodyFragment(context, componentData)
+ getFooterFragment(context)
+ "</DIV>";
}
public String getTitleBarFragment(EbiPortalContext context){
StringBuffer buffer = new StringBuffer("");
// Build the title bar for this component
// It is a table which consists of 1 row with 4 columns (leftBoder, leftContent, RightContent, rightBorder)
buffer.append("<table class=\"nv-titleBarContainer\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
buffer.append(" <tr>\n");
buffer.append(" <td class=\"nv-titleBarBorderLeft\"></td>\n");
buffer.append(" <td class=\"nv-titleBarContentLeft\">" +
getTitleBarContentLeft(context) + "</td>\n");
buffer.append(" <td class=\"nv-titleBarContentRight\">" +
getTitleBarContentRight(context) + "</td>\n");
buffer.append(" <td class=\"nv-titleBarBorderRight\"></td>\n");
buffer.append(" </tr>\n");
buffer.append("</table>\n");
return buffer.toString();
}
public String getBodyFragment(EbiPortalContext context, String contentFragment){
StringBuffer buffer = new StringBuffer();
buffer.append("<table class=\"nv-bodyContainer\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
buffer.append(" <tr>\n");
buffer.append(" <td class=\"nv-bodyBorderLeft\"></td>\n");
buffer.append(" <td>" + contentFragment + "</td>\n");
buffer.append(" <td class=\"nv-bodyBorderRight\"></td>\n");
buffer.append(" </tr>\n");
buffer.append("</table>\n");
return buffer.toString();
}
public String getFooterFragment(EbiPortalContext context){
StringBuffer buffer = new StringBuffer();
buffer.append("<table class=\"nv-footerContainer\" border=\"0\"
cellspacing=\"0\" cellpadding=\"0\">\n");
buffer.append(" <tr>\n");
buffer.append(" <td class=\"nv-footerBorderLeft\"></td>\n");
buffer.append(" <td class=\"nv-footerContentLeft\">" +
getFooterContentLeft(context) + "</td>\n");
buffer.append(" <td class=\"nv-footerContentRight\">" +
getFooterContentRight(context) + "</td>\n");
buffer.append(" <td class=\"nv-footerBorderRight\"></td>\n");
buffer.append(" </tr>\n");
buffer.append("</table>\n");
return buffer.toString();
}
...
テーマのCSSファイルは、ポートレットの視覚的表示を複数のセクションに分割します(次を参照)。
この表示スキームは実際の例にどのように適用されますか? Titaniumテーマに表示されるWeather Serviceポートレットを例に挙げます。
次の図は、Weather Serviceポートレットの各表示セクションがTitaniumテーマでどのように表示されるか示しています。
Titaniumテーマのtheme.cssファイルは、ポートレットのほとんどの表示セクションについて、背景イメージを指定します。
exteNd DirectorAPIは、テーマを操作する2つのインタフェースを提供します。
EbiThemeManagerは、EbiThemeInfoオブジェクトにアクセスするメソッドを提供します。EbiThemeInfoは、表示名および説明を含め、テーマに関するさまざまな種類の情報を取得するメソッドを提供します。 EbiThemeInfoインタフェースは、テーマのプレビューおよびサムネイルイメージのURIへのアクセスも提供します。
EbiThemeManagerオブジェクトにアクセスするには、PortalサブシステムのEboFactory classクラスのgetThemeManager()メソッドを使用する必要があります。
Copyright © 2004 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved. more ...
