ヘッダーをスキップ
Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの作成
12c (12.1.2)
E48016-01
  目次へ移動
目次

前
 
次
 

11 完成したADFスキンのWebアプリケーションへの適用

この章では、ADFスキンが完成した後に行う必要のあるタスクの実行方法について説明します。ADFスキンのテスト方法、完成したADFスキンをADFライブラリJARにパッケージ化する方法、完成したADFスキンが使用されるようにADFアプリケーションを構成する方法についての情報を示します。

この章には次の項が含まれます:

11.1完成したADFスキンのアプリケーションへの適用について

1つ以上のADFスキン・セレクタのスタイルのプロパティを定義するADFスキンを作成した後、ADFスキンに加えた変更をテストできます。ADFスキンの変更のテストを完了し、完成したADFスキンに問題がない場合は、ADFスキンと関連ファイル(イメージ、リソース・バンドルおよび構成ファイル)をADFライブラリJARにパッケージ化して、完成したADFスキンを使用するアプリケーション・プロジェクトに含めるために配布できます。完成したADFスキンの配布が完了したら、そのADFスキンを適用するアプリケーションを構成します。

11.2 ADFスキンの変更のテスト

ADFスキンを作成し、1つ以上のセレクタに使用するスタイルのプロパティを定義したら、これらのスタイルのプロパティが実行時にブラウザでどのようにレンダリングされるかをテストできます。このことを行うには、ADFスキンをアプリケーションに適用し、セレクタを公開したADF Facesコンポーネントをレンダリングするページを実行します。

アプリケーションを実行するとき、Mozilla FirefoxブラウザのFirebugなどのツール(または使用している特定のブラウザ用の類似のツール)を使用することを検討してください。これらのツールでは、ADFスキンを繰り返し開発する場合に役立つ有用な情報を提供します。たとえば、これらのツールを使用して、すでに行った変更をインスペクトすることに加え、特定のDOM要素に対応するADFスキン・セレクタを判別できます。

アプリケーションで次のことができるように、web.xmlファイルのコンテキスト初期化パラメータを構成することもできます。

CHECK_FILE_MODIFICATIONtrueに設定した場合に、Fusion WebアプリケーションのADFスキンに加えたすべての変更がすぐに表示されるわけではないことに注意してください。アイコンとADFスキンのプロパティに加えた変更を表示するには、Fusion Webアプリケーションを再起動する必要があります。

コンテキスト初期化パラメータの詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発(スキニングするアプリケーションに関連するリリース)の付録「ADF Facesの構成」を参照してください。

図11-1に、(「ADF Faces」ボタンコンポーネント用の)コンポーネント・セレクタの名前が抑制される仕組みを示します。図11-1では、ADFスキンで定義されたスタイル・クラス(fndGlobalSearchCategory)が、buttonコンポーネントのstyleClass属性を使用してこのコンポーネントに適用されています。

図11-1 ADFスキンの圧縮されたCSS

ADFスキンの圧縮されたスタイル・クラス名

図11-2に、DISABLE_CONTENT_COMPRESSIONパラメータをtrueに設定した場合に、ADF Facesコンポーネントの非圧縮の完全名がブラウザでどのようにレンダリングされるかを示します。図11-2の非圧縮のスタイル・クラスaf_buttonは、Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)に記載されているaf|buttonセレクタに該当します。

ADFスキン・セレクタが公開する擬似要素に対応する非圧縮のスタイル・クラスも指定できます。たとえば、af|panelTabbedセレクタにより公開されるtab-end擬似要素(af|panelTabbed::tab-end)は、実行時に非圧縮のaf_panelTabbed_tab-endスタイル・クラスに変換されます。

同様に、コンポーネントが特定の状態にあるときに、そのコンポーネントの外観に加えた変更を、ブラウザ・ツールを使用して識別またはインスペクトすることもできます。たとえば、ADFスキンのソース・ファイルにある次のエントリを使用すると、ADF Faces panelTabbedコンポーネントの右側を選択して、このコンポーネントのスタイルを定義できます。

af|panelTabbed::tab:selected af|panelTabbed::tab-end

実行時には、非圧縮のスタイル・クラス名は次のように変換されます。

.af_panelTabbed_tab.p_AFSelected .af_panelTabbed_tab-end

:selectedp_AFSelectedに変換されますが、生成されるCSSにはp_AFSelectedに相当するものが含まれていない場合があることに注意してください。これは、:hoverのような他の擬似クラスの場合と同様、ブラウザによっては、その特定の状態に対する組込みサポートが備えられているためです。

Oracle ADF Facesスキン・セレクタ・タグ・リファレンスおよびOracle ADFスキン・セレクタ・データ視覚化ツール・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)に記載されているADFスキン・セレクタ、擬似要素と擬似クラスのみをカスタマイズすることをお薦めします。その他のADFスキン・セレクタをカスタマイズすると、アプリケーションで予期しない動作や一貫性のない動作が発生する場合があります。

図11-2 ADFスキンの非圧縮のCSS

ADFスキンの非圧縮のスタイル・クラス名

11.2.1 ADFスキンをテストするためのパラメータの設定方法

アプリケーションのweb.xmlファイルで、CHECK_FILE_MODIFICATIONDISABLE_CONTENT_COMPRESSIONコンテキスト初期化パラメータをtrueに設定します。

ADFスキンのテストのためにパラメータを設定するには、次のようにします。

  1. 「アプリケーション」ウィンドウで、web.xmlファイルをダブルクリックします。

  2. ソース・エディタで、次のコンテキスト初期化パラメータ・エントリを追加し、trueに設定します。

    • org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION

    • org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION

  3. 変更を保存して、web.xmlファイルを閉じます。

11.2.2 ADFスキンのテストのためにパラメータを設定した場合の処理

例11-1に示すように、アプリケーションのweb.xmlファイルにエントリが表示されます。

例11-1 web.xmlのエントリ

<context-param>
  <param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
  <param-value>true</param-value>
</context-param>
<context-param>
  <param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
  <param-value>true</param-value>
</context-param>

ADF Facesコンポーネントのセレクタに加えた変更(アイコンとスキンのプロパティへの変更を除く)は、ADF FacesコンポーネントをレンダリングするFusion Webアプリケーションのページをリフレッシュするとすぐにレンダリングされます。Firebug (ブラウザがMozilla Firefoxの場合)またはGoogle Chromeのデベロッパ・ツールを使用して、実行時にレンダリングされる非圧縮のスタイル・クラス名を表示し、対応するADFスキン・セレクタを確立できます。org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSIONtrueに設定すると、Fusion Webアプリケーションでパフォーマンス上のコストが発生するため、変更のテストが完了した後は、falseに設定してください。

11.3 ADFスキンのADFライブラリJARへのパッケージ化

ADFスキンと関連ファイル(たとえば、イメージ・ファイル、構成ファイルおよびリソース・バンドル)をADFライブラリJARにデプロイできます。これにより、アプリケーションにADFスキンを適用するために必要なファイルをパッケージ化できます。次に、アプリケーションにバンドルする場合と比較して、ADFスキンをADFライブラリJARにパッケージ化することの利点を示します。

11.3.1 ADFスキンをADFライブラリJARにパッケージ化する方法

ADFスキンをADFライブラリJARにパッケージ化するためのADFライブラリJARファイルのデプロイメント・プロファイルを作成します。

ADFライブラリJARファイルのデプロイメント・プロファイルを作成するには、次のようにします。

  1. 「アプリケーション」ウィンドウで、ADFスキンが含まれるプロジェクトを右クリックし、「デプロイ」「新規デプロイメント・プロファイル」を選択します。

  2. 「デプロイメント・プロファイルの作成」ダイアログで、「プロファイル・タイプ」ドロップダウン・リストから「ADFライブラリのJARファイル」を選択します。

  3. 「デプロイメント・プロファイル名」入力フィールドにデプロイメント・プロファイルの名前を入力し、「OK」をクリックします。

  4. 表示される「ADFライブラリJARデプロイメント・プロファイルのプロパティの編集」ダイアログのオプションを確認します。詳細は、「ヘルプ」をクリックしていつでも確認できます。

  5. 「OK」をクリックします。

ADFスキンをADFライブラリJARにパッケージ化するには、次のようにします。

  1. 「アプリケーション」ウィンドウで、ADFスキンが含まれるプロジェクトを右クリックし、「デプロイ」deploymentを選択します。deploymentは、ADFライブラリJARファイルのデプロイメント・プロファイルの名前です。

  2. 「デプロイ」ダイアログの「デプロイメント・アクション」ページで、「ADFライブラリのJARファイルへのデプロイ」をクリックし、「次」をクリックし、「終了」をクリックします。

11.3.2 ADFスキンをADFライブラリJARにパッケージ化した場合の処理

ADFライブラリJARファイルは、デプロイメント・プロファイルによって指定されたディレクトリに書き込まれます。このADFライブラリJARには、ADFスキンのソース・ファイル、trinidad-skins.xmlファイル、イメージ・ファイルおよびリソース文字列を定義するため、またはADF Facesコンポーネントに定義されているデフォルト文字列をオーバーライドするために作成したすべてのリソース・バンドルが含まれます。ADFライブラリJARファイルには、スキニングに関係のないADFスキンのプロジェクトの他のファイルも含まれます。

例11-2に、ADFスキンの次のアイテムを含むプロジェクトのディレクトリ構造を示します。

  • trinidad-skins.xmlファイル

  • ADFスキン・プロジェクトにコピーされるイメージ・ファイル(sort_des_ena.png)

  • ADFスキンのソース・ファイル(skin1.css)

  • ADFライブラリJARをプロジェクトにインポートするときにそのコンテンツをインスペクトするために使用する.svaファイル(oracle.adf.common.services.ResourceService.sva)。詳細は、第4.5項「ADFライブラリJARからのADFスキンのインポート」を参照してください。

  • デフォルトのリソース・バンドルの文字列をオーバーライドする文字列値を含むリソース・バンドル(skinBundle.properties)

    定義する文字列値を含むリソース・バンドルを指定する方法の詳細は、第7.2.1項「ADFスキンに追加のリソース・バンドルを指定する方法」を参照してください。

例11-2 ADFスキンを含むADFライブラリJARのディレクトリ構造

ADFLibraryJARRootDirectory
+---META-INF
|   |   MANIFEST.MF
|   |   oracle.adf.common.services.ResourceService.sva
|   |   trinidad-skins.xml
|   |
|   +---adf
|   |   \---skins
|   |       \---skin1
|   |           \---images
|   |               \---af_column
|   |                       colSort_des_ena.png
|   |
|   \---skins
|       \---skin1
|               skin1.css
|
\---resources
        skinBundle.properties

ADFライブラリJARに表示されるADFスキン内のイメージのディレクトリ・パスが、ADFスキン・プロジェクトのディレクトリ・パスを含めるように変更されます。例11-3に、行われる変更の例を示します。

例11-3 デプロイされたADFスキン内のイメージの変更されたディレクトリ・パス

// Reference to an image in an ADF skin prior to deployment to an ADF Library JAR
af|column::sorted-descending-icon-style
{
  background-image: url("images/af_column/colSort_des_ena.png"); 
}

// Reference to an image in an ADF skin after deployment to an ADF Library JAR
af|column::sorted-descending-icon-style
{
  background-image: url("/adf/skins/skin1/images/af_column/colSort_des_ena.png"); 
}

11.4 WebアプリケーションへのADFスキンの適用

アプリケーションのtrinidad-config.xmlファイルで値を指定して、ADFスキンを使用するようにアプリケーションを構成します。実行時にアプリケーションが使用するADFスキン・ファミリを識別する<skin-family>要素の値を指定します。ADFスキン・ファミリのスキンで複数のADFスキンを作成した場合、これらのスキンをバージョニングできます。同じADFスキン・ファミリ内の複数のADFスキンをバージョニングした場合は、trinidad-config.xmlファイルの<skin-version>要素を使用して、アプリケーションが使用する特定のバージョンを指定してください。

trinidad-config.xmlファイル内の<skin-version>要素に値を入力することによってあるいはtrinidad-skins.xmlファイル内の<default>true</default>要素を使用することによってADFスキン・ファミリの特定のADFスキンを指定しない場合、アプリケーションはtrinidad-skins.xml内で定義される最後のスキンを使用します。ADFスキンのバージョニングおよびこれによりアプリケーションが選択するADFスキンを決定する方法の詳細は、第12.5項「ADFスキンのバージョニング」を参照してください。

エンド・ユーザーがアプリケーションで使用するADFスキンを動的に選択できるように、アプリケーション・ページを構成できます。詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)を参照してください。

11.4.1 ADFスキンをアプリケーションに適用する方法

アプリケーションのtrinidad-config.xmlファイルを変更して、アプリケーションにADFスキンを適用します。このことを行うには、アプリケーションのtrinidad-config.xmlファイルを編集して、使用するADFスキン・ファミリを指定します。または、JDeveloperの「プロジェクト・プロパティ」ダイアログの「ADFビュー」オプションのリストから、ADFスキン・ファミリを選択することもできます。

アプリケーションにADFスキンを適用するには、次のようにします。

  1. 「アプリケーション」ウィンドウで、trinidad-config.xmlファイルをダブルクリックします。デフォルトでは、このファイルはWeb Content/WEB-INFノードにあります。

  2. 例11-4に示されているように、ソース・エディタに、<skin-family>要素の値を指定するためのエントリと、オプションで<skin-version>要素の値を書き込みます。

11.4.2 ADFスキンをアプリケーションに適用した場合の処理

例11-4に示されているように、trinidad-config.xmlファイルで、<skin-family>要素とオプションで<skin-version>要素に指定する値は、Fusion Webアプリケーションが実行時に使用するADFスキンを決定します。

例11-4 trinidad-config.xmlファイル

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
    <skin-family>skyros</skin-family>
      <skin-version>v1</skin-version>
</trinidad-config>

11.5 実行中のWebアプリケーションへのADFスキンの適用

Java Management Extensions (JMX)を使用すると、アプリケーションを再起動することなく、ADFライブラリJARにパッケージ化されたADFスキンをFusion Webアプリケーションに適用できます。これを実行するには、第11.5.1項「更新済ADFスキンを受け入れるようにFusion Webアプリケーションを構成する方法」で説明しているように、Fusion Webアプリケーションのソース・ファイルを構成する必要があります。次に、ADFスキン・エディタを使用してMBeanサーバーに接続し、ADFスキンを含むADFライブラリJARをデプロイします。詳細は、第11.5.2項「ADFライブラリJARをMBeanサーバーにデプロイする方法」を参照してください。これにより、ADFライブラリJARに含まれるすべてのADFスキンがFusion Webアプリケーションで利用できるようになります。

11.5.1 更新済ADFスキンを受け入れるようにFusion Webアプリケーションを構成する方法

アプリケーションがFusion Webアプリケーションを再起動せずにMBeanサーバーがデプロイした新しいADFスキンを適用できるように、JDeveloper内のFusion WebアプリケーションのViewControllerプロジェクトに次の変更を行います。

  • アプリケーションのViewControllerプロジェクトの「ADFビュー」ページの「ランタイム・スキン更新の有効化」チェック・ボックスを選択します。

  • アプリケーションのクラスパスにADF Faces JMXランタイム11を追加します。

  • (オプション)アプリケーションのweb.xmlファイルに、コンテキスト初期化パラメータを追加します。

    コンテキスト初期化パラメータによって、アプリケーションのコンテキスト・ルートを使用せずFusion Webアプリケーションを識別するための親しみやすい名前を指定できます。


注意:

Fusion Webアプリケーションは、統合WebLogic Serverでアプリケーションを実行する場合と同様に、展開フォーマットでデプロイする必要があります。


更新されたADFスキンを受け入れるようにWebアプリケーションを構成する手順は次のとおりです。

  1. JDeveloperの「アプリケーション」ウィンドウで、ViewController|ViewControllerプロジェクトを選択します。

  2. メイン・メニューから、「アプリケーション」「プロジェクト・プロパティ」を選択します。

  3. 「プロジェクト・プロパティ」ダイアログで「ADFビュー」を選択し、「ランタイム・スキン更新の有効化」チェック・ボックスを選択します。

  4. 「ライブラリとクラスパス」ページを選択し、「クラスパス・エントリ」リストに「ADF Faces JMXランタイム11」が表示されることを確認します。表示されない場合は「ライブラリの追加」.をクリックします。

  5. 「ライブラリの追加」ダイアログで、「ADF Faces JMXランタイム11」を選択し、「OK」をクリックします。

  6. 「OK」をクリックします。

  7. オプションで、「アプリケーション」ウィンドウのWEB-INFディレクトリ内にあるweb.xmlファイルをダブルクリックし、コンテキスト初期化パラメータ(これによりアプリケーション用に覚えやすい名前を指定できるようになります)を追加します。そうしない場合は、デフォルトの動作はアプリケーションのコンテキスト・ルートを使用します。

    概要エディタで、「Application」ナビゲーション・タブをクリックし、「コンテキスト初期化パラメータ」テーブルの横の「追加」アイコンをクリックしてoracle.adf.view.rich.SKINNING_MBEAN_NAMEパラメータのエントリを追加し、その値を、MBeanサーバーへのFusion Webアプリケーションを識別するために使用する名前に設定します。

11.5.2 ADFライブラリJARをMBeanサーバーにデプロイする方法

ADFスキンをパッケージ化するADFライブラリJARをMBeanサーバーにデプロイします。ADFスキンをADFライブラリJARにパッケージ化するためのADFライブラリJARファイルのデプロイメント・プロファイルを作成する方法の詳細は、第11.3.1項 「ADFスキンをADFライブラリJARにパッケージ化する方法」を参照してください。

ADFライブラリJARをMBean Serverにデプロイする手順は次のとおりです。

  1. 「アプリケーション」ウィンドウで、ADFスキンが含まれるプロジェクトを右クリックし、「デプロイ」deploymentを選択します。deploymentは、ADFライブラリJARファイルのデプロイメント・プロファイルの名前です。

  2. 「デプロイメント・アクション」ページで、「ADFスキン・マネージドBeanへのデプロイ」を選択し、「次へ」をクリックします。

  3. 「スキン接続」ページで、適切なオプションを選択します。

    • 「追加」をクリックしてMBeanサーバーへの新しい接続を作成し、ステップ4へ進みます。

    • 「接続」ドロップダウン・リストから、既存の接続を選択し、ステップ5へ進みます。

  4. 「JMX接続の作成」ダイアログで、各フィールドにデータを入力してMBeanサーバーに接続します。

    • 接続名: 接続の名前を入力します。名前は必ず有効なJava識別子とし、名前および接続はこのインストール全体で使用されるため、適切な一意の名前を選択してください。

    • サーバー・タイプ: ADFスキン・エディタからの接続用としてデフォルトのWeblogic Serverがあらかじめ選択状態になっています。

    • ユーザー名: MBeanサーバーへのアクセスを許可するユーザー名を入力します。

    • パスワード: 指定したユーザー名に関連付けるパスワードを入力します。このフィールドに入力する各文字はアスタリスク(*)として表示されます。

    • プロトコル: ADFスキン・エディタはt3プロトコルを使用してMBeanサーバーと通信します。

    • ホスト名: MBeanサーバーを実行するマシンを識別する値を入力します。TCP/IPで解決できるIPアドレスまたはホスト名、たとえばMBeanサーバーがローカル・マシン上にある場合はlocalhostまたは127.0.0.1を使用します。

    • ポート: MBeanサーバーのリスニング・ポートを入力します。デフォルトは、統合Weblogic Serverのデフォルト・ポート番号となる任意の値(多くの場合7101)です。

    • URLプロバイダのパス: MBeanサーバーの絶対JNDI名を入力します。これは/jndi/で始まり次のいずれかが続く必要があります。

      • weblogic.management.mbeanservers.domainruntime

      • weblogic.management.mbeanservers.runtime

      • weblogic.management.mbeanservers.edit

    • サーバー・インストールの場所: サーバー・インストールの場所が表示されます。

    • 接続のテスト: クリックすると、接続がテストされます。

    • ステータス: 「成功」メッセージは、ADFスキン・エディタがMBeanサーバーに接続できたことを示します。これ以外のメッセージは接続に失敗したことを示します。「接続のテスト」を試す前に少なくとも次の点をチェックする必要あります。

      • MBeanサーバーがローカルでない場合にネットワークが正しく動作しているか。

      • このダイアログで入力した各値。

  5. 「アプリケーション名」 フィールドで、ADFスキンを含むADFライブラリJARをデプロイする必要のあるFusion Webアプリケーションの名前を選択します。「実行中のアプリケーションの検索」をクリックして、使用可能なアプリケーションのリストを検索し、そのアプリケーションが実行中であることを確認します。

    第11.5.1項「更新済ADFスキンを受け入れるようにFusion Webアプリケーションを構成する方法」で説明しているように、アプリケーションの名前がoracle.adf.view.rich.SKINNING_MBEAN_NAMEパラメータ用に入力した値となるように指定していなければ、アプリケーションのルート・コンテキストの名前が表示されます。

  6. 「次へ」をクリックし、「終了」をクリックします。

11.5.3 ADFスキンを実行中のアプリケーションに適用した場合の処理

ADFスキン・エディタは、ADFスキンを含むADFライブラリJARをFusion Webアプリケーションにデプロイします。このADFライブラリJARには、ADFスキンおよび他の関連ファイル(ADFスキンが必要とするイメージなど)が含まれています。ADFライブラリJARのコンテンツの詳細は、第11.3.2項「ADFスキンをADFライブラリJARにパッケージ化した場合の処理」を参照してください。スキン・ファイルはFusion Webアプリケーションのルート・ディレクトリにインストールされます。Fusion Webアプリケーションのtrinidad-skins.xmlファイルは、新しく追加されたADFスキンを参照するよう更新されます。

Fusion Webアプリケーションが、新しく追加されたADFスキンを使用するようにするには、trinidad-config.xmlファイルの<skin-family要素が参照する値を更新する必要があります。これは、第11.4.1項「ADFスキンをアプリケーションに適用する方法」で説明しているように手動で行うか、プログラムでこの値を更新する要素を求めるEL式を指定することで可能です。この後者のオプションの詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)の「スタイルおよびスキンを使用した外観のカスタマイズ」に関する項を参照してください。