Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド 11gリリース2(11.1.2.3.0) B66161-03 |
|
![]() 前 |
![]() 次 |
この章では、スタイル・クラスの使用方法について説明します。スタイル・クラスの作成、変更および適用方法に関する情報を提供し、コンポーネントの特定のインスタンスにスタイル・クラスを設定する方法について説明します。
この章には、次の項があります。
スタイル・クラスを使用すると、ADF FacesまたはADFデータ視覚化コンポーネントの特定のインスタンスに適用するADFスキンの1つの場所で、数多くのスタイル・プロパティを指定できます。スタイル・クラスに対して定義するスタイル・プロパティは、コンポーネントのセレクタに対して定義するスタイル・プロパティよりも優先されます。アプリケーション開発者は、数多くのADF Facesコンポーネントによって公開されるstyleClass
およびinlineStyle
属性の値としてスタイル・クラスを指定できます。実行時には、ADFスキンに定義されている他のスタイル・プロパティではなく、スタイル・クラスで定義したスタイル・プロパティがADF Facesコンポーネントに適用されます。スタイル・クラスは、複数のADF Facesコンポーネントに適用するスタイル・プロパティを定義できるグローバル・セレクタ別名(第8章「グローバル・セレクタ別名の使用」を参照)とは異なります。
図9-1に、スタイル・クラスの様々なカテゴリのノードが展開されたADFスキンを示します。
スタイル・クラスの各カテゴリは次の意味を持ちます。
コンポーネント・グループ: メニュー: メニュー・アイテムに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
コンポーネント・グループ: パネル・ボックスおよびリージョン: panelBox
およびregion
コンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
コンポーネント・グループ: パネル・ヘッダー: panelHeader
コンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
下位セレクタ: 下位セレクタの拡張ADFスキンから継承されたスタイル・クラス。
その他: 拡張ADFスキンから継承されたその他のスタイル・クラス。たとえば、このカテゴリにはブランド・バーのコンテナに使用できる.AFBrandingBar
が含まれます。
ノート・ウィンドウ: noteWindow
コンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
ポップアップ: popup
コンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
テキスト: 様々なタイプのテキスト(たとえば、アドレス・フィールドや指示テキストなど)の外観を決定する、拡張ADFスキンから継承されたスタイル・クラス。
ユーザーまたは他のユーザーが定義するスタイル・クラスは、図9-1の.UserDefined
スタイル・クラスのエントリで示されているようにスタイル・クラス・ノードの下に表示されます。Oracle ADFによって提供されるスタイル・クラスの詳細は、Oracle Fusion Middleware Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)を参照してください。
ADFスキンに新しいスタイル・クラスを作成することも、ADFスキンが拡張元ADFスキンから継承したスタイル・クラスをオーバーライドすることもできます。
スタイル・クラスを作成した後、含めるスタイル・プロパティを定義するように変更します。詳細は、第9.3項「スタイル・クラスの変更」を参照してください。
アプリケーション開発者がコンポーネントのstyleClass
またはinlineStyle
属性を使用してADF FacesまたはADFデータ視覚化コンポーネントに適用するスタイル・プロパティを定義するスタイル・クラスを作成できます。
スタイル・クラスを作成するには、次のようにします。
図9-2に示すように、ビジュアル・エディタのセレクタ・ツリーで、プラス・アイコンのリストから「新規スタイル・クラス」を選択します。
「スタイル・クラスの作成」ダイアログが開きます。
適切なオプションを選択します。
ADFスキンの拡張元ADFスキンからスタイル・プロパティを継承しない新規スタイル・クラスを作成する場合は、新しい名前を入力します。
ヒント: そのスタイル・クラスが果たす目的を示す名前を入力します。 |
ADFスキンの拡張元ADFスキンからスタイル・プロパティを継承し、ADFスキンのスタイル・プロパティをオーバーライドするスタイル・クラスの名前を入力します。
「OK」をクリックします。
スタイル・クラスを変更するプロセスは、ビジュアル・エディタに表示される様々なカテゴリのスタイル・クラスで同じです。セレクタ・ツリーでスタイル・クラスを選択し、プレビュー・ペインのメニューを使用してスタイル・クラスに擬似クラスを追加または削除するか、あるいは、プロパティ・インスペクタを使用してスタイル・クラスのスタイル・プロパティを設定またはオーバーライドします。
コンポーネントの特定のインスタンスに適用するスタイル・プロパティを定義するスタイル・クラスを定義できます。たとえば、アプリケーション開発者がページ上のコンテンツを表示または非表示にするために使用するpanelBox
コンポーネントについて考察します。panelBox
コンポーネントの複数のインスタンスを1ページにレンダリングできます。図9-4に示すように、panelBox
コンポーネントのデフォルトの背景色を白に決定します。
ただし、panelBox
コンポーネントの1つ以上のインスタンスを、エンド・ユーザーがコンポーネントのコンテンツを表示したり非表示にできる公開リンクのコントロールなしでレンダリングすることにしました。さらに、背景色を赤に設定してpanelBox
コンポーネントのこれらのインスタンスの背景色をレンダリングすることに決めました。このために、ADFスキンのスタイル・クラスのスタイル・プロパティを定義します。次に、これらのスタイル・プロパティを使用してレンダリングするpanelBox
コンポーネントのインスタンスごとにstyleClass
属性の値としてスタイル・クラスを指定します。例9-2に、前述の結果を得るためにADFスキンのソース・ファイルに表示される構文を示します。
例9-2 ADFスキンのスタイル・クラスの構文
.panelBoxInstanceClass af|panelBox::disclosure-link{display:none;} .panelBoxInstanceClass af|panelBox::content{background-color:red}
これらのスタイル・クラスを使用してレンダリングするコンポーネントのインスタンスごとに、styleClass
属性の値としてスタイル・クラスを指定します。
コンポーネントの特定のインスタンスに対してスタイル・クラスを設定するには、次のようにします。
第9.2項「スタイル・クラスの作成」の説明に従って、スタイル・クラスを作成します。
JDeveloperで、コンポーネントのstyleClass
属性をステップ1で作成したスタイル・クラスの名前に設定します。
コンポーネントのstyleClass
属性の設定の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)を参照してください。
実行時に、スタイル・クラスを使用してインスタンス固有のスタイル・プロパティを指定しないコンポーネントのインスタンスは、コンポーネント固有セレクタおよびグローバル・セレクタ別名を使用してレンダリングされます。図9-5は、First Panel Boxラベルが付いたpanelBox
コンポーネントです。スタイル・クラスをstyleClass
属性の値として指定するコンポーネントのインスタンスは、そのスタイル・クラスで指定されたスタイル・プロパティを使用してレンダリングされます。図9-5は、Second Panel Boxラベルが付いたpanelBox
コンポーネントです。