ヘッダーをスキップ
Oracle® Fusion Middleware Oracle WebLogic Administration Console の拡張
11g リリース 1 (10.3.1)
B55554-01
  目次
目次

戻る
戻る
 
次へ
次へ
 

5 Administration Console の外観の変更

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

ルック アンド フィールを作成するために使用するファイル

コンソール拡張のルック アンド フィールを作成するために以下のタイプのファイルが使用されます。

すべてのルック アンド フィール ファイル (CSS、スケルトン、JavaScript、および画像) は各リリースごとに変更します。したがって、WebLogic server の新しいリリースにアップグレードする場合は、カスタム ルック アンド フィールを更新する必要があります。

プロセスの概要

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

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

図 5-1 の説明は図の下のリンクをクリックしてください。
「図 5-1 Administration Console 拡張の開発の概要」の説明

表 5-1 Administration Console の外観の変更 : タスクと結果

手順 説明 結果

1. アンド フィール テンプレートの展開

WebLogic Server には、出発点として使用できるルック アンド フィール テンプレートがあります。ファイルにアクセスするには、テンプレートを展開する。

ルック アンド フィールファイルのセットを変更できます。

2. ファイルの変更または置き換え

独自の画像やスタイルで置き換えて、コンソールのカスタム ルック アンド フィールを作成する。

独自のロゴやスタイルを含むルック アンド フィール。

3. (省略可能) ルック アンド フィールでのメッセージ バンドルの使用

バナー、ログイン ページ、およびログイン エラー ページに表示されるテキスト メッセージを変更する場合は、独自のメッセージ バンドルを作成し、そのバンドルからのメッセージを使用するようにページを修正する。

独自のメッセージを含むローカライズ済みプロパティ ファイル。

4. NetUI 拡張ファイルの作成

NetUI 拡張ファイルは、ルック アンド フィール内でのファイルやディレクトリの位置を記述する。

netuix-extension.xml

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

ルック アンド フィール拡張を WAR ファイルにアーカイブし、ドメインの console-ext ディレクトリにコピーする。

詳細については、「コンソールの拡張のアーカイブとデプロイ」を参照してください。

ドメインで Administration Console が起動される際に、Oracle によってパッケージ化およびインストールされたルック アンド フィールの代わりに、そのドメインの console-ext ディレクトリにあるルック アンド フィール拡張が使用される。


アンド フィール テンプレートの展開

Weblogic Server インストール環境には、出発点として使用できるルック アンド フィール テンプレートがあります。テンプレートを展開し、独自の画像やスタイルで置き換えます。 2 つのファイルがあります。

テンプレートを展開するには、

  1. Apache Ant がまだインストールされていない (または IDE で使用できない) 場合は、インストールして、コンフィグレーションします。詳細については、(http://ant.apache.org/) にある Apache Ant プロジェクトを参照してください。

  2. コマンド プロンプトから次のディレクトリを変更します。

    WL_HOME/server/lib/console-ext/templates
    

    WL_HOME WebLogic Server をインストールしたディレクトリです。

  3. 以下の構文を使用して 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 のバナーの変更

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

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

    バナーのサイズを変更する手間を省くには、画像のサイズを変更しないでください。

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

  3. ロゴの 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_GC_LoginPage_Bg.gifLoginarea_Background.png の詳細については、表 5-4 を参照してください。

login/LoginForm.jsp

ログイン ページを表示する。

これらのページに表示するテキストを変更するには、<fmt:message/> 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

スタイルは次のとおりです。

  • タイトルバー の色、境界線、パディング、配置、画像ロールオーバの動作など。

  • 境界線のスタイルと色、間隔、背景画像ファイルの名前と場所など、Windows のスタイル。

  • Window コンテンツ オーバーフロー処理。


スタイル シートと一緒に使用する画像。

タブやボタンに角丸と陰影のある角の特殊効果を作成するには、複数の画像がスタイル シートと一緒に使用されます。これらについては、表 5-4表 5-5 を参照してください。いずれかの特殊効果を変更するには、同じファイル名を使用するか、またはスタイル シートから別の画像を参照して、独自の画像をデフォルトの画像と置き換わることができます。


注意 :

2 つの表は、スタイル シートと画像との関連付けを示します。表 5-4 は、root-dir/ を基準とするファイルを示し、表 5-5 は、root-dir/framework/skins/ext-name を基準とするファイルを示します。表を読みやすくするためにファイルはこのようにまとめてあり、他には特に意味を持ちません。

表に記述されていない他の画像もコンソールに使用され、いくつかの画像はスタイル シートに参照されます。ただし、これらの表は上記のようにフォーマット影響の作成に使用した画像のみを示します。他の画像を表示するには、root-dir/framework/skins/ext-name images/ および root-dir/images/ を参照してください。

表 5-4 スタイル シートと一緒に使用した画像 (root-dir/ の下にある)

影響 CSS ファイル 画像ファイル

ボタンの表面。

login.css でのこの画像の使用も参照してください。

css/forms.css
images/button_bg_n.png

マウス ポインタが移動するときのボタンの表面。

login.css でのこの画像の使用も参照してください。

css/forms.css
images/button_bg_mo.png

ボタンが下に押したときのボタンの表面。

login.css でのこの画像の使用も参照してください。

css/forms.css
images/button_bg_md.png

WebLogic Server の最初の起動時にユーザ名およびパスワードを要求する [ようこそ] ボックスの背景。

css/login.css
framework/skins/ext-name/images/
Loginarea_Background.png

[ようこそ] ボックスの [ログオン] ボタンの表面。

上に挙げた forms.css でのこの画像の使用も参照してください。

css/login.css
images/button_bg_n.png

マウス ポインタが移動するときのボタンの表面。

上に挙げた forms.css でのこの画像の使用も参照してください。

css/login.css
images/button_bg_mo.png

ボタンが下に押したときのボタンの表面。

上に挙げた forms.css でのこの画像の使用も参照してください。

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 のウィンドウ タイトルを表示する場合は次のようになります。

  1. 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.jarglobal.properties です。Web ブラウザまたはオペレーティング システムで別のロケールが指定されている場合は、JSP タグによって global_locale.properties がロードされます。

  2. <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

NetUI 拡張ファイルの作成

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>

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

  1. このファイルを、検証機能を持つ XML エディタ (推奨) またはテキスト エディタで開きます。

  2. <provider-info> 要素で、ルック アンド フィール、開発者の連絡先、およびサポート URL について説明する情報を変更します。

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

  3. <look-and-feel-content> 要素に以下の変更を加えます。

    1. titleskin、および skeleton 要素で、myLAF という値を「アンド フィール テンプレートの展開」の手順 3 で指定したディレクトリ名に変更します。

    2. definitionLabel および markupName 属性で、myLAF という値を手順 2 で指定したディレクトリ名または他の文字列に変更します。これらの属性はポータル フレームワークで必要になるもので、ルック アンド フィールの拡張では使用しません。

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

拡張をアーカイブとデプロイする手順については、「コンソールの拡張のアーカイブとデプロイ」を参照してください。