ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド
11gリリース2(11.1.2.3.0)
B66161-03
  目次へ移動
目次
前
前 		 次
次		  

2 ADFスキン・セレクタの使用

この章では、ADFスキン・セレクタについて説明します。これらのセレクタと、擬似要素、擬似クラス、ADFスキン・プロパティおよびADFスキニング・フレームワーク・ルールを使用すると、ADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観をカスタマイズできます。

この章には、次の項があります。

2.1 ADFスキン・セレクタについて

ADFスキニング・フレームワークは、ADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観をカスタマイズするためにADFスキンで指定できるセレクタの範囲を提供します。グローバル・セレクタおよびコンポーネント固有セレクタという2つのタイプのセレクタがあります。グローバル・セレクタでは、1つ以上のセレクタに適用するスタイル・プロパティを定義します。コンポーネント固有セレクタでは、1つのセレクタに適用するスタイル・プロパティを定義します。

Oracle ADFで提供されるADFスキンでは、複数のADF Facesコンポーネントによって継承される複数のグローバル・セレクタ(ビジュアル・エディタのユーザー・インタフェースでの「グローバル・セレクタ別名」)を定義します。これらのADFスキンでは、ADFデータ視覚化コンポーネントによって継承されるグローバル・セレクタは定義しません。たとえば、多くのADF Facesコンポーネントでは、フォント・ファミリの指定に.AFDefaultFontFamily:aliasセレクタを使用します。異なるフォント・ファミリを指定して、このセレクタをオーバーライドするADFスキンを作成した場合、その変更は、セレクタ定義の.AFDefaultFontFamily:aliasセレクタが含まれているすべてのコンポーネントに影響します。図2-1に、ソース・ビューおよびデザイン・ビューでの.AFDefaultFontFamily:aliasセレクタを示します。「表示モード」リストには、フォント・ファミリを決定するために、.AFDefaultFontFamily:aliasグローバル・セレクタ別名で定義されている値を使用する、ADF Facesコンポーネントの現在のリストが表示されます。

図2-1 .AFDefaultFontFamily:aliasグローバル・セレクタ別名

.AFDefaultFontFamily:aliasグローバル・セレクタ別名

作成したADFスキンでは、拡張元のADFスキンで定義されているグローバル・セレクタ別名を継承します。新規グローバル・セレクタ別名をADFスキン・ファイルで作成することもできます。詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。

コンポーネント固有セレクタはADFスキニング・フレームワークによって公開されるセレクタであり、これらを使用すると、対応するADF FacesコンポーネントとADFデータ視覚化コンポーネントのうち、スタイル・プロパティを定義できるものを特定できます。たとえば、図2-2に、ソース・エディタおよびビジュアル・エディタでのADF Faces inputTextコンポーネントのセレクタを示します。このコンポーネントのセレクタ(af|inputText)によって公開されるcontent擬似要素内のCSS background-colorプロパティに、redの値が設定されています。

図2-2 inputTextコンポーネントのスキン・セレクタ

入力テキスト・コンポーネントのスキン・セレクタ

コンポーネント固有のセレクタの詳細は、第5章「コンポーネント固有セレクタの使用」を参照してください。グローバル・セレクタ別名の詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。

2.1.1 ADFスキン・セレクタと擬似要素

多くのADFスキン・セレクタが擬似要素を公開しています。擬似要素は、スタイルのプロパティを定義できるコンポーネントの特定の領域を示します。疑似要素は、コロン(:)2つで始まり、その後にセレクタが表すコンポーネントの部分が続きます。たとえば、図2-3に、af|chooseDateセレクタによって公開されているdays-row擬似要素を使用して、カレンダ・グリッドの外観のスタイル・プロパティをどのように構成できるかを示します。

図2-3 日付の選択コンポーネントの擬似要素

日付の選択コンポーネントの擬似要素

2.1.2 ADFスキン・セレクタおよびアイコン・イメージ

アイコンをレンダリングするADF Facesコンポーネントでは、ベース・アイコン・イメージのセットを使用してレンダリングします。たとえば、background-imageプロパティの値としてイメージを指定する場合はCSSコード・エントリがソース・ファイルに表示されるのとは対照的に、これらのアイコン・イメージのCSSコード・エントリはADFスキンのソース・ファイルに表示されません。かわりに、ADFスキニング・フレームワークは、レンダラで使用するアイコン・イメージを登録します。レンダラおよびサポートされているレンダー・キットの詳細は、第11.2項「ADFスキニング・フレームワークおよびサポートされているレンダー・キット」を参照してください。

ADFスキン・セレクタは、コンポーネントでレンダリングされるアイコン・イメージを特定する擬似要素に2つのネーミング規則を使用します。これらの擬似要素の名前は、-iconまたはicon-styleで終わります。たとえば、図2-4に示すように、パネル・コレクション・セレクタの擬似要素は-iconで終わります。

図2-4 アイコン・イメージ用のパネル・コレクション擬似要素

アイコン・イメージ用のパネル・コレクション擬似要素

これに対し、図2-5で示すように、列セレクタ(af|column)は、-iconおよび-icon-styleで終わる擬似要素を定義します。

図2-5 アイコン用の列擬似要素

アイコン用の表の列擬似要素

図2-5では、sort-ascending-icon-style擬似要素が、列セレクタでの昇順ソート・インジケータに使用されるアイコンをスタイル設定しています。この擬似要素は、背景イメージとしてアイコンを指定します。:hoverおよび:activeの各擬似要素を使用して、外観をカスタマイズします。たとえば、次の構文を記述して、エンド・ユーザーが昇順ソート・インジケータの上にマウスを置くと背景が赤くなるようにします。

af|column::sort-ascending-icon-style:hover
{
   background-color: Red;       
}

ヒント:

多くのブラウザでは、アクセシビリティ・モードの場合は背景イメージをレンダリングしません。次の例に、アクセシビリティ・モードの場合もアプリケーションによってイメージが表示される必要がある場合にこの動作を回避する方法を示します。

背景イメージとして指定されたアイコンではなく、独自のイメージを使用する場合は、最初に、背景イメージがレンダリングされないようにする必要があります。このことは、sort-ascending-icon-style擬似要素の-tr-inhibit ADFスキン・プロパティを次のように指定することによって行います。

af|column::sort-ascending-icon-style
{
  -tr-inhibit: background-image;  
}

次に、sort-ascending-iconセレクタのcontentプロパティの値としてレンダリングするテキストまたはイメージを指定します。たとえば、次のような構文を記述して、別のイメージを指定します。

af|column::sort-ascending-icon
{
        content:url("images/arrow-up.jpg");
        width: 10px; 
        height: 10px; 
}

ADFスキニング・フレームワークでは、特定のアイコン・イメージが別のシナリオで使用する、数多くのグローバル・セレクタ別名も定義します。これらのグローバル・セレクタ別名は、図2-6に示すように、セレクタ・ツリーのアイコンノードの下に表示されます。図2-6に示した.AFChangedIcon:aliasにより、変更されたアイコンが、そのアイコンを使用するすべてのコンポーネントにグローバルに設定されます。

図2-6 アイコンのグローバル・セレクタ別名

アイコンのグローバル・セレクタ別名

詳細は、第6章「ADFスキンのイメージの使用」を参照してください。

2.1.3 グループ化したADFスキン・セレクタ

ADFスキンのソース・ファイル内のエントリ数を最小化するために、ADFスキン・セレクタおよびグローバル・セレクタ別名をグループ化できます。グループ化したセレクタは、図2-7に示すように、セレクタ・ツリーのグループ化したセレクタ・ノードの下にレンダリングされます。プレビュー・ペインの「表示モード」リストには、グループ化したすべてのセレクタが表示されます。

ビジュアル・エディタではグループ化したセレクタを指定する方法がないため、ソース・エディタを使用して、グループ化したセレククタに含めるセレクタまたはグローバル・セレクタ別名あるいはその両方を指定します。各セレクタをカンマ(,)で区切って、グループ化したセレクタに含めます。

図2-7 セレクタ・ツリーでのグループ化したセレクタ

スキニング・ナビゲータでのグループ化したセレクタ

2.1.4 下位のADFスキン・セレクタ

下位セレクタは、空白で区切られた2つ以上のセレクタで構成されています。ADFスキン・セレクタの下位セレクタを構成できます。これらにより、特定のセレクタが別のセレクタ内でレンダリングされる場合のスタイル・プロパティを特定のセレクタに設定できます。下位セレクタを構成すると、図2-8に示すように、ビジュアル・エディタでは、下位セレクタが含まれているセレクタの下に下位セレクタ・ノードが表示されます。

図2-8 セレクタ・ツリーでの下位セレクタ

スキニング・ナビゲータでの下位セレクタ

ビジュアル・エディタでは下位セレクタを指定する方法がないため、ソース・エディタを使用して、下位セレククタに指定するセレクタまたはグローバル・セレクタ別名あるいはその両方を指定します。各セレクタは空白で区切ります。

2.2 ADFスキニング・フレームワークでの擬似クラス

CSS仕様では、セレクタが特定の状態にある場合のスタイル・プロパティを定義するために使用される:hoverや:activeなどの擬似クラスを定義しています。これらの擬似クラスは、ほとんどすべてのADF Facesコンポーネントに適用できます。また、ADFスキニング・フレームワークには、特化された機能のための、追加的な擬似クラスが備えられています。たとえば、ブラウザのロケールが右から左方向への言語(:rtl)である場合、またはドラッグ・アンド・ドロップ操作(:drag-targetおよび:drag-source)の場合に適用する擬似クラスがあります。ADFスキンのソース・ファイルで擬似クラスを指定するために含める構文では、次のフォーマットを使用します。

adfskinselector:pseudo-class

adfskinselector::pseudo-element:pseudo-class

図2-9に、エンド・ユーザーがマウスを図2-9のリンク上に置いたときにpanelListコンポーネントのリンクが緑にレンダリングされるようにADFスキンのソース・ファイルで記述した:hover擬似クラスの構文を示します。

図2-9 パネル・リスト・リンクの擬似クラス構文および実行時の動作

リンクの擬似クラス構文および実行時の動作

一部のコンポーネントは、他のコンポーネントに比べて擬似クラスをより活用しています。たとえば、panelBoxコンポーネントのセレクタは、擬似クラスを活用して、様々な状態(アクティブ、無効、右から左へのレンダリングなど)における外観を定義します。セレクタ・ツリーでpanelBoxコンポーネントのセレクタを選択し、使用可能な擬似クラスのリストを表示するために「擬似クラスの追加」アイコンをクリックした場合に表示される使用可能な擬似クラスのリストを図2-10に示します。

図2-10 panelBoxコンポーネントのセレクタの擬似クラス

PanelBoxコンポーネントのセレクタの擬似クラス

擬似クラスは、セレクタによって公開されている擬似要素にも適用できます。代表的な例として、panelBoxコンポーネント・セレクタの擬似要素をあげることができます。図2-11に、panelBoxコンポーネント・セレクタによって公開されているheader-start擬似要素が受け入れる擬似クラスのリストを示します。これらの数多くの擬似クラスを使用して、panelBoxコンポーネントの外観を、アプリケーション開発者がこのコンポーネントの属性に設定した値に応じて定義できます。たとえば、coreおよびhighlight擬似クラスでは、アプリケーション開発者がpanelBoxコンポーネントのramp属性をcoreまたはhighlightに設定した場合に対応する外観を定義します。

図2-11 header-start擬似要素の擬似クラス

header-start擬似要素の擬似クラス

次に、ADF Facesセレクタによって使用される一般的な擬似クラスを示します。


注意:

セレクタ・ツリーに表示されるグローバル・セレクタ別名は、特別なタイプの擬似クラスです(:alias)。詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。

2.3 ADFスキニング・フレームワークでのプロパティ

ADFスキニング・フレームワークでは、ADFスキン・プロパティの数を定義します。ユーザーのブラウザではなく、Fusion WebアプリケーションがADFスキン・プロパティを解釈します。構成した場合、ADFスキン・プロパティを使用して次のことを実行できます。

ADFスキニング・フレームワークでは+および-演算子も提供されており、これらを使用して、別のセレクタの色プロパティやフォント・プロパティに設定した値に関連付けてセレクタの色プロパティやフォント・プロパティを設定できます。このことは、色の範囲をセレクタに適用したり、フォント間の相対的なサイズを維持する場合に役立ちます。

例2-1に、この機能を色プロパティに利用するために記述した構文を示します。1つのグローバル・セレクタ別名で背景色を定義し、2つの追加グローバル・セレクタ別名(.fooColorTestPlusおよび.fooColorTestMinus)で、この背景色を適用するときに、+および-の演算子を使用します。

例2-1 +演算子と-演算子による色の適用

.BaseBackgroundColor:alias { background-color: #0099ff; }
.fooColorTestPlus {
    -tr-rule-ref: selector(".BaseBackgroundColor:alias");
    background-color: +#333333;
    }
.fooColorTestMinus {
    -tr-rule-ref: selector(".BaseBackgroundColor:alias");
    background-color: -#333333;
}

例2-2に、この機能をフォント・プロパティに利用するために記述した構文を示します。1つのグローバル・セレクタ別名でフォント・サイズを定義し、追加のグローバル・セレクタ別名(.fooFont Test)で+演算子を使用してこのフォント・サイズを1ptずつ増やします。

例2-2 +演算子によるフォント・サイズの増加

.FontSizeTest:alias {font-size: 12pt;}
.fooFontTest {
    -tr-rule-ref: selector(".FontSizeTest:alias");
    font-size:+1pt;
}

2.4 ADFスキニング・フレームワークでのルール

ADFスキニング・フレームワークで定義されている数多くのCSS @ルールを使用して、一部のブラウザ、プラットフォーム、ロケールまたは読取り方向にのみ適用するセレクタのプロパティを定義できます。

たとえば、他のブラウザでは必要ないなんらかのパディングをInternet Explorerで追加する必要がある場合や、Windowsでのフォント・スタイルを他のプラットフォームでのフォント・スタイルとは異なるものにする場合があります。特定のユーザー環境用にセレクタをスタイル設定するには、そのスキニング情報をADFスキニング・フレームワーク・ルール内に含めます。ADFスキニング・フレームワークは、エージェントやプラットフォームなどのHTTPリクエスト情報に基づいてスタイルを選択し、ルールのないスタイルとマージします。ルールと一致するCSSプロパティは、すべてのルールに該当しないプロパティとマージされます。ユーザーの環境と最も一致する特定のルールが優先されます。


注意:

ビジュアル・エディタでは、ADFスキンでの次のルールの作成は現在サポートされていません。サポートされているルールを作成および変更するには、ソース・エディタを使用します。

現在、ADFスキニング・フレームワークでは、次のルールがサポートされています。

例2-3に、最終的なスタイルを提供するために一緒にマージされるCSSファイル内のセレクタをいくつか示します。

例2-3 スタイル・セレクタのマージ

/** For IE and Gecko on Windows, Linux and Solaris, make the color pink. **/
@platform windows, linux, solaris
        {
          @agent ie, gecko
          {
            af|inputText::content {background-color:pink}
          }
        }
       af|someComponent {color: red; width: 10px; padding: 4px}
        
/* For IE, we need to increase the width, so we override the width. 
 We still want the color and padding; this gets merged in. We want to add
 height in IE.  */

@agent ie        {          af|someComponent {width: 25px; height: 10px}        }
/* For IE 7 and 8, we also need some margins.*/
@agent ie (version: 7) and (version: 8)
        {
          af|someComponent {margin: 5px;}
        }
        
/* For Firefox 3 (Gecko 1.9) use a smaller margin.*/
@agent gecko (version: 1.9)\
        {
          af|someComponent {margin: 4px;}
        }
        
/* The following selectors are for all platforms and all browsers. */
/* rounded corners on the top-start and top-end */
/* shows how to use :rtl mode pseudo-class. The start image in ltr mode is the */
 /* same as the end image in the right-to-left mode. */
af|panelBox::medium af|panelBox::top-start,
af|panelBox::medium af|panelBox::top-end:rtl {
          background-image: url(/skins/purple/images/panelBoxStart.png);
          width:8px; 
          height:8px
        }
/* The following example sets the text color to red when the locale is German (de)*/
@locale de {
    af|commandMenuItem::bar-item-text
      {
        color: Red; 
    } 
}
af|panelBox::medium af|panelBox::top-end,
af|panelBox::medium af|panelBox::top-start:rtl {
          background-image: url(/skins/purple/images/panelBoxEnd.png);
          height: 8px;
          width:  8px;
        }
  前
前 		 次
次
  目次へ移動
目次