| Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの開発 12c (12.1.3) E56242-01 |
|
 前 |
 次 |
この章では、グローバル・セレクタ別名の使用方法について説明します。グローバル・セレクタ別名の作成、変更および適用方法に関する情報を提供し、別のセレクタからプロパティ値を参照する方法について説明します。
この章には次の項が含まれます:
グローバル・セレクタ別名では、複数のADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに適用できるスタイル・プロパティをADFスキンの1つの場所で定義します。グローバル・セレクタ別名は、セレクタ別名または単にセレクタと呼ばれる場合もあります。第1.4項「Oracle ADFで提供されるADFスキンの継承関係」および第12.3項「Oracle ADFで提供されるADFスキン」で説明している、Oracle ADFで提供されるADFスキンは、グローバル・セレクタ別名を活用して、コンポーネントのテキスト、メッセージ、アイコン、色および様々なグループに関する共通のスタイル・プロパティを定義します。これらのグローバル・セレクタ別名で定義されたスタイルは、数多くのコンポーネント固有セレクタによって継承されます。たとえば、.AFDefaultFontFamily:aliasグローバル・セレクタ別名では、テキストを表示するアプリケーションにおけるすべてのADF Facesコンポーネントのデフォルト・フォント・ファミリを定義します。Oracle ADFで提供されるいずれかのADFスキンを拡張して作成したADFスキンは、.AFDefaultFontFamily:aliasグローバル・セレクタ別名で定義されているプロパティを継承します。図8-1は、af|buttonセレクタによる.AFDefaultFontFamily:aliasグローバル・セレクタ別名からのフォント・ファミリ値の継承がセレクタ・エディタでどのように表示されるかを示しています。
図8-1には、グローバル・セレクタ別名の他のカテゴリも示されています。各カテゴリでは、その目的に応じてグローバル・セレクタ別名をグループ化しています。
色: Oracle ADFで提供されるADFスキンで使用する色を定義します。場合によっては、このカテゴリに表示される数多くのグローバル・セレクタ別名をオーバーライドします。これは、これらの別名によって、Fusion Webアプリケーションに表示されるほとんどの色が決定されるためです。これらのグローバル・セレクタ別名に加えた変更は、第12.3項「Oracle ADFで提供されるADFスキン」で説明している、Fusion SimpleまたはSkyrosファミリのADFスキンを拡張した場合に最も大きく影響を及ぼします。特に、Skyros familyのADFスキンから拡張したADFスキンは、それが定義するカラー・パレットを有し、アンカー・カラーに分類されるグローバル・セレクタ別名を変更することによって、比較的迅速に変更できます。詳細は、第6.3項「Skyrosで拡張したADFスキンの色の使用」を参照してください。
|
ヒント: 他のグローバル・セレクタ別名と同様、「表示モード」リストを使用して、特定のグローバル・セレクタで定義された値を継承するコンポーネント固有セレクタを表示できます。 |
コンポーネント・グループ: ボタン: ボタンをレンダリングする数多くの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 ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)を参照してください。定義したグローバル・セレクタ別名は、図8-1の.UserDefined:aliasのエントリで示されているように、グローバル・セレクタ別名ノードの下に表示されます。
セレクタ・ツリーでグローバル・セレクタ別名を選択すると、「表示モード」リストには、グローバル・セレクタ別名を参照するコンポーネントのリストが表示されます。図8-2では、ユーザーがリストから「パネル・ウィンドウ」を選択していますが、これは、panelWindowコンポーネントがこのグローバル・セレクタ別名を参照しているためです。
|
注意: 「表示モード」リストにコンポーネントが表示されるものの、そのコンポーネントではグローバル・セレクタ別名で定義されたスタイル・プロパティによるレンダリングが行われないない場合があります。このことは、コンポーネントが、最初は拡張ADFスキンのグローバル・セレクタ別名を参照していたが、使用するADFスキンによってそのコンポーネントのグローバル・セレクタ別名がオーバーライドされたために発生することがあります。または、コンポーネント自体が、そのスタイル関連の属性( |
図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に示すように、セレクタ・ツリーのセレクタ・エディタで、ドロップダウン・リストから「新規別名セレクタ」を選択します。
「別名セレクタの作成」ダイアログが開きます。
グローバル・セレクタ別名の名前を「別名セレクタ名」フィールドに入力します。
|
ヒント: グローバル・セレクタ別名には、その目的を表す名前を入力します。たとえば、エンド・ユーザーがリンク上にマウスを置いたときにリンクの色を変更するグローバル・セレクタ別名の場合は、 |
「OK」をクリックします。
「Properties」ウィンドウで、グローバル・セレクタ別名で構成するプロパティの値を設定します。
第8.1項「グローバル・セレクタ別名について」で説明しているグローバル・セレクタ別名のカテゴリはいずれも変更できます。ADFスキンを初めて作成したときにセレクタ・ツリーのグローバル・セレクタ別名ノードの下に表示されるグローバル・セレクタ別名を変更することは、ADFスキンの親ADFスキンで定義された継承スタイル・プロパティをオーバーライドすることを意味します。親ADFスキンとは、ADFスキンの拡張元であるADFスキンです。第4.3項「ADFスキン・ファイルの作成」で説明しているように、ADFスキンを作成したときに、拡張元のADFスキンを選択しました。グローバル・セレクタ別名を変更すると、そのグローバル・セレクタ別名で定義されているスタイル・プロパティを継承するコンポーネント固有セレクタは、変更された値を使用するようになります。
ADFスキンで作成したグローバル・セレクタ別名を変更しても、親ADFスキンから継承したスタイル・プロパティはオーバーライドされません。
グローバル・セレクタ別名を、「Properties」ウィンドウでその値を設定して、変更します。次に、加えた変更が意図したとおりにコンポーネント固有セレクタに適用されていることを確認します。
グローバル・セレクタ別名を変更するには、次のようにします。
セレクタ・エディタのセレクタ・ツリーで、変更するグローバル・セレクタ別名を選択します。
たとえば、デフォルトのフォント・ファミリを定義するグローバル・セレクタ別名を変更する場合は、それを図8-6に示すように選択します。
「プロパティ」ウィンドウで、変更するプロパティの値を設定します。
セレクタ・エディタで、「表示モード」リストをクリックし、変更したグローバル・セレクタ別名で定義されているプロパティ値を継承するコンポーネント固有セレクタを選択します。
セレクタ・エディタで、コンポーネント固有セレクタで変更内容が意図したとおりにレンダリングされることを確認します。グローバル・セレクタ別名から継承するコンポーネント固有セレクタに対する変更が完了するまで、ステップ1から3を繰り返します。
ADFスキンでグローバル・セレクタ別名を作成した後に、そのグローバル・セレクタ別名で定義したスタイル・プロパティを使用して実行時にレンダリングするADF FacesコンポーネントとADFデータ視覚化コンポーネントを指定する必要があります。
グローバル・セレクタ別名をADF FacesコンポーネントまたはADFデータ視覚化コンポーネントに適用するには、次を実行する必要があります。
グローバル・セレクタ別名で定義したスタイル・プロパティを適用する各コンポーネントのセレクタ、擬似要素または擬似クラスを選択します。グローバル・セレクタ別名で定義したスタイル・プロパティを別のグローバル・セレクタ別名に適用する場合は、ターゲットのグローバル・セレクタ別名を選択します。
-tr-rule-ref-ADFスキン・プロパティの値としてグローバル・セレクタ別名を設定します。
グローバル・セレクタ別名は、-tr-rule-ref-ADFスキン・プロパティの値として指定することで適用します。
グローバル・セレクタ別名を適用するには、次のようにします。
セレクタ・エディタのセレクタ・ツリーで、グローバル・セレクタ別名を適用するアイテムを選択します。
たとえば、図8-7に示すように、グローバル・セレクタ別名で定義したスタイル・プロパティをinputTextコンポーネントのラベルに適用する場合は、そのコンポーネントのcontent擬似要素を選択します。
「プロパティ」ウィンドウで、Commonセクションを開き、次に-tr-rule-ref-フィールドの横の「追加」アイコンをクリックします。
グローバル・セレクタ別名の名前を入力します。「値」フィールドに、selectorキーワードを先頭に付け、引用符で囲んだ名前を入力します。
たとえば、グローバル・セレクタ別名の名前が.MyBackgroundColor:aliasである場合は、図8-7で示すようにselector(".MyBackgroundColor:alias")と入力します。
プレビュー・ペインの「リフレッシュ」アイコンをクリックして、変更内容を表示します。
グローバル・セレクタ別名を適用したセレクタは、そのグローバル・セレクタ別名で定義されたスタイル・プロパティを継承します。図8-8に、.MyBackgroundColor:aliasグローバル・セレクタ別名で定義されたスタイル・プロパティを継承する、inputTextコンポーネントのセレクタのcontent擬似要素を示します。-tr-rule-refADFスキン・プロパティの値としてグローバル・セレクタ別名を指定した場合、そのグローバル・セレクタ別名から値を継承するプロパティは、図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 {-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などのツールを使用することを検討します。詳細は、第11.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スキン・プロパティ
@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");}
