5 コンポーネント固有セレクタの使用

この章では、ADFスキニング・フレームワークがADF FacesコンポーネントとADFデータ視覚化コンポーネントに対して公開するセレクタのプロパティを指定することによって、これらのコンポーネントの外観を変更する方法について説明します。また、メッセージに適用するADFスキン・プロパティの設定、ADF Facesコンポーネントに適用できるテーマ、アクセシビリティを考慮したADFスキンの設定方法についても説明します。

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

第5.1項「コンポーネント固有セレクタの使用について」
第5.2項「ADF Facesコンポーネントのセレクタの変更」
第5.3項「ADFデータ視覚化コンポーネントのセレクタの変更」
第5.4項「コンポーネント固有セレクタの変更」
第5.5項「メッセージに適用するADFスキン・プロパティの設定」
第5.6項「ADF Facesページへのテーマの適用」
第5.7項「アクセシビリティのためのADFスキンの設定」

5.1 コンポーネント固有セレクタの使用について

ADF FacesコンポーネントまたはADFデータ視覚化コンポーネントによって公開されるセレクタのスタイル・プロパティを定義することによって、コンポーネントの外観をカスタマイズします。外観を適切に設定するには、ADF FacesコンポーネントとADFデータ視覚化コンポーネントによって公開されるコンポーネント固有セレクタ、さらにコンポーネント固有セレクタによって参照されることがあるグローバル・セレクタ別名と下位セレクタについて理解する必要があります。ADFスキンを作成するときに拡張する元となるADFスキンでは、数多くのグローバル・セレクタ別名と下位セレクタが定義されています。コンポーネント自体と他のコンポーネントとの関連についても理解する必要があります。たとえば、図5-1に示すADF Facesのtableコンポーネントの外観をカスタマイズするには、ADF Facesのtableコンポーネントによって公開されるセレクタに加えて、af:columnコンポーネントによって公開されるrow-header-cellおよびcolumn-filter-cellセレクタのスタイル・プロパティを定義する必要があります。また、拡張したADFスキンで定義されている1つ以上のアイコンまたはメッセージのグローバル・セレクタ別名について、スタイル・プロパティを変更することも必要になる場合があります。

注意:

ADFスキン内で頻繁に使用するセレクタのプロパティを変更する必要がある場合は、第3.2項「ADFスキン・デザイン・エディタの使用」で説明しているように、デザイン・エディタを使用することを検討します。このエディタは、ADFスキンがSkyrosまたはFusion SimpleファミリのADFスキンから拡張されていれば、デフォルトで表示されます。デザイン・エディタには、ADFスキンを迅速に変更するための様々なコントロールが用意されています。

図5-1 ADF Facesのtableコンポーネントのセレクタ

ADFスキンのセレクタ・エディタに用意されているツールを使用して、ADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観をカスタマイズします。詳細は、第3章「ADFスキン・エディタの使用」を参照してください。

ADF FacesコンポーネントとADFデータ視覚化コンポーネントのセレクタを変更するときに役立つ可能性があるその他の情報ソースは、次のとおりです。

イメージ: ADFスキンは、たとえば、ページ内でアイコンやロゴとしてレンダリングされるイメージを参照できます。ADFスキンでイメージを操作する方法の詳細は、第6章「ADFスキンのイメージおよび色の使用」を参照してください。
テキスト: ADFスキンには、ページ内でレンダリングされるテキスト文字列は含まれません。ただし、ページに表示するテキスト文字列を定義するリソース・バンドルを指定できます。詳細は、第7章「ADFスキンのテキストの使用」を参照してください。
グローバル・セレクタ別名: グローバル・セレクタ別名では、複数のADF Facesコンポーネントに同時に適用できるスタイル・プロパティを指定します。グローバル・セレクタ別名の詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。
スタイル・クラス: ADFスキンのスタイル・クラスでは、ADF Facesコンポーネントがスタイル関連属性(styleClassとinlineStyle)を公開する場合に値として参照できる多くのスタイル・プロパティを指定します。スタイル・クラスの詳細は、第9章「スタイル・クラスの使用」を参照してください。
ADF Facesリッチ・クライアント・コンポーネント・ホスト・デモ: Oracle Technology Network (OTN)のWebサイトには、ADFスキンによってADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観がどのように変更されるかのデモへのアプリケーションへのリンクがあります。詳細は、http://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlにアクセスしてください。

5.2 ADF Facesコンポーネントのセレクタの変更

ADF Facesコンポーネントは、Fusion Webアプリケーションのボタン、リンク、チェック・ボックスなどのユーザー・インタフェース・コントロールをレンダリングします。ADF Facesコンポーネントには、カレンダ、他のユーザー・インタフェース・コントロールを配置するパネルおよびWebアプリケーション内の表をレンダリングするコンポーネントも含まれています。ADF Facesコンポーネントとその機能の詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)を参照してください。

各ADF Facesスキン・セレクタによって公開されるプロパティを編集して、ADF Facesコンポーネントの実行時の外観を変更できます。ADF Facesコンポーネントによって公開されるセレクタの数は、コンポーネントによって異なります。たとえば、ADF Facesコンポーネントのaf:imageとaf:popupは、それぞれ1つのセレクタを公開します。対照的に、ADF Facesコンポーネントのaf:panelHeaderは、コンポーネントのユーザー・インタフェースの様々なパーツの外観を変更できる様々なセレクタを公開します。af:panelHeaderコンポーネントの指示テキスト、ヘルプ・アイコンおよびタイトルを変更できるセレクタなどがあります。

ADF Facesコンポーネントの実行時の外観を変更するための処理は、各コンポーネントで同じです。唯一の違いは、各ADF Facesコンポーネントが公開するセレクタの数です。図5-2と図5-3に、buttonコンポーネントを例として、擬似要素とコンポーネントのセレクタを使用してこのコンポーネントの外観をカスタマイズする方法を示します。図5-2に、buttonコンポーネントおよびコンポーネント・アイコンにskyrosスキンを適用した様子を示します。

図5-2 Skyros ADFスキンを適用したButtonコンポーネントのデフォルトの外観

図5-3に、コンポーネントのセレクタに次の擬似要素の値を設定した後のセレクタ・エディタ内のコンポーネントの外観を示します。

access-key: 色プロパティがredに設定されています
dropdown-icon-style: 枠線プロパティが2px solid blackに設定されています

図5-3 セレクタが変更されたButtonコンポーネント

ADF Facesコンポーネントによって公開されるセレクタに関する参照情報は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)にあります。

5.3 ADFデータ視覚化コンポーネントのセレクタの変更

ADFデータ視覚化コンポーネントは、データをグラフィカルな表形式で表現する機能を提供する一連のコンポーネントです。ADFデータ視覚化コンポーネントの例として、グラフ、ガント、ピボット・テーブルおよび階層ビューアがあります。ADFデータ視覚化コンポーネントとその機能の詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)を参照してください。

各ADFデータ視覚化コンポーネント・セレクタによって公開されるプロパティを編集して、ADFデータ視覚化コンポーネントの実行時の外観を変更できます。ADFデータ視覚化コンポーネントによって公開されるセレクタの数は、コンポーネントによって異なります。

図5-4に、カスタマイズ可能なADFデータ視覚化のgaugeコンポーネントのセレクタを表示するためにノードが展開された、セレクタ・エディタ内のADFスキンを示します。

図5-4 ADFデータ視覚化コンポーネントのセレクタ

ADFデータ視覚化コンポーネントの外観をカスタマイズするには、各ADFデータ視覚化コンポーネントによって公開されるセレクタのスタイル・プロパティを定義します。ADFスキン用のJDeveloperのセレクタ・エディタまたはADFスキン・エディタに用意されているツールを使用して、ADFデータ視覚化コンポーネントの外観をカスタマイズします。詳細は、第3章「ADFスキン・エディタの使用」を参照してください。

外観を適切に設定するには、ADFデータ視覚化コンポーネントによって公開されるセレクタ、コンポーネントによって参照されることがあるグローバル・セレクタ別名、およびADFスキンの作成時の拡張元となるADFスキンで定義されているグローバル・セレクタ別名について理解する必要があります。コンポーネント自体と他のコンポーネントとの関連についても理解する必要があります。たとえば、図5-5に示すADFデータ視覚化のpivotTableコンポーネントの外観をカスタマイズするには、このセレクタの擬似要素のスタイル・プロパティを定義する必要があります。拡張したADFスキンで定義されている1つ以上のグローバル・セレクタ別名のスタイル・プロパティの変更が必要になる場合もあります。

図5-5 ADFデータ視覚化のpivotTableコンポーネント

graphコンポーネントやhierarchyViewerコンポーネントのセレクタなど、多くのADFデータ視覚化コンポーネントのセレクタによって、ADFスキン・プロパティを設定する擬似要素が公開されます。これらのADFスキン・プロパティでは、擬似要素で指定されたエリアの外観を変更します。ADFスキン・プロパティの名前は、-tr-という文字で始まります。たとえば、図5-6に示す階層ビューアのlateral-navigation-buttonセレクタのプロパティは、すべて-tr-で始まっています。

図5-6 hierarchyViewerコンポーネントのlateral-navigation-button擬似要素のプロパティ

対照的に、図5-7に示すganttコンポーネントのsummary-task-leftセレクタは、このセレクタに対して設定されているプロパティの大部分がCSSプロパティであるため、4つのADFスキン・プロパティ(-tr-rule-ref、-tr-inhibit-、-tr-enable-themesおよび-tr-children-theme)のみを公開します。

ADFスキン・プロパティの詳細は、第2.3項「ADFスキニング・フレームワークでのプロパティ」を参照してください。

図5-7 ganttコンポーネントのsummary-task-left擬似要素のプロパティ

ADFデータ視覚化コンポーネントによって公開されるセレクタ、擬似要素および擬似クラスに関する参照情報は、Oracle Fusion Middleware Oracle ADFスキン・セレクタ・データ視覚化ツール・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)にあります。

5.4 コンポーネント固有セレクタの変更

コンポーネント固有セレクタを変更する処理は、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントの両方の場合と同じです。セレクタ・エディタのセレクタ・ツリーでFacesコンポーネント・セレクタ・ノードまたはデータの視覚化セレクタ・ノードを開き、変更するコンポーネントのセレクタを選択します。次に、「プロパティ」ウィンドウを使用してこのセレクタの値を設定します。擬似要素のプロパティ、コンポーネント・スタイル・クラス、コンポーネント・セレクタ別名または選択したセレクタが参照する下位セレクタを設定することもできます。さらに、コンポーネント固有セレクタがサポートする擬似クラスを追加できます。擬似クラスの詳細は、第2.2項「ADFスキニング・フレームワークでの擬似クラス」を参照してください。図5-8に、セレクタ・エディタのセレクタ・ツリーにおけるADF Facesのtableコンポーネントのスキン・セレクタのビューおよびこのスキン・セレクタに対して設定できる様々な擬似要素を示します。

図5-8 tableコンポーネントのセレクタ

図5-9に、ADF Facesのsimpleスキンのスタイル・プロパティを使用してデータをレンダリングするADF Facesのtableコンポーネントの実行時ビューを示します。

図5-9 simpleスキンによってレンダリングされたADF Facesのtableコンポーネント

5.4.1 コンポーネント固有セレクタの変更方法

コンポーネント固有セレクタを変更するには、セレクタ・ツリーでセレクタを選択し、「プロパティ」ウィンドウで、セレクタ、その擬似要素または下位セレクタの値を設定します。さらに、コンポーネント固有セレクタによってサポートされている場合は、擬似クラスを追加できます。

コンポーネント固有セレクタを変更するには、次のようにします。

セレクタ・エディタのセレクタ・ツリーで、適切なオプションを選択します。
- ADF Facesコンポーネントのセレクタを変更する場合は、Facesコンポーネント・セレクタ・ノードを展開します。
- ADFデータ視覚化コンポーネントのセレクタを変更する場合は、データの視覚化セレクタ・ノードを展開します。
たとえば、Facesコンポーネント・セレクタ・ノード、列ノード、擬似要素ノードの順に展開し、column-header-cellセレクタを選択します。
「プロパティ」ウィンドウで、手順1で選択したセレクタによってサポートされているプロパティの値を指定します。

たとえば、「プロパティ」ウィンドウの「共通」セクションで、次の属性の値を設定します。
- 背景色: 表のヘッダー行に表示する背景色を指定します。
- 色: 表の列のヘッダー行に表示されるテキストに適用する色を指定します。
プレビュー・ペインで、「擬似クラスの追加」アイコンをクリックして、表示されたサポートされている擬似クラスのリストからサポートされている擬似クラスを選択します。

5.4.2 コンポーネント固有セレクタを変更した場合の処理

プレビュー・ペインで「リフレッシュ」アイコンをクリックすると、セレクタに対する変更がセレクタ・エディタに表示されます。セレクタに擬似クラスを追加した場合は、プレビュー・ペインに、擬似クラスが追加されたセレクタのエントリも表示されます。たとえば、図5-10は、:hover擬似クラスが追加されたセレクタのエントリを示しています。

注意:

af|documentセレクタのプレビュー・ペインには、このセレクタに擬似クラスを追加した場合でも1つのエントリのみが表示されます。

図5-10 コンポーネント固有セレクタと擬似クラスが表示されたプレビュー・ペイン

セレクタ・エディタは、「プロパティ」ウィンドウでセレクタに対して指定された値をADFスキンのソース・ファイルにも書き込みます。例5-1に、第5.4.1項「コンポーネント固有セレクタの変更方法」で説明した変更の後でソース・ファイルに表示される変更を示します。

例5-1 列のヘッダー行をスキニングするためのセレクタ値

af|column::column-header-cell
{
  color: Black;
  background-color: Olive;
  font-weight: bold;
}

Webアプリケーションが例5-1の値が含まれているADFスキンを使用すると、ADF Facesのtableコンポーネントによってレンダリングされた表の列のヘッダー行が図5-11のように表示されます。この表では、simpleスキンを拡張するスキンが使用されています。

図5-11 ヘッダー行がスキニングされたADF Facesのtable

5.5 メッセージに適用するADFスキン・プロパティの設定

ADF Faces入力コンポーネントに特定タイプのメッセージが関連付けられているかどうかに基づいて、入力コンポーネントにスタイルを適用できます。コンポーネントに特定タイプのメッセージが追加されると、そのコンポーネントのスタイルは、新しいステータスを反映するように自動的に変更されます。当該メッセージのタイプが定義されていない場合、コンポーネントはADFスキンに定義されているデフォルトのスタイルを使用します。

メッセージ・プロパティのタイプは次のとおりです。

:fatal
:error
:warning
:confirmation
:info

図5-12に、simple ADFスキンを使用してレンダリングされたinputTextコンポーネントを示します。図5-12では、simple ADFスキンによって、エンド・ユーザーが警告を生成する値を入力したときにinputTextコンポーネントに適用される:warningメッセージ・プロパティのスタイル値が定義されています。

図5-12 :warningメッセージ・プロパティのスタイルを表示するinputTextコンポーネント

図5-13に、図5-12と同じinputTextコンポーネントを示します。図5-13では、エンド・ユーザーがエラーを生成する値を入力しました。その結果、inputTextコンポーネントが:errorメッセージ・プロパティに対して設定されているスタイル・プロパティを使用してレンダリングされます。

図5-13 :errorメッセージ・プロパティのスタイルを表示するinputTextコンポーネント

ADFスキニング・フレームワークには、メッセージに適用するスタイル・プロパティを定義する多くのグローバル・セレクタ別名が定義されています。図5-14に、セレクタ・エディタのセレクタ・ツリーの「メッセージ」ノードの下に表示されるグローバル・セレクタ別名のリストを示します。図5-14の右側のプレビュー・ペインは、現在セレクタ・ツリーで選択されているグローバル・セレクタ別名に対して定義されているスタイル・プロパティによって、「表示モード」リストから選択したコンポーネントがどのようにレンダリングされるかを示しています。

図5-14 メッセージのグローバル・セレクタ別名

ADFスキンでスタイル・プロパティを定義することによって、ADFスキニング・フレームワークに用意されているメッセージのグローバル・セレクタ別名をカスタマイズできます。グローバル・セレクタ別名に対して定義したスタイル・プロパティは、そのグローバル・セレクタ別名を参照するすべてのADF Facesコンポーネントに影響を及ぼします。たとえば、図5-14に示すグローバル・セレクタ別名の枠線の色を緑色に変更すると、「表示モード」リスト内のすべてのADF Facesコンポーネントが緑色の枠線でレンダリングされます。グローバル・セレクタ別名の詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。

af|messageおよびaf|messagesセレクタでは、実行時にメッセージ・ダイアログに表示されるアイコンを変更できる擬似要素も公開されます。さらに、これらのセレクタは、エンド・ユーザーがメッセージ・ダイアログ上にマウスを置いたときにツールチップに表示されるテキストを指定するリソース文字列を定義します。これらのリソース文字列をオーバーライドするには、第7章「ADFスキンのテキストの使用」の説明に従って、リソース・バンドルに他の値を指定します。ADF Facesコンポーネントのメッセージの構成に関する詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』(スキニングするアプリケーションに関連するリリース)の「ヒント、メッセージおよびヘルプの表示」の章を参照してください。

5.5.1 メッセージに適用するADFスキン・プロパティの設定方法

設定するメッセージ・タイプのコンポーネントのセレクタに擬似クラスを追加します。次に、「プロパティ」ウィンドウを使用して擬似クラスのスタイル・プロパティを定義します。

メッセージに適用するADFスキン・プロパティを設定するには、次のようにします。

セレクタ・エディタのセレクタ・ツリーで、Facesコンポーネント・セレクタ・セクションを開き、メッセージに適用するスタイル・プロパティを設定するADF Facesコンポーネントのセレクタを選択します。

たとえば、af|inputTextセレクタを選択して、ADF FacesのinputTextコンポーネントに適用するスタイル・プロパティを設定します。
「擬似クラスの追加」アイコンをクリックして、手順1で選択したセレクタに利用できる擬似クラスのリストを表示します。
スタイル・プロパティを設定するメッセージに対応する擬似クラスを選択します。ADF Facesコンポーネントに対して、次の擬似クラスを利用できます。
- fatal
- error
- warning
- confirmation
- info
アプリケーションがコンポーネントのメッセージを表示する場合に、実行時にコンポーネントに適用するスタイル・プロパティを設定します。

5.5.2 ADFスキン・プロパティをメッセージに適用するように設定した場合の処理

セレクタ・エディタは、「プロパティ」ウィンドウでセレクタの擬似クラスに対して指定された値をADFスキンのソース・ファイルに書き込みます。たとえば、af|inputTextセレクタのerror擬似クラスのcontent擬似要素に対して、枠線プロパティの値をorangeに設定します。図5-15に、ADFスキンのソース・ファイルに記述される構文のエントリと、セレクタ・エディタのプレビュー・ペインにおける変化を示します。

図5-15 inputTextコンポーネントのエラー・メッセージのスタイル・プロパティ

5.6 ADF Facesページへのテーマの適用

テーマは、アプリケーションに奥行きとレイヤーを適用することによって、ページの特定の領域を視覚的に区別する方法です。テーマの目的は、ページの一部分にある複数のコンポーネント全体で、ルック・アンド・フィールを一貫させることです。テーマは一般的にJSFページ・テンプレートの中で使用し、ある領域に明確な境界を定めたり、アプリケーション内に階層化レイアウトを作成します。たとえば、上部のブランド領域、暗い背景色と明るいテキストが使用されたグローバル領域、より明るい背景色のナビゲーション・コンポーネント、および明るい背景色のメイン・コンテンツ領域があるページです。

テーマはaf:documentおよびaf:decorativeBoxコンポーネントによって設定(開始または変更)できます。

ADFスキンのFusionおよびSkyrosファミリでサポートされるテーマは次のとおりです。

dark
medium
light
なし(default)
contentBodyは、af:decorativeBoxコンポーネントでのみ使用するテーマです。外観はdarkテーマに似ています。1つ異なるのは、下隅が丸く表示されないことです。

図5-16に、同じページの2つのインスタンスを示します。図5-16の右側のページは、Oracle Three Column Layout ADFページ・テンプレートを使用してレンダリングされています。左側のページは、Oracle Three Column Layout ADFテンプレートに含まれているaf:decorativeBoxコンポーネントの次の3つのインスタンスを変更するページ・テンプレートを使用してレンダリングされています(例5-2を参照)。

例5-2 装飾ボックス・コンポーネントのテーマ属性

<af:decorativeBox id="contentBody" theme="dark" dimensionsFrom="auto">
…
<af:decorativeBox id="light" theme="light" dimensionsFrom="auto">
…
<af:decorativeBox id="default" theme="dark" dimensionsFrom="auto">
…

図5-16 異なるテーマを使用したADF Facesページのレンダリング

ADFスキンのソース・ファイルに次のような構文を入力して、独自のテーマを作成することもできます。

af|document[theme=UserCreated] {}

図5-17に、ユーザーが作成したテーマに加えて、ADFスキンのFusionおよびSkyrosファミリによって提供される各テーマのスタイル・プロパティを設定できるタブがセレクタ・エディタでどのようにレンダリングされるかを示します。

図5-17 セレクタ・エディタでのテーマのタブ

図5-18は、各種テーマを比較したものです。

図5-18 テーマのデフォルトの外観

次の例に示すように、アプリケーションで、テーマをJSFページのaf:documentコンポーネントの属性として、またはより一般的にaf:decorativeBoxコンポーネントの属性として指定することで開始します。

   ...
        <af:decorativeBox id="db1" theme="dark">
        ...
        </af:decorativeBox>
   ...

5.6.1 テーマを使用してコンポーネントのスタイルを設定する方法

コンポーネントのテーマ・プロパティを設定するには、設定するテーマに対応するセレクタ・エディタ内のタブを使用します。

ADFスキンでコンポーネントのテーマ・プロパティを設定するには、次のようにします。

セレクタ・エディタのセレクタ・ツリーで、テーマ・プロパティを設定するノードを開きます。

「スタイル・クラス」、Facesコンポーネント・セレクタおよびデータ視覚化コンポーネント・セレクタ・ノードの下に表示されるアイテムを設定できます。
プロパティを設定するテーマに対応するタブをクリックします。

たとえば、明るいテーマのプロパティを設定する場合は、図5-19に示すように、明るいテーマをクリックします。

図5-19 セレクタ・エディタにおける明るいテーマ
「プロパティ」ウィンドウで、選択したテーマに対して設定するプロパティの値を設定します。

例5-3に、「明るいテーマ」タブをクリックした後、af:linkコンポーネントのプロパティを設定した場合に、ADFスキンのソース・ファイルに記述されるエントリを示します。
例5-3 ADFスキンにおけるコンポーネントのテーマの定義
```
af|link[theme="light"] {
    background-color: Yellow; 
    color: Blue; 
}
```

5.7 アクセシビリティのためのADFスキンの設定

Oracle ADFでは、ADF Facesコンポーネントを使用して開発されたアプリケーションを障害のある方が使用できるようにするために、アプリケーションのアクセシビリティ・サポートを提供しています。アプリケーションのアクセシビリティを確保する取り組みの一環として、ADFスキンで障害のある方向けのスタイル・プロパティを定義できます。これらのスタイル・プロパティは、@accessibility-profileルールで始めます。

@accessibility-profileルールを使用すると、trinidad-config.xmlファイルで指定できるhigh-contrastおよびlarge-fontsアクセシビリティ・プロファイル設定のスタイル・プロパティを定義できます。trinidad-config.xmlファイルの詳細は、第12.2項「ADFスキンの構成ファイル」を参照してください。

背景色と前景色のコントラストをはっきりさせるには、high-contrastアクセシビリティ・プロファイルのスタイル・プロパティを定義します。ユーザーにWebブラウザでのテキスト・スケーリング設定の増減を許可する必要がある場合は、large-fontsアクセシビリティ・プロファイルのスタイル・プロパティを定義します。large-fontsを定義してもフォントは大きくなりませんが、固定ピクセル・サイズではなく、スケーラブル・フォントまたはディメンションになります。

例5-4に、アプリケーションがhigh-contrastアクセシビリティ・プロファイルを使用してレンダリングするときにaf|column::sort-ascending-icon擬似要素に適用されるスタイル・プロパティを示します。

例5-4 @accessibility-profileを使用して定義されたスタイル・プロパティ

@accessibility-profile high-contrast {
  af|column::sort-ascending-icon {
     content: url("/afr/fusion/sort_asc_ena.png");
   }
   af|column::sort-ascending-icon:hover {
     content: url("/afr/fusion/sort_asc_ovr.png");
   }
   af|column::sort-ascending-icon:active {
     content: url("/afr/fusion/sort_asc_selected.png");
   }
   af|column::sort-descending-icon {
     content: url("/afr/fusion/sort_des_ena.png");
   }
   af|column::sort-descending-icon:hover {
     content: url("/afr/fusion/sort_des_ovr.png");
   }
   af|column::sort-descending-icon:active {
     content: url("/afr/fusion/sort_des_selected.png");
   }
   af|column::sorted-ascending-icon {
     content: url("/afr/fusion/sort_asc_selected.png");
   }
   af|column::sorted-descending-icon {
     content: url("/afr/fusion/sort_des_selected.png");
   }

アクセシビリティを考慮したADF Facesページの開発とアクセシビリティ・プロファイルの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』(スキニングするアプリケーションに関連するリリース)の「アクセシビリティを考慮したADF Facesページの開発」を参照してください。

5.7.1 アクセシビリティを考慮したADFスキンの設定方法

設定するセレクタまたはセレクタの擬似要素のスタイル・プロパティを定義し、そのスタイル・プロパティを@accessibility-profileルールで始めます。

アクセシビリティを考慮したADFスキンを設定するには、次のようにします。

第5.4項「コンポーネント固有セレクタの変更」の説明に従って、設定するセレクタおよびセレクタの擬似要素のスタイル・プロパティを定義します。
例5-4に示すように、ADFスキンのソース・ファイルで、設定したスキニング・キーを@accessibility-profileルールで始めます。