| Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの開発 12c (12.1.3) E56242-01 |
|
 前 |
 次 |
この章では、ADFスキン・セレクタについて説明します。これらのセレクタと、擬似要素、擬似クラス、ADFスキン・プロパティおよびADFスキニング・フレームワーク・ルールを使用すると、ADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観をカスタマイズできます。
この章には次の項が含まれます:
CSSでは、ルールを定義するHTMLページ内の要素を指定するために、セレクタを使用します。たとえば、CSSの次のセレクタでは、<p>タグ内にレンダリングされるコンテンツの外観を特定するルールを定義します。
p { color: red }
同様に、ADFスキニング・フレームワークによって定義されるセレクタを使用すると、ルールとともにスタイル・プロパティを指定して、指定したタグが実行時にルールによって検出されたときに、それらのプロパティをレンダリングできるようになります。ADFスキニング・フレームワークでは、グローバル・セレクタおよびコンポーネント固有セレクタという2つのタイプのセレクタが提供されます。グローバル・セレクタでは、1つ以上のセレクタに適用するスタイル・プロパティを定義します。コンポーネント固有セレクタでは、1つのコンポーネントに適用するスタイル・プロパティを定義します。
Oracle ADFで提供されるADFスキンでは、複数のADF Facesコンポーネントによって継承される複数のグローバル・セレクタ(セレクタ・エディタのユーザー・インタフェースでの「グローバル・セレクタ別名」)を定義します。たとえば、多くのADF Facesコンポーネントでは、フォント・ファミリの指定に.AFDefaultFontFamily:aliasグローバル・セレクタを使用します。異なるフォント・ファミリを指定して、このセレクタをオーバーライドするADFスキンを作成した場合、その変更は、セレクタ定義の.AFDefaultFontFamily:aliasセレクタが含まれているすべてのコンポーネントに影響します。
図2-1に、同じページの2つのインスタンスを示します。図2-1の下部にあるページのインスタンスは、skyrosスキンの.AFDefaultFontFamily:aliasグローバル・セレクタに指定されたデフォルト値を使用してレンダリングされます。図2-1の上部にあるページのインスタンスは、.AFDefaultFontFamily:aliasおよび.AFDefaultFontグローバル・セレクタを次のように変更するADFスキンを使用してレンダリングされます。
.AFDefaultFontFamily:alias {font-family: Georgia;}
.AFDefaultFont:alias {font-size: 12pt;}
ページ上のテキストをレンダリングするコンポーネント(たとえば、af:showDetailItemはWelcomeをレンダリングし、af:linkコンポーネントはLoginをレンダリングします)は、アプリケーションで使用するADFスキンの.AFDefaultFontFamily:aliasグローバル・セレクタによって指定されたフォント・ファミリを使用してレンダリングされます。
作成したADFスキンでは、拡張元のADFスキンで定義されているグローバル・セレクタ別名を継承します。新規グローバル・セレクタ別名をADFスキン・ファイルで作成することもできます。詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。
コンポーネント固有セレクタはADFスキニング・フレームワークによって公開されるセレクタであり、これらを使用すると、対応するADF FacesコンポーネントとADFデータ視覚化コンポーネントのうち、スタイル・プロパティを定義できるものを特定できます。たとえば、図2-2に、ソース・エディタおよびセレクタ・エディタでのADF Faces buttonコンポーネントのセレクタを示します。ボタンで表示されるフォントの色を決定するプロパティの値は「Properties」ウィンドウでRedに変更されています。
コンポーネント固有のセレクタの詳細は、第5章「コンポーネント固有セレクタの使用」を参照してください。グローバル・セレクタ別名の詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。
多くのADFスキン・セレクタが擬似要素を公開しています。擬似要素は、スタイルのプロパティを定義できるコンポーネントの特定の領域を示します。疑似要素は、コロン(:)2つで始まり、その後にセレクタが表すコンポーネントの部分が続きます。たとえば、図2-3に、af|chooseDateセレクタによって公開されているweek-header-row擬似要素を使用して、カレンダ・グリッドの外観のスタイル・プロパティをどのように構成できるかを示します。図2-3では、week-header-row擬似要素のbackground-colorプロパティがGrayに設定されています。
アイコンをレンダリングするADF Facesコンポーネントでは、ベース・アイコン・イメージのセットを使用してレンダリングします。たとえば、background-imageプロパティの値としてイメージを指定する場合はCSSコード・エントリがソース・ファイルに表示されるのとは対照的に、これらのアイコン・イメージのCSSコード・エントリはADFスキンのソース・ファイルに表示されません。かわりに、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では、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により、変更されたアイコンが、そのアイコンを使用するすべてのコンポーネントにグローバルに設定されます。
これらのアイコンはまた、ADFスキンがSkyrosまたはFusion SimpleファミリのADFスキンから拡張した場合には、第6.2項「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタから起動した「アイコンの置換」ダイアログを使用して表示および変更できます。図2-6に、SkyrosファミリのADFスキンから拡張したADFスキン用に表示されるダイアログを示します。このダイアログを使用すると、複数のアイコンをエクスポートまたはインポートしたり、「新規アイコン・ソース」フィールドをダブルクリックして個々のアイコンを置換したりできます。
詳細は、第6章「ADFスキンのイメージおよび色の使用」を参照してください。
ADFスキンのソース・ファイル内のエントリ数を最小化するために、ADFスキン・セレクタおよびグローバル・セレクタ別名をグループ化できます。グループ化したセレクタは、図2-7に示すように、セレクタ・エディタのセレクタ・ツリー内にある「グループ化したセレクタ」ノードの下にレンダリングされます。プレビュー・ペインの「表示モード」リストには、グループ化したすべてのセレクタが表示されます。
セレクタ・エディタではグループ化したセレクタを指定する方法がないため、ソース・エディタを使用して、グループ化したセレクタに含めるセレクタまたはグローバル・セレクタ別名あるいはその両方を指定します。各セレクタをカンマ(,)で区切って、グループ化したセレクタに含めます。
レンダリングする1つのADFスキン・セレクタのコンポーネントが、そのコンポーネントをレンダリングするページ内の別のコンポーネントの下位コンポーネントである場合、下位セレクタによって、そのADFスキン・セレクタ(下位セレクタ)のスタイル・プロパティが定義されます。たとえば、inputTextコンポーネントがtableコンポーネント内にレンダリングされるときに、背景色にGreenを使用してinputTextコンポーネントのコンテンツ領域をレンダリングするとします。このシナリオでは、例2-1のような下位セレクタを指定します。
例2-1 ADFスキン内の下位セレクタ
af|table af|inputText::content {
background-color: Green;
}
af|inputText::content {
background-color: Red;
}
実行時に、tableコンポーネント内にレンダリングされるinputTextコンポーネントのコンテンツ領域の背景色はGreenになります。tableコンポーネントの外部にレンダリングされる他のinputTextコンポーネントの外観は、ADFスキン内の他の場所で定義されたスタイル・プロパティ(Redなど)によって決定されます。
下位セレクタは、空白で区切られた2つ以上のセレクタで構成されています。下位セレクタを構成すると、図2-8に示すように、セレクタ・エディタでは、下位セレクタが含まれているセレクタの下に下位セレクタ・ノードが表示されます。
セレクタ・エディタでは下位セレクタを指定する方法がないため、ソース・エディタを使用して、下位セレクタに指定するセレクタまたはグローバル・セレクタ別名あるいはその両方を指定します。各セレクタは空白で区切ります。
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擬似クラスの構文(af|panelList::link:hover {color: Orange;})を示します。
一部のコンポーネントは、他のコンポーネントに比べて擬似クラスをより活用しています。たとえば、panelBoxコンポーネントのセレクタは、擬似クラスを活用して、様々な状態(アクティブ、無効またはビジーなど)における外観を定義します。セレクタ・エディタのセレクタ・ツリーでpanelBoxコンポーネントのセレクタを選択し、ADFスキンから拡張したADFスキン内の使用可能な擬似クラスのリストを表示するために「擬似クラスの追加」アイコンをクリックした場合に表示される使用可能な擬似クラスのリストを図2-10に示します。
擬似クラスは、セレクタによって公開されている擬似要素にも適用できます。代表的な例として、panelBoxコンポーネント・セレクタの擬似要素をあげることができます。図2-11に、セレクタ・エディタのセレクタ・ツリー内に表示された、panelBoxコンポーネント・セレクタによって公開されているcenter擬似要素が受け入れる擬似クラスのリストを示します。これらの数多くの擬似クラスを使用して、panelBoxコンポーネントの外観を、アプリケーション開発者がこのコンポーネントの属性に設定した値に応じて定義できます。たとえば、coreおよびhighlight擬似クラスでは、アプリケーション開発者がpanelBoxコンポーネントのramp属性をcoreまたはhighlightに設定した場合に対応する外観を定義します。
次に、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スキン・プロパティの設定」を参照してください。
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-2に、この機能を色プロパティに利用するために記述した構文を示します。1つのグローバル・セレクタ別名で背景色を定義し、別のグローバル・セレクタ別名(.fooBackgroundColorTest)で、-演算子を使用してこの背景色を適用します。例2-2でも、この機能をフォント・プロパティに利用するために記述した構文を示します。1つのグローバル・セレクタ別名(.FontSizeTest:alias)でフォント・サイズを定義し、.fooFontTestIncreaseで+演算子を使用してこのフォント・サイズを増やします。
例2-2 演算子を使用した色の適用とフォント・サイズの変更
.FontSizeTest:alias {
font-size: 30px;
}
.BaseBackgroundColor:alias {
background-color: #0099ff;
}
.fooFontTestIncrease {
-tr-rule-ref: selector(".FontSizeTest:alias");
font-size: +20px;
}
.fooBackgroundColorTest {
-tr-rule-ref: selector(".BaseBackgroundColor:alias");
background-color: -#333333;
}
af|outputLabel {
-tr-rule-ref: selector(".BaseBackgroundColor:alias");
-tr-rule-ref: selector(".FontSizeTest:alias");
color: Red;
}
図2-12に、次の例のように、コンポーネントのstyleClass属性の値としてfooFontTestIncreaseおよびfooBackgroundColorTestスタイル・クラスを指定して、af:outputLabelコンポーネントにこれらのスタイル・クラスを適用した場合、例2-2で定義したスタイル・クラスがどのように、これらのコンポーネントのインスタンスの実行時の外観に影響を与えるかを示します。
<af:outputLabel value="Increase font-size" id="ol2"
styleClass="fooFontTestIncrease"/>
スタイル・クラスの詳細は、第9章「スタイル・クラスの使用」を参照してください。
ADFスキン・エディタ内でいくつかの方法によってADFスキンで設定するADFスキン・セレクタおよびCSSプロパティの参照情報にアクセスできます。アクセスできる参照情報には、ADFスキン・セレクタ用の次の参照ドキュメントが含まれます。
Oracle ADF Facesスキン・セレクタ・タグ・リファレンス
Oracle Fusion Middleware Oracle ADFスキン・セレクタ・データ視覚化ツール・タグ・リファレンス
(スキニングするアプリケーションに関連するリリース)
これらの参照ドキュメントには、Oracle ADFスキン・エディタ・ドキュメント・ライブラリからアクセスするか、図2-13に示すように、セレクタ・エディタのセレクタ・ツリーで、セレクタの上にマウスを置いたときに表示される情報テキスト内のリンクをクリックして、「ヘルプ・センター」ウィンドウからアクセスできます。
ADFスキン・セレクタの参照情報に加えて、CSSセレクタの情報にアクセスできます。これをエディタの「ソース」タブから実行するには、図2-14で示すように、CSSプロパティを選択して[Ctrl]キーを押しながら[D]キーを押すか、セレクタを右クリックしたときに表示されるコンテキスト・メニューから、「クイック・リファレンスの表示」を選択します。
