ルックアンドフィールの作成

ドキュメントのダウンロード

サイトマップ

用語集

検索

e-docs > WebLogic Portal > 開発者ガイド > ルックアンドフィールの作成

開発者ガイド

ルックアンドフィールの作成

WebLogic Portal には、ポータルのルックアンドフィール（見た目と使い心地）を管理するための強力なメカニズムが 2 つ用意されています。すなわち、スキンとレイアウトです。スキンとは、ポータルのビジュアルスタイル（たとえば、色、フォント、アイコンなど）を定義するグラフィックスおよび HTML スタイル設定のことです。一方、レイアウトとは、ポートレットを配置できる HTML ベースのマトリクスのことです。WebLogic Portal プラットフォームには、これらのコンポーネントの作成、管理、およびさまざまなアプリケーションのユーザへの提供を行うための構造があらかじめ用意されています。

この章では、ポータルのスキンとレイアウトを作成する方法を示します。カスケーディングスタイルシート (CSS) の作成、グラフィックスの作成、および HTML テーブルの定義についての知識があらかじめ必要になります。

この章では、以下の内容について説明します。

ポータルのルックアンドフィール構造

Web ブラウザでポータルを閲覧するとき、目に見えるものは統合された単一の Web ページですが、そのポータルは多数の JSP から成ります。たとえば、ポータルでは、ページコンテンツだけでなく、ヘッダー、フッター、垂直および水平ナビゲーションバー用の JSP が個別に使用されることがあります。

ポータルの構造で用いられる各 JSP には、ポータル全体のルックアンドフィールの一部を実装するのに必要なコードが記述されています。たとえば、各 JSP には、ポータルのスキンを決定するための CSS およびグラフィックスへの参照を記載することができ、また、ポータルのメインコンテンツページには、そのポータル用に選ばれたレイアウトを実装するのに必要なロジックが記述されます。

E-Business Control Center で Portal Wizard を用いてポータルを作成する際には、baseportal というポータルテンプレートが製品にあらかじめ用意されています。このテンプレートの機能の 1 つは、ポータルの新規作成用のルックアンドフィール構造を定義する一連の定義済み JSP を使用することです。この章では、baseportal 構造を取り上げて、スキンおよびレイアウトの作成手順を示します。なお、この構造は、WebLogic Portal に付属している Avitek Financial ポータルサンプルにも使用されています。

スキンの使い方

スキンは、カスケーディングスタイルシート（.css ファイル）や画像ディレクトリなど、ポータルのルックアンドフィールを定義するファイルの集まりです。ボタン、バナー、ポートレットヘッダー、背景色、およびフォント特性はすべて、CSS とグラフィックスで決まります。また、スキンにはそのスキンのサムネイル画像も含まれており、プレビュー目的に使用されます。

この節では、以下のトピックを扱います。

スキンを作成する

ポータルでスキンをシームレスに切り替えることができるようにするには、それぞれのスキンの CSS およびグラフィックスには、図 10-1 に示すように、他のスキンの CSS およびグラフィックスと同じ名前を付ける必要があります。

図10-1 baseportal テンプレートを用いて作成されるポータルに適用されるさまざまなスキン

注意: 広告やポートレット内のグラフィックスなど、ページに表示されるコンテンツグラフィックスはすべて、コンテンツ管理システム内か、ポートレットディレクトリ下の画像サブディレクトリ内に格納されます。ただし、ポートレットのタイトルバーグラフィックスと背景色は、図 10-1 に示すように、スキンによって決まります。

スキンの作成は、CSS ファイルとグラフィックスファイルを作成または修正し、他のスキンで使用されているのと同じ名前を付けて、別のディレクトリに格納するだけのことです。スキンの作成にはまた、プレビュー用のサムネイル画像の作成も必要になります。好みのグラフィックスツールを使用して、スキンおよびサムネイルのグラフィックスを作成および修正します。

スキンのグラフィックスを作成する際には、画像が大きければ大きいほど、ページをブラウザにロードするのが遅くなることに注意してください。

定義済みのスキン

WebLogic Portal には、Portal Wizard でポータルを作成する際に用いられる一連の定義済みスキンが用意されています。これらのスキンは以下の場所にあります。

<BEA_HOME>¥weblogic700¥common¥templates¥webapps¥portal¥baseportal¥
j2ee¥framework¥skins

これらは、まったく新しいスキンを作成する際にテンプレートとして使用することができます。

スキンを格納する

次の節では、作成した新しいスキンの格納先となるディレクトリ構造について説明します。スキンをポータルで利用できるようにするには、ポータルのメタデータで参照されているディレクトリ構造に、CSS とグラフィックスを格納します。スキンを構成する必須要素をどこに格納すべきかを表10-1 に示します。

スキンの構成要素のうち、スキンサムネイル画像だけは、サーバ上に格納されません。サムネイルは、選択されたスキンを E-Business Control Center でプレビューするためのものです。

表10-1 スキンリソースの格納先

リソース	格納場所
スキンサムネイル画像	<BEA_HOME>¥user_projects¥your_domain¥beaApps¥ portalApp-project¥library¥portal¥skins¥skin_folder
CSS ファイル	<BEA_HOME>¥user_projects\your_domain\beaApps\portalApp\ your_portal\framework\skins¥skin_folder\css
スキングラフィックス	<BEA_HOME>¥user_projects\your_domain\beaApps\portalApp\ your_portal\framework\skins¥skin_folder\images

スキンを利用可能にする

スキンをポータルで利用できるようにするには、E-Business Control Center を用いてスキンをポータル定義に追加し、更新されたポータル定義をサーバに同期化したあと、WebLogic Portal Administration Tools を用いてそのスキンをポータルに適用することが必要になります。

管理目的でスキンを利用できるようにする手順については、『WebLogic Portal管理者ガイド』に記載されています。「ポータルとポートレットの属性の管理」 (http://edocs.beasys.co.jp/e-docs/wlp/docs70/admin/frmwork.htm) を参照してください。

レイアウトの使い方

レイアウトとは、ページ内の行と列を定義する HTML テーブルのことです。レイアウトは、HTML コード内に記述される特別定義のプレースホルダタグに基づいて、ポータルページへの Web コンテンツおよびポートレットの配置を決定するものです。

注意: レイアウトでは、フレームはサポートされません。

レイアウトは、HTML テーブル定義が記述された単一の JSP ファイルと、レイアウトのプレビュー用サムネイル画像から成ります。WebLogic Portal にあらかじめ用意されているレイアウトのサムネイル表現を図 10-2 に示します。

図10-2 WebLogic Portal に用意されているデフォルトレイアウトのサムネイル

この節では、以下のトピックを扱います。

レイアウトを作成する

新しいレイアウトを作成して既存のポータルに追加するには、以下の手順に従います。

既存のレイアウトを基に、作業を始めます。your_portal¥framework¥layouts¥ ディレクトリで、既存のレイアウトフォルダのコピーを作成し、名前を変更します。その新しいディレクトリ内の template.jsp（図 10-3 に示す）をテキストエディタで開きます。
図10-3 3 列構成の template.jsp のソースコード

layout:placePortletsinPlaceholder タグを用いたプレースホルダの定義に注目してください。また、テーブルの各セル内で layout:render タグが呼び出されていることにも注意してください。このタグで、プレースホルダを用いてポートレットのコンテンツがポータルに挿入されるのです。
新しいプレースホルダ定義を追加します。図 10-4 に示すように、既存の template.jsp ファイル内の定義に新しいプレースホルダ名をいくつか挿入します。
図10-4 新しいプレースホルダ名の追加
図 10-5 に示すように、HTML でテーブルを作成し、各テーブルセルに新しいプレースホルダを配置します。
図10-5 HTML コードへのプレースホルダの挿入
新しいファイルを template.jsp として保存します。
図 10-6 に示すように、グラフィックエディタを用いて、新しいレイアウトを表すように既存のサムネイルを編集し、それを 2 つの別個のファイル（thumbnail.gif と layout_name.gif）として保存します。ここで、 layout_name はレイアウトフォルダの名前です。
図10-6 レイアウトサムネイルの作成

WebLogic Portal には、Portal Wizard でポータルを作成する際に用いられる一連の定義済みレイアウトが用意されています。これらのレイアウトは以下の場所にあります。

<BEA_HOME>¥weblogic700¥common¥templates¥webapps¥portal¥
   baseportal¥j2ee¥framework¥layouts

次の節では、新しいレイアウトの格納先となるディレクトリ構造について説明します。

レイアウトを格納する

レイアウトをポータルで利用できるようにするには、新しいレイアウトとサムネイル画像を、特定のディレクトリ構造内の 2 つの異なる場所に格納します。さらに、サムネイル画像には 2 つの異なる名前を使用します。これらのファイルの名前と格納場所を表10-2 に示します。

表10-2 スキンリソースの格納先

リソース	格納場所
レイアウトサムネイル画像: layout_name.gif	<BEA_HOME>¥user_projects¥your_domain¥beaApps¥ portalApp-project¥library¥portal¥layouts¥layout_folder
レイアウトサムネイル画像: thumbnail.gif	<BEA_HOME>¥user_projects\your_domain\beaApps\portalApp\ your_portal\framework\layouts¥layout_folder
template.jsp	<BEA_HOME>¥user_projects¥your_domain¥beaApps¥ portalApp-project¥library¥portal¥layouts¥layout_folder および <BEA_HOME>¥user_projects\your_domain\beaApps\portalApp\ your_portal\framework\layouts¥layout_folder

レイアウトを利用可能にする

レイアウトをポータルで利用できるようにするには、E-Business Control Center を用いてレイアウトをポータル定義に追加し、更新されたポータル定義をサーバに同期化したあと、WebLogic Portal Administration Tools を用いてそのレイアウトをポータルに適用することが必要になります。

レイアウトを利用できるようにする手順については、『WebLogic Portal 管理者ガイド』に記載されています。「ポータルとポートレットの属性の管理」 (http://edocs.beasys.co.jp/e-docs/wlp/docs70/admin/frmwork.htm) を参照してください。