Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド 11g リリース2(11.1.2.4.0) B66161-04 |
|
![]() 前 |
![]() 次 |
この章では、ADFスキン・セレクタについて説明します。これらのセレクタと、擬似要素、擬似クラス、ADFスキン・プロパティおよびADFスキニング・フレームワーク・ルールを使用すると、ADF Facesコンポーネントと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コンポーネントの現在のリストが表示されます。
作成したADFスキンでは、拡張元のADFスキンで定義されているグローバル・セレクタ別名を継承します。新規グローバル・セレクタ別名をADFスキン・ファイルで作成することもできます。詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。
コンポーネント固有セレクタはADFスキニング・フレームワークによって公開されるセレクタであり、これらを使用すると、対応するADF FacesコンポーネントとADFデータ視覚化コンポーネントのうち、スタイル・プロパティを定義できるものを特定できます。たとえば、図2-2に、ソース・エディタおよびビジュアル・エディタでのADF Faces inputText
コンポーネントのセレクタを示します。このコンポーネントのセレクタ(af|inputText
)によって公開されるcontent
擬似要素内のCSS background-color
プロパティに、red
の値が設定されています。
コンポーネント固有のセレクタの詳細は、第5章「コンポーネント固有セレクタの使用」を参照してください。グローバル・セレクタ別名の詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。
多くのADFスキン・セレクタが擬似要素を公開しています。擬似要素は、スタイルのプロパティを定義できるコンポーネントの特定の領域を示します。疑似要素は、コロン(:)2つで始まり、その後にセレクタが表すコンポーネントの部分が続きます。たとえば、図2-3に、af|chooseDate
セレクタによって公開されているdays-row
擬似要素を使用して、カレンダ・グリッドの外観のスタイル・プロパティをどのように構成できるかを示します。
アイコンをレンダリングするADF Facesコンポーネントでは、ベース・アイコン・イメージのセットを使用してレンダリングします。たとえば、background-image
プロパティの値としてイメージを指定する場合はCSSコード・エントリがソース・ファイルに表示されるのとは対照的に、これらのアイコン・イメージのCSSコード・エントリはADFスキンのソース・ファイルに表示されません。かわりに、ADFスキニング・フレームワークは、レンダラで使用するアイコン・イメージを登録します。レンダラおよびサポートされているレンダー・キットの詳細は、第11.2項「ADFスキニング・フレームワークおよびサポートされているレンダー・キット」を参照してください。
ADFスキン・セレクタは、コンポーネントでレンダリングされるアイコン・イメージを特定する擬似要素に2つのネーミング規則を使用します。これらの擬似要素の名前は、-icon
またはicon-style
で終わります。たとえば、図2-4に示すように、パネル・コレクション・セレクタの擬似要素は-icon
で終わります。
これに対し、図2-5で示すように、列セレクタ(af|column
)は、-icon
および-icon-style
で終わる擬似要素を定義します。
図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
により、変更されたアイコンが、そのアイコンを使用するすべてのコンポーネントにグローバルに設定されます。
詳細は、第6章「ADFスキンのイメージの使用」を参照してください。
ADFスキンのソース・ファイル内のエントリ数を最小化するために、ADFスキン・セレクタおよびグローバル・セレクタ別名をグループ化できます。グループ化したセレクタは、図2-7に示すように、セレクタ・ツリーのグループ化したセレクタ・ノードの下にレンダリングされます。プレビュー・ペインの「表示モード」リストには、グループ化したすべてのセレクタが表示されます。
ビジュアル・エディタではグループ化したセレクタを指定する方法がないため、ソース・エディタを使用して、グループ化したセレククタに含めるセレクタまたはグローバル・セレクタ別名あるいはその両方を指定します。各セレクタをカンマ(,
)で区切って、グループ化したセレクタに含めます。
下位セレクタは、空白で区切られた2つ以上のセレクタで構成されています。ADFスキン・セレクタの下位セレクタを構成できます。これらにより、特定のセレクタが別のセレクタ内でレンダリングされる場合のスタイル・プロパティを特定のセレクタに設定できます。下位セレクタを構成すると、図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
擬似クラスの構文を示します。
一部のコンポーネントは、他のコンポーネントに比べて擬似クラスをより活用しています。たとえば、panelBox
コンポーネントのセレクタは、擬似クラスを活用して、様々な状態(アクティブ、無効、右から左へのレンダリングなど)における外観を定義します。セレクタ・ツリーでpanelBox
コンポーネントのセレクタを選択し、使用可能な擬似クラスのリストを表示するために「擬似クラスの追加」アイコンをクリックした場合に表示される使用可能な擬似クラスのリストを図2-10に示します。
擬似クラスは、セレクタによって公開されている擬似要素にも適用できます。代表的な例として、panelBox
コンポーネント・セレクタの擬似要素をあげることができます。図2-11に、panelBox
コンポーネント・セレクタによって公開されているheader-start
擬似要素が受け入れる擬似クラスのリストを示します。これらの数多くの擬似クラスを使用して、panelBox
コンポーネントの外観を、アプリケーション開発者がこのコンポーネントの属性に設定した値に応じて定義できます。たとえば、core
およびhighlight
擬似クラスでは、アプリケーション開発者がpanelBox
コンポーネントのramp
属性をcore
またはhighlight
に設定した場合に対応する外観を定義します。
次に、ADF Facesセレクタによって使用される一般的な擬似クラスを示します。
ドラッグ・アンド・ドロップ: 使用可能な2つの擬似クラスとして、ドラッグを開始するコンポーネントに適用され、ドラッグが終了したら削除される:drag-source
、および現在のドラッグのドロップ先のコンポーネントに適用される:drop-target
があります。
標準: CSSでは、:hover
、:active
、:focus
などの擬似クラスは、コンポーネントの状態とみなされます。コンポーネントへのスキンの適用にも、これと同じ考え方が当てはめられます。コンポーネントの状態は、read-only
またはdisabled
などです。同じセレクタに状態を組み合せると、すべての状態が満たされた場合にのみセレクタが適用されます。
右から左: ブラウザで言語の読み方向が右から左の際に、スタイルまたはアイコンの定義を設定する場合にこの擬似クラスを使用します。その他の典型的なユース・ケースは非対称のイメージです。読み方向が右から左のイメージを使用するスキン・セレクタを設定する際には、イメージを反転する必要があります。セレクタの最後に:rtl
疑似クラスを追加し、反転イメージ・ファイルを指すようにします。たとえば、ブラウザの読み方向が右から左に設定されている場合、panelBox
コンポーネントの最後のイメージは、panelBoxStart.png
ファイルになります。右から左のpanelBox
の最後のイメージは、反転された左から右へのpanelBox
の最初のイメージと同じです。
af|panelBox::medium af|panelBox::top-end:rtl { background-image: url(/skins/purple/images/panelBoxStart.png); width:8px; height:8px }
:rtl
は、スキン・アイコンへの適用にも使用できます。詳細は、第6章「ADFスキンのイメージの使用」を参照してください。
インライン編集: この擬似クラスは、ブラウザで編集するために、コンポーネント・サブツリーがアプリケーションによりアクティブ化される場合に適用されます。たとえば、:inline-selected
は、アクティブでインラインでの編集が可能なサブツリーで、現在選択されているコンポーネントに適用される疑似クラスです。
メッセージ: この擬似クラスは、:fatal
、:error
、:warning
、:confirmation
および:info
のCSS擬似クラスを使用して、コンポーネント・レベルのメッセージ・スタイルを設定するために使用されます。詳細は、第5.5項「メッセージに適用するADFスキン・プロパティの設定」を参照してください。
ADFスキニング・フレームワークでは、ADFスキン・プロパティの数を定義します。ユーザーのブラウザではなく、Fusion WebアプリケーションがADFスキン・プロパティを解釈します。構成した場合、ADFスキン・プロパティを使用して次のことを実行できます。
-tr-inhibit
スキン・プロパティを使用して、ADFスキンで定義されたスタイルを抑制します。
-tr-inhibit
スキン・プロパティを使用して、ベース・スキンから継承されたCSSプロパティを抑制またはリセットします。たとえば、-tr-inhibit:padding
プロパティは継承されたパディングを削除します。-tr-inhibit:all
プロパティを使用すると、継承されたすべてのプロパティが削除(クリア)されます。抑制するプロパティ名は、ベース・スキンのプロパティ名と完全に一致する必要があります。
-tr-rule-ref
プロパティを使用して、他のセレクタのスタイルを参照します。
独自のグローバル・セレクタ別名を作成し、-tr-rule-ref
プロパティを使用して他のセレクタと組み合せます。詳細は、第8.2項「グローバル・セレクタ別名の作成」を参照してください。
-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
ずつ増やします。
ADFスキニング・フレームワークで定義されている数多くのCSS @ルールを使用して、一部のブラウザ、プラットフォーム、ロケールまたは読取り方向にのみ適用するセレクタのプロパティを定義できます。
たとえば、他のブラウザでは必要ないなんらかのパディングをInternet Explorerで追加する必要がある場合や、Windowsでのフォント・スタイルを他のプラットフォームでのフォント・スタイルとは異なるものにする場合があります。特定のユーザー環境用にセレクタをスタイル設定するには、そのスキニング情報をADFスキニング・フレームワーク・ルール内に含めます。ADFスキニング・フレームワークは、エージェントやプラットフォームなどのHTTP
リクエスト情報に基づいてスタイルを選択し、ルールのないスタイルとマージします。ルールと一致するCSSプロパティは、すべてのルールに該当しないプロパティとマージされます。ユーザーの環境と最も一致する特定のルールが優先されます。
注意: ビジュアル・エディタでは、ADFスキンでの次のルールの作成は現在サポートされていません。サポートされているルールを作成および変更するには、ソース・エディタを使用します。 |
現在、ADFスキニング・フレームワークでは、次のルールがサポートされています。
@platform
を使用してプラットフォーム・スタイルを定義します。
プラットフォーム固有のスタイルの設定用にサポートされている値は、windows
、macos
、linux
、solaris
およびppc
です。
@agent
を使用してブラウザ・スタイルを定義します。
ブラウザ・エージェント固有のスタイルの設定用にサポートされている値は、ie
、mozilla
、gecko
、webkit
(safariへのマップ)、ice
およびemail
です。
Internet Explorerの任意のバージョンのスタイルを指定する場合は次のようになります。
@agent ie
オプションで、and
キーワードを使用してエージェントの特定のバージョンを指定します。たとえば、Internet Explorerのバージョン7を指定する場合は次のようになります。
@agent ie and (version: 7)
複数のエージェントのスタイルを指定する場合は、カンマ区切りリルールを使用します。たとえば、Internet Explorer 6.x、Internet Explorer 7.xまたはGecko 1.9のスタイルを指定する場合は次のルールを使用します。
@agent ie and (version: 6), ie and (version: 7), gecko and (version: 1.9)
次の2つの構文例では、同じルールが指定されていることに注意してください。
@agent ie and (version: 7.*)
@agent ie and (version: 7)
Internet Explorer 7.0.xにのみ適用するスタイルのルールを指定する場合は、次のように記述します。
@agent ie and (version: 7.0.x)
バージョンの範囲を指定するには、max-version
キーワードとmin-version
キーワードを使用します。たとえば、次のルールを再記述できます。
@agent ie and (version: 6), ie and (version: 7)
次のようにします。
@agent ie and (min-version: 6) and (max-version: 7)
定義したスタイルをInternet Explorer 6および7のすべてのバージョンに適用します。
次の例に、WindowsおよびLinuxプラットフォーム上のInternet Explorerバージョン7と8およびバージョン1.9のgecko
に関して、inputText
コンポーネントのコンテンツ領域の色をピンクに設定する方法を示します。
@platform window, linux { @agent ie and (version: 7) and (version: 8), gecko and (version: 1.9) { af|inputText::content {background-color:pink } } }
@agent
ルールを使用して、タッチ・スクリーン・デバイスのエージェントに適用するスタイルを指定することもできます。次の例に、この機能を構成するカスタム・スキン・ファイルに記述する構文を示します。
@agent (touchScreen) { /* Touchscreen specific styles for all touchscreen devices: both single and multiple touch. */ } @agent (touchScreen:single) { /* Styles specific for a touchscreen device with single touch. */ } @agent (touchScreen:multiple) { /* Styles specific for a touchscreen with multiple touch. */ } @agent (touchScreen:none) { /* Styles that should not render on touchscreen devices. */ }
@agent (touchScreen:none)
@ルールを使用して、タッチ・デバイスにレンダリングさせないスタイルを指定します。たとえば、ADFスキンのFusion Simpleファミリ(fusionFx-simple-v1.2
以降)はこの@ルールを、:hover
擬似クラスを使用するように構成されたセレクタに適用します。この理由は、:hover
擬似クラスがタッチ・デバイスで使用するには適していないためです。@agent (touchScreen:none)
@ルールは、:hover
擬似クラスを使用するセレクタを、次の例のように折り返します。
@agent (touchScreen:none){ af|breadCrumbs:step:hover{ text-decoration:underline; } }
@import
ADFスキンにインポートできるスタイルを定義している別のADFスキンを指定します。次の例に、ADFスキン(skinA
)を現在のADFスキンにインポートする有効な構文を示します。
@import "skinA.css"; @import url("skinA.css");
@import
文は、2つのADFスキンを現在のADFスキンにインポートする次の例で示しているように、ADFスキン・ファイルの最初のエントリである必要があります。
@import url("skinA.css"); @import url("skinB.css"); /**ADFFaces_Skin_File / DO NOT REMOVE**/ @namespace af "http://xmlns.oracle.com/adf/faces/rich"; @namespace dvt "http://xmlns.oracle.com/dss/adf/faces"; af|inputText{ background-color: Green; } ...
@accessibility-profile
trinidad-config.xml
ファイルで有効な場合にhigh-contrastおよびlarge-fontsの各アクセシビリティ・プロファイル設定にスタイルを定義する、@accessibility-profile
を定義します。
high-contrast値は、背景色と前景色のコントラストを相互に高める必要がある場合に使用します。large-fonts値は、ユーザーがWebブラウザのテキスト・スケーリング設定を増減できる必要がある場合に使用します。large-fontsを定義してもフォントは大きくなりませんが、固定ピクセル・サイズではなく、スケーラブル・フォントまたはディメンションになります。
<!-- Enable both high-contrast and large-fonts content --> <accessibility-profile>high-contrast large-fonts</accessibility-profile>
@accessibility-profile
ルールの詳細は、第5.7項「アクセシビリティのためのADFスキンの構成」を参照してください。
@locale
言語のみ、または言語と国両方の特定のロケールを指定する必要があります。これにより、特定の言語および国のみのスタイルが定義されます。例2-3に、ロケールがドイツ語(de
)である場合にメニュー・バー上のaf:commandMenuItem
コンポーネントによってレンダリングされるテキストの色を設定する方法を示します。
注意: 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; }