| Oracle® Fusion Middleware Oracle ADFスキンの開発 12c (12.2.1) E69962-01 |
|
 前 |
 次 |
この章の内容は次のとおりです。
グローバル・セレクタ別名では、複数のADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに適用できるスタイル・プロパティをADFスキンの1つの場所で定義します。グローバル・セレクタ別名は、セレクタ別名または単にセレクタと呼ばれる場合もあります。「Oracle ADFで提供されるADFスキンの継承関係」および「Oracle ADFで提供されるADFスキン」で説明している、Oracle ADFで提供されるADFスキンは、グローバル・セレクタ別名を活用して、コンポーネントのテキスト、メッセージ、アイコン、色および様々なグループに関する共通のスタイル・プロパティを定義します。これらのグローバル・セレクタ別名で定義されたスタイルは、数多くのコンポーネント固有セレクタによって継承されます。たとえば、.AFDefaultFontFamily:aliasグローバル・セレクタ別名では、テキストを表示するアプリケーションにおけるすべてのADF Facesコンポーネントのデフォルト・フォント・ファミリを定義します。Oracle ADFで提供されるいずれかのADFスキンを拡張して作成したADFスキンは、.AFDefaultFontFamily:aliasグローバル・セレクタ別名で定義されているプロパティを継承します。図9-1は、af|buttonセレクタによる.AFDefaultFontFamily:aliasグローバル・セレクタ別名からのフォント・ファミリ値の継承がセレクタ・エディタでどのように表示されるかを示しています。
図9-1 コンポーネント・セレクタによるグローバル・セレクタ別名からの値の継承
図9-1には、グローバル・セレクタ別名の他のカテゴリも示されています。各カテゴリでは、その目的に応じてグローバル・セレクタ別名をグループ化しています。
色: Oracle ADFで提供されるADFスキンで使用する色を定義します。場合によっては、このカテゴリに表示される数多くのグローバル・セレクタ別名をオーバーライドします。これは、これらの別名によって、Webアプリケーションに表示されるほとんどの色が決定されるためです。これらのグローバル・セレクタ別名に加えた変更は、「ADFスキン・セレクタおよびアイコン・イメージ」で説明している、AltaまたはSkyros ADFスキンを拡張した場合に最も大きく影響を及ぼします。アンカー・カラーに分類されるグローバル・セレクタ別名を変更することで、これらのADFスキンを拡張するADFスキンのカラー・パレットを比較的迅速に変更できます。詳細は、「ADFスキンのアンカー・カラーの使用」を参照してください。
ヒント:
他のグローバル・セレクタ別名と同様、「表示モード」リストを使用して、特定のグローバル・セレクタで定義された値を継承するコンポーネント固有セレクタを表示できます。
コンポーネント・グループ: ボタン: ボタンをレンダリングする数多くのADF Facesコンポーネントのセレクタによって継承されるスタイル・プロパティを定義します。たとえば、.AFButtonAccessKeyStyle:aliasグローバル・セレクタ別名では、特に、ADF Facesボタンおよびdialogコンポーネントによってレンダリングされるアクセス・キーのスタイル・プロパティを定義します。
コンポーネント・グループ: フォーム・コントロール: フォーム・コントロールのスタイル・プロパティを定義します。
コンポーネント・グループ: リンク: リンクをレンダリングする数多くのコンポーネントのスタイル・プロパティを定義します。
コンポーネント・グループ: メニュー: メニューをレンダリングする数多くのコンポーネントのスタイル・プロパティを定義します。
コンポーネント・グループ: パネル・ボックスおよびリージョン: panelBoxおよびregionコンポーネントのスタイル・プロパティを定義します。
コンポーネント・グループ: パネル・ヘッダー: panelHeaderコンポーネントのスタイル・プロパティを定義します。
フォント: フォントのスタイル・プロパティを定義します。たとえば、.AFDefaultFontFamily:aliasグローバル・セレクタ別名では、数多くのADF Facesコンポーネント・セレクタによって継承されるスタイル・プロパティを定義します。
アイコン: 複数のコンポーネントでレンダリングするアイコンに適用するスタイル・プロパティを定義します。
メッセージ・セレクタ: ADF Faces入力コンポーネントが異なるタイプのメッセージをレンダリングする場合に表示するメッセージのスタイル・プロパティを定義します。詳細は、「メッセージに適用するADFスキン・プロパティの設定」を参照してください。
その他: 他のカテゴリに当てはまらないグローバル・セレクタ別名を定義します。たとえば、.AFDynamicHelpIconStyle:aliasグローバル・セレクタ別名では、動的ヘルプ・アイコンに使用するスタイルを定義します。
グローバル・セレクタ別名の詳細な説明は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンスを参照してください。定義したグローバル・セレクタ別名は、図9-1の.UserDefined:aliasのエントリで示されているように、グローバル・セレクタ別名ノードの下に表示されます。
セレクタ・ツリーでグローバル・セレクタ別名を選択すると、「表示モード」リストには、グローバル・セレクタ別名を参照するコンポーネントのリストが表示されます。図9-2では、ユーザーがリストから「パネル・ウィンドウ」を選択していますが、これは、panelWindowコンポーネントがこのグローバル・セレクタ別名を参照しているためです。
注意:
「表示モード」リストにコンポーネントが表示されるものの、そのコンポーネントではグローバル・セレクタ別名で定義されたスタイル・プロパティによるレンダリングが行われないない場合があります。このことは、コンポーネントが、最初は拡張ADFスキンのグローバル・セレクタ別名を参照していたが、使用するADFスキンによってそのコンポーネントのグローバル・セレクタ別名がオーバーライドされたために発生することがあります。または、コンポーネント自体が、そのスタイル関連の属性(styleClassまたはinlineStyle)のいずれかを使用してグローバル・セレクタ別名をオーバーライドしたことによって発生することがあります。
図9-2に、ユーザーが.AFDefaultFontFamily:aliasグローバル・セレクタ別名の継承された値を変更し、panelWindowコンポーネントに適用した場合の変更結果を示します。.AFDefaultFontFamily:aliasグローバル・セレクタ別名の値を継承するすべてのセレクタが、ADFスキンで定義されたフォント・ファミリを使用して実行時にレンダリングします。たとえば、dialogおよびpanelWindowコンポーネントの両方がこのフォント・ファミリを使用してレンダリングします。
図9-2 ADFスキンによるグローバル・セレクタ別名の変更
すでに説明したグローバル・セレクタ別名以外に、数多くのコンポーネント・セレクタが、それらのコンポーネントに固有のセレクタ別名を定義します。これらのセレクタ別名は、セレクタ・ツリーのコンポーネント・セレクタのノードの下に表示されます。図9-3に、このようなタイプのセレクタ別名を公開する様々なコンポーネント・セレクタの例を示します。
図9-3 コンポーネント・セレクタ別名
数多くのセレクタによって参照されるスタイル・プロパティを1つの場所に定義するために、グローバル・セレクタ別名を作成できます。新規グローバル・セレクタ別名の名前を「別名セレクタの作成」ダイアログに入力します。JDeveloperのADFスキンのエディタにより、このダイアログに入力した名前にキーワード:aliasが付加され、先頭に.が追加されます。たとえば、このダイアログに名前としてmyGlobalSelectorを入力した場合は、結果としてユーザー・インタフェースおよびADFスキンのソース・ファイルに表示される名前は次のようになります。
.myGlobalSelector:alias
キーワード:aliasは、グローバル・セレクタ別名をCSS擬似クラスとして識別するのに使用され、ADFスキンのソース・ファイルでCSSコードを編成する場合の構文の支援として役立ちます。
グローバル・セレクタ別名を作成したら、そこに含めるスタイル・プロパティを定義するために変更します。詳細は、「グローバル・セレクタ別名の変更」を参照してください。
数多くのユーザー・インタフェース・コンポーネントによって使用されるスタイル・プロパティを定義するグローバル・セレクタ別名を作成できます。
グローバル・セレクタ別名を作成するには、次のようにします。
図9-4 セレクタ・ツリーでの「新規別名セレクタ」オプション
「別名セレクタの作成」ダイアログが開きます。
「グローバル・セレクタ別名について」で説明している、グローバル・セレクタ別名の任意のカテゴリを変更できます。ADFスキンを初めて作成したときにセレクタ・ツリーのグローバル・セレクタ別名ノードの下に表示されるグローバル・セレクタ別名を変更することは、ADFスキンの親ADFスキンで定義された継承スタイル・プロパティをオーバーライドすることを意味します。親ADFスキンとは、ADFスキンの拡張元であるADFスキンです。「ADFスキン・ファイルの作成」で説明しているように、ADFスキンを作成する場合は拡張元のADFスキンを選択します。グローバル・セレクタ別名を変更すると、そのグローバル・セレクタ別名で定義されているスタイル・プロパティを継承するコンポーネント固有セレクタは、変更された値を使用するようになります。
ADFスキンで作成したグローバル・セレクタ別名を変更しても、親ADFスキンから継承したスタイル・プロパティはオーバーライドされません。
グローバル・セレクタ別名を、「Properties」ウィンドウでその値を設定して、変更します。次に、加えた変更が意図したとおりにコンポーネント固有セレクタに適用されていることを確認します。
グローバル・セレクタ別名を変更するには、次のようにします。
たとえば、デフォルトのフォント・ファミリを定義するグローバル・セレクタ別名を変更する場合は、それを図9-6に示すように選択します。
図9-6 グローバル・セレクタ別名の変更
ADFスキンでグローバル・セレクタ別名を作成した後に、そのグローバル・セレクタ別名で定義したスタイル・プロパティを使用して実行時にレンダリングするADF FacesコンポーネントとADFデータ視覚化コンポーネントを指定する必要があります。
グローバル・セレクタ別名をADF FacesコンポーネントまたはADFデータ視覚化コンポーネントに適用するには、次を実行する必要があります。
グローバル・セレクタ別名で定義したスタイル・プロパティを適用する各コンポーネントのセレクタ、擬似要素または擬似クラスを選択します。グローバル・セレクタ別名で定義したスタイル・プロパティを別のグローバル・セレクタ別名に適用する場合は、ターゲットのグローバル・セレクタ別名を選択します。
-tr-rule-ref-ADFスキン・プロパティの値としてグローバル・セレクタ別名を設定します。
グローバル・セレクタ別名は、-tr-rule-ref-ADFスキン・プロパティの値として指定することで適用します。
グローバル・セレクタ別名を適用するには、次のようにします。
selectorキーワードを先頭に付け、引用符で囲んだ名前を入力します。たとえば、グローバル・セレクタ別名の名前が.MyBackgroundColor:aliasである場合は、図9-7で示すようにselector(".MyBackgroundColor:alias")と入力します。
図9-7 inputTextコンポーネントのcontent擬似要素
グローバル・セレクタ別名を適用したセレクタは、そのグローバル・セレクタ別名で定義されたスタイル・プロパティを継承します。図9-8に、.MyBackgroundColor:aliasグローバル・セレクタ別名で定義されたスタイル・プロパティを継承する、inputTextコンポーネントのセレクタのcontent擬似要素を示します。-tr-rule-refADFスキン・プロパティの値としてグローバル・セレクタ別名を指定した場合、そのグローバル・セレクタ別名から値を継承するプロパティは、図9-8の「背景色」および「色」フィールドで示されているように、継承アイコンを使用するように更新されます。
実行時に、inputTextコンポーネントのコンテンツ領域は、グローバル・セレクタ別名で定義されたスタイル・プロパティを使用してレンダリングされます。
図9-8 inputTextコンポーネントに適用されたグローバル・セレクタ別名
拡張ADFスキンのグローバル・セレクタ別名をオーバーライドした場合、–tr-rule-ref ADFスキン・プロパティを使用して親ADFスキンのスタイル・プロパティの値を判別していたコンポーネント・セレクタは、グローバル・セレクタ別名のオーバーライドされた値を使用するようになります。次の例に、ADFスキンAを拡張したADFスキンBを示します。実行時に、decorativeBoxコンポーネントの最上部はbackground-color CSSプロパティにより赤でレンダリングされますが、これは、ADFスキンBのグローバル・セレクタ別名によってADFスキンAがオーバーライドされるためです。
/** Skin A **/
/** ---------------------------------- **/
.MyBackColor:alias
{
background-color: blue
}
af|decorativeBox::top
{
-tr-rule-ref: selector(".MyBackColor:alias");
}
/** Skin B **/
/** ---------------------------------- **/
.MyBackColor:alias
{
background-color: Red
}
拡張ADFスキンのスタイル・プロパティ値を指定し、その親ADFスキンでもスタイル・プロパティの値が指定されている場合、ADFスキニング・フレームワークは拡張ADFスキンの値を適用します。例9-1に、.myClassスタイル・クラスがbackground-color CSSプロパティの値としてRedを指定しているADFスキンCを示します。アプリケーションでADFスキンD (ADFスキンCを拡張したもの)を使用する場合、.myClassスタイル・クラスを適用するコンポーネントは、background-color CSSプロパティにLimeを適用します。これは、ADFスキニング・フレームワークでは、ADFスキンの値(–tr-rule-refなど)が含まれている文の値が最初に計算されるためです。ADFスキニング・フレームワークは特定のプロパティ(background-colorなど)を次に計算します。結果として、ADFスキンDのbackground-color CSSプロパティの値(Lime)が、-tr-rule-ref ADFスキン・プロパティの値(Blue)や、ADFスキンCの継承された値(Red)をオーバーライドします。
注意:
その後、ADFスキンDで次のように.myClassスタイル・クラスをオーバーライドした場合、ADFスキニング・フレームワークがbackground-color CSSプロパティに適用する値は、Blueになります。
.myClass {-tr-rule-ref: selector(".MyBlueColor:alias")}
アプリケーションを実行して、ADFスキニング・フレームワークが実行時にセレクタに適用するスタイル・プロパティ値を特定する場合は、Mozilla Firefoxブラウザ(または類似のブラウザ)のFirebugなどのツールを使用することを検討します。詳細は、「ADFスキンの変更のテスト」を参照してください。
例9-1 ローカル・グローバル・セレクタ別名のオーバーライド
/** ADF skin C **/
/** ---------------------------------- **/
.myClass {
background-color: Red
}
/** ADF skin D **/
/** ---------------------------------- **/
.MyBackColor:alias {
background-color: Blue;
}
.myClass {
background-color: Lime;
-tr-rule-ref: selector(".MyBackColor:alias")
}
スタイル・プロパティを適用するセレクタごとに特定のスタイル・プロパティを設定するのではなく、-tr-property-ref ADFスキン・プロパティを使用してプロパティの値を参照できます。このADFスキン・プロパティをグローバル・セレクタ別名およびコンポーネント固有セレクタに対して構成できます。たとえば、グローバル・セレクタ別名でbackground-colorプロパティの値を定義して、他の複数のセレクタからこの値を参照できます。background-colorプロパティの値を後で変更することにした場合は、グローバル・セレクタ別名でこの値を変更します。-tr-property-ref ADFスキン・プロパティを使用してbackground-colorプロパティを参照するすべてのセレクタは、行われた変更を使用するように更新されます。-tr-property-ref ADFスキン・プロパティは、borderなど、compact CSSプロパティで使用することもできます。
-tr-property-ref ADFスキン・プロパティを使用して、セレクタに使用するプロパティ値を参照します。
別のセレクタからプロパティ値を参照するには、次のようにします。
たとえば、panelWindowコンポーネントのコンテンツ領域が別のセレクタで定義されたスタイル・プロパティを参照する場合は、図9-9に示すように、panelWindowコンポーネントの擬似要素ノードの下にある「content」を選択します。
図9-9 パネル・ウィンドウ・コンポーネントのcontent擬似要素
「プロパティ」ウィンドウでは、図9-10に示すように、-tr-property-ref ADFスキン・プロパティを使用して別のセレクタの値を参照するように値を設定されたプロパティが、その値をどのように継承しているかが示されます。
図9-10 別のセレクタのプロパティ値を参照するセレクタ・プロパティ
次の例に類似した構文がADFスキンのソース・ファイルに表示されます。
@charset "UTF-8";
/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";
.MyColor:alias {
color: rgb(255, 181, 99);
font-weight: bold;
}
.AFDefaultColor:alias {
color: Red;
}
af|panelWindow::content {
background-color: -tr-property-ref(".MyColor:alias", "color");
border: 10px solid -tr-property-ref(".AFDefaultColor:alias", "color");}
