ヘッダーをスキップ
Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの作成
12c (12.1.2)
E48016-01
  目次へ移動
目次
前
前 		 次
次		  

8 グローバル・セレクタ別名の使用

この章では、グローバル・セレクタ別名の使用方法について説明します。グローバル・セレクタ別名の作成、変更および適用方法に関する情報を提供し、別のセレクタからプロパティ値を参照する方法について説明します。

この章には次の項が含まれます:

8.1 グローバル・セレクタ別名について

グローバル・セレクタ別名では、複数のADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに適用できるスタイル・プロパティをADFスキンの1つの場所で定義します。グローバル・セレクタ別名は、セレクタ別名または単にセレクタと呼ばれる場合もあります。第1.4項「Oracle ADFで提供されるADFスキンの継承関係」および第12.4項「Oracle ADFで提供されるADFスキン」で説明している、Oracle ADFで提供されるADFスキンは、グローバル・セレクタ別名を活用して、コンポーネントのテキスト、メッセージ、アイコン、色および様々なグループに関する共通のスタイル・プロパティを定義します。これらのグローバル・セレクタ別名で定義されたスタイルは、数多くのコンポーネント固有セレクタによって継承されます。たとえば、.AFDefaultFontFamily:aliasグローバル・セレクタ別名では、テキストを表示するアプリケーションにおけるすべてのADF Facesコンポーネントのデフォルト・フォント・ファミリを定義します。Oracle ADFで提供されるいずれかのADFスキンを拡張して作成したADFスキンは、.AFDefaultFontFamily:aliasグローバル・セレクタ別名で定義されているプロパティを継承します。図8-1は、af|buttonセレクタによる.AFDefaultFontFamily:aliasグローバル・セレクタ別名からのフォント・ファミリ値の継承がセレクタ・エディタでどのように表示されるかを示しています。

図8-1 コンポーネント・セレクタによるグローバル・セレクタ別名からの値の継承

セレクタがグローバル・セレクタ別名から値を継承します

図8-1には、グローバル・セレクタ別名の他のカテゴリも示されています。各カテゴリでは、その目的に応じてグローバル・セレクタ別名をグループ化しています。

グローバル・セレクタ別名の詳細な説明は、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-2 ADFスキンによるグローバル・セレクタ別名の変更

ADFスキンによるグローバル・セレクタ別名の変更

すでに説明したグローバル・セレクタ別名以外に、数多くのコンポーネント・セレクタが、それらのコンポーネントに固有のセレクタ別名を定義します。これらのセレクタ別名は、セレクタ・ツリーのコンポーネント・セレクタのノードの下に表示されます。図8-3に、このようなタイプのセレクタ別名を公開する様々なコンポーネント・セレクタの例を示します。

図8-3 コンポーネント・セレクタ別名

コンポーネント・セレクタ別名

8.2 グローバル・セレクタ別名の作成

数多くのセレクタによって参照されるスタイル・プロパティを1つの場所に定義するために、グローバル・セレクタ別名を作成できます。新規グローバル・セレクタ別名の名前を「別名セレクタの作成」ダイアログに入力します。ADFスキン・エディタにより、このダイアログに入力した名前にキーワード:aliasが付加され、先頭に.が追加されます。たとえば、このダイアログに名前としてmyGlobalSelectorを入力した場合は、結果としてユーザー・インタフェースおよびADFスキンのソース・ファイルに表示される名前は次のようになります。

.myGlobalSelector:alias

キーワード:aliasは、グローバル・セレクタ別名をCSS擬似クラスとして識別するのに使用され、ADFスキンのソース・ファイルでCSSコードを編成する場合の構文の支援として役立ちます。

グローバル・セレクタ別名を作成したら、そこに含めるスタイル・プロパティを定義するために変更します。詳細は、第8.3項「グローバル・セレクタ別名の変更」を参照してください。

8.2.1 グローバル・セレクタ別名の作成方法

数多くのユーザー・インタフェース・コンポーネントによって使用されるスタイル・プロパティを定義するグローバル・セレクタ別名を作成できます。

グローバル・セレクタ別名を作成するには、次のようにします。

  1. 図8-4に示すように、セレクタ・ツリーのセレクタ・エディタで、ドロップダウン・リストから「新規別名セレクタ」を選択します。

    図8-4 セレクタ・ツリーでの「新規別名セレクタ」オプション

    セレクタ・ツリーでの「新規別名セレクタ」オプション

    「別名セレクタの作成」ダイアログが開きます。

  2. グローバル・セレクタ別名の名前を「別名セレクタ名」フィールドに入力します。


    ヒント:

    グローバル・セレクタ別名には、その目的を表す名前を入力します。たとえば、エンド・ユーザーがリンク上にマウスを置いたときにリンクの色を変更するグローバル・セレクタ別名の場合は、MyLinkHoverColorとします。

  3. 「OK」をクリックします。

  4. 「Properties」ウィンドウで、グローバル・セレクタ別名で構成するプロパティの値を設定します。

8.2.2 グローバル・セレクタ別名を作成した場合の処理

図8-5に示すように、グローバル・セレクタ別名は、セレクタ・ツリーのグローバル・セレクタ別名ノードの下に表示され、コンポーネントに適用された場合のビジュアル表示がプレビュー・ペインに表示されます。

図8-5 新規作成されたグローバル・セレクタ別名

新規作成されたグローバル・セレクタ別名

作成したグローバル・セレクタ別名のCSS構文は、ADFスキンのソース・ファイルに表示されます。図8-1は、図8-5のADFスキンのソース・ファイルにあるエントリを示しています。

例8-1 新規作成されたグローバル・セレクタ別名のCSS構文

.MyLinkHoverColor:alias{
}

8.3 グローバル・セレクタ別名の変更

第8.1項「グローバル・セレクタ別名について」で説明しているグローバル・セレクタ別名のカテゴリはいずれも変更できます。ADFスキンを初めて作成したときにセレクタ・ツリーのグローバル・セレクタ別名ノードの下に表示されるグローバル・セレクタ別名を変更することは、ADFスキンの親ADFスキンで定義された継承スタイル・プロパティをオーバーライドすることを意味します。親ADFスキンとは、ADFスキンの拡張元であるADFスキンです。第4.3項「ADFスキン・ファイルの作成」で説明しているように、ADFスキンを作成したときに、拡張元のADFスキンを選択しました。グローバル・セレクタ別名を変更すると、そのグローバル・セレクタ別名で定義されているスタイル・プロパティを継承するコンポーネント固有セレクタは、変更された値を使用するようになります。

ADFスキンで作成したグローバル・セレクタ別名を変更しても、親ADFスキンから継承したスタイル・プロパティはオーバーライドされません。

8.3.1 グローバル・セレクタ別名の変更方法

グローバル・セレクタ別名を、「Properties」ウィンドウでその値を設定して、変更します。次に、加えた変更が意図したとおりにコンポーネント固有セレクタに適用されていることを確認します。

グローバル・セレクタ別名を変更するには、次のようにします。

  1. セレクタ・エディタのセレクタ・ツリーで、変更するグローバル・セレクタ別名を選択します。

    たとえば、デフォルトのフォント・ファミリを定義するグローバル・セレクタ別名を変更する場合は、それを図8-6に示すように選択します。

    図8-6 グローバル・セレクタ別名の変更

    グローバル・セレクタ別名の変更

  2. 「プロパティ」ウィンドウで、変更するプロパティの値を設定します。

  3. セレクタ・エディタで、「表示モード」リストをクリックし、変更したグローバル・セレクタ別名で定義されているプロパティ値を継承するコンポーネント固有セレクタを選択します。

  4. セレクタ・エディタで、コンポーネント固有セレクタで変更内容が意図したとおりにレンダリングされることを確認します。グローバル・セレクタ別名から継承するコンポーネント固有セレクタに対する変更が完了するまで、ステップ1から3を繰り返します。

8.4 グローバル・セレクタ別名の適用

ADFスキンでグローバル・セレクタ別名を作成した後に、そのグローバル・セレクタ別名で定義したスタイル・プロパティを使用して実行時にレンダリングするADF FacesコンポーネントとADFデータ視覚化コンポーネントを指定する必要があります。

グローバル・セレクタ別名をADF FacesコンポーネントまたはADFデータ視覚化コンポーネントに適用するには、次を実行する必要があります。

8.4.1 グローバル・セレクタ別名の適用方法

グローバル・セレクタ別名は、-tr-rule-ref-ADFスキン・プロパティの値として指定することで適用します。

グローバル・セレクタ別名を適用するには、次のようにします。

  1. セレクタ・エディタのセレクタ・ツリーで、グローバル・セレクタ別名を適用するアイテムを選択します。

    たとえば、図8-7に示すように、グローバル・セレクタ別名で定義したスタイル・プロパティをinputTextコンポーネントのラベルに適用する場合は、そのコンポーネントのcontent擬似要素を選択します。

  2. 「プロパティ」ウィンドウで、Commonセクションを開き、次に-tr-rule-ref-フィールドの横の「追加」アイコンをクリックします。

  3. グローバル・セレクタ別名の名前を入力します。「値」フィールドに、selectorキーワードを先頭に付け、引用符で囲んだ名前を入力します。

    たとえば、グローバル・セレクタ別名の名前が.MyBackgroundColor:aliasである場合は、図8-7で示すようにselector(".MyBackgroundColor:alias")と入力します。

    図8-7 inputTextコンポーネントのcontent擬似要素

    入力テキスト・コンポーネントのラベル・スキン・セレクタ

  4. プレビュー・ペインの「リフレッシュ」アイコンをクリックして、変更内容を表示します。

8.4.2 グローバル・セレクタ別名を適用した場合の処理

グローバル・セレクタ別名を適用したセレクタは、そのグローバル・セレクタ別名で定義されたスタイル・プロパティを継承します。図8-8に、.MyBackgroundColor:aliasグローバル・セレクタ別名で定義されたスタイル・プロパティを継承する、inputTextコンポーネントのセレクタのcontent擬似要素を示します。-tr-rule-refADFスキン・プロパティの値としてグローバル・セレクタ別名を指定した場合、そのグローバル・セレクタ別名から値を継承するプロパティは、図8-8の「背景色」および「色」フィールドで示されているように、継承アイコンを使用するように更新されます。

実行時に、inputTextコンポーネントのコンテンツ領域は、グローバル・セレクタ別名で定義されたスタイル・プロパティを使用してレンダリングされます。

図8-8 inputTextコンポーネントに適用されたグローバル・セレクタ別名

グローバル・セレクタ別名

8.4.3 グローバル・セレクタ別名の適用に関する注意事項

拡張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などのツールを使用することを検討します。詳細は、第11.2項「ADFスキンの変更のテスト」を参照してください。

8.5 別のセレクタからのプロパティ値の参照

スタイル・プロパティを適用するセレクタごとに特定のスタイル・プロパティを設定するのではなく、-tr-property-ref ADFスキン・プロパティを使用してプロパティの値を参照できます。このADFスキン・プロパティをグローバル・セレクタ別名およびコンポーネント固有セレクタに対して構成できます。たとえば、グローバル・セレクタ別名でbackground-colorプロパティの値を定義して、他の複数のセレクタからこの値を参照できます。background-colorプロパティの値を後で変更することにした場合は、グローバル・セレクタ別名でこの値を変更します。-tr-property-ref ADFスキン・プロパティを使用してbackground-colorプロパティを参照するすべてのセレクタは、行われた変更を使用するように更新されます。-tr-property-ref ADFスキン・プロパティは、borderなど、compact CSSプロパティで使用することもできます。

8.5.1 別のセレクタからプロパティ値を参照する方法

-tr-property-ref ADFスキン・プロパティを使用して、セレクタに使用するプロパティ値を参照します。

別のセレクタからプロパティ値を参照するには、次のようにします。

  1. セレクタ・エディタのセレクタ・ツリーで、別のセレクタからプロパティ値を参照するセレクタを選択します。

    たとえば、panelWindowコンポーネントのコンテンツ領域が別のセレクタで定義されたスタイル・プロパティを参照する場合は、図8-9に示すように、panelWindowコンポーネントの擬似要素ノードの下にある「content」を選択します。

    図8-9 パネル・ウィンドウ・コンポーネントのcontent擬似要素

    パネル・ウィンドウ・コンポーネントのcontent擬似要素

  2. 「プロパティ」ウィンドウで、セレクタのプロパティ値として-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.5.2 別のセレクタからプロパティ値を参照した場合の処理

「プロパティ」ウィンドウでは、図8-10に示すように、-tr-property-ref ADFスキン・プロパティを使用して別のセレクタの値を参照するように値を設定されたプロパティが、その値をどのように継承しているかが示されます。

図8-10 別のセレクタのプロパティ値を参照するセレクタ・プロパティ

別のセレクタのプロパティ値を参照するプロパティ

例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");
}
  前
前 		 次
次
  目次へ移動
目次