| Oracle® Fusion Middleware Oracle WebCenter PortalおよびOracle JDeveloperでのポータルの開発 11gリリース1 (11.1.1.9.0) E49666-05 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle WebCenter PortalおよびOracle JDeveloperでのポータルの開発 11gリリース1 (11.1.1.9.0) E49666-05 |
|
前 |
次 |
この章では、Oracle JDeveloperを使用してWebCenter Portal Frameworkアプリケーション用のスキンを作成および管理する方法を説明します。
この章の内容は、次のとおりです。
スキンを使用すると、色、フォント、イメージ、およびアプリケーション・コンポーネントの高さや幅などのディメンションの詳細を定義して、自社に適したルック・アンド・フィールを表すことができます。
スキンは、Cascading Style Sheet (CSS)仕様に基づいています。スキンは、アプリケーション・コンポーネントのスタイルを定義する種々のスキン・セレクタを含むCSSファイルです。スタイル関連のプロパティを変更することにより、任意のコンポーネントのルック・アンド・フィールを調整できます。アプリケーション内でスキンを使用すると、各コンポーネントに対して個別にスタイルを指定したり、各ページにスタイルシートを挿入する必要がなくなります。各コンポーネントで自動的に、スキンで定義されているスタイルが使用されます。スキンにより、ポータル・ページ自体を変更せずにアプリケーションの外観を変更できます。
ADF Facesスキンは、Portal Frameworkアプリケーションのルック・アンド・フィールを制御します。ADF Facesスキンの詳細は、『Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のADF Facesスキンに関する項を参照してください。
シード済スキン
Portal Frameworkアプリケーションを作成する際に、シード済スキンportal-skin.cssがアプリケーションに追加されます。
特定の要件を満たすようにこのシード済スキンを編集することも、独自のスキンを作成することもできます。独自のスキンの作成を選択した場合でも、シード済スキンは、独自のスキンで実現できる様々なものを見つける際に役立つツールです。
実行時管理
Portal Frameworkアプリケーションは、デプロイ後もポータルの開発をユーザーが続行できるように、スキンの実行時管理をサポートしています。実行時管理により、権限のあるユーザーがブラウザ・ベースの環境でアプリケーションのスキンを管理したり、新規に作成でき、JDeveloperのインストールや知識は必要ありません。詳細は、第9.5項「実行時のポータル・リソースの使用」を参照してください。
ラウンドトリップ開発
ポータルの再デプロイ時に変更内容が失われないように、実行時に作成または変更されたスキンをJDeveloperに取り込むことができます。必要な場合は、これらのスキンを編集してさらに改良でき、デプロイ済ポータルに再びアップロードできます。詳細は、第9.6項「ラウンドトリップ開発での作業」を参照してください。
WebCenter Portalのスキンを作成する際、それを大まかな観点と細かい観点から見ることができます。大まかなレベルでは、背景やページ中央などのページ内の多数の大きな要素にごく基本的なスタイル技術を使用して、特定の企業ブランドに対するルック・アンド・フィールを容易に施すことができます。細かいレベルでは、ページ内の特定のコンポーネントとコントロールにスタイルを適用できます。スキンを開発する際に最も効率的な方法は、大まかな要素の定義から開始し、次に細かいスタイルを使用して全体のルック・アンド・フィールを企業ブランドに沿って調整します。
多くの場合、スタイルのハイブリッド・モデルが非常に効果的です。大まかな要素(ページ背景、ボディの主要部分など)を取り込んでそれらとともに従来のCSS手法を使用すると、ADFスキンの使用が特定的になっても、共に機能してWebCenter Portalの外観全体を生成します。
ハイブリッド手法の一例では、WebCenter Portalで技術を使用して、順序づけられていないリストとリスト項目を使用するメニューを生成し、次に従来のCSSをそれらに適用します。WebCenter Portalのナビゲーション・モデルが有効な場合でも、従来のADFスキン作成ではなく、標準CSSを使用しています。
式言語(EL)を使用すると、テンプレート・デザイン内のナビゲーション用の様々なオブジェクトにアクセスできます。EL内のループは単純で、コーディングはページ・テンプレートとインラインで実行されます。通常のHTMLを直接ループ・マークアップに混在させることができます。
デフォルトで、Portal Frameworkアプリケーションは、portal-skin.cssファイルで定義されるportalスキンを使用します。このファイルは必要に応じて簡単に編集できます。ただし、アプリケーションでカスタム・スキンを使用する場合は、CSSファイルを作成して、必要なスキン・セレクタを定義する必要があります。
この項の内容は、次のとおりです。
ADF Facesスキンの作成については、『Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のアプリケーションにカスタム・スキンを追加する方法に関する項を参照してください。
|
注意: デフォルトでは、CSSファイルを作成すると、JDeveloperではそのファイルはApplication_Root/Portal/public_html/cssフォルダの下に格納されます。
ただし、このデフォルトの場所に作成されたスキンは、実行時管理コンソールの「アセット」ページには含まれないので、実行時に管理することはできません。 権限のあるユーザーが実行時にスキンを管理できるようにするには、次のディレクトリにスキンを作成する必要があります。
Application_Root/Portal/public_html/oracle/webcenter/portalapp
デフォルトでは、Portal Frameworkアプリケーションには別個の 詳細は、第9.5.1.2項「ポータル・リソースを「アセット」ページに組み込む方法」を参照してください。 |
CSSファイルの作成後、アプリケーション内のコンポーネントに必要なADF Facesスキン・セレクタを定義する必要があります。たとえば、.AFDefaultFontFamily:aliasセレクタを使用して、次のようにアプリケーションにフォント・ファミリを指定できます。
.AFDefaultFontFamily:alias {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
}
詳細の参照先は、次のとおりです。
ADF Facesスキン・セレクタの概要は、『Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキン・スタイル・セレクタに関する項を参照してください。スキンで使用できるセレクタについては、Oracle JDeveloperのオンライン・ヘルプも参照してください。これらの情報は、JDeveloperのオンライン・ヘルプのFusionのADF Facesコンポーネントのスキン・セレクタ、およびFusionのデータ視覚化ツール・コンポーネントのスキン・セレクタを参照してください。
ADF Facesコンポーネントのスタイル・セレクタの定義は、『Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキン・スタイル・プロパティの定義に関する項、およびコンポーネントのスタイル・プロパティの変更に関する項を参照してください。
Oracleは、イメージやアイコンなどのアセット関連のアーティファクトをコンテンツ・サーバーに保管し、アセット・アーティファクト専用のフォルダ構造をコンテンツ・サーバー上で作成することをお薦めします。これにより、必要な場合にコンテンツを容易に特定し、移動できます。
CSSファイルを編集してスタイル・セレクタを編集または追加することにより、スキンを最初に作成した後でスキンに変更を加えることができます。portal-skin.cssファイルを編集することにより、シード済portalスキンを編集することもできます。
スキンを編集するには:
アプリケーション・ナビゲータで、編集するスキンを右クリックし(たとえば、portal-skin.css)、「開く」を選択します。
スキンのソース・コード内で、アプリケーションのコンポーネントに必要なADF Facesスキン・セレクタを定義します。たとえば、アプリケーション・コンテンツのフォント・サイズを16pxに設定するには、.AFDefaultFont:aliasスキン・セレクタを次のように使用できます。
詳細は、第13.3.2項「スキン・スタイル・セレクタを定義する方法」を参照してください。
CSSファイルを保存します。
すべてのPortal Frameworkアプリケーションが、デフォルトのスキンを定義します。これは、アプリケーション内のページすべての外観を決定します。
Portal Frameworkアプリケーションを最初に作成するときに、シード済スキン(portal)がアプリケーションのデフォルト・スキンとして設定されます。ユーザー独自のスキンを後で作成した場合は、そのスキンをかわりにデフォルトとして設定できます。
Portal Frameworkアプリケーションにデフォルトのスキンを設定するには、adf-config.xmlファイルのoracle.webcenter.portalapp.skinプリファレンスを編集します。
|
注意: 実行時管理が有効になっている場合、権限のあるユーザーは実行時にスキンを変更できます。詳細は、『Oracle WebCenter Portalでのポータルの構築』のポータルのスキンの変更に関する項を参照してください。 |
アプリケーションにスキンを適用するには:
アプリケーション・ナビゲータの「アプリケーション・リソース」ペインで、adf-config.xmlファイルを右クリックして、「開く」を選択します。
|
ヒント: adf-config.xmlファイルを探すには、「ディスクリプタ」ノードを開き、さらに「ADF META-INF」ノードを開きます。 |
「ソース」タブをクリックします。
次のIDを持つADFプリファレンスを見つけます。
oracle.webcenter.portalapp.skin
value属性を、アプリケーションに適用するスキンのファミリ名に設定します。たとえば、次のとおりです。
value="portal"
値は、スキンの「ポータル・リソースの作成」または「ポータル・リソースの更新」ダイアログのSkin Family属性で指定された値と同じである必要があります。
必要に応じて、descプロパティで、適用するスキンの説明を指定します。実行時に、この値がスキンの表示名として表示されます。
displayプロパティは、スキンのリストを実行時にスキン・ピッカーに表示するかどうかを指定します。例13-1に全プリファレンス要素の例を示します。
adf-config.xmlファイルを保存します。
|
注意: Application_Root/Portal/public_html/oracle/webcenter/portalapp/skins以外の場所で作成したスキンを適用する場合には、そのスキンをtrinidad-skins.xmlファイルに登録して、そのスキンを使用するようにアプリケーションを構成する必要があります。詳細は、『Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のカスタム・スキンを登録する方法に関する項を参照してください。 |
実際のアプリケーション・ロジックに影響を与えずに、ユーザー、ページ、アプリケーションなどに対して、それぞれ異なるスキンを割り当てることができます。スキンを条件付で設定するには、trinidad-config.xmlファイルで<skin-family>エントリを使用します。
動的に評価できるEL式を使用して、表示するスキンを決定できます。たとえば、ユーザーのブラウザがドイツ語ロケールに設定されているときドイツ語スキンを使用し、それ以外では英語スキンを使用する場合には、trinidad-config.xmlファイルで次の<skin-family>エントリを使用します。
<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>
詳細は、『Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキンを動的に変更するためのコンポーネントの構成方法に関する項を参照してください。
|
注意: <skin-family>のデフォルト値は#{preferenceBean.defaultTrinidadSkin}です。デフォルト値を変更すると、アプリケーション・ユーザーは実行時にリソース・マネージャでスキンを設定できません。 |
また、SkinSetting APIを使用して、ユーザー向けスキンを条件付で設定することもできます。使用できるコールについては、APIを参照してください。このAPIは、次のサイトから入手できます。
Oracle WebCenter Portalは様々なデフォルト・スキンを提供しています。すべてのOracle WebCenter Portalスキン・アーティファクトは、共有ライブラリ(oracle.webcenter.skin)で使用できます。共有ライブラリはEARとしてパッケージ化されており、次のタイプのファイルがある複数のスキンJARが含まれています。
.cssファイル: スキン・セレクタ・ファイル
.png: イメージ・ファイル
.js: javascriptファイル
trinidad-skins.xml: スキン定義ファイル
デフォルトでは、oracle.webcenter.skin共有ライブラリは、すべてのPortal Frameworkアプリケーションとポートレット・プロデューサ・アプリケーションによって参照されます。したがって、すべてのスキンはクラスパスを介して使用できます。Portal Frameworkアプリケーションでポートレットを使用すると、ポートレットはアプリケーションに対して定義されたスキンを使用してレンダリングされます。そのため、スキン共有を実現するには、同一のスキンが共有ライブラリを介して、Portal Frameworkアプリケーションとポートレット・プロデューサ・アプリケーションの両方でアクセス可能である必要があります。
ただし、Portal Frameworkアプリケーションでportal-skin.cssを変更した場合が考えられます。したがって、共有ライブラリで使用可能なスキンは、Portal Frameworkアプリケーションで使用可能な更新バージョンと同じではありません。Portal Frameworkアプリケーションのスキンのバージョンが共有ライブラリのスキンと同一ではない場合、Portal FrameworkアプリケーションとPortlet Producerアプリケーション間のスキンの共有が失敗します。これは、Portal Frameworkアプリケーションが変更済スキンを使用する場合に、ポートレット・プロデューサが共有ライブラリでパッケージ化された元のバージョンのスキンにしかアクセスできないためです。Portal Frameworkアプリケーションは、最新のスキンの変更をレンダリングに反映します。一方、同じアプリケーション内のポートレットでは、共有ライブラリから元のスキンを使用してレンダリングします。この動作はスキンのコーディネーションと呼ばれます。
デフォルトのスキンを使用せずに、Portal Frameworkアプリケーション内でポータル・リソースとして新規カスタム・スキンを作成したり、一意のスキン・ファミリIDでスキンをtrinidad-skins.xmlに定義する場合があります。アプリケーションでポートレットが使用される場合、ポートレット・プロデューサは共有ライブラリでカスタム・スキンを検出できません。これによりスキンの不一致エラーが発生し、ポートレットはPortal Frameworkアプリケーションで使用されるカスタム・スキンではなく、必要最小限の単純なスキンでレンダリングされます。
そのため、Portal Frameworkアプリケーションでスキンを変更したりカスタム・スキンを作成するたびに、その新規スキンや変更済スキンを共有ライブラリとしてデプロイする必要があります。
共有ライブラリとしてスキンをデプロイするには:
trinidad-skins.xmlのコピーがPortal FrameworkアプリケーションのWEB-INFフォルダで確実に使用できるようにします。そうでない場合には、新規の作成となります。
trinidad-skins.xmlを更新して、新規に作成するスキンのCSSファイルを指定します。
新規MANIFEST.MFファイルをプロジェクトで作成し、新規共有ライブラリの詳細を指定します。
次に、MANIFEST.MFファイルのサンプル・コードを示します。
Manifest-Version: 1.0 Ant-Version: Apache Ant 1.7.1 Created-By: 1.6.0 (Sun Microsystems, Inc.) Extension-Name: oracle.webcenter.customskin Implementation-Title: oracle.webcenter.customskin Implementation-Version: 11.1.1 Implementation-Vendor: Oracle Specification-Title: Custom WebCenter shared library Specification-Version: 11.1.1
新規デプロイメント・プロファイルを作成するには:
「ポータル」プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」ダイアログで、「一般」→「デプロイメント・プロファイル」→「共有ライブラリJARファイル」を選択して、「OK」をクリックします。
「デプロイメント・プロファイルの作成」ダイアログで、「デプロイメント・プロファイル名」フィールドにプロファイル名を入力して「OK」をクリックします。
「JARデプロイメント・プロファイルのプロパティの編集」ダイアログで、manifestファイルを含めるチェック・ボックスが選択されていることを確認します。
「追加のmanifestファイルをMANIFEST.MFにマージ」セクションで、「追加」ボタンを使用して、trinidad-skins.xmlと必要なスキンCSSファイルを共有ライブラリに追加します。
「OK」をクリックします。
「プロジェクト・プロパティ」ダイアログで、「OK」をクリックします。
「ポータル」プロジェクトを右クリックし、「デプロイ」を選択し、JAR共有ライブラリのデプロイメント・プロファイル名を選択します。
「デプロイ」ダイアログで、「Weblogicアプリケーション・サーバーにデプロイ」を選択して「次へ」をクリックします。
ポートレット・プロデューサをホストするWebLogic Serverを選択し、「次へ」をクリックします。
「共有ライブラリとしてデプロイ」が選択されていることを確認し、「終了」をクリックします。
Portal Frameworkアプリケーションとポートレット・プロデューサ・アプリケーションの両方で、カスタム・スキン共有ライブラリを参照するように/META-INF/weblogic-application.xmlを更新します。
<library-ref>
<library-name>Custom_Library_Name</library-name>
<specification-version>Library_Version</specification-versi on>
</library-ref>
Portal Frameworkアプリケーションとポートレット・プロデューサ・アプリケーションの両方を再デプロイします。
これでカスタム・スキンをこのアプリケーション間で共有できます。
|
注意: カスタム・スキン共有ライブラリはデプロイする必要があり、実際のスキン共有が実現されるには、WebLogic Serverコンソールで「アクティブ」と表示されている必要があります。共有ライブラリJARになんらかの問題がある場合(不適切なマニフェスト、不正なバージョンなど)、デプロイ済共有ライブラリはWebLogic Serverコンソールで「アクティブ」とは表示されません。 |
|
注意: 複数のスキン・ファイルがある場合、すべてのスキン・アーティファクトを1つの共有ライブラリJARに格納して、2つのtrinidad-skins.xmlファイルを1つのファイルに統合できます。この共有ライブラリはすべてのカスタム・スキン開発で引き続き使用できます。 |
この項では、スキンの使用中に発生する可能性のある問題のトラブルシューティングに役立つ情報を提供します。
問題
アプリケーションで、設計時に加えたスキンの変更内容が反映されません。
解決方法
開発時にスキンを変更した後、サーバーを再起動せずにCSSの変更内容を確認できます。CHECK_FILE_MODIFICATIONコンテキスト・パラメータは、スキンのタイムスタンプをチェックして、スキンが変更されていればリロードするようサーバーに要求します。この設定は、反復開発がアプリケーションで有効になっていると、自動的にtrueに設定されます。反復開発が無効になっている場合には、次の例で示すように、WEB-INF/web.xmlでCHECK_FILE_MODIFICATIONがtrueに設定されていることを確認します。
<context-param> <param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name> <param-value>true</param-value> </context-param>
問題
スキンのCSSファイルをブラウザで開くと、スキン・セレクタがエンコードされ圧縮された状態で表示されます。
解決方法
デフォルトでは、CSSファイルのクラス名は、ファイルの全サイズを削減するために圧縮されています。したがって、たとえばFirefoxのFirebug拡張子のスキン・セレクタは、元の名前との関連がほとんどないエンコードされた値になっています。たとえば、CSSファイルには次のようなエントリが含まれていることがあります。
.x123 {color: #534741}
圧縮が無効となっているときにCSSファイルを調べる方が簡単です。圧縮を無効化するには、次のコードで示すように、WEB-INF/web.xmlでDISABLE_CONTENT_COMPRESSIONコンテキスト・パラメータの値をtrueに設定します。
<context-param> <param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name> <param-value>true</param-value> </context-param>
圧縮が無効になると、エントリは次のようになります。
.af_panelFormLayout_label-cell
{
color: #534741
}
パフォーマンスの向上には、本番環境でCSSの圧縮を有効にすることをお薦めします。CSS圧縮を無効にすると、次の問題のシナリオで説明するように、スキンの不一致につながる場合があります。
問題
ポートレットが含まれるページを実行すると、ポートレットがスタイルや形式なしでレンダリングされます。
解決方法
アプリケーションでADFアプリケーションに基づいたポートレットを使用すると、ポートレット・プロデューサはアプリケーションのスキンを一致させようとします。スキンが一致すると、プロデューサはアプリケーションのスキンを使用します。
スキン圧縮はスキンを一致させるときには考慮されません。スキン圧縮設定が異なるがスキンが一致する場合、プロデューサは".x123"のようなIDを返し、アプリケーションでこれらの値が見つけられることを期待しますが、アプリケーションは".af_panelFormLayout_label-cell"のような値を返す場合があります。したがって、スタイルが見つからず、ポートレットのレンダリングに失敗します。
アプリケーションとポートレット・プロデューサは、同じスキンは圧縮の設定を使用する必要があります。アプリケーションで圧縮されていないスキンを使用したら、ポートレット・プロデューサでも圧縮されていないスキンを使用する必要があります。
問題
MDSフォルダ構造(oracle/webcenter/portalapp)内のスタイルシート・ファイル(CSS)が、trinidad-skins.xmlで指定されているように有効になりません。
解決方法
MDSフォルダ構造内のスタイルシート・ファイル(CSS)では、次の例で示すように、trinidad-skins.xml内のパスに接頭辞"mds:"を付けてください。
<skin>
<id>myskin2.desktop</id>
<family>myskin2</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>mds:/oracle/webcenter/portalapp/css/skin.css</style-sheet-name>
<extends>fusion.desktop</extends>
</skin>
問題
WebLogicのログ出力に、次のメッセージが含まれています。
<SkinFactoryImpl> <getSkin> Cannot find a skin that matches family portal and version 1.1. We will use the skin portal.desktop
解決方法
アプリケーションのtrinidad-config.xmlファイルを編集し、<skin-version>要素を削除します。
<?xml version="1.0" encoding="UTF-8"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{preferenceBean.defaultTrinidadSkin}</skin-family>
<skin-version)v1.1</skin-version>
</trinidad-config>
