| Oracle® Fusion Middleware Oracle WebLogic Server管理コンソールの拡張 11g リリース1 (10.3.6) B55554-05 |
|
 前 |
 次 |
この節では、WebLogic Portalのルック・アンド・フィールを作成し、管理コンソール拡張としてデプロイする方法について説明します。拡張を使用すると、管理コンソールのOracleロゴ、色、スタイルの一部またはすべてを置き換えることができます。
コンソール拡張のルック・アンド・フィールを作成するために以下のタイプのファイルが使用されます。
Cascading stylesheets (CSS)。ほとんどの変更(簡単な変更)は、CSSを変更することによって行われます。
画像。これらは、CSSファイルまたはスケルトンJSPや コンテンツJSPにより生成されるHTMLから参照できます。画像を変更してもそのサイズを同じままにし、同じ名前を使用する場合、それが参照元のCSSまたはJSPを変更する必要はありません。
Skeleton Java Server (JSP)ファイル。
JavaScriptファイル。クライアント側の動作がJavaScriptファイルから送信されます。これらのファイルを変更することをお薦めしません。
すべてのルック・アンド・フィール・ファイル(CSS、スケルトン、JavaScript、および画像)は各リリースごとに変更します。したがって、WebLogic serverの新しいリリースにアップグレードする場合は、カスタム・ルック・アンド・フィールを更新する必要があります。
図5-1にこのプロセスを示します。プロセスの手順、および各手順の結果については、表5-1を参照してください。以下の節では、各手順について詳しく説明します。
表5-1 管理コンソールのリブランディング: タスクと結果
| 手順 | 説明 | 結果 |
|---|---|---|
|
WebLogic Serverには、出発点として使用できるルック・アンド・フィール・テンプレートがあります。ファイルにアクセスするには、テンプレートを展開します。 |
ルック・アンド・フィール・ファイルのセットを変更できます。 |
|
|
独自の画像やスタイルで置き換えて、コンソールのカスタム・ルック・アンド・フィールを作成します。 |
独自のロゴやスタイルを含むルック・アンド・フィール。 |
|
|
3.(オプション) ルック・アンド・フィールでのメッセージ・バンドルの使用 |
バナー、ログイン・ページ、およびログイン・エラー・ページに表示されるテキスト・メッセージを変更する場合は、独自のメッセージ・バンドルを作成し、そのバンドルからのメッセージを使用するようにページを修正します。 |
独自のメッセージを含むローカライズ済みプロパティ・ファイル。 |
|
NetUI拡張ファイルは、ルック・アンド・フィール内でのファイルやディレクトリの位置を記述します。 |
|
|
|
ルック・アンド・フィール拡張をWARファイルにアーカイブし、ドメインの 詳細は、第9章「コンソール拡張のアーカイブとデプロイ」を参照してください。 |
ドメインで管理コンソールが起動される際に、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ポータル開発ガイド』のルック・アンド・フィールの機能を使用したユーザー・インタフェース開発に関する項を参照してください。
サンプルのルック・アンド・フィールの画像ファイルを、独自の画像ファイルで上書きします。
管理コンソール・バナーのロゴを置き換えるには、独自のロゴ・ファイルを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やスタイルを変更できます。管理コンソール・バナーのコンテンツは、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 |
ログイン・ページを表示します。 これらのページに表示するテキストを変更するには、 |
管理コンソールでは、様々なカスケーディング・スタイル・シート(CSS)を使用してフォントや色、および間隔などの他のプロパティも指定しています。これらのスタイルを変更するには、スタイル・シートを開いてスタイルの定義を変更します。
表5-3に、スタイル・シートに定義したルック・アンド・フィール のスタイルについてまとめます。スタイル・シートのスタイル名は十分説明するため、スタイル自体の説明は表内にありません。たとえば、background-color。
表5-3 ルック・アンド・フィール拡張のためのCSSスタイル・シートの使用
ファイル名とパス(root-dir/の下にある) |
スタイル |
|---|---|
css/changemgt.css |
「チェンジ・センター(「ロックして編集」)」パネルのスタイル。 |
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 |
バナーおよびログイン・ページでは、管理コンソールが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タグを修正してそのバンドルを使用するようにします。詳細は、第4章「メッセージ・バンドルの作成」を参照してください。
表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拡張ファイルは、ルック・アンド・フィールのデプロイメント記述子です。ルック・アンド・フィール内のファイルの名前と位置を格納し、作成したルック・アンド・フィールで管理コンソールのルック・アンド・フィールを置き換える役割を果たします。例5-1を参照してください。このファイルの詳細は、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>
<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で指定したディレクトリ名または他の文字列に変更します。これらの属性はポータル・フレームワークで必要になるもので、ルック・アンド・フィールの拡張では使用しません。
拡張をアーカイブとデプロイする手順については、第9章「コンソール拡張のアーカイブとデプロイ」を参照してください。
