| Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの作成 12c (12.1.2) E48016-01 |
|
 前 |
 次 |
この章では、ADFスキニング・フレームワークがADF FacesコンポーネントとADFデータ視覚化コンポーネントに対して公開するセレクタのプロパティを指定することによって、これらのコンポーネントの外観を変更する方法について説明します。また、メッセージに適用するADFスキン・プロパティの設定、ADF Facesコンポーネントに適用できるテーマ、アクセシビリティを考慮したADFスキンの設定方法についても説明します。
この章には次の項が含まれます:
ADF FacesコンポーネントまたはADFデータ視覚化コンポーネントによって公開されるセレクタのスタイル・プロパティを定義することによって、コンポーネントの外観をカスタマイズします。外観を適切に設定するには、ADF FacesコンポーネントとADFデータ視覚化コンポーネントによって公開されるコンポーネント固有セレクタ、さらにコンポーネント固有セレクタによって参照されることがあるグローバル・セレクタ別名と下位セレクタについて理解する必要があります。ADFスキンを作成するときに拡張する元となるADFスキンでは、数多くのグローバル・セレクタ別名と下位セレクタが定義されています。コンポーネント自体と他のコンポーネントとの関連についても理解する必要があります。たとえば、図5-1に示すADF Facesのtableコンポーネントの外観をカスタマイズするには、ADF Facesのtableコンポーネントによって公開されるセレクタに加えて、af:columnコンポーネントによって公開されるセレクタのスタイル・プロパティを定義する必要があります。また、拡張したADFスキンで定義されている1つ以上のアイコンまたはメッセージのグローバル・セレクタ別名について、スタイル・プロパティを変更することも必要になる場合があります。
|
注意: ADFスキン内で頻繁に使用するセレクタのプロパティを変更する必要がある場合は、第3.2項「ADFスキン・デザイン・エディタの使用」で説明しているように、デザイン・エディタを使用することを検討します。このエディタは、ADFスキンがSkyrosまたはFusion SimpleファミリのADFスキンから拡張されていれば、デフォルトで表示されます。デザイン・エディタには、ADFスキンを迅速に変更するための様々なコントロールが用意されています。 |
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にアクセスしてください。
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-3に、コンポーネントのセレクタに次の擬似要素の値を設定した後のコンポーネントの外観を示します。
access-key: 色プロパティがredに設定されています
dropdown-icon-style: 枠線プロパティが2px solid blackに設定されています
ADF Facesコンポーネントによって公開されるセレクタに関する参照情報は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)にあります。
ADFデータ視覚化コンポーネントは、データをグラフィカルな表形式で表現する機能を提供する一連のコンポーネントです。ADFデータ視覚化コンポーネントの例として、グラフ、ガント、ピボット・テーブルおよび階層ビューアがあります。ADFデータ視覚化コンポーネントとその機能の詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)を参照してください。
各ADFデータ視覚化コンポーネント・セレクタによって公開されるプロパティを編集して、ADFデータ視覚化コンポーネントの実行時の外観を変更できます。ADFデータ視覚化コンポーネントによって公開されるセレクタの数は、コンポーネントによって異なります。
図5-4に、カスタマイズ可能なADFデータ視覚化のgaugeコンポーネントのセレクタを表示するためにノードが展開されたADFスキンを示します。
ADFデータ視覚化コンポーネントの外観をカスタマイズするには、各ADFデータ視覚化コンポーネントによって公開されるセレクタのスタイル・プロパティを定義します。ADFスキン用のJDeveloperのセレクタ・エディタまたはADFスキン・エディタに用意されているツールを使用して、ADFデータ視覚化コンポーネントの外観をカスタマイズします。詳細は、第3章「ADFスキン・エディタの使用」を参照してください。
外観を適切に設定するには、ADFデータ視覚化コンポーネントによって公開されるセレクタ、コンポーネントによって参照されることがあるグローバル・セレクタ別名、およびADFスキンの作成時の拡張元となるADFスキンで定義されているグローバル・セレクタ別名について理解する必要があります。コンポーネント自体と他のコンポーネントとの関連についても理解する必要があります。たとえば、図5-5に示すADFデータ視覚化のpivotTableコンポーネントの外観をカスタマイズするには、このセレクタの擬似要素のスタイル・プロパティを定義する必要があります。拡張したADFスキンで定義されている1つ以上のグローバル・セレクタ別名のスタイル・プロパティの変更が必要になる場合もあります。
graphコンポーネントやhierarchyViewerコンポーネントのセレクタなど、多くのADFデータ視覚化コンポーネントのセレクタによって、ADFスキン・プロパティを設定する擬似要素が公開されます。これらのADFスキン・プロパティでは、擬似要素で指定されたエリアの外観を変更します。ADFスキン・プロパティの名前は、-tr-という文字で始まります。たとえば、図5-6に示す階層ビューアのlateral-navigation-buttonセレクタのプロパティは、すべて-tr-で始まっています。
対照的に、図5-7に示すganttコンポーネントのsummary-task-leftセレクタは、このセレクタに対して設定されているプロパティの大部分がCSSプロパティであるため、4つのADFスキン・プロパティ(-tr-rule-ref、-tr-inhibit-など)のみを公開します。
ADFスキン・プロパティの詳細は、第2.3項「ADFスキニング・フレームワークでのプロパティ」を参照してください。
ADFデータ視覚化コンポーネントによって公開されるセレクタ、擬似要素および擬似クラスに関する参照情報は、Oracle Fusion Middleware Oracle ADFスキン・セレクタ・データ視覚化ツール・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)にあります。
コンポーネント固有セレクタを変更する処理は、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントの両方の場合と同じです。セレクタ・エディタのセレクタ・ツリーでFacesコンポーネント・セレクタ・ノードまたはデータの視覚化セレクタ・ノードを開き、変更するコンポーネントのセレクタを選択します。次に、「プロパティ」ウィンドウを使用してこのセレクタの値を設定します。擬似要素のプロパティ、コンポーネント・スタイル・クラス、コンポーネント・セレクタ別名または選択したセレクタが参照する下位セレクタを設定することもできます。さらに、コンポーネント固有セレクタがサポートする擬似クラスを追加できます。擬似クラスの詳細は、第2.2項「ADFスキニング・フレームワークでの擬似クラス」を参照してください。図5-8に、セレクタ・ツリーにおけるADF Facesのtableコンポーネントのスキン・セレクタのビューおよびこのスキン・セレクタに対して設定できる様々なアイテムを示します。
図5-9に、ADF Facesのsimpleスキンのスタイル・プロパティを使用してデータをレンダリングするADF Facesのtableコンポーネントの実行時ビューを示します。
コンポーネント固有セレクタを変更するには、セレクタ・ツリーでセレクタを選択し、「プロパティ」ウィンドウで、セレクタ、その擬似要素または下位セレクタの値を設定します。さらに、コンポーネント固有セレクタによってサポートされている場合は、擬似クラスを追加できます。
コンポーネント固有セレクタを変更するには、次のようにします。
セレクタ・エディタのセレクタ・ツリーで、適切なオプションを選択します。
ADF Facesコンポーネントのセレクタを変更する場合は、Facesコンポーネント・セレクタ・ノードを展開します。
ADFデータ視覚化コンポーネントのセレクタを変更する場合は、データの視覚化セレクタ・ノードを展開します。
たとえば、Facesコンポーネント・セレクタ・ノード、列ノード、擬似要素ノードの順に展開し、column-header-cellセレクタを選択します。
「プロパティ」ウィンドウで、手順1で選択したセレクタによってサポートされているプロパティの値を指定します。
たとえば、「プロパティ」ウィンドウの「共通」セクションで、次の属性の値を設定します。
背景色: 表のヘッダー行に表示する背景色を指定します。
色: 表の列のヘッダー行に表示されるテキストに適用する色を指定します。
プレビュー・ペインで、「擬似クラスの追加」アイコンをクリックして、表示されたサポートされている擬似クラスのリストからサポートされている擬似クラスを選択します。
プレビュー・ペインで「リフレッシュ」アイコンをクリックすると、セレクタに対する変更がセレクタ・エディタに表示されます。セレクタに擬似クラスを追加した場合は、プレビュー・ペインに、擬似クラスが追加されたセレクタのエントリも表示されます。たとえば、図5-10は、:hover擬似クラスが追加されたセレクタのエントリを示しています。
|
注意:
|
セレクタ・エディタは、「プロパティ」ウィンドウでセレクタに対して指定された値を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スキンを拡張するスキンが使用されています。
ADF Faces入力コンポーネントに特定タイプのメッセージが関連付けられているかどうかに基づいて、入力コンポーネントにスタイルを適用できます。コンポーネントに特定タイプのメッセージが追加されると、そのコンポーネントのスタイルは、新しいステータスを反映するように自動的に変更されます。当該メッセージのタイプが定義されていない場合、コンポーネントはADFスキンに定義されているデフォルトのスタイルを使用します。
メッセージ・プロパティのタイプは次のとおりです。
:fatal
:error
:warning
:confirmation
:info
図5-12に、simple ADFスキンを使用してレンダリングされたinputTextコンポーネントを示します。図5-12では、simple ADFスキンによって、エンド・ユーザーが警告を生成する値を入力したときにinputTextコンポーネントに適用される:warningメッセージ・プロパティのスタイル値が定義されています。
図5-13に、図5-12と同じinputTextコンポーネントを示します。図5-13では、エンド・ユーザーがエラーを生成する値を入力しました。その結果、inputTextコンポーネントが:errorメッセージ・プロパティに対して設定されているスタイル・プロパティを使用してレンダリングされます。
ADFスキニング・フレームワークには、メッセージに適用するスタイル・プロパティを定義する多くのグローバル・セレクタ別名が定義されています。図5-14に、セレクタ・ツリーのメッセージ・ノードの下に表示されるグローバル・セレクタ別名のリストを示します。図5-14の右側のプレビュー・ペインは、現在セレクタ・ツリーで選択されているグローバル・セレクタ別名に対して定義されているスタイル・プロパティによって、「表示モード」リストから選択したコンポーネントがどのようにレンダリングされるかを示しています。
ADFスキンでスタイル・プロパティを定義することによって、ADFスキニング・フレームワークに用意されているメッセージのグローバル・セレクタ別名をカスタマイズできます。グローバル・セレクタ別名に対して定義したスタイル・プロパティは、そのグローバル・セレクタ別名を参照するすべてのADF Facesコンポーネントに影響を及ぼします。たとえば、図5-14に示すグローバル・セレクタ別名の枠線の色を緑色に変更すると、「表示モード」リスト内のすべてのADF Facesコンポーネントが緑色の枠線でレンダリングされます。グローバル・セレクタ別名の詳細は、第8章「グローバル・セレクタ別名の使用」を参照してください。
ADF Facesコンポーネントのメッセージの設定に関する詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発(スキニングするアプリケーションに関連するリリース)の「ヒント、メッセージおよびヘルプの表示」を参照してください。
設定するメッセージ・タイプのコンポーネントのセレクタに擬似クラスを追加します。次に、「プロパティ」ウィンドウを使用して擬似クラスのスタイル・プロパティを定義します。
メッセージに適用するADFスキン・プロパティを設定するには、次のようにします。
セレクタ・エディタのセレクタ・ツリーで、Facesコンポーネント・セレクタ・セクションを開き、メッセージに適用するスタイル・プロパティを設定するADF Facesコンポーネントのセレクタを選択します。
たとえば、af|inputTextセレクタを選択して、ADF FacesのinputTextコンポーネントに適用するスタイル・プロパティを設定します。
「擬似クラスの追加」アイコンをクリックして、手順1で選択したセレクタに利用できる擬似クラスのリストを表示します。
スタイル・プロパティを設定するメッセージに対応する擬似クラスを選択します。ADF Facesコンポーネントに対して、次の擬似クラスを利用できます。
fatal
error
warning
confirmation
info
アプリケーションがコンポーネントのメッセージを表示する場合に、実行時にコンポーネントに適用するスタイル・プロパティを設定します。
セレクタ・エディタは、「プロパティ」ウィンドウでセレクタの擬似クラスに対して指定された値をADFスキンのソース・ファイルに書き込みます。たとえば、af|inputTextセレクタのerror擬似クラスに対して枠線色プロパティの値をRedに設定します。図5-15に、ソース・ファイルとADFスキンのプレビュー・ペインに表示される変更を示します。
コンポーネントがエラー・メッセージを表示するときに表示されるスタイル・プロパティを定義する場合は、error擬似クラスを使用します。たとえば、次のように、エラー発生時におけるaf:inputTextコンポーネントのcontent擬似要素の背景色プロパティをRedに設定します。
af|inputText::content:error
{
background-color:Red
}
テーマは、コンポーネント・レベルのルック・アンド・フィールを実装する方法です。テーマの目的は、ページの一部分にある複数のコンポーネント全体で、ルック・アンド・フィールを一貫させることです。テーマは一般的にJSFページ・テンプレートの中で使用し、ある領域に明確な境界を定めたり、アプリケーション内に階層化レイアウトを作成します。たとえば、上部のブランド領域に暗い背景色と明るいテキストが使用され、より明るい背景色のナビゲーション・コンポーネントと、明るい背景色のメイン・コンテンツ領域があるページです。
テーマを設定するコンポーネントにより、子コンポーネントにそのテーマが公開されるため、テーマが継承されます。テーマはaf:documentおよびaf:decorativeBoxコンポーネントによって設定(開始または変更)できます。
Fusion ADFスキンでサポートされるテーマは次のとおりです。
dark
medium
light
なし(default)
ADFスキンのソース・ファイルに次のような構文を入力して、独自のテーマを作成することもできます。
af|document[theme=UserCreated] {}
図5-16に、ユーザーが作成したテーマに加えて、Fusion ADFスキンによって提供される各テーマのスタイル・プロパティを設定できるタブがセレクタ・エディタでどのようにレンダリングされるかを示します。
図5-17は、各種テーマを比較したものです。
前にリストしたテーマに加えて、af|decorativeBoxセレクタで使用されるもう1つのテーマ(contentBody)を図5-18に示します。af:decorativeBoxコンポーネントは、このテーマに対して定義されているスタイル・プロパティを使用してレンダリングされる唯一のコンポーネントです。
次の例に示すように、アプリケーションで、テーマをJSFページのaf:documentコンポーネントの属性として指定することで開始します。
<af:document theme="dark"> <af:panelTabbed>...</af:panelTabbed> </af:document>
|
注意: テーマを |
コンポーネントが親コンポーネントに対する変更を継承しないようにできます。たとえば、af:panelTabbed子コンポーネントがJSFページのaf:document親コンポーネントに定義されているdarkテーマを継承しないようにできます。詳細は、第5.6.3項「コンポーネントが親コンポーネントからテーマを継承しないようにする方法」を参照してください。
デフォルトでは、テーマはコンポーネントやその子コンポーネントには設定されていません。テーマは継承されるため、コンポーネントに設定されていないtheme属性がある場合には、次の値がサポートされます。
指定なし - テーマが指定されていない場合、<af:decorativeBox>...のようにテーマが継承されます。
#{null}: 指定なしの場合と同じように、テーマが継承されます。
inherit - nullの場合と同じように、テーマが継承されます。
default - テーマは、コンポーネントおよびその子コンポーネントから削除されます。
空の文字列 - テーマが空の文字列に設定されている場合は、defaultと同じように動作します。たとえば、<af:decorativeBox theme="">では、コンポーネントおよびその子コンポーネントからテーマが削除されます。
テーマがサポートされ、スタイル・クラスのあるコンポーネントのすべてのHTML要素にテーマが追加されるため、テーマの包含スタイルCSSセレクタは不要です。:ltrおよび:rtlを除いて、すべてのテーマ・セレクタは、必ずセレクタの最後の要素に含まれている必要があります。たとえば、af:breadCrumbsコンポーネントの各ステップにdarkテーマを適用するセレクタは次のとおりです。
af|breadCrumbs::step:disabled[theme="dark"] {
color:#FFFFFF;
}
右から左に表記される環境で同じことを行うには次のセレクタを使用します。
af|breadCrumbs::step:disabled[theme="dark"]:rtl {
color:#FFFFFF;
}
コンポーネントの背景色が、周囲のテーマ色には不適切な色に設定されている場合、色の不適合が起こる場合があります。たとえば、panelHeaderコンポーネントがdarkテーマに配置されている場合、panelHeaderコンポーネント内のCSSスタイルにより、前景色は変更されずに、コンポーネントの背景色が明るい色に設定されます。その結果、コンポーネントは、明るい背景色で明るい前景色になります。その他多くのコンポーネントも、darkテーマに配置されると、前景色が明るい色に設定されます。
色の不適合が発生した場合は、-tr-children-themeプロパティの値を設定して、親コンポーネントと子コンポーネント間の色の不適合を解決できます。親子関係のないコンポーネントの場合は、コンポーネントのテーマ色を、周囲のテーマ色に対して適切な色に手動で設定できます。これを実行するには、コンポーネントにpanelGroupLayoutまたはpanelStretchLayoutコンポーネントを挿入し、panelGroupLayoutまたはpanelStretchLayoutのテーマを適切な色に設定します。
<af:panelHeader text="Header Level 0">
<af:panelGroupLayout layout="vertical" theme="default">
...
</af:panelGroupLayout>
</af:panelHeader>
テーマは、ADFスキンでコンポーネントごとに有効にします。テーマをコンポーネントごとに有効にすると、ADFスキンで使用されない不要なHTML属性が生成されません。
コンポーネント用テーマを有効にするには、次のようにします。
ソース・エディタで、コンポーネントのセレクタの構文を入力して、ADFスキンでコンポーネントのテーマを有効にします。たとえば、outputLabelコンポーネントのADFスキンにおけるテーマ・サポートを有効にするには、次のように入力します。
af|outputLabel {
-tr-enable-themes: true;
}
コンポーネントのテーマ・プロパティを設定するには、設定するテーマに対応するセレクタ・エディタ内のタブを使用します。
ADFスキンでコンポーネントのテーマ・プロパティを設定するには、次のようにします。
セレクタ・エディタのセレクタ・ツリーで、テーマ・プロパティを設定するノードを開きます。
「スタイル・クラス」、Facesコンポーネント・セレクタおよびデータ視覚化コンポーネント・セレクタ・ノードの下に表示されるアイテムを設定できます。
プロパティを設定するテーマに対応するタブをクリックします。
たとえば、darkテーマのプロパティを設定する場合は、図5-19に示すように、Darkテーマをクリックします。
「プロパティ」ウィンドウで、選択したテーマに対して設定するプロパティの値を設定します。
例5-2に、af:panelTabbedコンポーネントのdarkテーマのbackground-colorプロパティをRedに設定した場合にADFスキンのソース・ファイルに表示されるエントリを示します。
子コンポーネントがJSFページの親コンポーネントに対する変更を継承しないようにする場合は、ADFスキンのソース・ファイルで-tr-children-themeプロパティの値を設定します。たとえば、af:panelTabbed子コンポーネントがJSFページのaf:document親コンポーネントに定義されているdarkテーマを継承しないようにします。例5-3に示すように、ADFスキンのソース・ファイルで-tr-children-themeプロパティを設定します。
コンポーネントが特定のテーマに対する変更を継承しないようにする場合は、テーマが適用されたバージョンを指定する必要があります。例5-3では、これはdarkテーマです。mediumテーマに対する変更を継承しないようにする場合は、mediumテーマのソース・ファイルで-tr-children-themeプロパティを設定します。
Oracle ADFでは、ADF Facesコンポーネントを使用して開発されたアプリケーションを障害のある方が使用できるようにするために、アプリケーションのアクセシビリティ・サポートを提供しています。アプリケーションのアクセシビリティを確保する取り組みの一環として、ADFスキンで障害のある方向けのスタイル・プロパティを定義できます。これらのスタイル・プロパティは、@accessibility-profileルールで始めます。
@accessibility-profileルールを使用すると、trinidad-config.xmlファイルで指定できるhigh-contrastおよびlarge-fontsアクセシビリティ・プロファイル設定のスタイル・プロパティを定義できます。trinidad-config.xmlファイルの詳細は、第12.3項「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ページの開発」を参照してください。
設定するセレクタまたはセレクタの擬似要素のスタイル・プロパティを定義し、そのスタイル・プロパティを@accessibility-profileルールで始めます。
アクセシビリティを考慮したADFスキンを設定するには、次のようにします。
第5.4項「コンポーネント固有セレクタの変更」の説明に従って、設定するセレクタおよびセレクタの擬似要素のスタイル・プロパティを定義します。
例5-4に示すように、ADFスキンのソース・ファイルで、設定したスキニング・キーを@accessibility-profileルールで始めます。
