課題 2.2: ポータル・サイトのカスタマイズ

この課題を始める前に、 『課題 2.1: ポートレット・アプリケーションを表示するための新規ポータルの作成』を完了していなければなりません。

新規テーマを作成する

ポータル・アプリケーション作成のプロセスで、Portal Designer で最新のテーマの作成を選択できます。 テーマには、ポータル・アプリケーションの全体の外観を提供し、 画像、ナビゲーション、ツールバー、およびページ・レベルのビジュアル効果を含めて、 ポータル・デザインの多くのエレメントが組み込まれます。 このチュートリアルで開発したポータル・サイトに新規テーマを作成する方法は、以下のとおりです。

  1. メニュー・バーから「ファイル」 > 「新規」 > 「テーマ」の順に選択する。
  2. タイトル」フィールドに「Auction」と入力する。
  3. ソース・テーマにする会社のテーマをスクロールして選択する。 新規テーマの作成は既存のテーマをベースにすると非常に簡単になり、 必要なテーマ・エレメントのすべてをゼロから作成する必要はありません。
  4. 次へ」をクリックする。
  5. 使用可能なスキン・リストから「シャドー」スキンを選択して、 「デフォルト・スキンとして設定」をクリックし、 「シャドー」を新規オークション・テーマのためのデフォルト・スキンにする。

    スキンとは、ポータル・ページ内のそれぞれのポートレットの周りの境界線のことです。 ポータルの全体の外観に設定されるテーマとは異なり、 スキンは自分のポータル・アプリケーションに挿入するそれぞれのポートレットの外観に限定されます。 デフォルトでは、限定されたスキン選択だけが、それぞれのテーマに使用可能です。

  6. 完了」をクリックする。
  7. 「アウトライン」ビューで、「エレメント」 > 「テーマ」を展開して、「Auction」を選択する。
  8. 「プロパティー」ビューで、「デフォルト」チェック・ボックスを選択して、 新規テーマをポータル・アプリケーションに設定する。

    この変更はポータル構成に即時に適用されます。
    新規テーマを持つポータル構成

  9. ポータル構成を保管する。

この課題のこのセクションでは、CSS Designer および Page Designer を使用して、 オークション・ポータル・アプリケーションのスタイル、テーマ、およびスキンを更新します。

現行テーマのバナー画像を変更する

オークション・ポータルのためのデフォルト・テーマにあるバナー画像を置換する方法は、以下のとおりです。

  1. 最初に、新規バナー画像をプロジェクトにインポートする。
    1. メニュー・バーから「ファイル」 > 「インポート」を選択する。 「インポート」ダイアログが表示されます。
    2. インポート・ソースの選択」の下で、「ファイル・システム」をクリックする。
    3. 次へ」をクリックする。
    4. 各種 Rational 製品はそれぞれ別のインストール・ターゲット・ロケーションを使用します。 したがって、新規バナー画像を持っているプラグインを見付けるために、 この製品のユーザー・インターフェースをそのまま残してください。 ファイル検索ツールを使用して、ご使用のローカル・ファイル・システムの製品インストール・パスの下にある com.ibm.etools.portal.examples.application_6.0.0.1 プラグイン・フォルダーを探し出す。
    5. 「インポート」ウィザードに戻り、「ディレクトリーから (From directory)」フィールドの横の「参照」をクリックする。 以下のディレクトリーに進む:
      x:¥com.ibm.etools.portal.examples.application_6.0.0.1¥samples
      ここで、x: はご使用のコンピューターで com.ibm.etools.portal.examples.application_6.0.0.1 プラグインを収納しているパスです。
    6. インポートのターゲットとして auction.gif を選択して、「OK」を選択する。
    7. 行先フォルダー (Into folder)」フィールドの隣の「参照」をクリックして、 「AuctionPortal/PortalContent/themes/html/Auction」を指定する。
    8. 完了」をクリックする。

      このウィザードでは、ファイルをご使用のワークスペースにインポートします。

  2. AuctionPortal プロジェクト用のポータル構成ファイルを開いて、 Portal Designer ポップアップ・メニューから「スタイルの編集」を選択する。 これにより、CSS Designer に Styles.css ファイルが開きます。 Styles.css はアプリケーションにおけるデフォルト・テーマのためのデフォルト・スタイル・シートです。

    CSS Designer は CSS ファイル用に定義された次の 2 つのスタイル・ビューを提供します: プレビュー (左側)、これは Web ソースのブラウザー・レンダリングで表示されるときに、 スタイル規則の視覚化されたサンプルを提供します。ソース・ビュー (右側)、 これは CSS ファイルのテキスト・バージョンを表示します。 上記のビューのいずれかを使用してスタイルを編集できます。

  3. プレビューでバナー背景アイコンをスクロールして選択する。
  4. ポップアップ・メニューから「スタイル規則の編集 [.wpsToolbarBannerBackground]」を選択する。
  5. スタイル・プロパティーの設定」ダイアログの左側から背景プロパティーをクリックする。
  6. 画像」フィールドに「../../auction.gif」と入力する。
    「スタイル・プロパティーの設定」ダイアログ
  7. OK」をクリックする。
  8. CSS ファイルを保管して、CSS Designer を閉じる。 新規バナー画像は Portal Designer にあるオープン・ページに設定されますので確認してください。

    新規バナー

  9. ポータル構成ファイルを保管して閉じる。

Page Designer を使用して、ヘッダー域のツールバー・レイアウトなどのテーマを大きく変更することができます。 テーマのレイアウト (およびスタイル) とその関連スキンを編集できます。 変更内容は、テーマの default.jsp ファイル、 関連スキンの control.jsp ファイル、その他関連 JSP ファイルに保管されます。 さらに、エディターで変更したいずれの内容も、 ご使用のポータル・アプリケーション内で、このテーマを使用するすべてに適用されます。

これで、 『課題 2.3: WebSphere Portal テスト環境におけるポータル・アプリケーションの実行』を始める準備が完了しました。

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.