この章の内容は次のとおりです。
スタイル・クラスを使用すると、ADF FacesまたはADFデータ視覚化コンポーネントの特定のインスタンスに適用するADFスキンの1つの場所で、数多くのスタイル・プロパティを指定できます。
スタイル・クラスに対して定義するスタイル・プロパティは、コンポーネントのセレクタに対して定義するスタイル・プロパティよりも優先されます。アプリケーション開発者は、数多くのADF Facesコンポーネントによって公開されるstyleClass
およびinlineStyle
属性の値としてスタイル・クラスを指定できます。実行時には、ADFスキンに定義されている他のスタイル・プロパティではなく、スタイル・クラスで定義したスタイル・プロパティがADF Facesコンポーネントに適用されます。スタイル・クラスは、複数のADF Facesコンポーネントに適用するスタイル・プロパティを定義できるグローバル・セレクタ別名(「グローバル・セレクタ別名の使用」を参照)とは異なります。
図10-1に、スタイル・クラスの様々なカテゴリのノードが展開されたADFスキンを示します。
スタイル・クラスの各カテゴリは次の意味を持ちます。
その他: 拡張ADFスキンから継承されたその他のスタイル・クラス。たとえば、このカテゴリにはブランド・バーのコンテナに使用できる.AFBrandingBar
が含まれます。
ノート・ウィンドウ・セレクタ: noteWindow
コンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
ポップアップ: popup
コンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
テキスト: 様々なタイプのテキスト(たとえば、アドレス・フィールドや指示テキストなど)の外観を決定する、拡張ADFスキンから継承されたスタイル・クラス。
ユーザーまたは他のユーザーが定義するスタイル・クラスは、図10-1の.UserDefined
スタイル・クラスのエントリで示されているようにスタイル・クラス・ノードの下に表示されます。Oracle ADFが用意しているADFスキンのスタイル・クラスの詳細な説明は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンスを参照してください。
ADF Facesコンポーネントの特定のインスタンスにスタイル・プロパティを指定するために、ADFスキンに新しいスタイル・クラスを作成することも、ADFスキンが拡張元ADFスキンから継承したスタイル・クラスをオーバーライドすることもできます。
スタイル・クラスを作成した後、含めるスタイル・プロパティを定義するように変更します。「スタイル・クラスの変更」を参照してください。
アプリケーション開発者がコンポーネントのstyleClass
またはinlineStyle
属性を使用してADF FacesまたはADFデータ視覚化コンポーネントに適用するスタイル・プロパティを定義するスタイル・クラスを作成できます。
スタイル・クラスを作成するには、次のようにします。
スタイル・クラスを変更して、ADF Facesコンポーネントの特定のインスタンスに適用してスタイル・プロパティを変更します。
スタイル・クラスを変更するプロセスは、セレクタ・エディタに表示される様々なカテゴリのスタイル・クラスで同じです。セレクタ・ツリーでスタイル・クラスを選択し、プレビュー・ペインのメニューを使用してスタイル・クラスに擬似クラスを追加または削除するか、あるいは、「プロパティ」ウィンドウを使用してスタイル・クラスのスタイル・プロパティを設定またはオーバーライドします。
適用するスタイル・プロパティでスタイル・クラスを定義したら、それらのスタイル・プロパティを使用してレンダリングするADF Facesコンポーネントのインスタンスを構成します。
コンポーネントの特定のインスタンスに適用するスタイル・プロパティを定義するスタイル・クラスを定義できます。たとえば、アプリケーション開発者がページ上のコンテンツを表示または非表示にするために使用するpanelBox
コンポーネントについて考察します。panelBox
コンポーネントの複数のインスタンスを1ページにレンダリングできます。図10-4に示すように、panelBox
コンポーネントのデフォルトの背景色をFuchsiaに決定します。
図10-4 panelBoxコンポーネントの背景色の設定
ただし、panelBox
コンポーネントの1つ以上のインスタンスを、エンド・ユーザーがコンポーネントのコンテンツを表示したり非表示にできる公開リンクのコントロールなしでレンダリングすることにしました。さらに、背景色を赤に設定してpanelBox
コンポーネントのこれらのインスタンスのテキストをレンダリングすることに決めました。このために、ADFスキンのスタイル・クラスのスタイル・プロパティを定義します。次に、これらのスタイル・プロパティを使用してレンダリングするpanelBox
コンポーネントのインスタンスごとにstyleClass
属性の値としてスタイル・クラスを指定します。次の例に、前述の結果を得るためにADFスキンのソース・ファイルに表示される構文を示します。
.panelBoxInstanceClass af|panelBox::disclosure-link{display:none;} .panelBoxInstanceClass af|panelBox::header-text {background-color: Red;}
注意:
コンポーネントの特定のインスタンスに作成したスタイル・クラスのADFスキン・プロパティを構成できません。ADFスキン・プロパティを使用すると、コンポーネントの特定のインスタンスではなくアプリケーション全体のコンポーネントのレンダリングをカスタマイズできます。ADFスキン・プロパティの詳細は、「ADFスキニング・フレームワークでのプロパティ」を参照してください。これらのスタイル・クラスを使用してレンダリングするコンポーネントのインスタンスごとに、styleClass
属性の値としてスタイル・クラスを指定します。
コンポーネントの特定のインスタンスに対してスタイル・クラスを設定するには、次のようにします。