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

前
 
 

12 高度なトピック

この章では、ADFスキンのソース・ファイルまたはADFスキンの使用を制御する構成ファイルに変更を加える場合に役立つ情報を示します。また、この章では、Oracle ADFで提供されるADFスキンのリストと説明も示します。

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

12.1 ADFスキンのCSSファイルにおけるURLの参照

通常、ADFスキンのCSSファイルでは、ファイルの外部リソースを参照するためにURLを使用します。たとえば、エラー・メッセージとともにレンダリングするためにアプリケーションが使用するイメージがこれに該当します。URLは、ADFスキンのCSSファイルから様々なフォーマットで参照できます。サポートされているフォーマットは次のとおりです。

Javaアーカイブ(JAR)ファイルをパッケージとして作成し、ADFスキンとその関連ファイルを配布する場合は、使用するURLのフォーマットが重要になることがあります。詳細は、第11.3項「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。

12.2 ADFスキンの構成ファイル

次のリストでは、ADFスキンのプロジェクトに関連付けられている構成ファイルについて説明します。ADFスキンの開発中、または開発が終了して完成したADFスキンをアプリケーションに適用するときに、これらのファイルに含まれる値を変更します。

12.3 Oracle ADFで提供されるADFスキン

­Oracle ADFでは、様々なADFスキンが提供されており、これらを拡張して、新規ADFスキンを作成できます。表12-1に、これらのADFスキンの違いを示します。第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」で説明しているように、「ターゲット・アプリケーション・リリース」プロパティとして選択した値によって、拡張元として利用できるADFスキンが決定されます。表12-1に示されているADFスキンのすべてが利用できるわけではありません。たとえば、11.1.1.4.x「ターゲット・アプリケーション・リリース」プロパティの値として選択した場合、skyrosスキンは拡張のために利用できません。

ADFスキン作成時に表示される「ADFスキンの作成」ダイアログの「基本スキン」ページは、第4.3項「ADFスキン・ファイルの作成」で説明しているように、ADFスキンの作成対象であるOracle ADFのリリースに基づいて、拡張元として適切なADFスキンを提示します。たとえば、12.1.2.0.x「ターゲット・アプリケーション・リリース」プロパティの値として選択した場合、推奨される拡張元のADFスキンはskyros-v1.desktopです。

表12-1に示されているすべてのADFスキンをWebアプリケーションに適用できます。詳細は、第12.2項「ADFスキンの構成ファイル」を参照してください。ADFスキン間の継承関係を示すダイアグラムは、第1.4項「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。

表12-1 Oracle ADFで提供されるADFスキン

ADFスキン 説明

simple

最小書式設定のみを含みます。

skyros-v1

simpleスキンを拡張します。使用するアプリケーションにカラフルなルック・アンド・フィールを提供します。skyrosスキンでは、イメージの枠線をDOM構造で代替できるようになり、fusionスキンなどより容易に扱えるようになっています。

第6.6項「ADFスキンへの単純な枠線スタイルの提供」で説明しているように、trinidad-skins.xmlファイル内の<feature>要素用に値を設定することにより、non-skyrosスキンでイメージの枠線をDOM構造で代替できるようになり、より容易に扱えます。

fusion-base

simpleスキンを拡張します。ADFスキンのFusionおよびFusion Simpleファミリは、このスキン(たとえば、fusion およびfusionFx-simpleスキン)を拡張します。fusion-baseスキンから拡張しないようお薦めします。

fusion

fusion-baseスキンを拡張します。このスキンは、非常に多くのスタイルを提供します。このスキンは非推奨です。

fusion-11.1.1.3.0

fusionスキンを拡張します。このスキンにより、特定のコンポーネントに階層構造が作成され、より明瞭なタブのレンダリングを行えます。これらのコンポーネントは、panelTabbednavigationPane (属性hint="tabs")とdecorativeBoxです。またこのスキンでは、公開されたpanelAccordionコンポーネント・ペインに表示されるテキストを読みやすくするために、このペインのための、より目立たない背景イメージを定義しています。

fusionFx-v1

fusion-11.1.1.3.0スキンを拡張します。このスキンには、数多くの問題に対応するためのデザインの改善と変更が含まれています。具体的には、これによって次のものが追加されます。

  • 特定のブラウザでインライン・ポップアップが表示されたときに、基礎となるフレームのコンテンツが表示されないようにするため、背景色を.AFMaskingFrameグローバル・スタイル・セレクタにします。

  • inputComboboxListOfValuesコンポーネントのための、ブールADFスキン・プロパティ-tr-stretch-dropdown-table。このプロパティは、表の列のコンテンツを表示するためにリスト内の表をストレッチするか、または表の幅をinputComboboxListOfValuesコンポーネント内の入力フィールドの幅に制限するかどうかを指定します。

  • inlineFrameコンポーネントは、フレームのコンテンツのロードが完了したことをブラウザが判別するまで、ロード・インジケータとして機能するイメージを表示します。

    作成するADFスキンにこの機能を実装できます。af|inlineFrameセレクタにある擬似クラスのbusyflowを使用すると、このことを行うことができます。inlineFrameコンポーネントが親コンポーネントによってストレッチされない(inlineFrameコンポーネントがフローである)場合にのみ、inlineFrameコンポーネントによってIFrame要素が生成されます。af|inlineFrame:busy:flowを使用して、ロード・インジケータを参照する背景イメージ・スタイルを定義します。親コンポーネントによってinlineFrameコンポーネントがストレッチされる場合、生成されるコンテンツはより複雑になります。この複雑性により、af|inlineFrame::status-iconを使用してコンテンツ・イメージのURLを定義でき、af|inlineFrame::status-icon-styleを使用して、オプションで追加の背景イメージを定義できます。また、これにより、他のコンポーネント・セレクタが使用するイメージを再利用することもできます。たとえば、carouselコンポーネントのaf|carousel::status-iconセレクタとaf|carousel::status-icon-styleセレクタです。スキニング別名を使用して、これらのイメージを再利用します。

    次のグローバル・セレクタも、ADFスキンにこの機能を実装している場合に使用できるものとして導入されています。

    • .AFBackgroundImageStatus:alias: af|inlineFrame::busy:flowで使用される背景イメージを参照するために使用します。

    • .AFStatusIcon:alias: af|carousel::status-iconaf|inlineFrame::status-iconを参照するために使用します。

    • .AFStatusIconStyle:alias: af|carousel::status-icon-styleaf|inlineFrame::status-icon-styleを参照するために使用します。

    リソース・キー(af_inlineFrame.LABEL_FETCHING)は、inlineFrameコンポーネントのロード・アイコンに表示する文字列を定義します。

fusionFx-v1.1

fusionFx-v1スキンを拡張します。これにより、af:tableコンポーネントでQuery-By-Example (QBE)フィルタをクリアする機能にサポートが追加されます。

fusionFx-v1.2

fusionFx-v1.1スキンを拡張します。アプリケーションがタッチ・スクリーン・デバイスでレンダリングされる際の最適化を含め、多数のユーザー・インタフェースの拡張が含まれています。

fusionFx-v1.3

fusionFx-v1.2スキンを拡張します。変更には、af|carouselセレクタ用の新しいスキン・プロパティ(-tr-pop-out-animation-duration)およびいくつかの擬似要素が含まれます。

fusionFx-v2

fusionFx-v1から拡張します。これにより、より明瞭なタブのレンダリングを行う特定のコンポーネントに階層構造が作成されます。これらのコンポーネントは、panelTabbednavigationPane (属性hint="tabs")とdecorativeBoxです。またこのスキンでは、公開されたpanelAccordionコンポーネント・ペインに表示されるテキストを読みやすくするために、このペインのための、より目立たない背景イメージを定義しています。

fusionFx-v2.1

fusionFx-v2から拡張します。アプリケーションがタッチ・スクリーン・デバイスでレンダリングされる際の最適化を含め、多数のユーザー・インタフェースの拡張が含まれています。

fusionFx-v3

fusionFx-v2から拡張します。これには、panelBoxdecorativeBoxコンポーネントなどのコンテナ型コンポーネント全般にわたって外観を明るく鮮やかにする変更を含む、いくつかの拡張機能が含まれています。

fusionFx-simple-vN.N

fusionFx-simple-vN.Nスキンは、カラー・パレットが簡素化されている点を除いてFusionファミリのADFスキンと同じです。これにより、fusionFx-simple-vN.Nスキンを拡張するADFスキンの色スキームの変更が、FusionファミリのADFスキンを拡張するスキンの色スキームの変更よりも容易になります。fusionFx-simple-vN.Nスキンを拡張するADFスキンで少数の色別名を変更することにより、色スキームを大幅に変更できます。さらに、イメージ・エディタを使用して、fusionFx-simple-vN.Nスキンの1つを拡張するときにADFスキンの色スキームを変更できます。イメージ・エディタの詳細は、第6.5項「イメージ・エディタの使用」を参照してください。

Oracle ADFの12c (12.1.3)では、Fusion SimpleファミリのADFスキンは次のバージョンで使用可能です。

  • fusionFx-simple(このスキンは非推奨です)。

  • fusionFx-simple-v1

  • fusionFx-simple-v1.1

  • fusionFx-simple-v1.2

  • fusionFx-simple-v1.3

  • fusionFx-simple-v2

  • fusionFx-simple-v2.1

  • fusionFx-simple-v3

プロジェクタ・スキン

ADF Facesではプロジェクタ・スキンを提供しており、これは、Oracle Technology Network (OTN) Webサイトからダウンロードできます。これらのスキンは、プロジェクタを使用してデモを行う場合のアプリケーションのスタイルを定義します。各プロジェクタ・スキンでは、卓上プロジェクタ(特に古いモデルのプロジェクタ)を使用して表示した場合にアプリケーションが適切にレンダリングされるように、親スキンの複数の要素を変更します。これらのスキンは、プロジェクタと同じ場所にいる人を対象としている場合に役立ちます。これらは、Web会議を介して、オンラインでアプリケーションを表示する場合には適していない場合があります。ADF Facesでは、次のプロジェクタ・スキンが提供されています。

  • fusion-projector: このスキンは、プロジェクタでアプリケーションが適切にレンダリングされるように、fusionスキンの複数の要素を変更します。

  • fusionFx-v2-projector: このスキンは、プロジェクタでアプリケーションが適切にレンダリングされるように、fusionFx-v2スキンの複数の要素を変更します。

  • fusion-11.1.1.3.0-projector: このスキンは、プロジェクタでアプリケーションが適切にレンダリングされるように、fusion-11.1.1.3.0スキンの複数の要素を変更します。


12.4 ADFスキンのバージョニング

<version>要素を使用して、trinidad-skins.xmlファイルでADFスキンのバージョン番号を指定できます。trinidad-skins.xmlファイル内の<family>要素の値が同じであるADFスキンを区別する場合はこのオプション機能を使用します。特定のADFスキンを使用するようにアプリケーションを構成する場合は、第11.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、trinidad-config.xmlファイルで値を指定して行うことに注意してください。

12.4.1 ADFスキンのバージョニング方法

trinidad-skins.xmlファイル内の<version>要素に値を入力して、ADFスキンのバージョンを指定します。

ADFスキンをバージョニングするには、次のようにします。

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

  2. 「構造」ウィンドウで、バージョニングするADFスキンのskinノードを右クリックし、「skinの中に挿入」「version」を選択します。

  3. trinidad-config.xmlファイルの<skin-version>要素に値が指定されていない場合にこのバージョンのADFスキンがアプリケーションで使用されるようにするには、第11.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、バージョンの挿入のためのダイアログで、デフォルト・リストからtrueを選択します。

  4. 名前フィールドに値を入力します。たとえば、ADFスキンの最初のバージョンである場合はv1と入力します。

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

12.4.2 ADFスキンをバージョニングした場合の処理

例12-3に、3つのADFスキン(skin1.desktop, skin2.desktopおよびskin3.desktop)を参照するtrinidad-skins.xmlの例を示します。これらの各ADFスキンの<family>要素は同じ値(test)になっています。<version>要素の子要素の値によって、これらのADFスキンがそれぞれ区別されます。実行時に、アプリケーションのtrinidad-config.xmlファイルにおける<skin-family>要素の値としてtestが指定されたアプリケーションでは、skin1.desktopを使用します。これは、このADFスキンがtrinidad-skins.xmlファイルでデフォルト・スキンとして構成されているためです(<default>true</default>)。この動作は、第11.4項「ウェブ・アプリケーションへのADFスキンの適用」で説明されているように、trinidad-config.xml内の<skin-version>要素に値を指定してオーバーライドできます。たとえば、trinidad-config.xml内の<skin-version>エレメントの値としてv2を指定した場合、アプリケーションはtrinidad-skins.xmlファイル内でデフォルトとして定義されているskin1.desktopのかわりにskin2.desktopを使用します。

(trinidad-config.xmlファイル内の<skin-version>要素を使用して)取得するスキンのバージョンを指定しない場合、アプリケーションはtrinidad-skins.xml内の<default>true</default>要素を使用してデフォルトとして定義されているスキンを使用します。デフォルトのスキンを指定しない場合、アプリケーションはtrinidad-skins.xml内で定義される最後のADFスキンを使用します。例12-3において、定義される最後のADFスキンはskin3.desktopです。

例12-3 バージョニングされたADFスキン・ファイルが含まれたtrinidad-skins.xmlファイル

<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>skin1.desktop</id>
    <family>test</family>
    <extends>skyros-v1.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/skin1/skin1.css</style-sheet-name>
    <version>
      <default>true</default>
      <name>v1</name>
    </version>
  </skin>
  <skin>
    <id>skin2.desktop</id>
    <family>test</family>
    <extends>skin1.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
    <version>
      <name>v2</name>
    </version>
  </skin>
  <skin>
    <id>skin3.desktop</id>
    <family>test</family>
    <extends>skin2.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/skin3/skin3.css</style-sheet-name>
    <version>
      <name>v3</name>
    </version>
  </skin>
</skins>