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

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

この章には次の項が含まれます:

第2.1項「ADFスキン・セレクタについて」
第2.2項「ADFスキニング・フレームワークでの擬似クラス」
第2.3項「ADFスキニング・フレームワークでのプロパティ」
第2.4項「ADFスキン・エディタ内からのセレクタ情報へのアクセス」

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

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

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

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

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

コンポーネント固有セレクタはADFスキニング・フレームワークによって公開されるセレクタであり、これらを使用すると、対応するADF FacesコンポーネントとADFデータ視覚化コンポーネントのうち、スタイル・プロパティを定義できるものを特定できます。たとえば、図2-2に、ソース・エディタおよびセレクタ・エディタでのADF Faces buttonコンポーネントのセレクタを示します。ボタンで表示されるフォントの色を決定するプロパティの値は「Properties」ウィンドウでRedに変更されています。

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

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

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

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

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

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

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

ADFスキン・セレクタは、コンポーネントでレンダリングされるアイコン・イメージを特定する擬似要素に2つのネーミング規則を使用します。これらの擬似要素の名前は、-iconまたは-icon-styleで終わります。図2-4に、「パネル・アコーディオン」セレクタの疑似要素の例を示します。-icon-styleで終わる疑似要素は、図2-4に示すように、背景イメージを指定します。対照的に、-iconで終わる疑似要素は、次の例のように、背景イメージを指定しませんが、IMG要素またはテキストを参照できます。

af|panelAccordion::undisclosed-icon {content "X"} 
af|panelAccordion::undisclosed-icon {content: url("http:server:port/img/img.png")}

図2-4 アイコン・イメージ用の「パネル・アコーディオン」擬似要素

図2-4では、undisclosed-icon-style擬似要素によって、panelAccordionコンポーネント内の公開されていないアイコンに使用するアイコンのスタイルを指定しています。この擬似要素は、背景イメージとしてアイコンを指定します。:hoverおよび:activeの各擬似要素を使用して、外観をカスタマイズします。たとえば、次の構文を記述して、エンド・ユーザーがアイコンの上にマウスを置くと背景が赤くなるようにします。

af|panelAccordion::undisclosed-icon-style:hover {
    background-color: Red; 
}

ヒント:

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

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

af|panelAccordion::undisclosed-icon-style
{
  -tr-inhibit: background-image;  
}

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

af|panelAccordion::undisclosed-icon
{
        content:url("images/undisclosed.png");
        width: 10px; 
        height: 10px; 
}

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

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

これらのアイコンはまた、ADFスキンがSkyrosまたはFusion SimpleファミリのADFスキンから拡張した場合には、第6.2項「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタから起動した「アイコンの置換」ダイアログを使用して表示および変更できます。図2-6に、SkyrosファミリのADFスキンから拡張したADFスキン用に表示されるダイアログを示します。

図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コンポーネントのセレクタを選択し、ADFスキンから拡張したADFスキン内の使用可能な擬似クラスのリストを表示するために「擬似クラスの追加」アイコンをクリックした場合に表示される使用可能な擬似クラスのリストを図2-10に示します。

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

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

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

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

ドラッグ・アンド・ドロップ: 使用可能な2つの擬似クラスとして、ドラッグを開始するコンポーネントに適用され、ドラッグが終了したら削除される:drag-source、および現在のドラッグのドロップ先のコンポーネントに適用される:drop-targetがあります。
標準: CSSでは、:hover、:active、:focusなどの擬似クラスは、コンポーネントの状態とみなされます。コンポーネントへのスキンの適用にも、これと同じ考え方が当てはめられます。コンポーネントの状態は、read-onlyまたはdisabledなどです。同じセレクタに状態を組み合せると、すべての状態が満たされた場合にのみセレクタが適用されます。
右から左: ブラウザで言語の読み方向が右から左の際に、スタイルまたはアイコンの定義を設定する場合にこの擬似クラスを使用します。その他の典型的なユース・ケースは非対称のイメージです。読み方向が右から左のイメージを使用するスキン・セレクタを設定する際には、イメージを反転する必要があります。セレクタの最後に:rtl疑似クラスを追加し、反転イメージ・ファイルを指すようにします。スキン・エディタのプレビュー・ペインは、反転イメージ・ファイルに加えた変更をレンダリングしません。次のSkyrosスキンからの例は、右から左に表記される言語を使用するブラウザでレンダリングするときにcalendarコンポーネントのtoolbar-day-hover-icon疑似要素が参照するイメージを示します。
```
af|calendar::toolbar-day-hover-icon:rtl {
   content: url(/afr/cal_day_ovr_rtl.png);
   width: 16px;
   height: 16px;
}
```
:rtlは、スキン・アイコンへの適用にも使用できます。詳細は、第6章「ADFスキンのイメージおよび色の使用」を参照してください。
インライン編集: この擬似クラスは、ブラウザで編集するために、コンポーネント・サブツリーがアプリケーションによりアクティブ化される場合に適用されます。たとえば、:inline-selectedは、アクティブでインラインでの編集が可能なサブツリーで、現在選択されているコンポーネントに適用される疑似クラスです。
メッセージ: この擬似クラスは、:fatal、:error、:warning、:confirmationおよび:infoのCSS擬似クラスを使用して、コンポーネント・レベルのメッセージ・スタイルを設定するために使用されます。詳細は、第5.5項「メッセージに適用するADFスキン・プロパティの設定」を参照してください。

注意:

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

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

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

-tr-rule-refプロパティを使用して、他のセレクタのスタイルを参照します。

独自のグローバル・セレクタ別名を作成し、-tr-rule-refプロパティを使用して他のセレクタと組み合せます。詳細は、第8.2項「グローバル・セレクタ別名の作成」、第8.3項「グローバル・セレクタ別名の変更」および第8.4項「グローバル・セレクタ別名の適用」を参照してください。
-tr-inhibitスキン・プロパティを使用して、ADFスキンで定義されたスタイルを抑制します。

-tr-inhibitスキン・プロパティを使用して、ベース・スキンから継承されたCSSプロパティを抑制またはリセットします。たとえば、-tr-inhibit:paddingプロパティは継承されたパディングを削除します。-tr-inhibit:allプロパティを使用すると、継承されたすべてのプロパティが削除(クリア)されます。抑制するプロパティ名は、ベース・スキンのプロパティ名と完全に一致する必要があります。
-tr-property-refプロパティを使用して、別のセレクタで定義されたプロパティの値を参照します。

詳細は、第8.5項「別のセレクタのプロパティ値の参照」を参照してください。
-tr-children-themeプロパティを使用して、子コンポーネントのテーマを構成します。

詳細は、第5.6項「ADF Facesコンポーネントへのテーマの適用」を参照してください。
スタイル・プロパティが指定されたADFスキン・セレクタ

スキン・スタイル・プロパティを使用すると、アプリケーション全体のコンポーネントのレンダリングをカスタマイズできます。CSSプロパティは、値とともにSkinオブジェクトに格納され、コンポーネントのレンダリング時に使用できます。たとえば、af|breadCrumbs{-tr-show-last-item: false}において、スキン・プロパティ-tr-show-last-itemは、breadCrumbsコンポーネントのナビゲーション・パスの最後のアイテムを非表示にするように設定されています。

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スキン・エディタ内でいくつかの方法によってADFスキンで設定するADFスキン・セレクタおよびCSSプロパティの参照情報にアクセスできます。アクセスできる参照情報には、ADFスキン・セレクタ用の次の参照ドキュメントが含まれます。

Oracle ADF Facesスキン・セレクタ・タグ・リファレンス
Oracle Fusion Middleware Data Visualization Toolsタグ・リファレンス for Oracle ADFスキン・セレクタ

(スキニングするアプリケーションに関連するリリース)

Oracle ADFスキン・エディタ・ドキュメント・ライブラリ内または「ヘルプ・センター」ウィンドウ内のこれらの参照ドキュメントへは、図2-12で示すように、セレクタ・ツリー内のセレクタの上にカーソルを置いたときに表示される情報テキスト内のリンクをクリックするとアクセスできます。

図2-12 ADFスキン・セレクタの参照文献

ADFスキン・セレクタの参照情報に加えて、CSSセレクタの情報にアクセスできます。これをエディタの「ソース」タブから実行するには、図2-13で示すように、CSSプロパティを選択して[Ctrl]キーを押しながら[D]キーを押すか、「クイック・リファレンスの表示」を選択します。

図2-13 CSSプロパティのクイック・リファレンス・ドキュメント