この章では、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スキンを代替文字列値で変更します。詳細は、第7章「ADFスキンのテキストの使用」を参照してください。
前述の例は、ADFスキンのユースケースと、ADFスキンを作成する利点を示しています。アプリケーションに加えるすべての変更を1つのADFスキンで定義する必要はありません。異なる目的で使用する複数のADFスキンを作成できます。たとえば、様々な会社の企業ブランドに一致するように様々な色スキームを持つADFを作成できます。さらに、エンド・ユーザーが実行時に動的にADFスキンを変更できるようにアプリケーションを構成できます。
このガイドでは、次のことを前提としています。
スキンできるADF FacesおよびADFデータ視覚化コンポーネントの知識があります。このガイドでは、これらのコンポーネントの使用方法や機能については説明しません。これらのコンポーネントの詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)を参照してください。
CSSの知識があります。このガイドでは、CSSについては説明しません。公式仕様など、CSSの詳細は、次に示すWorld Wide Web Consortium (W3C)のWebサイトを参照してください。
ADFスキンの開発は、反復プロセスです。先に進む前に、CSSの概要と、ADF FacesおよびADFデータ視覚化コンポーネントについて理解しておいてください。ADFスキンを開発するステップの概要は次のとおりです。
ADFスキンのソース・ファイルを作成します。
ADFスキニング・フレームワークによって公開されるセレクタの宣言を記述するソース・ファイルを作成します。JDeveloperまたはADFスキン・エディタのエディタを使用してソース・ファイルを作成する場合は、拡張元となる既存のADFスキンを選択する必要があります。最初のADFスキンを作成する場合は、Oracle ADFによって提供されるいずれかのADFスキンの中から選択します。詳細は、第12.3項「Oracle ADFで提供されるADFスキン」を参照してください。これらのADFスキン間の継承関係の詳細は、第1.4項「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。以降のADFスキンを作成する場合は、すでに作成したADFスキンから拡張できます。
ADFスキンの作成の詳細は、第4.3項「ADFスキン・ファイルの作成」を参照してください。
作成したADFスキンの中のセレクタ、ルールおよび疑似要素の宣言を記述します。
ADFスキン・エディタには、このタスクを容易にする多くのタブが用意されています。適切なタブを選択します。たとえば、「設計」タブ(使用可能な場合)は、ADF Facesコンポーネントを使用するアプリケーションの、最も一般的なスタイルに設定されたパーツを迅速に変更できる設計エディタのコントロールを提供します。タブの下部にある多くのサンプル・ページは、用意されたコントロールを使用して加えた変更を表示するためにリフレッシュされます。対照的に、より高度な変更のためにはセレクタ・タブを使用します。その理由は、この後者のタブは、セレクタ・ツリー内でADFスキニング・フレームワークによって公開されるすべてのセレクタのセレクタ・エディタを表示し、これらのセレクタを変更できる「プロパティ」ウィンドウや他の多くのコントロールを提供するからです。
デザイン・エディタは、SkyrosおよびFusion SimpleファミリのADFスキンからADFスキンを拡張した場合に表示されます。セレクタ・エディタは、拡張元のスキン・ファミリに関係なく表示されます。詳細は、第3.2項「ADFスキン・デザイン・エディタの使用」および第3.3項「ADFスキン・セレクタ・エディタの使用」を参照してください。
様々なカテゴリのセレクタ、ルールおよび擬似要素の詳細は、第2章「ADFスキン・セレクタの使用」を参照してください。
必要に応じて、ADFスキンが実行時にFusion Webアプリケーションで参照するイメージをインポートします。詳細は、第6章「ADFスキンのイメージおよび色の使用」を参照してください。
ヒント: ステップ2で説明しているデザイン・エディタは、ADFスキンが参照するすべてのイメージをエクスポートおよびインポートできるようにするコントロールを用意しています。一度エクスポートされたイメージは、ADFスキン・プロジェクトにインポートし戻す前に、好みのソフトウェア・プログラムを使用して編集できます。同じタブには、個々のイメージを置き換えるためのコントロールが用意されています。最後に、ADFスキンがFusion Simpleから拡張された場合にはイメージ・タブが表示されます。このタブには、ADFスキン内のイメージを編集するためのコントロールが用意されています。イメージ・エディタの詳細は、第6.5項「イメージ・エディタの使用」を参照してください。 |
必要に応じて、リソース・バンドルに新しい値を入力して、ADF FacesおよびADFデータ視覚化コンポーネントに定義されたデフォルトのテキスト・ラベルをオーバーライドします。詳細は、第7章「ADFスキンのテキストの使用」を参照してください。
必要に応じて、ADFスキンでテーマを編集または作成します。テーマは、コンポーネント・レベルのルック・アンド・フィールを実装する方法です。詳細は、第5.6項「ADF Facesページへのテーマの適用」を参照してください。
ADFスキンに加えた変更をプレビューおよびテストして、結果が適切であることを確認します。必要に応じてADFスキンを変更します。第3.2項「ADFスキン・デザイン・エディタの使用」で説明しているように、ステップ2で説明しているデザイン・エディタには、多くのサンプル・ページが用意され、そこで「ブラウザでプレビュー」アイコンをクリックすることで、ADFスキン・エディタ内またはブラウザ内で加えた変更を表示できます。実行中のFusion WebアプリケーションでのADFスキンのプレビューおよびテストの詳細は、第11.2項「ADFスキンの変更のテスト」を参照してください。
ADFスキンの開発が完了したら、配布のためにADFスキンをパッケージ化できます。詳細は、第11.3項「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。
ADFスキンが完成し、配布した後、ADFスキンを使用するようにFusion Webアプリケーションを構成します。詳細は、第11.4項「Webアプリケーションへの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スキンからブラウザ固有のCSSファイルを作成します。次にアプリケーションは、それがなんらかのCSSファイルであれば、そのブラウザ固有のCSSファイルを参照します。
図1-3に、ADFスキンでアプリケーションのページの外観に及ぼすことができる影響を示します。左側のページは、skyros
ADFスキンを使用してレンダリングされます。右側のページは、simple
ADFスキンを使用してレンダリングされます。各ADFスキンでは、色とフォントの値が定義されます。skyros
ADFスキンでは、Oracleロゴのイメージの参照に加えて、より多くの色が使用されます。simple
ADFスキンは、使用する色の数が少なく、ロゴ用のイメージは参照しません。
注意: ADFスキンは、クライアントがユーザー・インタフェースをレンダリングするのに要する時間に影響を及ぼす場合があります。ADFスキンで使用されるスタイルが多いほど、クライアントは多くのものをロードする必要があります。このことは、低帯域幅環境や待機時間の長い環境ではパフォーマンスに影響することがあります。 |
Oracle ADFによって提供される数多くのADFスキン・ファミリは、アプリケーションで使用したり、ADFスキンを作成するときに拡張できます。Oracle ADFで提供されるADFスキンによって、実行時にADF FacesおよびADFデータ視覚化コンポーネントによってレンダリングされる外観を、より高いレベルでカスタマイズできるようになります。
図1-4は、様々なADFスキン・ファミリ間の継承関係を示しています。fusion-base
ADFスキンは、simple
ADFスキン内で定義されているスタイル・プロパティを継承しています。fusion
およびfusion-simple
ADFスキンは、fusion-base
ADFスキンから拡張されています。fusion-11.1.1.3.0
ADFスキンはfusion
スキンから拡張され、fusionFx
ADFスキンの多くのバージョンは、fusion-11.1.1.3.0
ADFスキンから拡張されています。fusionFx-simple
ADFスキンの多くのバージョンは、fusion-simple
ADFスキンから拡張されています。skyros-v1
ADFスキンは、simple
ADFスキンから拡張されています。
simple
ADFスキンは他のすべてのADFスキンの拡張元であるため、すべてのADF Facesコンポーネントは少なくともこのADFスキンで定義されたスタイルを使用します。simple
ADFスキンでは、Fusion WebアプリケーションでレンダリングするためにADF Facesコンポーネントに必要な最小限のスタイル・プロパティを定義します。最小限のカスタマイズでADFスキンを作成するには、simple
ADFスキンから拡張してADFスキンを作成します。
他のADFスキン・ファミリと比較して変更が容易なものを除いたシンプルなADFスキンより、ADFスキンをさらにカスタマイズするには、SkyrosまたはFusion Simpleファミリから拡張することを検討します。デザイン・エディタは、ADFスキン・ファミリから拡張した場合に使用できます。このエディタには、ADFスキンを変更するためのコントロール(カラー・ピッカーなど)および変更の効果をすぐに表示できるサンプル・ページが用意されています。
図1-4のいずれかのADFスキン(fusion
およびfusion-simple
スキンを除く)または独自に作成したADFスキンをアプリケーションに適用できます。ADFスキンのアプリケーションへの適用の詳細は、第11.4項「WebアプリケーションへのADFスキンの適用」を参照してください。fusion
およびfusion-simple
スキンは非推奨です。
Oracle ADFで提供されるADFスキンの詳細は、第12.3項「Oracle ADFで提供されるADFスキン」を参照してください。