Administration Console の拡張

     前  次    新しいウィンドウで目次を開く     
ここから内容の開始

Administration Console の外観の変更

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

図 5-1 にこのプロセスを示します。プロセスの手順、および各手順の結果については、表 5-1 を参照してください。以下の節では、各手順について詳しく説明します。

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

Administration Console 拡張の開発の概要

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

 


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

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

  1. 次のディレクトリのすべてのファイルを、独自の開発用ディレクトリにコピーします。
  2. WL_HOME/samples/server/medrec/console-extension

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

  3. root-dir/framework/skins および root-dir/framework/skeletonsxray ディレクトリの名前を独自の名前に変更します。
  4. root-dir は、独自の開発用ディレクトリの名前です。

    たとえば、root-dir/framework/skins/mycompany および root-dir/framework/skeletons/mycompany のようにします。

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

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

Administration Console のバナーの変更

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

  1. Administration Console バナーのロゴを置き換えるには、独自のロゴ ファイルを root-dir/framework/skins/mycompany/images/banner_logo.gif として保存します。
  2. バナー フレームのサイズを変更する手間を省くには、独自の画像の高さを 42 ピクセル以下にします。

  3. バナーの背景色を変更するには、root-dir/framework/skins/mycompany/images/banner_bg.gif を、別の色の同じサイズの画像ファイルで置き換えます。
  4. ロゴの ALT テキストを変更するには、root-dir/framework/skeletons/mycompany/header.jsp を開き、<bean:message key="login.wlsident"> を独自のテキストで置き換えます。
  5. ローカライズされた文字列を使用する場合は、JSTL <fmt:message> タグを使用します。「ルック アンド フィールでのメッセージ バンドルの使用」を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 


ルック アンド フィールでのメッセージ バンドルの使用

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

  1. LoginForm.jsp<fmt:setBundle basename="global" var="current_bundle" scope="page"/> タグによって、global に現在のメッセージ バンドルが設定されます。
  2. この JSP タグは、WEB-INF/classes 内から次の名前パターンのファイルを検索します。
    bundle[_locale].properties

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

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

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

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

表 5-5 バナー、ログイン ページ、およびログイン エラー ページに表示されるメッセージ
ファイル
メッセージ キーと値
root-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
root-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
root-dir/framework/
skeleton/
mycompany/
header.jsp
window.title=BEA WebLogic Server Administration Console

 


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

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

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

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

  1. このファイルを、検証機能を持つ XML エディタ (推奨) またはテキスト エディタで開きます。
  2. <provider-info> 要素で、ルック アンド フィール、開発者の連絡先、およびサポート URL について説明する情報を変更します。
  3. この要素の情報には、プログラム的に重要なものは含まれていません。これらの情報は、テクニカル サポート チームがソフトウェアの修正履歴を追跡できるようにすることを目的としています。

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

ページの先頭       前  次