Administration Console の拡張

Administration Console の外観の変更

この節では、WebLogic Portal のルック アンド フィールを作成し、Administration Console の拡張としてデプロイする方法について説明します。拡張を使用すると、Administration Console の BEA ロゴ、色、スタイルの一部またはすべてを置き換えることができます。

図 3-1 にこのプロセスを示します。プロセスの手順、および各手順の結果については、表 3-1 を参照してください。プロセスの各手順の詳細については、それ以降の節を参照してください。

図 3-1 Administration Console 拡張の開発の概要

 

表 3-1 モデル MBean の開発タスクと結果

手順	説明	結果
1. サンプル ルック アンド フィールのコピーと修正 : 主な手順	あらかじめインストールされているサンプル ルック アンド フィールを開発の出発点として使用する。このサンプルの画像やスタイルを、独自の画像やスタイルで置き換える。	独自のロゴやスタイルを含むルック アンド フィール。
2. (省略可能) メッセージ バンドルの作成	バナー、ログイン ページ、およびログイン エラー ページに表示されるテキスト メッセージを変更する場合は、独自のメッセージ バンドルを作成し、そのバンドルからのメッセージを使用するようにページを修正する。	独自のメッセージを含むローカライズ済みプロパティ ファイル。
3.サンプル NetUI 拡張ファイルの修正	NetUI 拡張ファイルは、作成する拡張のデプロイメント記述子として機能する。ルック アンド フィール内でのファイルやディレクトリの位置を記述する。	作成する拡張のデプロイメント記述子。
4. 拡張のアーカイブとデプロイメント	ルック アンド フィール拡張を JAR ファイルにアーカイブし、ドメインの console-ext ディレクトリにコピーする。	ドメインで Administration Console が開始される際に、BEA によってパッケージ化およびインストールされたルック アンド フィールの代わりに、そのドメインの console-ext ディレクトリにあるルック アンド フィール拡張が使用される。

 

---

サンプル ルック アンド フィールのコピーと修正 : 主な手順

BEA ロゴと色を独自のロゴと色で置き換える単純な拡張を作成するには、次の手順に従います。

次のディレクトリのすべてのファイルを、独自の開発用ディレクトリにコピーします。

WL_HOME/samples/server/medrec/console-extension

WL_HOME は、WebLogic Server のインストール先ディレクトリです。

dev-dir/framework/skins および dev-dir/framework/skeletons の medrec ディレクトリの名前を独自の名前に変更します。

dev-dir は、独自の開発用ディレクトリの名前です。

Administration Console のバナーを変更します。
色、フォント、ボタン、画像を変更します。
チェンジ センタや他のポートレットのテーマを変更します。
ログイン ページとエラー ページを修正します。

ポータル コンポーネントやナビゲーション メニューのレイアウトを変更するなど、WebLogic Server ルック アンド フィールにさらに複雑な変更を加える場合は、WebLogic Portal ルック アンド フィールに関する高度な知識が必要になります。WebLogic Workshop のライセンスがある場合は、ルック アンド フィール エディタを使用してこうした複雑な変更を加えることができます。詳細については、『ポータル ユーザ インタフェースのフレームワーク ガイド』を参照してください。

Administration Console のバナーの変更

MedRec ルック アンド フィールの画像ファイルを、独自の画像ファイルで上書きします。

Administration Console バナーのロゴを置き換えるには、独自のロゴ ファイルを dev-dir/framework/skins/medrec/images/banner_logo.gif として保存します。

バナー フレームのサイズを変更する手間を省くには、独自の画像の高さを 42 ピクセル以下にします。

ロゴの ALT テキストを変更するには、dev-dir/framework/skeletons/medrec/header.jsp を開き、Your Message Here - <bean:message key="login.wlsident"> の部分を独自のテキストで置き換えます。

ローカライズされた文字列を使用する場合は、JSTL <fmt:message> タグを使用します。「メッセージ バンドルの作成」を参照してください。

バナーの背景色を変更するには、dev-dir/framework/skins/medrec/images/banner_bg.gif を、別の色の同じサイズの画像ファイルで置き換えます。

より複雑な修正を加える場合は、バナーを表示する JSP やスタイルを変更できます。Administration Console バナーのコンテンツは、dev-dir/framework/skeletons/medrec/header.jsp ファイルによって決まります。header.jsp 内では、スタイル bea-portal-body-header-logo でロゴ ファイルの名前や位置を指定します。スタイル bea-portal-body-header では、バナーの背景として使用する画像ファイルの名前と位置を指定します。これらのスタイルは、dev-dir/framework/skins/medrec/css/body.css で定義します。

色、フォント、ボタン、画像の変更

Administration Console では、さまざまなカスケーディング スタイル シート (CSS) を使用してフォントや色を指定しています。これらのスタイルを変更するには、スタイル シートを開いてスタイルの定義を変更します。表 3-2 に、Administration Console で使用する CSS ファイルについてまとめます。これらのファイルは、dev-dir/framework/skins/medrec/css ディレクトリにあります。

表 3-2 色およびフォント全般を定義する CSS ファイル

CSS ファイル	説明
wls.css	以下の領域の WebLogic Server スタイルを格納する。 body、a、h1、および h2 などの要素の全般的な定義 データ テーブル フォーム フィールド WebLogic Server フォーム ボタン エラー メッセージ ツールバーのコンテンツ 階層リンクのコンテンツ 操作ガイド、システム状態、およびチェンジ センタの各ポートレットの全般的なスタイル
body.css book.css button.css form.css layout.css portlet.css window.css	以下の領域の WebLogic Portal フレームワーク スタイルを格納する (一部は Administration Console では使用されない)。 ポータルのヘッダとフッタ ブック、ページ、およびメニューのスタイル ボタンのスタイル フォーム、入力、テキスト領域のスタイル レイアウトおよびプレースホルダのスタイル ポートレットのスタイル

 

Administration Console 内のボタンでは、青のグラデーション (および、アクティブでないボタン用のグレー) を表示するための背景画像を繰り返し使用します。これらのボタン用の画像ファイルは次のディレクトリにあります。
dev-dir/framework/skins/medrec/images

チェンジ センタや他のポートレットのテーマの変更

Administration Console の一部のポートレットではテーマを使用しており、これらのテーマの定義を変更できます。テーマは、ルック アンド フィールに似ていますが、テーマのスコープはポータルのセクション (ブック、ページ、ポートレットなど) に限られます。テーマを使用すると、ポータル自体に影響を与えずに、ポータルのコンポーネントのルック アンド フィールを変更できます。

たとえば、チェンジ センタ ポートレットでは、専用のテーマを使用して Administration Console の他のフォーム ボタンとは異なるボタンを表示します。

テーマのボタンやタイトル バーの色を変更するには、テーマの skins ディレクトリにある画像やスタイルを変更します。表 3-3 に、テーマ スキンの CSS ファイルと画像が格納されるディレクトリについてまとめます。これらのディレクトリは、すべて dev-dir/framework/skins/medrec ディレクトリの下にあります。スキン テーマの修正については、WebLogic Workshop オンライン ヘルプの「スキンおよびスキン テーマを作成する」を参照してください。

表 3-3 Administration Console のテーマのスキン

スキン ディレクトリ	説明
wlsbreadcrumbs	階層リンク ポートレットのフォントおよび間隔を定義する。階層リンク ポートレットは、タブ付きインタフェースの上に表示され、ナビゲーションの履歴を提供する。
wlschangemgmt	チェンジ センタ ポートレットのボタン、フォント、タイトル バーの背景、および間隔を定義する。
wlsmessages	メッセージ ポートレットのボタン、フォント、タイトル バーの背景、および間隔を定義する。メッセージ ポートレットは、Administration Console に検証メッセージや確認メッセージがあるときにのみ表示される。
wlsnavtree	NavTreePortlet のボタン、フォント、タイトル バーの背景、および間隔を定義する。
wlsquicklinks	操作ガイド ポートレットのボタン、フォント、タイトル バーの背景、および間隔を定義する。
wlsstatus	システム状態ポートレットのボタン、フォント、タイトル バーの背景、および間隔を定義する。
wlstoolbar	ツールバー ポートレットのフォントおよび間隔を定義する。ツールバー ポートレットは、バナー内に表示され、ホーム、ヘルプ、および AskBEA の各ボタンを格納する。
wlsworkspace	Administration Console の ContentBook 領域内のブックおよびページの枠線、間隔、および背景色を定義する。

 

各テーマは、スキンおよびスケルトンで構成されます。スケルトンは、ポートレット コンテンツの全体的な構造を定義します。各テーマのスケルトンの定義は、dev-dir/framework/skeletons/medrec ディレクトリにあります。スケルトン テーマの修正については、WebLogic Workshop オンライン ヘルプの「スケルトンおよびスケルトン テーマを作成する」を参照してください。

ログイン ページとエラー ページの修正

ログイン ページは、ユーザにユーザ ID とパスワードの入力を要求します。ログイン エラー ページは、ユーザが無効なデータを入力したときに表示されます。これらは、Administration Console がポータル デスクトップをロードする前に表示されるページです。したがって、これらのページではポータルのルック アンド フィールは使用されず、その画像やスタイル シートは dev-dir/framework ディレクトリには格納されません。表 3-4 に、ログイン ページとログイン エラー ページの外観を決定するファイルとディレクトリについてまとめます。

表 3-4 ログイン ページとログイン エラー ページの外観を決定するファイル

ファイル	説明
dev-dir/common/ login.css	ログイン ページのフォントと間隔を定義する。
dev-dir/images/ login_banner_bg.gif login_banner_right.gif login_banner.gif login_bottom.gif	ログイン ページの画像。
dev-dir/login/ LoginError.jsp LoginForm.jsp	ログイン ページとログイン エラー ページを表示する。 これらのページに表示するテキストを変更するには、<fmt:message/> JSP タグを修正して独自のメッセージ バンドルを指すようにする。「メッセージ バンドルの作成」を参照。

 

 

---

メッセージ バンドルの作成

Administration Console のバナー、ログイン ページ、およびログイン エラー ページでは、ローカライズされたプロパティ ファイルからのテキスト メッセージを JSTL タグを使用してロードします。たとえば、LoginForm.jsp のウィンドウ タイトルを表示する場合は次のようになります。

LoginForm.jsp の <fmt:setBundle basename="global" var="current_bundle" scope="page"/> タグによって、global に現在のメッセージ バンドルが設定されます。

この JSP タグは、WEB-INF/classes 内から次の名前パターンのファイルを検索します。
bundle[-locale].properties

このバンドルのデフォルト プロパティは WEB-INF/classes/global.properties です。Web ブラウザまたはオペレーティング システムで別のロケールが指定されている場合は、JSP タグによって WEB-INF/classes/global_locale.properties がロードされます。

<fmt:message key="window.title" bundle="${current_bundle}" /> タグによって global.properties ファイルが開かれ、window.title キーによって特定されたテキストが表示されます。
window.title=BEA WebLogic Server Administration Console

これらのメッセージを変更するには、独自のプロパティ ファイルを作成し、JSP タグを修正してそのバンドルを使用するようにします。

表 3-5 に、バナー、ログイン ページ、およびログイン エラー ページに表示されるテキスト メッセージを示します。

表 3-5 バナー、ログイン ページ、およびログイン エラー ページに表示されるメッセージ

ファイル	メッセージ キーと値
dev-dir/login/ LoginForm.jsp	window.title=BEA WebLogic Server Administration Console login.wlsident=BEA WebLogic Server Administration Console login.welcome2=Log in to work with the WebLogic Server domain login.username=Username: login.password=Password: login.submit=Log In
dev-dir/login/ LoginError.jsp	window.title=BEA WebLogic Server Administration Console login.wlsident=BEA WebLogic Server Administration Console loginerror.authdenied=Authentication Denied loginerror.passwordrefused=The username or password has been refused by WebLogic Server.Please try again. login.username=Username: login.password=Password: login.submit=Log In
dev-dir/framework/ skeleton/medrec/ header.jsp	window.title=BEA WebLogic Server Administration Console

 

バナー、ログイン ページ、およびログイン エラー ページに独自のメッセージを表示するには、次の手順に従います。

ログイン ページおよびログイン エラー ページのメッセージ バンドルの名前を変更します。
表 3-5 に示したファイルを開きます。
<fmt:setBundle basename="global" var="current_bundle" scope="page"/> タグの basename 属性の値を変更します。

バンドル名には、会社名を含めることをお勧めします。次に例を示します。
<fmt:setBundle basename="mycompany" var="current_bundle" scope="page"/>

次のディレクトリを作成します。
dev-dir/WEB-INF/classes
このディレクトリ内に、bundle.properties という名前のテキスト ファイルを作成します。

bundle は、前の手順で指定したバンドル名です。たとえば、mycompany.mypackage.myclass のようになります。

表 3-5 からメッセージ キーと値をコピーして、作成したプロパティ ファイルに貼り付けます。重複しているキーと値のペアは削除します。
プロパティ ファイル内の値を修正します。
ローカライズされたプロパティを作成するには、プロパティ ファイルを次の名前で保存します。
bundle[_locale].properties

locale は java.util.Locale でサポートされるロケール コードです。『J2SE API Specification』の「Locale」を参照してください。

たとえば、mycompany_ja.properties のようになります。

 

---

サンプル NetUI 拡張ファイルの修正

NetUI 拡張ファイルは、作成したルック アンド フィールのデプロイメント記述子として機能します。ルック アンド フィール内のファイルの名前と位置を格納し、作成したルック アンド フィールで Administration Console のルック アンド フィールを置き換える役割を果たします。詳細については、『NetUI Extensions Schema Reference』を参照してください。

サンプル ファイルは次の場所にあります。
dev-dir/WEB-INF/netuix-extension.xml

このファイルを修正するには、次の手順に従います。

このファイルを、検証機能を持つ XML エディタ (推奨) またはテキスト エディタで開きます。
<provider-info> 要素で、ルック アンド フィール、開発者の連絡先、およびサポート URL について説明する情報を変更します。

この要素の情報には、プログラム的に重要なものは含まれていません。これらの情報は、テクニカル サポート チームがソフトウェアの修正履歴を追跡できるようにすることを目的としています。

<look-and-feel-content> 要素に以下の変更を加えます。
title、skin、および skeleton 属性で、medrec という値を「サンプル ルック アンド フィールのコピーと修正 : 主な手順」の手順 2 で指定したディレクトリ名に変更します。
definitionLabel および markupName 属性で、medrec という値を手順 2 で指定したディレクトリ名または他の文字列に変更します。これらの属性はポータル フレームワークで必要になるもので、ルック アンド フィールの拡張では使用しません。

 

---

拡張のアーカイブとデプロイメント

Administration Console の拡張を追加作成した場合は、すべての拡張を単一の JAR ファイルにアーカイブする必要があります。

拡張をアーカイブしてデプロイするには、次の手順に従います。

開発ディレクトリを JAR ファイルにアーカイブします。JAR ファイルの名前は、プログラム的には重要ではありません。分かりやすい名前を付けてください。

dev-dir ディレクトリのコンテンツをアーカイブのルートにする必要があります。dev-dir ディレクトリの名前自体がアーカイブに含まれないようにしてください。Java の jar コマンドを使用してアーカイブを作成する場合は、dev-dir ディレクトリからコマンドを入力します。次に例を示します。
c:\dev-dir\> jar -cf my-extension.jar *

JAR ファイルを各ドメインの domain-dir/console-ext ディレクトリにコピーします。domain-dir はドメインのルート ディレクトリです。
各ドメインの管理サーバを再起動します。