| Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド 11gリリース2(11.1.2.3.0) B66161-03 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド 11gリリース2(11.1.2.3.0) B66161-03 |
|
前 |
次 |
この章では、Fusion Webアプリケーションに適用するため、または独自のADFスキンの作成を支援するためにOracle ADFによって提供されるスキニング、ADFスキニング・フレームワークおよびADFスキンについて説明します。また、ADFスキン・エディタを使用して様々なリリースのOracle ADFを使用して開発されたアプリケーション用にADFスキンを作成する方法についても説明します。
この章には、次の項があります。
スキニングとは、ユーザー・インタフェースにおいてADF FacesおよびADFデータ視覚化コンポーネントが使用されるWebアプリケーションに対して適用するADFスキンを開発するタスクのことです。ADFスキンは、これらのコンポーネントの外観をカスタマイズできる特別なタイプのカスケード・スタイル・シート(CSS)です。各コンポーネントにCSSファイルを指定したり、アプリケーションの各ページにスタイルシートを挿入するかわりに、Webアプリケーションに対して1つのADFスキンを作成します。ユーザー・インタフェースでのレンダリングを行うすべてのコンポーネントで、ADFスキンによって定義されたスタイルが自動的に使用されます。つまり、ADFスキンを使用すると、ページの外観を変更するために個々のページに設計時の変更を加える必要がありません。
また、ADFスキンを使用すると、アプリケーションによってレンダリングされるすべてのページで一貫性のある外観を容易に維持することもできます。アプリケーションの外観には、必要に応じて簡単に変更を加えることができます。たとえば、会社の企業ブランドにあわせて、アプリケーションの色を変更することを決定する場合があります。さらに、アプリケーションをより使いやすくするために、コンポーネントのスタイル・プロパティを定義できます。たとえば、図1-1に、ADF Faces inputTextコンポーネントを示します。
図1-2に示す別のADF Faces inputTextコンポーネントでは、ADFスキンによって背景色がグレー表示されており、inputTextコンポーネントが読取り専用であることをエンド・ユーザーに示しています。
スキニングの他の利点として、ADF Facesコンポーネントによって実行時にレンダリングされる、デフォルトのテキスト・ラベルを簡単に変更できることをあげることができます。たとえば、dialogコンポーネントのラベルのデフォルトのテキストは、コンポーネントのtypeプロパティをokCancelに設定した場合、OKおよびCancelです。dialogコンポーネントのプロパティを指定してこれらのラベルの値を変更することはできません。かわりに、たとえば、OKをSubmitに変更する場合は、リソース・バンドルを参照するADFスキンを文字列値Submitで変更します。詳細は、第7章「ADFスキンのテキストの使用」を参照してください。
前述の例は、ADFスキンのユースケースと、ADFスキンを作成する利点を示しています。アプリケーションに加えるすべての変更を1つのADFスキンで定義する必要はありません。異なる目的で使用する複数のADFスキンを作成できます。たとえば、様々な会社の企業ブランドに一致するように様々な色スキームを持つADFを作成できます。さらに、エンド・ユーザーが実行時に動的にADFスキンを変更できるようにアプリケーションを構成できます。
このガイドでは、次のことを前提としています。
スキンできるADF FacesおよびADFデータ視覚化コンポーネントの知識があります。このガイドでは、これらのコンポーネントの使用方法や機能については説明しません。これらのコンポーネントの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)を参照してください。
CSSの知識があります。このガイドでは、CSSについては説明しません。公式仕様など、CSSの詳細は、次に示すWorld Wide Web Consortium (W3C)のWebサイトを参照してください。
ADFスキン・エディタを使用して、様々なリリースのOracle ADFを使用して開発されたFusion WebアプリケーションのADFスキンを作成できます。「ターゲット・アプリケーション・リリース」ドロップダウン・リストからサポートされているリリースを選択して、ADFスキンを作成するOracle ADFのリリースを選択します。これは、第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」の説明に従ってADFスキン・プロジェクトを作成するときに行います。ADFスキン・エディタによって、「ターゲット・アプリケーション・リリース」ドロップダウン・リストからリリースを選択するとき、選択するOracle ADFリリースへの適切な機能のみがADFスキン・プロジェクトに表示されるようにADFスキン・プロジェクトが構成されます。次に、構成変更の例を示します。
拡張できるADFスキンのリストをフィルタリングして、選択したリリースでサポートされているADFスキンのみを表示します。たとえば、11gリリース1(11.1.1.5.0)のADFスキンを作成する場合、ADFスキン・エディタではfusionFx-v2 ADFスキンは表示されません。これは、このADFスキンがその後のリリースで導入されたためです。
Oracle ADFの特定のリリースでサポートされていないADFは、セレクタ・ツリーに表示されません。11gリリース2(11.1.2)よりも前のリリースをターゲットにする場合、ADFスキン・エディタではADFデータ視覚化テーマ・マップ・コンポーネントのセレクタは表示されません。これは、このコンポーネントが最初に導入されたのが11gリリース2(11.1.2)であるためです。
|
ヒント: ターゲットにするリリースのタグ参照情報を表示するには、セレクタ・ツリーのセレクタの上で[F1]キーを押します。 |
11g リリース2 (11.1.2)においては、Oracle JDeveloperに備えられたビジュアル・エディタで、このリリースを使用して作成されたOracle ADFアプリケーションのADFスキンを作成することもできます。第4.4.2項「JDeveloperでのADFスキンの作成方法」の説明に従って、ADFスキンをFusion Webアプリケーションのプロジェクト内に作成できます。JDeveloperとADFスキン・エディタのビジュアル・エディタでは同じ機能が提供されるため、いずれのビジュアル・エディタでも、このガイドで説明する手順を使用して、タスクを実行できます。
|
注意: 11g リリース2 (11.1.2)以前のOracle ADFのリリースを使用して開発されたアプリケーションのADFスキンを作成する場合は、ADFスキン・エディタを使用します。 |
ADFスキンの開発は、反復プロセスです。先に進む前に、CSSの概要と、ADF FacesおよびADFデータ視覚化コンポーネントについて理解しておいてください。ADFスキンを開発するステップの概要は次のとおりです。
ADFスキンのソース・ファイルを作成します。
セレクタの宣言を記述するソース・ファイルを作成します。JDeveloperまたはADFスキン・エディタのビジュアル・エディタを使用してソース・ファイルを作成する場合は、拡張元となる既存のADFスキンを選択する必要があります。最初のADFスキンを作成する場合は、Oracle ADFによって提供されるいずれかのADFスキンの中から選択します。詳細は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。これらのADFスキン間の継承関係の詳細は、第1.5項「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。以降のADFスキンを作成する場合は、すでに作成したADFスキンから拡張できます。
ADFスキンの作成の詳細は、第4.4項「ADFスキン・ファイルの作成」を参照してください。
ADFスキン・プロパティとCSSプロパティの値を定義します。これらのプロパティの値は、ADF FacesおよびADFデータ視覚化コンポーネントがADFスキニング・フレームワークを介して公開するセレクタを使用して記述できます。
様々なカテゴリのセレクタ、ルールおよび擬似要素の詳細は、第2章「ADFスキン・セレクタの使用」を参照してください。
ADF FacesおよびADFデータ視覚化コンポーネントによって公開されるセレクタの値を定義する方法の詳細は、第5章「コンポーネント固有セレクタの使用」を参照してください。
必要に応じて、ADFスキンが実行時にFusion Webアプリケーションで参照するイメージをインポートします。詳細は、第6章「ADFスキンのイメージの使用」を参照してください。
|
ヒント: 第11.4項「Oracle ADFで提供されるADFスキン」で説明されているADFスキンのFusion SimpleファミリからADFスキンを拡張することを選択した場合は、「イメージ」ウィンドウを使用してADFスキンのプロジェクトにイメージをインポートし、編集できます。「イメージ」ウィンドウの詳細は、第6.3項「「イメージ」ウィンドウの使用」を参照してください。 |
必要に応じて、リソース・バンドルに新しい値を入力して、ADF FacesおよびADFデータ視覚化コンポーネントに定義されたデフォルトのテキスト・ラベルをオーバーライドします。詳細は、第7章「ADFスキンのテキストの使用」を参照してください。
必要に応じて、ADFスキンでテーマを編集または作成します。テーマは、コンポーネント・レベルのルック・アンド・フィールを実装する方法です。詳細は、第5.6項「ADF Facesコンポーネントへのテーマの適用」を参照してください。
ADFスキンに加えた変更をプレビューおよびテストして、結果が適切であることを確認します。必要に応じてADFスキンを変更します。ADFスキンのプレビューおよびテストの詳細は、第10.2項「ADFスキンの変更のテスト」を参照してください。
ADFスキンの開発が完了したら、配布のためにADFスキンをパッケージ化できます。詳細は、第10.3項「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。
ADFスキンが完成し、配布した後、ADFスキンを使用するようにFusion Webアプリケーションを構成します。詳細は、第10.4項「WebアプリケーションへのADFスキンの適用」を参照してください。
|
ヒント: Oracle Technology Network (OTN)で入手可能なChanging an Application's Look and Feel by Using Skinsチュートリアルを実行することを検討してください。このチュートリアルでは、JDeveloperでADFスキンのビジュアル・エディタを使用してADFスキンを作成する手順を段階的に説明しています。このチュートリアルに付属しているサンプル・アプリケーションを使用することもできます。詳細は、 |
ADFスキンはカスケード・スタイル・シートの一種です。カスケード・スタイル・シートとはいくつかのことが異なります。異なる点の1つは、ADFスキニング・フレームワークによってADFスキンのソース・ファイルで公開されるセレクタのプロパティを指定できることです。ADFスキニング・フレームワークによって公開されるセレクタでは、外観を変更する対象となるADF FacesおよびADFデータ視覚化コンポーネントが識別され、これにより、コンポーネントの1つ以上のスタイル・プロパティを指定できることが、CSSセレクタに類似しています。
ADFスキニング・フレームワークによって公開されるセレクタでは、CSSプロパティとADFスキニング・フレームワークによって公開されるADFスキン・プロパティの両方の値を設定できることが、CSSセレクタとは異なります。CSSプロパティは、エンド・ユーザーのブラウザによって直接解釈されます。ADFスキン・プロパティは、-tr-という文字で始まります。これらのADFスキン・プロパティの一部は、Fusion Webアプリケーションによって読み取られ、解釈されます。これらのプロパティは、サーバー側プロパティとも呼ばれます。ユーザー・インタフェースでのレンダリングを行うコンポーネントでは、レンダリングする対象を決定する前に、これらのプロパティを読み取る場合があります。第2.3項「ADFスキニング・フレームワークでのプロパティ」で説明しているように、-tr-rule-refまたは-tr-property-refなどの他のタイプのADFスキン・プロパティでは、ADFスキニング・フレームワークの機能が拡張されます。
例1-1に、ADFスキン・プロパティ-tr-graphic-antialiasingおよび-tr-animation-indicatorsと、CSSプロパティbackground-colorおよびfont-familyの値を設定するgaugeコンポーネントのセレクタを示します。
例1-1 ADFスキン・プロパティおよびCSSプロパティを含むgaugeコンポーネントのセレクタ
af|dvt-gauge
{
/** ADF skin properties */
-tr-graphic-antialiasing: false;
-tr-animation-indicators: none;
/** CSS properties */
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: rgb(243,255,185);
}
例1-1に示すように、ADFスキニング・フレームワークによって公開されるセレクタの宣言内でCSSプロパティおよびADFスキン・プロパティの値を設定できます。ADFスキニング・フレームワークでは、定義できるADFスキン・プロパティが公開されます。ADFスキン・プロパティ以外に、ADFスキニング・フレームワークでは、ADFスキンで指定できる数多くの擬似クラスとルールが定義されます。サポートされるルールと擬似クラスの例には、@platform、@agent、@accessibility-profile、:rtl、@localeなどがあります。詳細は、第2章「ADFスキン・セレクタの使用」を参照してください。
実行時に、Fusion WebアプリケーションはADFスキンのソース・ファイルを読み取り、ADFスキンのエントリをスタイル・クラスに変換し、ADF Facesコンポーネントの生成されたHTML出力に動的に追加します。
図1-3に、ADFスキンでアプリケーションのページの外観に及ぼすことができる影響を示します。左側のページは、fusion ADFスキンを使用してレンダリングされます。右側のページは、simple ADFスキンを使用してレンダリングされます。各ADFスキンでは、色とフォントの値が定義されます。fusion ADFスキンでは、Oracleロゴのイメージの参照に加えて、より多くの色が使用されます。
|
注意: ADFスキンは、クライアントがユーザー・インタフェースをレンダリングするのに要する時間に影響を及ぼす場合があります。ADFスキンで使用されるスタイルが多いほど、クライアントは多くのものをロードする必要があります。このことは、低帯域幅環境や待機時間の長い環境ではパフォーマンスに影響することがあります。 |
Oracle ADFによって提供される数多くのADFスキン・ファミリは、アプリケーションで使用したり、ADFスキンを作成するときに拡張できます。Oracle ADFで提供されるADFスキンによって、実行時にADF FacesおよびADFデータ視覚化コンポーネントによってレンダリングされる外観を、より高いレベルでカスタマイズできるようになります。図1-4には様々なADFスキン・ファミリ間の継承関係が示されており、たとえば、fusion-base ADFスキンは、追加のスタイル・プロパティの定義に加えて、simple ADFスキンで定義されたスタイル・プロパティを継承します。simple ADFスキンは他のADFスキンの拡張元であるため、すべてのADF Facesコンポーネントは少なくともこのADFスキンで定義されたスタイルを使用します。simple ADFスキンでは、ADFアプリケーションでレンダリングするためにADF Facesコンポーネントに必要な最小限のスタイル・プロパティを定義します。最小限のカスタマイズでADFスキンを作成するには、simple ADFスキンから拡張してADFスキンを作成します。ADFスキンのFusionファミリに似ているが、より変更しやすい(使用する色とフォントがより少ないため) ADFスキンを作成する場合は、ADFスキンのFusion Simpleファミリから拡張されるADFスキンの作成を検討してください。
図1-4のいずれかのADFスキンまたは独自に作成したADFスキンをアプリケーションに適用できます。詳細は、第10.4項「WebアプリケーションへのADFスキンの適用」を参照してください。
Oracle ADFで提供されるADFスキンの詳細は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。
