Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド 11g リリース2 (11.1.2.1.0) B66161-01 |
|
![]() 前 |
![]() 次 |
この章では、グローバル・セレクタ別名の使用方法について説明します。グローバル・セレクタ別名の作成、変更および適用方法に関する情報を提供し、別のセレクタからプロパティ値を参照する方法について説明します。
この章には、次の項があります。
グローバル・セレクタ別名では、複数のADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに適用できるスタイル・プロパティをADFスキンの1つの場所で定義します。グローバル・セレクタ別名は、セレクタ別名または単にセレクタと呼ばれる場合もあります。第1.5項「Oracle ADFで提供されるADFスキンの継承関係」および第11.4項「Oracle ADFで提供されるADFスキン」で説明している、Oracle ADFで提供されるADFスキンは、グローバル・セレクタ別名を活用して、コンポーネントのテキスト、メッセージ、アイコン、色および様々なグループに関する共通のスタイル・プロパティを定義します。これらのグローバル・セレクタ別名で定義されたスタイルは、数多くのコンポーネント固有セレクタによって継承されます。たとえば、.AFDefaultFontFamily:alias
グローバル・セレクタ別名では、テキストを表示するアプリケーションにおけるすべてのADF Facesコンポーネントのデフォルト・フォント・ファミリを定義します。Oracle ADFで提供されるいずれかのADFスキンを拡張して作成したADFスキンは、.AFDefaultFontFamily:alias
グローバル・セレクタ別名で定義されているプロパティを継承します。図8-1は、af|commandButton
セレクタによる.AFDefaultFontFamily:alias
グローバル・セレクタ別名からのフォント・ファミリ値の継承がビジュアル・エディタでどのように表示されるかを示しています。
図8-1には、グローバル・セレクタ別名の他のカテゴリも示されています。各カテゴリでは、その目的に応じてグローバル・セレクタ別名をグループ化しています。
色: Oracle ADFで提供されるADFスキンで使用する色を定義します。場合によっては、このカテゴリに表示される数多くのグローバル・セレクタ別名をオーバーライドします。これは、これらの別名によって、Fusion Webアプリケーションに表示されるほとんどの色が決定されるためです。これらのグローバル・セレクタ別名に加えた変更は、第11.4項「Oracle ADFで提供されるADFスキン」で説明している、ADFスキンのFusion Simpleファミリを拡張した場合に最も大きく影響を及ぼします。他のグローバル・セレクタ別名と同様、「表示モード」リストを使用して、特定のグローバル・セレクタで定義された値を継承するコンポーネント固有セレクタを表示できます。
コンポーネント・グループ: ボタン: ボタンをレンダリングする数多くのADF Facesコンポーネントのセレクタによって継承されるスタイル・プロパティを定義します。たとえば、.AFButtonAccessKeyStyle:alias
グローバル・セレクタ別名では、特に、ADF Facesボタンおよびdialogコンポーネントによってレンダリングされるアクセス・キーのスタイル・プロパティを定義します。
コンポーネント・グループ: フォーム・コントロール: フォーム・コントロールのスタイル・プロパティを定義します。
コンポーネント・グループ: リンク: 数多くのリンク・コンポーネントのスタイル・プロパティを定義します。
コンポーネント・グループ: パネル・ボックスおよびリージョン: panelBox
およびregion
コンポーネントのスタイル・プロパティを定義します。
コンポーネント・グループ: タブ: タブをレンダリングする数多くのADF Facesコンポーネントのスタイル・プロパティを定義します。たとえば、.AFFormAccessKeyStyle:alias
グローバル・セレクタ別名では、ADF FacesのpanelTabbed
コンポーネントとnavigationPane
コンポーネントでレンダリングするアクセス・キーのスタイル・プロパティを定義します。
フォント: フォントのスタイル・プロパティを定義します。たとえば、.AFDefaultFontFamily:alias
グローバル・セレクタ別名では、数多くのADF Facesコンポーネント・セレクタによって継承されるスタイル・プロパティを定義します。
アイコン: 複数のコンポーネントでレンダリングするアイコンに適用するスタイル・プロパティを定義します。
メッセージ: ADF Faces入力コンポーネントが異なるタイプのメッセージをレンダリングする場合に表示するメッセージのスタイル・プロパティを定義します。詳細は、第5.5項「メッセージに適用するADFスキン・プロパティの設定」を参照してください。
その他: 他のカテゴリに当てはまらないグローバル・セレクタ別名を定義します。たとえば、.AFDynamicHelpIconStyle:alias
グローバル・セレクタ別名では、動的ヘルプ・アイコンに使用するスタイルを定義します。
テキスト: テキストに使用するスタイル・プロパティを定義します。
グローバル・セレクタ別名の詳細な説明は、Oracle Fusion Middleware Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)を参照してください。定義したグローバル・セレクタ別名は、図8-1の.UserDefined:alias
のエントリで示されているように、グローバル・セレクタ別名ノードの下に表示されます。
セレクタ・ツリーでグローバル・セレクタ別名を選択すると、「表示モード」リストには、グローバル・セレクタ別名を参照するコンポーネントのリストが表示されます。図8-2では、ユーザーがリストから「パネル・ウィンドウ」を選択していますが、これは、panelWindow
コンポーネントがこのグローバル・セレクタ別名を参照しているためです。
注意: 「表示モード」リストにコンポーネントが表示されるものの、そのコンポーネントではグローバル・セレクタ別名で定義されたスタイル・プロパティによるレンダリングが行われないない場合があります。このことは、コンポーネントが、最初は拡張ADFスキンのグローバル・セレクタ別名を参照していたが、使用するADFスキンによってそのコンポーネントのグローバル・セレクタ別名がオーバーライドされたために発生することがあります。または、コンポーネント自体が、そのスタイル関連の属性(styleClass またはinlineStyle )のいずれかを使用してグローバル・セレクタ別名をオーバーライドしたことによって発生することがあります。 |
図8-2に、ユーザーが.AFDefaultFontFamily:alias
グローバル・セレクタ別名の継承された値を変更し、panelWindow
コンポーネントに適用した場合の変更結果を示します。.AFDefaultFontFamily:alias
グローバル・セレクタ別名の値を継承するすべてのセレクタが、ADFスキンで定義されたフォント・ファミリを使用して実行時にレンダリングします。たとえば、dialog
およびpanelWindow
コンポーネントの両方がこのフォント・ファミリを使用してレンダリングします。
すでに説明したグローバル・セレクタ別名以外に、数多くのコンポーネント・セレクタが、それらのコンポーネントに固有のセレクタ別名を定義します。これらのセレクタ別名は、セレクタ・ツリーのコンポーネント・セレクタのノードの下に表示されます。図8-3に、このようなタイプのセレクタ別名を公開する様々なコンポーネント・セレクタの例を示します。
数多くのセレクタによって参照されるスタイル・プロパティを1つの場所に定義するために、グローバル・セレクタ別名を作成できます。新規グローバル・セレクタ別名の名前を「別名セレクタの作成」ダイアログに入力します。ADFスキン・エディタにより、このダイアログに入力した名前にキーワード:alias
が付加され、先頭に.
が追加されます。たとえば、このダイアログに名前としてmyGlobalSelector
を入力した場合は、結果としてユーザー・インタフェースおよびADFスキンのソース・ファイルに表示される名前は次のようになります。
.myGlobalSelector:alias
キーワード:alias
は、グローバル・セレクタ別名をCSS擬似クラスとして識別するのに使用され、ADFスキンのソース・ファイルでCSSコードを編成する場合の構文の支援として役立ちます。
グローバル・セレクタ別名を作成したら、そこに含めるスタイル・プロパティを定義するために変更します。詳細は、第8.3項「グローバル・セレクタ別名の変更」を参照してください。
数多くのユーザー・インタフェース・コンポーネントによって使用されるスタイル・プロパティを定義するグローバル・セレクタ別名を作成できます。
グローバル・セレクタ別名を作成するには、次のようにします。
ビジュアル・エディタのセレクタ・ツリーで、図8-4に示すように、プラス・アイコンのリストから「新規別名セレクタ」を選択します。
「別名セレクタの作成」ダイアログが開きます。
グローバル・セレクタ別名の名前を「別名セレクタ名」フィールドに入力します。
ヒント: グローバル・セレクタ別名には、その目的を表す名前を入力します。たとえば、エンド・ユーザーがリンク上にマウスを置いたときにリンクの色を変更するグローバル・セレクタ別名の場合は、MyLinkHoverColor とします。 |
「OK」をクリックします。
プロパティ・インスペクタで、グローバル・セレクタ別名で構成するプロパティの値を設定します。
第8.1項「グローバル・セレクタ別名について」で説明している、グローバル・セレクタ別名の任意のカテゴリを変更できます。ADFスキンを初めて作成したときにセレクタ・ツリーのグローバル・セレクタ別名ノードの下に表示されるグローバル・セレクタ別名を変更することは、ADFスキンの親ADFスキンで定義された継承スタイル・プロパティをオーバーライドすることを意味します。親ADFスキンとは、ADFスキンの拡張元であるADFスキンです。第4.4項「ADFスキン・ファイルの作成」で説明しているように、ADFスキンを作成する場合は拡張元のADFスキンを選択します。グローバル・セレクタ別名を変更すると、そのグローバル・セレクタ別名で定義されているスタイル・プロパティを継承するコンポーネント固有セレクタは、変更された値を使用するようになります。
ADFスキンで作成したグローバル・セレクタ別名を変更しても、親ADFスキンから継承したスタイル・プロパティはオーバーライドされません。
グローバル・セレクタ別名を変更するには、プロパティ・インスペクタでグローバル・セレクタ別名の値を設定します。次に、加えた変更が意図したとおりにコンポーネント固有セレクタに適用されていることを確認します。
グローバル・セレクタ別名を変更するには、次のようにします。
ビジュアル・エディタのセレクタ・ツリーで、変更するグローバル・セレクタ別名を選択します。
たとえば、デフォルトのフォント・ファミリを定義するグローバル・セレクタ別名を変更する場合は、それを図8-6に示すように選択します。
プロパティ・インスペクタで、変更するプロパティの値を設定します。
ビジュアル・エディタで、「表示モード」リストをクリックし、変更したグローバル・セレクタ別名で定義されているプロパティ値を継承するコンポーネント固有セレクタを選択します。
ビジュアル・エディタで、コンポーネント固有セレクタで変更内容が意図したとおりにレンダリングされることを確認します。グローバル・セレクタ別名から継承するコンポーネント固有セレクタに対する変更が完了するまで、ステップ1から3を繰り返します。
ADFスキンでグローバル・セレクタ別名を作成した後に、そのグローバル・セレクタ別名で定義したスタイル・プロパティを使用して実行時にレンダリングするADF FacesコンポーネントとADFデータ視覚化コンポーネントを指定する必要があります。
グローバル・セレクタ別名をADF FacesコンポーネントまたはADFデータ視覚化コンポーネントに適用するには、次を実行する必要があります。
グローバル・セレクタ別名で定義したスタイル・プロパティを適用する各コンポーネントのセレクタ、擬似要素または擬似クラスを選択します。グローバル・セレクタ別名で定義したスタイル・プロパティを別のグローバル・セレクタ別名に適用する場合は、ターゲットのグローバル・セレクタ別名を選択します。
ADFスキンの-tr-rule-ref-
プロパティの値としてグローバル・セレクタ別名を設定します。
グローバル・セレクタ別名は、ADFスキンの-tr-rule-ref-
プロパティの値として指定することで適用します。
グローバル・セレクタ別名を適用するには、次のようにします。
ビジュアル・エディタのセレクタ・ツリーで、グローバル・セレクタ別名を適用するアイテムを選択します。
たとえば、図8-7に示すように、グローバル・セレクタ別名で定義したスタイル・プロパティをinputText
コンポーネントのラベルに適用する場合は、そのコンポーネントのcontent擬似要素を選択します。
プロパティ・インスペクタで、「共通」セクションを展開し、-tr-rule-ref-フィールドの横の「追加」アイコンをクリックします。
グローバル・セレクタ別名の名前を入力します。「値」フィールドに、selector
キーワードを先頭に付け、引用符で囲んだ名前を入力します。
たとえば、グローバル・セレクタ別名の名前が.MyBackgroundColor:alias
である場合は、図8-7で示すようにselector(".MyBackgroundColor:alias")
と入力します。
プレビュー・ペインの「リフレッシュ」アイコンをクリックして、変更内容を表示します。
グローバル・セレクタ別名を適用したセレクタは、そのグローバル・セレクタ別名で定義されたスタイル・プロパティを継承します。図8-8に、.MyBackgroundColor:alias
グローバル・セレクタ別名で定義されたスタイル・プロパティを継承する、inputText
コンポーネントのセレクタのcontent
擬似要素を示します。ADFスキンの-tr-rule-refプロパティの値としてグローバル・セレクタ別名を指定した場合、そのグローバル・セレクタ別名から値を継承するプロパティは、図8-8の「背景色」および「色」フィールドで示されているように、継承アイコンを使用するように更新されます。
実行時に、inputText
コンポーネントのコンテンツ領域は、グローバル・セレクタ別名で定義されたスタイル・プロパティを使用してレンダリングされます。
拡張ADFスキンのグローバル・セレクタ別名をオーバーライドした場合、–tr-rule-ref
ADFスキン・プロパティを使用して親ADFスキンのスタイル・プロパティの値を判別していたコンポーネント・セレクタは、グローバル・セレクタ別名のオーバーライドされた値を使用するようになります。例8-2に、ADFスキンAを拡張したADFスキンBを示します。実行時に、decorativeBox
コンポーネントの最上部はbackground-color
CSSプロパティにより赤でレンダリングされますが、これは、ADFスキンBのグローバル・セレクタ別名によってADFスキンAがオーバーライドされるためです。
例8-2 継承されたグローバル・セレクタ別名のオーバーライド
/** 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スキンの値を適用します。例8-3に、.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")} |
例8-3 ローカル・グローバル・セレクタ別名のオーバーライド
/** 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") }
アプリケーションを実行して、ADFスキニング・フレームワークが実行時にセレクタに適用するスタイル・プロパティ値を特定する場合は、Mozilla Firefoxブラウザ(または類似のブラウザ)のFirebugなどのツールを使用することを検討します。詳細は、第10.2項「ADFスキンの変更のテスト」を参照してください。
スタイル・プロパティを適用するセレクタごとに特定のスタイル・プロパティを設定するのではなく、-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
コンポーネントのコンテンツ領域が別のセレクタで定義されたスタイル・プロパティを参照する場合は、図8-9に示すように、panelWindow
コンポーネントの擬似要素ノードの下にある「content」を選択します。
プロパティ・インスペクタで、セレクタのプロパティ値として-tr-property-ref
ADFスキン・プロパティを使用して参照するプロパティ値を指定します。
たとえば、次のグローバル・セレクタ別名を作成したとします。
.MyColor:alias { color: rgb(255,181,99); font-weight: bold; }
そして、ステップ1で選択したcontent
擬似要素のbackground-color
プロパティで、グローバル・セレクタ別名のcolor
プロパティを参照するとします。このシナリオでは、content
擬似要素のbackground-color
プロパティに次の値を入力します。
-tr-property-ref(".MyColor:alias","color");
-tr-property-ref
をcompact値で使用する場合は、次のような構文を入力します。
border: 10px solid -tr-property-ref(".AFDefaultColor:alias", "color");
プロパティ・インスペクタでは、図8-10に示すように、-tr-property-ref
ADFスキン・プロパティを使用して別のセレクタの値を参照するように値を設定されたプロパティが、その値をどのように継承しているかが示されます。
例8-4に類似した構文がADFスキンのソース・ファイルに表示されます。
例8-4 -tr-property-ref ADFスキン・プロパティ
/**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"); }