1 Webアプリケーションのスキニングについて

この章ではADFスキンの開発について説明します。ADFスキンを開発するプロセスの概要について説明し、ADFスキンが実装できる変更のいくつかを概観し、Oracle ADFが拡張用に用意したADFスキンの継承関係について説明します。

この章の内容は次のとおりです。

このマニュアルおよびこの他のマニュアルに、なじみのない用語が出てきた場合は、用語集で定義を確認してください。

1.1 Webアプリケーションのスキニングの概要

スキニングとは、ユーザー・インタフェースにおいてADF FacesおよびADFデータ視覚化コンポーネントが使用されるWebアプリケーションに対して適用するADFスキンを開発するタスクのことです。ADFスキンがカスケード・スタイル・シート(CSS)のセレクタ、フォーマットおよびプロパティを使用することで、これらのコンポーネントの外観をカスタマイズできます。各コンポーネントにCSSファイルを指定したり、アプリケーションの各ページにスタイルシートを挿入するかわりに、Webアプリケーションに対して1つのADFスキンを作成します。ユーザー・インタフェースでのレンダリングを行うすべてのコンポーネントで、ADFスキンによって定義されたスタイルが自動的に使用されます。つまり、ADFスキンを使用すると、ページの外観を変更するために個々のページに設計時の変更を加える必要がありません。

また、ADFスキンを使用すると、アプリケーションによってレンダリングされるすべてのページで一貫性のある外観を容易に維持することもできます。アプリケーションの外観には、必要に応じて簡単に変更を加えることができます。たとえば、会社の企業ブランドにあわせて、アプリケーションの色を変更することを決定する場合があります。さらに、アプリケーションをより使いやすくするために、コンポーネントのスタイル・プロパティを定義できます。たとえば、図1-1に、ADF Faces inputTextコンポーネントを示します。

図1-1 書込み可能inputTextコンポーネント

図1-2に示す別のADF Faces inputTextコンポーネントでは、ADFスキンによって背景色がグレー表示されており、inputTextコンポーネントが読取り専用であることをエンド・ユーザーに示しています。

図1-2 背景色がグレー表示された読取り専用inputTextコンポーネント

スキニングの他の利点として、ADF Facesコンポーネントによって実行時にレンダリングされる、デフォルトのテキスト・ラベルを簡単に変更できることをあげることができます。たとえば、dialogコンポーネントのラベルのデフォルトのテキストは、コンポーネントのtypeプロパティをokCancelに設定した場合、OKおよびCancelです。dialogコンポーネントのプロパティを指定してこれらのラベルの値を変更することはできません。かわりに、たとえば、OKをSubmitに変更する場合は、リソース・バンドルを参照するADFスキンを代替文字列値で変更します。詳細は、「ADFスキンのテキストの使用」を参照してください。

前述の例は、ADFスキンのユースケースと、ADFスキンを作成する利点を示しています。アプリケーションに加えるすべての変更を1つのADFスキンで定義する必要はありません。異なる目的で使用する複数のADFスキンを作成できます。たとえば、様々な会社の企業ブランドに一致するように様々な色スキームを持つADFを作成できます。また、スキンを動的に変更するために(たとえば、エンド・ユーザーのロールに基づく、エンド・ユーザーの選択に応じるなど)、アプリケーションを構成できます。

Oracle ADFは、ADFスキンの作成タスクを支援する数多くのツールおよびリソースを提供します。「ADFスキンの開発の概要」は使用できるツールを簡単に説明し、「Oracle ADFで提供されるADFスキン」はOracle ADFがADFスキン作成プロジェクトの開始点として提供するADFスキンを説明します。このリリースで作成する新しいWebアプリケーションは、デフォルトでAltaスキンを使用します。移行されたWebアプリケーションは、引き続き既存のADFスキンを使用します。Oracle Alta UIシステムを最大限に活用するには、Altaスキンを使用する以外にOracle Alta UIの設計原則に基づいてアプリケーションを設計することをお薦めします。これらの原則を使用してアプリケーションを設計すると、コンテンツをエンド・ユーザーに明確に整理して表示するためにOracle Alta UIシステムに組み込まれているレイアウト、応答設計およびコンポーネントを利用できます。Oracle Alta UIシステムおよびOracle Alta UIの設計原則の詳細は、http://www.oracle.com/webfolder/ux/middleware/alta/index.htmlを参照してください。Oracle Alta UIパターンの詳細は、http://www.oracle.com/webfolder/ux/middleware/alta/patterns/index.htmlを参照してください。

このガイドでは、次のことを前提としています。

スキンできるADF FacesおよびADFデータ視覚化コンポーネントの知識があります。このガイドでは、これらのコンポーネントの使用方法や機能については説明しません。これらのコンポーネントの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「一般的なADF Facesコンポーネントの使用」と「ADFデータ視覚化コンポーネントの使用」」を参照してください。
CSSの知識があります。このガイドでは、CSSについては説明しません。公式仕様など、CSSの詳細は、次に示すWorld Wide Web Consortium (W3C)のWebサイトを参照してください。

http://www.w3.org/

1.2 ADFスキンの開発の概要

ADFスキンの開発は、反復プロセスです。先に進む前に、CSSの概要と、ADF FacesおよびADFデータ視覚化コンポーネントについて理解しておいてください。

Oracle ADFは、ADFスキンの開発に役立つ2つのツール(テーマ・エディタおよびJDeveloperのADFスキン用のエディタ)を提供します。テーマ・エディタは、最も頻繁にスキニングされたADF Facesコンポーネントのスタイル・プロパティを変更できるWebアプリケーションです。スタイル・プロパティの変更を行う同じブラウザ・ページのプレビュー・ペイン内で変更の結果をすぐに表示できます。

テーマ・エディタの目標は、スキニング・タスクの大部分の実現を支援することです。テーマ・エディタを使用して実現できないそれらのスキニング・タスクの場合、テーマ・エディタで完了できるタスクが完了した後にテーマ・エディタからADFライブラリJARにADFスキンをエクスポートすることをお薦めします。エクスポートされたADFライブラリJARを使用する場合、JDeveloperのADFスキンのエディタを使用してエクスポートされたテーマ・エディタのADFスキンから拡張されたADFスキンを作成して、残りのスキニング・プロジェクトを完了できます。JDeveloperのADFスキンのエディタを使用する必要があるタスクの例には、DVTコンポーネントのスタイル設定、ADF Facesコンポーネントがレンダリングするデフォルト・ラベルの代替テキスト文字列の書込みおよびWebアプリケーション・ページが特定のブラウザまたはデバイスでレンダリングする場合のルック・アンド・フィールを決定するためのADFスキンの@ルールの指定が含まれます。

注意:

ADFスキンはテーマ・エディタにインポートできません。テーマ・エディタのユーザー・インタフェースでは、ADFスキンを「テーマ」と呼びます。

テーマ・エディタのテーマ(ADFスキン)を開発するステップの概要は次のとおりです。

テーマ・エディタを使用して、ADFスキンを作成します。
テーマ・エディタで用意されたコントロールを使用してカスタマイズできるADF Facesコンポーネントのスタイル・プロパティを変更します。
表示されたプレビュー・ページで変更を確認します。
満たされている場合またはテーマ・エディタを使用して実現できるすべてのタスクを完了した場合、完了したADFスキンをADFライブラリJARにエクスポートします。

これらの手順の詳細は、「テーマ・エディタの使用」を参照してください。
適切なオプションを選択します。
- ADFライブラリJARをADFスキンを拡張できるJDeveloperプロジェクトにインポートして、テーマ・エディタを使用して完了できなかった残りのタスクを完了します。詳細は、「ADFライブラリJARからのADFスキンの追加」を参照してください。
- 目的のWebアプリケーションで使用するために完了したADFスキンを配布します。詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。

JDeveloperでADFスキンを開発するステップの概要は次のとおりです。

JDeveloperでADFスキンを作成します。

ADFスキニング・フレームワークによって公開されるセレクタの宣言を記述するJDeveloperのADFスキンを作成します。JDeveloperでADFスキンを作成する場合、拡張元となる既存のADFスキンを選択する必要があります。最初のADFスキンを作成する場合は、Oracle ADFによって提供されるいずれかのADFスキンの中から選択します。詳細は、「Oracle ADFで提供されるADFスキン」を参照してください。これらのADFスキン間の継承関係の詳細は、「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。後続のADFスキンを作成する場合は、前に作成したADFからの拡張を選択できます。

ADFスキンの作成の詳細は、「ADFスキン・ファイルの作成」を参照してください。
作成したADFスキンの中のセレクタ、ルールおよび疑似要素の宣言を記述します。

JDeveloperのADFスキンのエディタには、このタスクを容易にする多くのタブが用意されています。

注意:
Skyros ADFスキンからADFスキンを拡張する場合のみ、「設計」タブが表示されます。前述のテーマ・エディタを使用して、ブラウザ・ページのAltaまたはSkyrosスキンに対する変更を編集およびプレビューできます。セレクタ・エディタは、拡張元のスキン・ファミリに関係なく表示されます。詳細は、「ADFスキン・デザイン・エディタの使用」および「ADFスキン・セレクタ・エディタの使用」を参照してください。

様々なカテゴリのセレクタ、ルールおよび擬似要素の詳細は、「ADFスキン・セレクタの使用」を参照してください。
必要に応じて、ADFスキンが実行時にWebアプリケーションで参照するイメージをインポートします。詳細は、「ADFスキンのイメージおよび色の使用」を参照してください。
必要に応じて、リソース・バンドルに新しい値を入力して、ADF FacesおよびADFデータ視覚化コンポーネントに定義されたデフォルトのテキスト・ラベルをオーバーライドします。詳細は、「ADFスキンのテキストの使用」を参照してください。
ADFスキンに加えた変更をプレビューおよびテストして、結果が適切であることを確認します。必要に応じてADFスキンを変更します。ステップ2で説明している「設計」タブは、JDeveloperのADFスキンのエディタ内または「ADFスキン・デザイン・エディタの使用」で説明されているように「ブラウザでプレビュー」アイコンをクリックしてブラウザ内に変更を表示できる数多くのサンプル・ページを用意しています。実行中のWebアプリケーションのADFスキンのプレビューおよびテストの詳細は、「ADFスキンの変更のテスト」を参照してください。
ADFスキンの開発が完了したら、配布のためにADFスキンをパッケージ化できます。詳細は、「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。
ADFスキンが完成し、配布した後、ADFスキンを使用するようにWebアプリケーションを構成します。詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。

1.3 ADFスキンの考察

ADFスキンはカスケード・スタイル・シートの一種です。カスケード・スタイル・シートとはいくつかのことが異なります。異なる点の1つは、ADFスキニング・フレームワークによってADFスキンのソース・ファイルで公開されるセレクタのプロパティを指定できることです。ADFスキニング・フレームワークによって公開されるセレクタでは、外観を変更する対象となるADF FacesおよびADFデータ視覚化コンポーネントが識別され、これにより、コンポーネントの1つ以上のスタイル・プロパティを指定できることが、CSSセレクタに類似しています。

ADFスキニング・フレームワークによって公開されるセレクタでは、CSSプロパティとADFスキニング・フレームワークによって公開されるADFスキン・プロパティの両方の値を設定できることが、CSSセレクタとは異なります。CSSプロパティは、エンド・ユーザーのブラウザによって直接解釈されます。ADFスキン・プロパティは、-tr-という文字で始まります。これらのADFスキン・プロパティの一部は、Webアプリケーションによって読み取られ、解釈されます。これらのプロパティは、サーバー側プロパティとも呼ばれます。ユーザー・インタフェースでのレンダリングを行うコンポーネントでは、レンダリングする対象を決定する前に、これらのプロパティを読み取る場合があります。「ADFスキニング・フレームワークでのプロパティ」で説明しているように、-tr-rule-refまたは-tr-property-refなどの他のタイプのADFスキン・プロパティでは、ADFスキニング・フレームワークの機能が拡張されます。

次の例に、ADFスキン・プロパティ-tr-graphic-antialiasingおよび-tr-animation-indicatorsと、CSSプロパティbackground-colorおよびfont-familyの値を設定する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);
}

前の例に示されているように、ADFスキニング・フレームワークで公開されたセレクタの宣言内でCSSプロパティおよびADFスキン・プロパティの値を設定できます。ADFスキニング・フレームワークでは、定義できるADFスキン・プロパティが公開されます。ADFスキン・プロパティ以外に、ADFスキニング・フレームワークでは、ADFスキンで指定できる数多くの擬似クラスと@ルールが定義されます。サポートされる@ルールと擬似クラスの例には、@platform、@agent、@accessibility-profile、:rtl、@localeなどがあります。詳細は、「ADFスキン・セレクタの使用」を参照してください。

実行時、WebアプリケーションはADFスキンからブラウザ固有のCSSファイルを作成します。次にアプリケーションは、それがなんらかのCSSファイルであれば、そのブラウザ固有のCSSファイルを参照します。

図1-3に、ADFスキンでアプリケーションのページの外観に及ぼすことができる影響を示します。左側のページは、skyros ADFスキンを使用してレンダリングされます。右側のページは、altaスキンを使用してレンダリングされます。各ADFスキンでは、色とフォントの様々な値が定義されます。

図1-3 Skyros ADFスキンおよびAltaスキンを使用したFile Explorerアプリケーション

注意:

ADFスキンは、クライアントがユーザー・インタフェースをレンダリングするのに要する時間に影響を及ぼす場合があります。ADFスキンで使用されるスタイルが多いほど、クライアントは多くのものをロードする必要があります。このことは、低帯域幅環境や待機時間の長い環境ではパフォーマンスに影響することがあります。

1.4 Oracle ADFで提供されるADFスキンの継承関係

Oracle ADFによって提供される数多くのADFスキン・ファミリは、アプリケーションで使用したり、ADFスキンを作成するときに拡張できます。Oracle ADFで提供されるADFスキンによって、実行時にADF FacesおよびADFデータ視覚化コンポーネントによってレンダリングされる外観を、より高いレベルでカスタマイズできるようになります。

図1-4は、様々なADFスキン・ファミリ間の継承関係を示しています。skyros-v1およびalta-v1 ADFスキン・ファミリは、simple ADFスキンから拡張されています。

simple ADFスキンは他のADFスキンの拡張元であるため、すべてのADF Facesコンポーネントは少なくともこのADFスキンで定義されたスタイルを使用します。simple ADFスキンでは、WebアプリケーションでレンダリングするためにADF Facesコンポーネントに必要な最小限のスタイル・プロパティを定義します。最小限のカスタマイズでADFスキンを作成するには、simple ADFスキンから拡張してADFスキンを作成します。

図1-4 Oracle ADFで提供されるADFスキン・ファミリの継承関係

図1-4のいずれかのADFスキンまたは独自に作成したADFスキンをアプリケーションに適用できます。アプリケーションへのADFスキンの適用の詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。

Oracle ADFで提供されるADFスキンの詳細は、「Oracle ADFで提供されるADFスキン」を参照してください。