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

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

この章では、ADFスキン・エディタによる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コンポーネント

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

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

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

グレー表示された入力テキスト・コンポーネント

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

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

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

1.2 ADFスキンの開発の概要

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

  1. ADFスキンのソース・ファイルを作成します。

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

    ADFスキンの作成の詳細は、第4.3項「ADFスキン・ファイルの作成」を参照してください。

  2. 作成したADFスキンの中のセレクタ、ルールおよび疑似要素の宣言を記述します。

    ADFスキン・エディタには、このタスクを容易にする多くのタブが用意されています。適切なタブを選択します。たとえば、「設計」タブ(使用可能な場合)は、ADF Facesコンポーネントを使用するアプリケーションの、最も一般的なスタイルに設定されたパーツを迅速に変更できる設計エディタのコントロールを提供します。タブの下部にある多くのサンプル・ページは、用意されたコントロールを使用して加えた変更を表示するためにリフレッシュされます。対照的に、より高度な変更のためにはセレクタ・タブを使用します。その理由は、この後者のタブは、セレクタ・ツリー内でADFスキニング・フレームワークによって公開されるすべてのセレクタのセレクタ・エディタを表示し、これらのセレクタを変更できる「プロパティ」ウィンドウや他の多くのコントロールを提供するからです。

    デザイン・エディタは、SkyrosおよびFusion SimpleファミリのADFスキンからADFスキンを拡張した場合に表示されます。セレクタ・エディタは、拡張元のスキン・ファミリに関係なく表示されます。詳細は、第3.2項「ADFスキン・デザイン・エディタの使用」および第3.3項「ADFスキン・セレクタ・エディタの使用」を参照してください。

    様々なカテゴリのセレクタ、ルールおよび擬似要素の詳細は、第2章「ADFスキン・セレクタの使用」を参照してください。

  3. 必要に応じて、ADFスキンが実行時にFusion Webアプリケーションで参照するイメージをインポートします。詳細は、第6章「ADFスキンのイメージおよび色の使用」を参照してください。


    ヒント:

    ステップ2で説明しているデザイン・エディタは、ADFスキンが参照するすべてのイメージをエクスポートおよびインポートできるようにするコントロールを用意しています。一度エクスポートされたイメージは、ADFスキン・プロジェクトにインポートし戻す前に、好みのソフトウェア・プログラムを使用して編集できます。同じタブには、個々のイメージを置き換えるためのコントロールが用意されています。最後に、ADFスキンがFusion Simpleから拡張された場合にはイメージ・タブが表示されます。このタブには、ADFスキン内のイメージを編集するためのコントロールが用意されています。イメージ・エディタの詳細は、第6.5項「イメージ・エディタの使用」を参照してください。

  4. 必要に応じて、リソース・バンドルに新しい値を入力して、ADF FacesおよびADFデータ視覚化コンポーネントに定義されたデフォルトのテキスト・ラベルをオーバーライドします。詳細は、第7章「ADFスキンのテキストの使用」を参照してください。

  5. 必要に応じて、ADFスキンでテーマを編集または作成します。テーマは、コンポーネント・レベルのルック・アンド・フィールを実装する方法です。詳細は、第5.6項「ADF Facesコンポーネントへのテーマの適用」を参照してください。

  6. ADFスキンに加えた変更をプレビューおよびテストして、結果が適切であることを確認します。必要に応じてADFスキンを変更します。第3.2項「ADFスキン・デザイン・エディタの使用」で説明しているように、ステップ2で説明しているデザイン・エディタには、多くのサンプル・ページが用意され、そこで「ブラウザでプレビュー」アイコンをクリックすることで、ADFスキン・エディタ内またはブラウザ内で加えた変更を表示できます。実行中のFusion WebアプリケーションでのADFスキンのプレビューおよびテストの詳細は、第11.2項「ADFスキンの変更のテスト」を参照してください。

  7. ADFスキンの開発が完了したら、配布のためにADFスキンをパッケージ化できます。詳細は、第11.3項「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。

  8. ADFスキンが完成し、配布した後、ADFスキンを使用するようにFusion Webアプリケーションを構成します。詳細は、第11.4項「WebアプリケーションへのADFスキンの適用」を参照してください。

1.3 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ロゴのイメージの参照に加えて、より多くの色が使用されます。

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

SkyrosおよびSimpleスキン

注意:

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

1.4 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スキン・ファミリと比較して変更が容易なものを除いたsimpleADFスキンより、ADFスキンをさらにカスタマイズするには、SkyrosまたはFusion Simpleファミリから拡張することを検討します。デザイン・エディタは、ADFスキン・ファミリから拡張した場合に使用できます。このエディタには、ADFスキンを変更するためのコントロール(カラー・ピッカーなど)および変更の効果をすぐに表示できるサンプル・ページが用意されています。

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

Oracle ADFで提供されるADFスキン間の継承

図1-4のいずれかのADFスキン(fusionおよびfusion-simpleスキンを除く)または独自に作成したADFスキンをアプリケーションに適用できます。ADFスキンのアプリケーションへの適用の詳細は、第11.4項「WebアプリケーションへのADFスキンの適用」を参照してください。fusionおよびfusion-simpleスキンは推奨されていません。

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

  前
前 		 次
次
  目次へ移動
目次