| Oracle® Fusion Middleware Oracle WebLogic Administration Console の拡張 11g リリース 1 (10.3.1) B55554-01 |
|
 戻る |
 次へ |
| Oracle® Fusion Middleware Oracle WebLogic Administration Console の拡張 11g リリース 1 (10.3.1) B55554-01 |
|
戻る |
次へ |
この節では、WebLogic Portal のルック アンド フィールを作成し、Administration Console の拡張としてデプロイする方法について説明します。拡張を使用すると、Administration Console の Oracle ロゴ、色、スタイルの一部またはすべてを置き換えることができます。
コンソール拡張のルック アンド フィールを作成するために以下のタイプのファイルが使用されます。
カスケーディング スタイルシート (Cascading stylesheet : CSS)。ほとんどの変更 (簡単な変更) は、CSS を変更することによって行われます。
画像。これらは、CSS ファイルまたはスケルトン JSP や コンテンツ JSP により生成される HTML から参照できます。画像を変更してもそのサイズを同じままにし、同じ名前を使用する場合、それが参照元の CSS または JSP を変更する必要はありません。
Skeleton Java Server (JSP) ファイル。
JavaScript ファイル。クライアント サイドの動作が JavaScript ファイルから送信されます。これらのファイルを変更することをお勧めしません。
すべてのルック アンド フィール ファイル (CSS、スケルトン、JavaScript、および画像) は各リリースごとに変更します。したがって、WebLogic server の新しいリリースにアップグレードする場合は、カスタム ルック アンド フィールを更新する必要があります。
図 5-1 にこのプロセスを示します。プロセスの手順、および各手順の結果については、表 5-1 を参照してください。以下の節では、各手順について詳しく説明します。
表 5-1 Administration Console の外観の変更 : タスクと結果
| 手順 | 説明 | 結果 |
|---|---|---|
|
WebLogic Server には、出発点として使用できるルック アンド フィール テンプレートがあります。ファイルにアクセスするには、テンプレートを展開する。 |
ルック アンド フィールファイルのセットを変更できます。 |
|
|
独自の画像やスタイルで置き換えて、コンソールのカスタム ルック アンド フィールを作成する。 |
独自のロゴやスタイルを含むルック アンド フィール。 |
|
|
3. (省略可能) ルック アンド フィールでのメッセージ バンドルの使用 |
バナー、ログイン ページ、およびログイン エラー ページに表示されるテキスト メッセージを変更する場合は、独自のメッセージ バンドルを作成し、そのバンドルからのメッセージを使用するようにページを修正する。 |
独自のメッセージを含むローカライズ済みプロパティ ファイル。 |
|
NetUI 拡張ファイルは、ルック アンド フィール内でのファイルやディレクトリの位置を記述する。 |
|
|
|
ルック アンド フィール拡張を WAR ファイルにアーカイブし、ドメインの 詳細については、「コンソールの拡張のアーカイブとデプロイ」を参照してください。 |
ドメインで Administration Console が起動される際に、Oracle によってパッケージ化およびインストールされたルック アンド フィールの代わりに、そのドメインの |
Weblogic Server インストール環境には、出発点として使用できるルック アンド フィール テンプレートがあります。テンプレートを展開し、独自の画像やスタイルで置き換えます。 2 つのファイルがあります。
build-new-laf.xml
このファイルは、拡張のためのルック アンド フィール ファイルの初期セットを作成する ant スクリプトです。このスクリプトは、laftemplate.zip (以下を参照) からルック アンド フィール ファイルを展開し、拡張の名前に対応するようにディレクトリの名前を変更します。
laftemplate.zip
このテンプレートには、build-new-laf.xml が展開するルック アンド フィール ファイルの初期セットがあります。
テンプレートを展開するには、
Apache Ant がまだインストールされていない (または IDE で使用できない) 場合は、インストールして、コンフィグレーションします。詳細については、(http://ant.apache.org/) にある Apache Ant プロジェクトを参照してください。
コマンド プロンプトから次のディレクトリを変更します。
WL_HOME/server/lib/console-ext/templates
WL_HOME WebLogic Server をインストールしたディレクトリです。
以下の構文を使用して build-new-laf.xml で Ant を実行します。
ant -f build-new-laf.xml -Dname=ext-name -Ddir=root-dir
ext-name は拡張の名前です。root-dir はコンソール拡張の開発のディレクトリです。
ant -f build-new-laf.xml -Dname=myLAF -Ddir=c:\src\laf-ext
laftemplate.zip からのファイルは root-dir に抽出されます。
テンプレートを展開すると、ファイルを変更または置き換えて、独自のルック アンド フィールを作成できます。以下を参照してください。
ポータル コンポーネントやナビゲーション メニューのレイアウトを変更するなど、WebLogic Server ルック アンド フィールに複雑な変更を加える場合は、WebLogic Portal ルック アンド フィールに関してより高度な知識が必要になります。詳細については、『Oracle WebLogic Portal 用のポータル開発ガイド』の「ルック アンド フィールの機能を使用したユーザ インタフェース開発」を参照してください。
サンプルのルック アンド フィールの画像ファイルを、独自の画像ファイルで上書きします。
Administration Console バナーのロゴを置き換えるには、独自のロゴ ファイルを root-dir/framework/skins/ext-name/images/Branding_WeblogicConsole.gif として保存します。
バナーのサイズを変更する手間を省くには、画像のサイズを変更しないでください。
バナーの背景色を変更するには、root-dir/framework/skins/ext-name/images/titlebar_bg.png を、別の色の同じサイズの画像ファイルで置き換えます。
ロゴの ALT テキストを変更するには、global.properties ファイル (と任意の bundle_locale.properties ファイル) にある login.wlsident キーの値を変更します。詳細については、「ルック アンド フィールでのメッセージ バンドルの使用」を参照してください。
より複雑な修正を加える場合は、バナーを表示する JSP やスタイルを変更できます。Administration Console バナーのコンテンツは、root-dir/framework/skeletons/ext-name/header.jsp ファイルによって決まります。header.jsp 内のスタイル console-header-logo では、バナーの背景として使用する画像ファイルの名前と位置を指定します。スタイル console-title では、ロゴ ファイルの名前や位置を指定します。これらのスタイルは、root-dir/framework/skins/ext-name/css/console.css で定義します。
|
注意 : 拡張をデプロイする前に、JSP をプリコンパイルする必要があります。 |
ログイン ページは、ユーザにユーザ ID とパスワードの入力を要求します。表 5-2 に、ログイン ページの外観を決定するファイルについてまとめます。
表 5-2 ログイン ページとログイン エラー ページの外観を決定するファイル
ファイル名とパス (root-dir/ の下にある) |
説明 |
|---|---|
css/login.css |
ログイン ページのフォントと間隔を定義する。 |
framework/skins/ext-name/images/Branding_Login_WeblogicConsole.gif
framework/skins/ext-name/images/Login_GC_LoginPage_Bg.gif
framework/skins/ext-name/images/Loginarea_Background.png
|
ログイン ページの画像。 |
login/LoginForm.jsp |
ログイン ページを表示する。 これらのページに表示するテキストを変更するには、 |
Administration Console では、さまざまなカスケーディング スタイル シート (CSS) を使用してフォントや色、および間隔などの他のプロパティも指定しています。これらのスタイルを変更するには、スタイル シートを開いてスタイルの定義を変更します。
表 5-3 に、スタイル シートに定義したルック アンド フィール のスタイルについてまとめます。スタイル シートのスタイル名は十分説明するため、スタイル自体の説明はテーブル内にありません。たとえば、background-color。
表 5-3 ルック アンド フィール拡張のための CSS スタイル シートの使用
ファイル名とパス (root-dir/ の下にある) |
スタイル |
|---|---|
css/changemgt.css |
[Change Center (「ロックして編集」)] パネルのスタイル。 |
css/content.css |
スタイルは次のとおりです。
|
css/forms.css |
コンフィグレーション ページとモニタ ページのコンテンツ領域など、フォームを定義するためのスタイル。 |
css/jndinavtree.css |
JNDI ブラウザのナビゲーション ツリーを定義するためのスタイル。 |
css/login.css |
ログイン ページのスタイル。 |
css/navtree.css |
[ドメイン構造] パネルのナビゲーション ツリーを定義するためのスタイル。 |
css/quicklinks.css |
[操作ガイド] パネルのスタイル。 |
css/systemstatus.css |
[システム状態] パネルのスタイル。 |
framework/skeletons/ext-name/css/layout.css
|
他のユーザ インタフェースの項目が配置されるグリッドのデフォルトのスタイル。 |
framework/skins/ext-name/css/console.css
|
スタイルは次のとおりです。
|
framework/skins/ext-name/css/general.css
|
スタイルは次のとおりです。
|
framework/skins/ext-name/css/menu.css.css
|
メニューの余白、パディング、背景、色などを定義するためのスタイル。 |
framework/skins/ext-name/css/window.css
|
スタイルは次のとおりです。
|
タブやボタンに角丸と陰影のある角の特殊効果を作成するには、複数の画像がスタイル シートと一緒に使用されます。これらについては、表 5-4 と 表 5-5 を参照してください。いずれかの特殊効果を変更するには、同じファイル名を使用するか、またはスタイル シートから別の画像を参照して、独自の画像をデフォルトの画像と置き換わることができます。
表に記述されていない他の画像もコンソールに使用され、いくつかの画像はスタイル シートに参照されます。ただし、これらの表は上記のようにフォーマット影響の作成に使用した画像のみを示します。他の画像を表示するには、root-dir/framework/skins/ext-name images/ および root-dir/images/ を参照してください。
表 5-4 スタイル シートと一緒に使用した画像 (root-dir/ の下にある)
| 影響 | CSS ファイル | 画像ファイル |
|---|---|---|
|
ボタンの表面。
|
css/forms.css |
images/button_bg_n.png |
|
マウス ポインタが移動するときのボタンの表面。
|
css/forms.css |
images/button_bg_mo.png |
|
ボタンが下に押したときのボタンの表面。
|
css/forms.css |
images/button_bg_md.png |
|
WebLogic Server の最初の起動時にユーザ名およびパスワードを要求する [ようこそ] ボックスの背景。 |
css/login.css |
framework/skins/ext-name/images/
Loginarea_Background.png
|
|
[ようこそ] ボックスの [ログオン] ボタンの表面。 上に挙げた |
css/login.css |
images/button_bg_n.png |
|
マウス ポインタが移動するときのボタンの表面。 上に挙げた |
css/login.css |
images/button_bg_mo.png |
|
ボタンが下に押したときのボタンの表面。 上に挙げた |
css/login.css |
images/button_bg_md.png |
|
[ログイン] ページの背景。 |
css/login.css |
framework/skins/ext-name/images/
Login_GC_LoginPage_Bg.gif
|
表 5-5 スタイル シートと一緒に使用する画像 (root-dir/framework/skins/ext-name/ の下にある)
| 影響 | CSS ファイル | 画像ファイル |
|---|---|---|
|
パネルの上部にあるタイトルバー |
css/window.css |
images/titlebar_bg.png |
|
コンソール全体の背景。ロゴの背後にコンソールの上に表示。 |
css/console.css |
images/r_bg_global.png |
|
タブの左の端。画像の上半部は選択を解除したタブのために使用され、下半部は選択したタブのために使用されます。 |
css/menu.css |
images/tab_left.gif |
|
タブの主な表面。画像の上半部は選択を解除したタブのために使用され、下半部は選択したタブのために使用されます。 |
css/console.css |
images/tab_right.gif |
|
パネルの背後の陰隅。デフォルト設定で、右隅と下にあります。 |
css/window.css |
images/shadow-corners |
|
パネルの背後の陰の右側。 |
css/window.css |
images/shadow-right.gif |
|
パネルの背後の陰の下部。 |
css/window.css |
images/shadow-bottom.gif |
バナーおよびログイン ページでは、Administration Console が JSTL タグを使用して、ローカライズされたプロパティ ファイルからのテキスト メッセージをロードします。たとえば、LoginForm.jsp のウィンドウ タイトルを表示する場合は次のようになります。
LoginForm.jsp の <fmt:setBundle basename="global" var="current_bundle" scope="page"/> タグによって、global に現在のメッセージ バンドルが設定されます。
この JSP タグは、WEB-INF/classes 内から次の名前パターンのファイルを検索します。
bundle[_locale].properties
このバンドルのデフォルト プロパティは WL_HOME/server/lib/consoleapp/webapp/WEB-INF/classes/console.jar の global.properties です。Web ブラウザまたはオペレーティング システムで別のロケールが指定されている場合は、JSP タグによって global_locale.properties がロードされます。
<fmt:message key="window.title" bundle="${current_bundle}" /> タグによって global.properties ファイルが開かれ、window.title キーによって特定されたテキストが表示されます。
window.title=Oracle WebLogic Server Administration Console
これらのメッセージを変更するには、独自のプロパティ ファイルを作成し、JSP タグを修正してそのバンドルを使用するようにします。詳細については、「メッセージ バンドルの作成」を参照してください。
表 5-6 に、バナー、ログイン ページ、およびログイン エラー ページに表示されるテキスト メッセージを示します。
表 5-6 バナー、ログイン ページ、およびログイン エラー ページに表示されるメッセージ
ファイル (root-dir/ の下にある) |
メッセージ キーと値 |
|---|---|
login/LoginForm.jsp |
window.title=Oracle WebLogic Server Administration Console login.wlsident=Oracle 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 |
framework/skeleton/mycompany/header.jsp |
window.title=Oracle WebLogic Server Administration Console |
netuix-extension.xml という NetUI 拡張ファイルは、ルック アンド フィールのデプロイメント記述子です。ルック アンド フィール内のファイルの名前と位置を格納し、作成したルック アンド フィールで Administration Console のルック アンド フィールを置き換える役割を果たします。詳細については、netuix-extension.xml. を参照してください。このファイルの詳細については、「NetUI 拡張スキーマ リファレンス」を参照してください。
コード リスト 5-1 netuix-extension.xml
<?xml version="1.0" encoding="UTF-8"?> <weblogic-portal-extension xmlns="http://www.bea.com/servers/portal/weblogic-portal/8.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/portal/weblogic-portal/8.0 netuix-extension-1_0_0.xsd"> <provider-info> <title>My LAF</title> <version>1.0</version> <description>My LAF.</description> <author>Me</author> <support-url>My URL</support-url> </provider-info> <portal-file>/console.portal</portal-file> <desktop-extension> <look-and-feel-content title="myLAF" definitionLabel="myLAF" markupName="myLookAndFeel" skin="myLAF" skin-path="/framework/skins" skeleton="myLAF" skeleton-path="/framework/skeletons" default-window-icon="window-icon.gif" default-window-icon-path="images/"/> </weblogic-portal-extension>
このファイルを修正するには、次の手順に従います。
このファイルを、検証機能を持つ XML エディタ (推奨) またはテキスト エディタで開きます。
<provider-info> 要素で、ルック アンド フィール、開発者の連絡先、およびサポート URL について説明する情報を変更します。
この要素の情報には、プログラム的に重要なものは含まれていません。これらの情報は、テクニカル サポート チームがソフトウェアの修正履歴を追跡できるようにすることを目的としています。
<look-and-feel-content> 要素に以下の変更を加えます。
title、skin、および skeleton 要素で、myLAF という値を「アンド フィール テンプレートの展開」の手順 3 で指定したディレクトリ名に変更します。
definitionLabel および markupName 属性で、myLAF という値を手順 2 で指定したディレクトリ名または他の文字列に変更します。これらの属性はポータル フレームワークで必要になるもので、ルック アンド フィールの拡張では使用しません。
拡張をアーカイブとデプロイする手順については、「コンソールの拡張のアーカイブとデプロイ」を参照してください。
