この章の内容は次のとおりです。
グローバル・セレクタ別名では、複数の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コードを編成する場合の構文の支援として役立ちます。
グローバル・セレクタ別名を作成したら、そこに含めるスタイル・プロパティを定義するために変更します。詳細は、「グローバル・セレクタ別名の変更」を参照してください。
数多くのユーザー・インタフェース・コンポーネントによって使用されるスタイル・プロパティを定義するグローバル・セレクタ別名を作成できます。
グローバル・セレクタ別名を作成するには、次のようにします。
「グローバル・セレクタ別名について」で説明している、グローバル・セレクタ別名の任意のカテゴリを変更できます。ADFスキンを初めて作成したときにセレクタ・ツリーのグローバル・セレクタ別名ノードの下に表示されるグローバル・セレクタ別名を変更することは、ADFスキンの親ADFスキンで定義された継承スタイル・プロパティをオーバーライドすることを意味します。親ADFスキンとは、ADFスキンの拡張元であるADFスキンです。「ADFスキン・ファイルの作成」で説明しているように、ADFスキンを作成する場合は拡張元のADFスキンを選択します。グローバル・セレクタ別名を変更すると、そのグローバル・セレクタ別名で定義されているスタイル・プロパティを継承するコンポーネント固有セレクタは、変更された値を使用するようになります。
ADFスキンで作成したグローバル・セレクタ別名を変更しても、親ADFスキンから継承したスタイル・プロパティはオーバーライドされません。
ADFスキンでグローバル・セレクタ別名を作成した後に、そのグローバル・セレクタ別名で定義したスタイル・プロパティを使用して実行時にレンダリングするADF FacesコンポーネントとADFデータ視覚化コンポーネントを指定する必要があります。
グローバル・セレクタ別名をADF FacesコンポーネントまたはADFデータ視覚化コンポーネントに適用するには、次を実行する必要があります。
グローバル・セレクタ別名で定義したスタイル・プロパティを適用する各コンポーネントのセレクタ、擬似要素または擬似クラスを選択します。グローバル・セレクタ別名で定義したスタイル・プロパティを別のグローバル・セレクタ別名に適用する場合は、ターゲットのグローバル・セレクタ別名を選択します。
-tr-rule-ref-
ADFスキン・プロパティの値としてグローバル・セレクタ別名を設定します。
グローバル・セレクタ別名は、-tr-rule-ref-
ADFスキン・プロパティの値として指定することで適用します。
グローバル・セレクタ別名を適用するには、次のようにします。
グローバル・セレクタ別名を適用したセレクタは、そのグローバル・セレクタ別名で定義されたスタイル・プロパティを継承します。図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スキン・プロパティを使用して、セレクタに使用するプロパティ値を参照します。
別のセレクタからプロパティ値を参照するには、次のようにします。
「プロパティ」ウィンドウでは、図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");}