| Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの開発 12c (12.1.3) E56242-01 |
|
 前 |
 次 |
この章では、スタイル・クラスの使用方法について説明します。スタイル・クラスの作成、変更および適用方法に関する情報を提供し、コンポーネントの特定のインスタンスにスタイル・クラスを設定する方法について説明します。
この章には次の項が含まれます:
スタイル・クラスを使用すると、ADF FacesまたはADFデータ視覚化コンポーネントの特定のインスタンスに適用するADFスキンの1つの場所で、数多くのスタイル・プロパティを指定できます。スタイル・クラスに対して定義するスタイル・プロパティは、コンポーネントのセレクタに対して定義するスタイル・プロパティよりも優先されます。アプリケーション開発者は、数多くのADF Facesコンポーネントによって公開されるstyleClassおよびinlineStyle属性の値としてスタイル・クラスを指定できます。実行時には、ADFスキンに定義されている他のスタイル・プロパティではなく、スタイル・クラスで定義したスタイル・プロパティがADF Facesコンポーネントに適用されます。スタイル・クラスは、複数のADF Facesコンポーネントに適用するスタイル・プロパティを定義できるグローバル・セレクタ別名(第8章「グローバル・セレクタ別名の使用」を参照)とは異なります。
図9-1に、スタイル・クラスの様々なカテゴリのノードが展開されたADFスキンを示します。
スタイル・クラスの各カテゴリは次の意味を持ちます。
その他: 拡張ADFスキンから継承されたその他のスタイル・クラス。たとえば、このカテゴリにはブランド・バーのコンテナに使用できる.AFBrandingBarが含まれます。
ノート・ウィンドウ・セレクタ: noteWindowコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
ポップアップ: popupコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。
テキスト: 様々なタイプのテキスト(たとえば、アドレス・フィールドや指示テキストなど)の外観を決定する、拡張ADFスキンから継承されたスタイル・クラス。
ユーザーまたは他のユーザーが定義するスタイル・クラスは、図9-1の.UserDefinedスタイル・クラスのエントリで示されているようにスタイル・クラス・ノードの下に表示されます。Oracle ADFによって提供されるADFスキンの詳細な説明は、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コンポーネントのデフォルトの背景色をFuchsiaに決定します。
ただし、panelBoxコンポーネントの1つ以上のインスタンスを、エンド・ユーザーがコンポーネントのコンテンツを表示したり非表示にできる公開リンクのコントロールなしでレンダリングすることにしました。さらに、背景色を赤に設定してpanelBoxコンポーネントのこれらのインスタンスのテキストをレンダリングすることに決めました。このために、ADFスキンのスタイル・クラスのスタイル・プロパティを定義します。次に、これらのスタイル・プロパティを使用してレンダリングするpanelBoxコンポーネントのインスタンスごとにstyleClass属性の値としてスタイル・クラスを指定します。例9-2に、前述の結果を得るためにADFスキンのソース・ファイルに表示される構文を示します。
例9-2 ADFスキンのスタイル・クラスの構文
.panelBoxInstanceClass af|panelBox::disclosure-link{display:none;}
.panelBoxInstanceClass af|panelBox::header-text {background-color: Red;}
これらのスタイル・クラスを使用してレンダリングするコンポーネントのインスタンスごとに、styleClass属性の値としてスタイル・クラスを指定します。
コンポーネントの特定のインスタンスに対してスタイル・クラスを設定するには、次のようにします。
第9.2項「スタイル・クラスの作成」の説明に従って、スタイル・クラスを作成します。
JDeveloperで、コンポーネントのstyleClass属性をステップ1で作成したスタイル・クラスの名前に設定します。
コンポーネントのstyleClass属性の設定の詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)を参照してください。
実行時に、スタイル・クラスを使用してインスタンス固有のスタイル・プロパティを指定しないコンポーネントのインスタンスは、コンポーネント固有セレクタおよびグローバル・セレクタ別名を使用してレンダリングされます。図9-5は、First Panel Boxラベルが付いたpanelBoxコンポーネントです。スタイル・クラスをstyleClass属性の値として指定するコンポーネントのインスタンスは、そのスタイル・クラスで指定されたスタイル・プロパティを使用してレンダリングされます。図9-5は、Second Panel Boxラベルが付いたpanelBoxコンポーネントです。
