課題 2.2: ポータル・サイトのカスタマイズ
この課題を始める前に、
『課題 2.1: ポートレット・アプリケーションを表示するための新規ポータルの作成』を完了していなければなりません。
新規テーマを作成する
ポータル・アプリケーション作成のプロセスで、Portal Designer で最新のテーマの作成を選択できます。
テーマには、ポータル・アプリケーションの全体の外観を提供し、
画像、ナビゲーション、ツールバー、およびページ・レベルのビジュアル効果を含めて、
ポータル・デザインの多くのエレメントが組み込まれます。
このチュートリアルで開発したポータル・サイトに新規テーマを作成する方法は、以下のとおりです。
- メニュー・バーから「ファイル」 > 「新規」 > 「テーマ」の順に選択する。
- 「タイトル」フィールドに「Auction」と入力する。
- ソース・テーマにする会社のテーマをスクロールして選択する。
新規テーマの作成は既存のテーマをベースにすると非常に簡単になり、
必要なテーマ・エレメントのすべてをゼロから作成する必要はありません。
- 「次へ」をクリックする。
- 使用可能なスキン・リストから「シャドー」スキンを選択して、
「デフォルト・スキンとして設定」をクリックし、
「シャドー」を新規オークション・テーマのためのデフォルト・スキンにする。
スキンとは、ポータル・ページ内のそれぞれのポートレットの周りの境界線のことです。
ポータルの全体の外観に設定されるテーマとは異なり、
スキンは自分のポータル・アプリケーションに挿入するそれぞれのポートレットの外観に限定されます。
デフォルトでは、限定されたスキン選択だけが、それぞれのテーマに使用可能です。
- 「完了」をクリックする。
- 「アウトライン」ビューで、「エレメント」 > 「テーマ」を展開して、「Auction」を選択する。
- 「プロパティー」ビューで、「デフォルト」チェック・ボックスを選択して、
新規テーマをポータル・アプリケーションに設定する。
この変更はポータル構成に即時に適用されます。

- ポータル構成を保管する。
この課題のこのセクションでは、CSS Designer および Page Designer を使用して、
オークション・ポータル・アプリケーションのスタイル、テーマ、およびスキンを更新します。
現行テーマのバナー画像を変更する
オークション・ポータルのためのデフォルト・テーマにあるバナー画像を置換する方法は、以下のとおりです。
- 最初に、新規バナー画像をプロジェクトにインポートする。
- メニュー・バーから「ファイル」 > 「インポート」を選択する。
「インポート」ダイアログが表示されます。
- 「インポート・ソースの選択」の下で、「ファイル・システム」をクリックする。
- 「次へ」をクリックする。
- 各種 Rational 製品はそれぞれ別のインストール・ターゲット・ロケーションを使用します。
したがって、 新規バナー画像を持っているプラグインを見付けるために、
この製品のユーザー・インターフェースをそのまま残してください。
ファイル検索ツールを使用して、
ご使用のローカル・ファイル・システムの製品インストール・パスの下にある
com.ibm.etools.portal.examples.application_6.0.0 プラグイン・フォルダーを探し出す。
- 「インポート」ウィザードに戻り、「ディレクトリーから (From directory)」フィールドの横の「参照」をクリックする。
以下のディレクトリーに進む:
x:\com.ibm.etools.portal.examples.application_6.0.0\samples
ここで、x: はご使用のコンピューターで
com.ibm.etools.portal.examples.application_6.0.0 プラグインを収納しているパスです。
- インポートのターゲットとして auction.gif を選択して、「OK」を選択する。
- 「行先フォルダー (Into folder)」フィールドの隣の「参照」をクリックして、
「AuctionPortal/PortalContent/themes/html/Auction」を指定する。
- 「完了」をクリックする。
このウィザードでは、ファイルをご使用のワークスペースにインポートします。
- AuctionPortal プロジェクト用のポータル構成ファイルを開いて、
Portal Designer ポップアップ・メニューから「スタイルの編集」を選択する。
これにより、CSS Designer に Styles.css ファイルが開きます。
Styles.css はアプリケーションにおけるデフォルト・テーマのためのデフォルト・スタイル・シートです。
CSS Designer は CSS ファイル用に定義された次の 2 つのスタイル・ビューを提供します:
プレビュー (左側)、これは Web ソースのブラウザー・レンダリングで表示されるときに、
スタイル規則の視覚化されたサンプルを提供します。 ソース・ビュー (右側)、
これは CSS ファイルのテキスト・バージョンを表示します。
上記のビューのいずれかを使用してスタイルを編集できます。
- プレビューでバナー背景アイコンをスクロールして選択する。
- ポップアップ・メニューから「スタイル規則の編集 [.wpsToolbarBannerBackground]」を選択する。
- 「スタイル・プロパティーの設定」ダイアログの左側から背景プロパティーをクリックする。
- 「画像」フィールドに「../../auction.gif」と入力する。

- 「OK」をクリックする。
- CSS ファイルを保管して、CSS Designer を閉じる。
新規バナー画像は Portal Designer にあるオープン・ページに設定されますので確認してください。

- ポータル構成ファイルを保管して閉じる。
Page Designer を使用して、ヘッダー域のツールバー・レイアウトなどのテーマを大きく変更することができます。
テーマのレイアウト (およびスタイル) とその関連スキンを編集できます。
変更内容は、テーマの default.jsp ファイル、 関連スキンの control.jsp ファイル、その他関連 JSP ファイルに保管されます。
さらに、エディターで変更したいずれの内容も、
ご使用のポータル・アプリケーション内で、このテーマを使用するすべてに適用されます。
これで、
『課題 2.3: WebSphere Portal テスト環境におけるポータル・アプリケーションの実行』を始める準備が完了しました。