Oracle® Fusion Middleware Oracle WebCenter PortalおよびOracle JDeveloperでのポータルの開発 11gリリース1 (11.1.1.8.3) E49666-03 |
|
前 |
次 |
この章では、Oracle JDeveloperを使用してWebCenter Portal Frameworkアプリケーション用のスキンを作成および管理する方法を説明します。
この章の内容は、次のとおりです。
スキンを使用すると、色、フォント、イメージ、およびアプリケーション・コンポーネントの高さや幅などのディメンションの詳細を定義して、自社に適したルック・アンド・フィールを表すことができます。
スキンは、Cascading Style Sheet (CSS)仕様に基づいています。スキンは、アプリケーション・コンポーネントのスタイルを定義する種々のスキン・セレクタを含むCSSファイルです。スタイル関連のプロパティを変更することにより、任意のコンポーネントのルック・アンド・フィールを調整できます。アプリケーション内でスキンを使用すると、各コンポーネントに対して個別にスタイルを指定したり、各ページにスタイルシートを挿入する必要がなくなります。各コンポーネントで自動的に、スキンで定義されているスタイルが使用されます。スキンにより、ポータル・ページ自体を変更せずにアプリケーションの外観を変更できます。
ADF Facesスキンは、Portal Frameworkアプリケーションのルック・アンド・フィールを制御します。ADF Facesスキンの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のADF Facesスキンに関する項を参照してください。
シード済スキン
Portal Frameworkアプリケーションを作成する際に、シード済スキンportal-skin.css
がアプリケーションに追加されます。
特定の要件を満たすようにこのシード済スキンを編集することも、独自のスキンを作成することもできます。独自のスキンの作成を選択した場合でも、シード済スキンは、独自のスキンで実現できる様々なものを見つける際に役立つツールです。
実行時管理
Portal Frameworkアプリケーションは、デプロイ後もポータルの開発をユーザーが続行できるように、スキンの実行時管理をサポートしています。実行時管理により、権限のあるユーザーがブラウザ・ベースの環境でアプリケーションのスキンを管理したり、新規に作成でき、JDeveloperのインストールや知識は必要ありません。詳細は、第9.5項「実行時のポータル・リソースの使用」を参照してください。
ラウンドトリップ開発
ポータルの再デプロイ時に変更内容が失われないように、実行時に作成または変更されたスキンをJDeveloperに取り込むことができます。必要な場合は、これらのスキンを編集してさらに改良でき、デプロイ済ポータルに再びアップロードできます。詳細は、第9.6項「ラウンドトリップ開発での作業」を参照してください。
デフォルトで、Portal Frameworkアプリケーションは、portal-skin.css
ファイルで定義されるportal
スキンを使用します。このファイルは必要に応じて簡単に編集できます。ただし、アプリケーションでカスタム・スキンを使用する場合は、CSSファイルを作成して、必要なスキン・セレクタを定義する必要があります。
この項の内容は、次のとおりです。
ADF Facesスキンの作成については、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のアプリケーションにカスタム・スキンを追加する方法に関する項を参照してください。
注意: デフォルトでは、CSSファイルを作成すると、JDeveloperではそのファイルは ただし、このデフォルトの場所に作成されたスキンは、実行時管理コンソールの「アセット」ページには含まれていないため、実行時に管理することはできません。 権限のあるユーザーが実行時にスキンを管理できるようにするには、次のディレクトリにスキンを作成する必要があります。
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 Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキン・スタイル・セレクタに関する項を参照してください。スキンで使用できるセレクタについては、Oracle JDeveloperのオンライン・ヘルプも参照してください。これらの情報は、JDeveloperのオンライン・ヘルプのFusionのADF Facesコンポーネントのスキン・セレクタ、およびFusionのデータ視覚化ツール・コンポーネントのスキン・セレクタを参照してください。
ADF Facesコンポーネントのスタイル・セレクタの定義は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキン・スタイル・プロパティの定義に関する項、およびコンポーネントのスタイル・プロパティの変更に関する項を参照してください。
Oracleは、イメージやアイコンなどのアセット関連のアーティファクトをコンテンツ・サーバーに保管し、アセット・アーティファクト専用のフォルダ構造をコンテンツ・サーバー上で作成することをお薦めします。これにより、必要な場合にコンテンツを容易に特定し、移動できます。
CSSファイルを編集してスタイル・セレクタを編集または追加することにより、スキンを最初に作成した後でスキンに変更を加えることができます。portal-skin.css
ファイルを編集することにより、シード済portal
スキンを編集することもできます。
スキンを編集するには:
アプリケーション・ナビゲータで、編集するスキンを右クリックし(たとえば、portal-skin.css)、「開く」を選択します。
スキンのソース・コード内で、アプリケーションのコンポーネントに必要なADF Facesスキン・セレクタを定義します。たとえば、アプリケーション・コンテンツのフォント・サイズを16px
に設定するには、.AFDefaultFont:alias
スキン・セレクタを次のように使用できます。
詳細は、第13.2.2項「スキン・スタイル・セレクタを定義する方法」を参照してください。
CSSファイルを保存します。
すべてのPortal Frameworkアプリケーションが、デフォルトのスキンを定義します。これは、アプリケーション内のページすべての外観を決定します。
Portal Frameworkアプリケーションを最初に作成するときに、シード済スキン(portal)がアプリケーションのデフォルト・スキンとして設定されます。ユーザー独自のスキンを後で作成した場合は、そのスキンをかわりにデフォルトとして設定できます。
Portal Frameworkアプリケーションにデフォルトのスキンを設定するには、adf-config.xml
ファイルのoracle.webcenter.portalapp.skin
プリファレンスを編集します。
注意: 実行時管理が有効になっている場合、権限のあるユーザーは実行時にスキンを変更できます。詳細は、Oracle Fusion Middleware Oracle WebCenter Portalでのポータルの構築のポータルのスキンの変更に関する項を参照してください。 |
アプリケーションにスキンを適用するには:
アプリケーション・ナビゲータの「アプリケーション・リソース」ペインで、adf-config.xmlファイルを右クリックして、「開く」を選択します。
ヒント:
|
「ソース」タブをクリックします。
次のIDを持つADFプリファレンスを見つけます。
oracle.webcenter.portalapp.skin
value属性を、アプリケーションに適用するスキンのファミリ名に設定します。たとえば、次のとおりです。
value="portal"
値は、スキンの「ポータル・リソースの作成」または「ポータル・リソースの更新」ダイアログのSkin Family
属性で指定された値と同じである必要があります。
必要に応じて、desc
プロパティで、適用するスキンの説明を指定します。実行時に、この値がスキンの表示名として表示されます。
display
プロパティは、スキンのリストを実行時にスキン・ピッカーに表示するかどうかを指定します。例13-1に全プリファレンス要素の例を示します。
adf-config.xml
ファイルを保存します。
注意:
|
実際のアプリケーション・ロジックに影響を与えずに、ユーザー、ページ、アプリケーションなどに対して、それぞれ異なるスキンを割り当てることができます。スキンを条件付で設定するには、trinidad-config.xml
ファイルで<skin-family>
エントリを使用します。
動的に評価できるEL式を使用して、表示するスキンを決定できます。たとえば、ユーザーのブラウザがドイツ語ロケールに設定されているときドイツ語スキンを使用し、それ以外では英語スキンを使用する場合には、trinidad-config.xml
ファイルで次の<skin-family>
エントリを使用します。
<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>
詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキンを動的に変更するためのコンポーネントの構成方法に関する項を参照してください。
注意:
|
また、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つの |
この項では、スキンの使用中に発生する可能性のある問題のトラブルシューティングに役立つ情報を提供します。
問題
アプリケーションで、設計時に加えたスキンの変更内容が反映されません。
解決方法
開発時にスキンを変更した後、サーバーを再起動せずに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>