| Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの作成 12c (12.1.2) E48016-01 |
|
 前 |
 次 |
この章では、@ルールの処理方法について説明します。@ルールの作成、変更および適用方法に関する情報を提供し、さらにADFスキニング・フレームワークが定義する様々なタイプの@ルールを説明します。
この章には次の項が含まれます:
CSS @ルール(@ルール)は、アプリケーションのページが、ブラウザ、プラットフォームまたはロケールなどの特定の環境でレンダリングされる場合のスタイル・プロパティを定義する方法です。ADFスキニング・フレームワークは、特定の環境に適用するセレクタのプロパティを定義できるいくつかの@ルールを定義します。
たとえば、他のブラウザでは必要ないなんらかのパディングをInternet Explorerで追加する必要がある場合や、Linuxでのフォント・スタイルを他のプラットフォームでのフォント・スタイルとは異なるものにする場合があります。特定のユーザー環境用にセレクタをスタイル設定するには、そのスキニング情報を@ルール内に含めます。
ADFスキン・エディタのセレクタ・エディタおよびJDeveloperのセレクタ・エディタは、第10.2項「@ルールの作成」で説明しているように、ADFスキン内での@ルールの作成をサポートしています。元のADFスキンを拡張したADFスキン内で定義される@ルールまたは元のADFスキン内で定義した@ルールは、図10-4に示すように、@ルール・ノードの下のセレクタ・ツリーに表示されます。
この章で説明する@ルール以外にも、@import @ルールを使用して別のADFスキンを元のADFスキンにインポートすることもできます。詳細は、第4.4項「1つ以上のADFスキンを現在のADFスキンにインポートする」を参照してください。
ADFスキンに新しい@ルールを作成することも、ADFスキンが拡張元ADFスキンから継承した@ルールをオーバーライドすることもできます。@ルールを作成した後、含めるスタイル・プロパティを定義するように変更します。
表10-1に、ADFスキニング・フレームワークがサポートするいくつかの@ルールを示します。表10-1に示すルール以外に、最も多く使用される@ルールとして、1つ以上のブラウザに適用するスタイルを定義できる@agent @ルールがあります。
ブラウザ・エージェント専用のスタイルを設定するための値としてサポートされているのは次のとおりです。
blackberry
email
gecko
genericDesktop
genericpda
googlebot
ie
konqueror
mozilla
msnbot
nokia_s60
opera
oracle_ses
unknown
webkit (SafariおよびGoogle Chromeにマップします)
@agent @ルールを使用して次のことができます。
Internet Explorerの任意のバージョンのスタイルを指定する場合は次のようになります。
@agent ie
オプションで、andキーワードを使用してエージェントの特定のバージョンを指定します。たとえば、Internet Explorerのバージョン9を指定する場合は次のようになります。
@agent ie and (version: 9)
複数のエージェントのスタイルを指定する場合は、カンマ区切りリルールを使用します。たとえば、Internet Explorer 8.x、Internet Explorer 9.xまたはGecko 1.9のスタイルを指定する場合は次のルールを使用します。
@agent ie and (version: 8), ie and (version: 9), gecko and (version: 1.9)
次の2つの構文例では、同じルールが指定されていることに注意してください。
@agent ie and (version: 8.*)
@agent ie and (version: 8)
Internet Explorer 8.0.xにのみ適用するスタイルのルールを指定する場合は、次のように記述します。
@agent ie and (version: 8.0.x)
バージョンの範囲を指定するには、max-versionキーワードとmin-versionキーワードを使用します。たとえば、次のルールを再記述できます。
@agent ie and (version: 8), ie and (version: 9)
次のように書き直すことができます。
@agent ie and (min-version: 8) and (max-version: 9)
定義したスタイルをInternet Explorer 8および9のすべてのバージョンに適用します。
@agentルールを使用して、タッチ・デバイスのエージェントに適用するスタイルを指定することもできます。次の例に、この機能を構成するADFスキン・ファイルに記述する構文を示します。
@agent (touchScreen) {
/* Touchscreen specific styles for all touch devices: both single and multiple touch. */
}
@agent (touchScreen:single) {
/* Styles specific for a touch device with single touch. */
}
@agent (touchScreen:multiple) {
/* Styles specific for a touch device with multiple touch. */
}
@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;
}
}
図10-2に、@agent (touchScreen:none) @ルールを適用したセレクタがセレクタ・ツリーに表示される様子を示します。
タッチ・デバイスにレンダリングするアプリケーションの作成の詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発(スキニングするアプリケーションに関連するリリース)の付録「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
表10-1 ADFスキンの@ルール
| 名前 | 説明 |
|---|---|
|
|
|
|
|
特定の言語および国のみのスタイルを定義するロケールを指定します。言語のみまたは言語と国の両方を指定できます。例10-1に、ロケールがドイツ語( ADFスキニング・フレームワークでは、 |
|
|
特定のモードでページがレンダリングされる場合のスタイルを定義します。この@ルールでは次の値がサポートされます。
|
|
|
プラットフォーム・スタイルを定義します。サポートされている値は次のとおりです。
|
@ルールで指定した条件に適合した場合に1つ以上のセレクタのスタイル・プロパティが特定の方法でレンダリングされるように指定する@ルールを作成できます。
@ルールを作成する手順は次のとおりです。
図10-3に示すように、セレクタ・ツリーのセレクタ・エディタで、ドロップダウン・リストから「新規セレクタと@ルール」を選択します。
|
ヒント: @ルールを構成するセレクタの名前がわかっている場合は、セレクタ・ツリーでそのセレクタを右クリックし、コンテキスト・メニューの「新規セレクタと@ルール」を選択します。これで「@ルール宣言の作成」ダイアログの「セレクタ」フィールドに、右クリックしたセレクタ名が移入されます。 |
「@ルール宣言の作成」ダイアログで、「ルール」ドロップダウン・リストから構成する@ルールを選択します。
サポートされている@ルールの詳細は、第10.2項「@ルールの作成」を参照してください。
「OK」をクリックします。
セレクタ・ツリーで新しく作成した@ルールを選択し、「プロパティ」ウィンドウで、この@ルールを適用するプロパティを構成します。
図10-4に示すように、@ルールはセレクタ・ツリーの「@ルール」ノードの下に表示され、コンポーネントにそれが適用されるときのビジュアル表示はプレビュー・ペインに表示されます。図10-4に示すように、作成した@ルールおよび変更したすべてのプロパティのCSS構文もADFスキンのソース・ファイルに表示されます。
図10-5で示すように、@ルールを設定したセレクタ・プロパティの「プロパティ」ウィンドウに、@ルールが設定されたことを示すアイコンが表示されます。
実行時に、ADFスキニング・フレームワークは、エージェントやプラットフォームなどのHTTPリクエスト情報に基づいて@ルール付きのスタイルを選択し、ルールのないスタイルとマージします。ルールと一致するスタイル・プロパティは、すべてのルールに該当しないプロパティとマージされます。ユーザーの環境と最も一致する特定のルールが優先されます。
例10-1に、最終的なスタイルを提供するために一緒にマージされる、ADFスキンのソース・ファイル内のセレクタをいくつか示します。
例10-1 ADFスキン内のスタイル・セレクタのマージ
/** 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}
}
}
/** Define default properties for the af|panelFormLayout selector. **/
af|panelFormLayout {
color: red;
width: 10px;
padding: 4px
}
/** Define at-rule for af|panelFormLayout on Internet Explorer (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|panelFormLayout {width: 25px; height: 10px}
}
/** For IE 8 and 9, we also need some margins.*/
@agent ie( version:8)and( version:9){
af|panelFormLayout {margin: 5px;}
}
/** For Firefox 3 (Gecko 1.9) use a smaller margin.*/
@agent gecko( version:1.9){
af|panelFormLayout {margin: 4px;}
}
