| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
 戻る |
 次へ |
| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
戻る |
次へ |
この章では、Oracle ADF Facesのスキンおよびコンポーネントのスタイル属性を使用してスタイル・プロパティを変更することにより、アプリケーションの外観を変更する方法を説明します。
この章に含まれる項は次のとおりです。
ADF Facesコンポーネントのデフォルトのルック・アンド・フィールは、Oracleブラウザ・ルック・アンド・フィールというアプリケーションのユーザー・インタフェース標準のセットであるBLAF Plusを使用して定義されています。JDeveloperでは、ADF Facesコンポーネントにスタイル情報を適用するためのオプションが2つサポートされています。
定義済のスタイル・セレクタを使用してスキンおよびCascading Style Sheet（CSS）を作成し、ADFアプリケーションがそのスキンとスタイルシートを使用するように構成します。
スタイル・プロパティを使用してスキンCSSからのスタイル情報をオーバーライドし、コンポーネント表示の特定インスタンスを設定します。
ADF Facesコンポーネントでは、コンポーネントの機能はコンポーネント・クラスに、コンポーネントの表示はレンダラに委任されます。デフォルトでは、ADF Facesのすべてのタグが、関連付けられたコンポーネント・クラスとHTMLレンダラを結合し、HTMLレンダー・キットの一部になっています。ADF Facesには、デスクトップおよびPDAの両方に表示できるように、HTMLレンダー・キットが含まれています。ADF Facesレンダラはカスタマイズできません。ただし、スキンを使用してコンポーネントの表示方法をカスタマイズすることはできます。
アプリケーション全体のADF Facesコンポーネントを変更しない場合、ページ上のコンポーネント・インスタンスのスタイルを変更するように選択できます。また、プログラムによって条件付きでスタイルを設定することもできます。たとえば、ある特定の条件においてのみテキストが赤色で表示されるように設定できます。詳細は、20.4項「コンポーネントのスタイル・プロパティの変更」を参照してください。
File Explorerアプリケーションを使用すると、ドロップダウン・リストから複数のスキンを選択できます。File Explorerアプリケーションには、スキンの選択をサポートするためのCSSファイルが複数用意されています。詳細は、1.4.2項「File Explorerアプリケーションの概要」を参照してください。
このガイドでは、CSSの概念については説明しません。公式仕様など、スタイルシートの広範な情報は、次に示すW3CのWebサイトを参照してください。
スキンはCSS 3.0構文に基づくスタイルシートで、アプリケーション全体用に1箇所で指定されます。各コンポーネントへのスタイルシートの指定、または各ページへのスタイルシートの挿入を実行するかわりに、アプリケーション全体に対して1つのスキンを作成できます。各コンポーネントでは、スキンに記述されているスタイルが自動的に使用されます。設計時にコードを変更する必要はありません。Oracle ADF Facesのスキンを使用して、またはそれらのスキンを拡張して、独自のカスタム・スキンを作成できます。
Oracle ADF Facesには、アプリケーションで使用するスキンが3つ用意されています。
blafplus-rich: ADF Facesコンポーネントのデフォルトのスタイルを定義します。このスキンは、blafplus-mediumスキンを拡張します。
blafplus-medium: 適度な数のスタイル設定が提供されます。このスタイルは、simpleスキンを拡張します。
スキンを使用すると、アプリケーション内のADF Facesコンポーネントの外観をグローバルに変更できます。ADF Facesアプリケーションでは、デフォルトでblafplus-richスキンが使用されます。ビジュアル・エディタおよびWebページのコンポーネントは、このスキンの設定を使用して表示されます。図20-1に、File Explorerアプリケーションの索引ページに適用されたデフォルトのblafplus-richスキンを示します。
|
注意: スキンのスタイルシートの構文は、CSS 3.0仕様に基づいています。ただし、多くのブラウザはまだこのバージョンに準拠していません。実行時、CSSはADF FacesによりCSS 2.0仕様に変換されます。 |
図20-2でFile Explorerアプリケーションの索引ページに適用されているように、ADF Facesにはsimpleスキンも用意されています。
スキンには、標準のCSSスタイルやレイアウトを設定するよりも多くのオプションがあります。スキンのCSSファイルは、スキン・フレームワークによって処理され、スキン・プロパティとアイコンが抽出されてSkinオブジェクトに登録されます。たとえば、次の操作を行うためにスキン・ファイルをカスタマイズできます。
@platformを使用してプラットフォーム・スタイルを、@agentを使用してブラウザ・スタイルを定義します。
windows、macos、linux、solarisまたはpccという値を使用してプラットフォーム固有のスタイルを設定します。また、netscape、that is、mozilla、gecko、webkit（Safariへのマップ）またはiceという値を使用してブラウザ・エージェント固有のスタイルを設定します。この例では、af:inputTextコンポーネントのコンテンツ領域は、Internet Explorerに対してはピンクに設定されており、WindowsおよびLinuxプラットフォームではgeckoに設定されています。
@platform window, linux {
@agent ie, gecko {
af|inputText::content {background-color:pink
}
}
}
@accessibility-profileを定義します。これは、trinidad-config.xmlファイルからのhigh-contrastおよびlarge-fontsアクセシビリティ・プロファイル設定のスタイルを定義します。
high-contrast値は、背景色と前景色のコントラストを相互に高める必要がある場合に使用します。large-fonts値は、ユーザーがWebブラウザのテキスト・スケーリング設定を増減できる必要がある場合に使用します。large-fontsを定義してもフォントは大きくなりませんが、固定ピクセル・サイズではなく、スケーラブル・フォントまたはディメンションになります。
<!-- Enable both high-contrast and large-fonts content --> <accessibility-profile>high-contrast large-fonts</accessibility-profile>
-tr-inhibitスキン・プロパティを使用してスキン・スタイルを抑制します。
-tr-inhibitスキン・プロパティを使用して、ベース・スキンから継承されたCSSプロパティを抑制またはリセットします。たとえば、-tr-inhibit:paddingプロパティは継承されたパディングを削除します。-tr-inhibit:allプロパティを使用すると、継承されたすべてのプロパティが削除（クリア）されます。抑制するプロパティ名は、ベース・スキンのプロパティ名と完全に一致する必要があります。
-tr-rule-refプロパティを使用してスタイルをマージします。
独自の別名を作成し、-tr-rule-refプロパティを使用して別のスタイル・セレクタと組み合せます。詳細は、20.3.5項「カスタム別名の作成方法」を参照してください。
ブラウザで読み方向が右から左の言語を表示する場合は、:rtl疑似クラスを使用してスタイルまたはアイコンの定義を作成します。詳細は、20.1.2項「スキン・スタイル・セレクタ」を参照してください。
開発中、カスタム・スキンを変更したら、例20-1に示すように、web.xmlファイル・パラメータorg.apache.myfaces.trinidad.CHECK_FILE_MODIFICATIONをtrueに設定することで、サーバーを再起動せずにCSSの変更を確認できます。ただし、アイコンおよびスキン・プロパティの変更を確認するには、サーバーを再起動する必要があります。
スタイルシート・ルールには、要素を識別するスタイル・セレクタ、およびコンポーネントの外観を説明する一連のスタイル・プロパティが含まれます。ADF Facesコンポーネントには、2つのカテゴリのスキン・スタイル・セレクタがあります。
グローバル・セレクタは、複数のADF Facesコンポーネントのスタイル・プロパティを決定します。グローバル・セレクタ名が:alias疑似クラスで終了する場合、そのセレクタはコンポーネント固有の別のセレクタに含まれていることが多く、複数のコンポーネントのスキンに影響を与えます。たとえば、すべてではなくとも多くの場合、コンポーネントでは.AFDefaultFontFamily:alias定義を使用してフォント・ファミリを指定します。スキンが異なるフォント・ファミリを使用してこのセレクタをオーバーライドすると、その変更は、セレクタ定義にそのセレクタが含まれているすべてのコンポーネントに影響します。例20-2に、アプリケーションのADF Facesコンポーネント用のデフォルト・フォント・ファミリのグローバル・セレクタを示します。
コンポーネント・セレクタ
コンポーネント固有のセレクタは、スキンを特定のADF Facesコンポーネントに適用できるセレクタです。例20-3に、af:inputTextコンポーネントのコンテンツ領域の背景色が赤に設定されているセレクタを示します。
各カテゴリには、これらのタイプのADF Facesスキン・セレクタが1つ以上含まれます。
標準セレクタ
標準セレクタは、スタイルを適用できる要素を直接表すセレクタです。たとえば、af|bodyはaf:bodyコンポーネントを表します。このタイプの要素には、CSSスタイル、プロパティおよびアイコンを設定できます。
疑似要素は、スタイルを適用できるコンポーネントの特定の領域を示すために使用します。疑似要素は、コロン（:）2つで始まり、その後にセレクタが表すコンポーネントの部分が続きます。たとえば、af|chooseDate::days-rowは、カレンダ・グリッド内の日付の外観に関するスタイルとプロパティを提供します。
一部のコンポーネントは、ベース・アイコンのセットを使用して、コンポーネント内にアイコン（<img>タグ）をレンダリングします。background-image CSSプロパティと同じようにCSSを使用してレンダリングされるわけではませんが、これらのアイコンにはスキンを適用できます。かわりに、アイコンは、レンダラが使用できるようSkinオブジェクトに登録されます。アイコン・セレクタは、コンポーネント・セレクタでは-iconによって、グローバル・セレクタではIcon:aliasによって示されます。たとえば、af:inputDateコンポーネントに、セレクタaf|inputDate::changed-iconを使用するスキンを適用できる変更アイコンがあるとします。変更アイコンは、グローバル・セレクタ.AFChangedIcon:aliasが設定されたアイコンを使用して、すべてのコンポーネントに対してグローバルに設定することもできます。詳細は、20.3.2項「アイコンへのスキンの適用方法」を参照してください。
ADF Facesコンポーネントによりレンダリングされるテキストは変換可能です。テキストは、スキンが適用されたリソース文字列として抽象化されます。たとえば、「OK」ボタンが構成されている場合、af_dialog.LABEL_OKは、af:dialogコンポーネントのテキスト・ラベルのリソース文字列です。リソース文字列のスキンは、CSSスキン・ファイルではなく、<bundle-name>パラメータを使用するtrinidad-skins.xmlファイルのスキン定義ファイルから参照されるリソース・バンドルにあります。また、ELバインディングに<translation-source>パラメータを使用して、MapまたはResourceBundleを指すこともできます。詳細は、20.3.1項「テキストへのスキンの適用方法」を参照してください。
スタイル・プロパティが指定されたセレクタ
スキン・スタイル・プロパティを使用すると、アプリケーション全体のコンポーネントのレンダリングをカスタマイズできます。CSSプロパティは、値とともにSkinオブジェクトに格納され、コンポーネントのレンダリング時に使用できます。たとえば、af|breadCrumbs{-tr-show-last-item: false}において、スキン・プロパティ-tr-show-last-itemは、af:breadCrumbsナビゲーション・パスの最後の項目を非表示にするように設定されています。
CSSの仕様では、ほぼすべてのコンポーネントに適用できる:hoverおよび:activeなどの疑似クラスが定義されます。ADF Facesには、特別な機能のための追加の疑似クラスが用意されています。疑似クラスは、クラス定義が続くコロンによってセレクタに示されます。次に、ADF Facesのスタイル・セレクタによって使用される一般的な疑似クラスを示します。
別名: :alias疑似クラスは、複数のコンポーネント、またはコンポーネントの複数の部分のスタイルを設定します。独自の別名クラスを作成してから、後で他のセレクタに含めることができます。
別名を変更することで、その別名を参照するすべてのコンポーネントを変更できます。たとえば、次の3つのフォーム・コンポーネントでは、.AFLabel:aliasを使用してラベルが同じ色にスタイル設定されています。
af|inputText::label,
af|inputChoice::label,
af|selectOneChoice::label {-tr-rule-ref: ".AFLabel:alias"}
.AFLabel:alias { color: blue }
.AFLabel:alias疑似クラスの色は青に設定されていますが、.AFLabel:aliasを変更するだけで、すべてのコンポーネントのラベル色を赤に変更できます。
.AFLabel:alias {color: red}
詳細は、20.3.5項「カスタム別名の作成方法」を参照してください。
ドラッグ・アンド・ドロップ: 2つの疑似クラスを使用できます。:drag-sourceは、ドラッグを開始するコンポーネントに適用され、ドラッグが終了したら削除されます。:drop-targetは、現在のドラッグのドロップ先のコンポーネントに適用されます。
標準: CSSでは、:hover、:activeおよび:focusなどの疑似クラスは、コンポーネントの状態とみなされます。コンポーネントへのスキンの適用にも、これと同じ考え方が当てはめられます。コンポーネントの状態は、read-onlyまたはdisabledなどです。同じセレクタに状態を組み合せると、すべての状態が満たされた場合にのみセレクタが適用されます。
右から左: ブラウザで言語の読み方向が右から左の際に、スタイルまたはアイコンの定義を設定する場合にこの疑似クラスを使用します。その他の典型的なユース・ケースは非対称のイメージです。読み方向が右から左のイメージを使用するスキン・セレクタを設定する際には、イメージを反転する必要があります。セレクタの最後に:rtl疑似クラスを追加し、反転イメージ・ファイルを指すようにします。たとえば、ブラウザの読み方向が右から左に設定されている場合、panelBoxコンポーネントの最後のイメージは、panelBoxStart.gifファイルになります。右から左のpanelBoxの最後のイメージは、反転された左から右へのpanelBoxの最初のイメージと同じです。
af|panelBox::medium af|panelBox::top-end:rtl {
background-image: url(/skins/purple/images/panelBoxStart.gif);
width:8px;
height:8px
}
:rtlは、スキン・アイコンへの適用にも使用できます。詳細は、20.3.2項「アイコンへのスキンの適用方法」を参照してください。
インライン編集: この疑似クラスは、ブラウザで編集するために、コンポーネント・サブツリーがアプリケーションによりアクティブ化される際に適用されます。たとえば、:inline-selectedは、アクティブでインラインでの編集が可能なサブツリーで、現在選択されているコンポーネントに適用される疑似クラスです。
メッセージ: この疑似クラスは、:fatal、:error、:warning、:confirmationおよび:infoのCSS疑似クラスを使用して、コンポーネント・レベルのメッセージ・スタイルを設定するために使用されます。詳細は、20.3.3項「メッセージへのスキンの適用方法」を参照してください。
セレクタのCSSプロパティをすべてのブラウザ、すべてのプラットフォーム、すべてのロケールおよび両方の読み方向に適用したくない場合があります。たとえば、他のブラウザには必要のないパディングをInternet Explorerに追加する必要がある場合があります。Windowsのフォント・スタイルをその他のプラットフォームのフォント・スタイルとは変えたい場合もあります。特定のユーザー環境用にセレクタをスタイル設定するには、スキニング・フレームワーク・ルールまたは:rtl疑似クラスにスキニング情報を配置します。スキニング・フレームワークは、HTTPリクエスト情報（エージェントやプラットフォームなど）に基づいてスタイルを選択し、ルールのないスタイルとマージさせます。ルールと一致するCSSプロパティは、すべてのルールに該当しないプロパティとマージされます。ユーザーの環境と最も一致する特定のルールが優先されます。現在、スキニング・フレームワークでは、次のルールと疑似クラスがサポートされています。
@platform
@agent
@accessibility-profile
:rtl
:langまたは@locale
例20-4に、最終的なスタイルを提供するために一緒にマージされるCSSファイル内のセレクタをいくつか示します。
例20-4 スタイル・セレクタのマージ
/** For IE and Gecko on Windows, Linux and Solaris, make the color pink. **/
@platform windows, linux, solaris
{
@agent ie, gecko
{
af|inputText::content {background-color:pink}
}
}
af|someComponent {color: red; width: 10px; padding: 4px}
/* For IE, we need to increase the width, so we override the width.
We still want the color and padding; this gets merged in. We want to add
height in IE. */
@agent ie { af|someComponent {width: 25px; height: 10px} }
/* For IE 5 and 6, we also need some margins.*/
@agent ie (version: 5) and (version: 6)
{
af|someComponent {margin: 5px;}
}
/* For Firefox 3 (Gecko 1.9) use a smaller margin.*/
@agent gecko (version: 1.9)\
{
af|someComponent {margin: 4px;}
}
/* The following selectors are for all platforms and all browsers. */
/* rounded corners on the top-start and top-end */
/* shows how to use :rtl mode pseudo-class. The start image in ltr mode is the */
/* same as the end image in the right-to-left mode. */
af|panelBox::medium af|panelBox::top-start,
af|panelBox::medium af|panelBox::top-end:rtl {
background-image: url(/skins/purple/images/panelBoxStart.gif);
width:8px;
height:8px
}
af|panelBox::medium af|panelBox::top-end,
af|panelBox::medium af|panelBox::top-start:rtl {
background-image: url(/skins/purple/images/panelBoxEnd.gif);
height: 8px;
width: 8px;
}
ADF Facesコンポーネントへのスキンの適用に使用されるセレクタは、「参照」→Oracle ADF FacesにあるJDeveloperオンライン・ヘルプの「FusionのADF Facesコンポーネントのスキン・セレクタ」および「Fusionのデータの可視化ツール・コンポーネントのスキン・セレクタ」のトピックに定義されています。
コンポーネント・レベルにルック・アンド・フィールを実装する方法として、テーマを適用することもできます。テーマの詳細は、20.3.4項「コンポーネントへのテーマの適用方法」を参照してください。
スキン・スタイル・プロパティの定義方法の詳細は、20.3項「スキン・スタイル・プロパティの定義」を参照してください。
ルートDOM要素にレンダリングされるスタイル関連のプロパティinlineStyleおよびstyleClassを変更することで、設計時にコンポーネントのルック・アンド・フィールを調整できます。設計時に指定するスタイル関連プロパティは、アプリケーション・スキンまたはコンポーネントの特定インスタンスのCSSに指定されている類似のスタイルをオーバーライドします。
inlineStyle属性は、CSSスタイルのセミコロンで区切られた文字列で、background-color:red; color:blue; font-style:italic; padding:3pxのように、個々の属性を設定できます。styleClass属性は、一連のインライン・スタイルのグループ化に使用されるCSSスタイル・クラス・セレクタです。スタイル・クラスは、.AFInstructionTextなどのADFパブリック・スタイル・クラスを使用して定義でき、af:outputTextコンポーネントに表示されるテキストのすべてのプロパティを設定します。
コンポーネント・スタイル・プロパティの適用方法の詳細は、20.4項「コンポーネントのスタイル・プロパティの変更」を参照してください。
カスタム・スキンは、企業の希望するルック・アンド・フィールを実現するために、色、フォントおよびADF Facesコンポーネントの一部の場所を変更できます。スキンは、CSSファイルにスタイル・セレクタを定義して作成します。カスタム・スタイルシートを作成したら、アプリケーションの有効なスキンとして登録し、そのスキンを使用するようにアプリケーションを構成します。
ADF Facesコンポーネントでは、デフォルトでblafplus-richスキンが使用されます。カスタム・スキンは、任意のADF Facesスキンblafplus-rich、blafplus-mediumまたはsimpleを拡張できます。カスタム・スキンを作成するには、拡張するスタイルシートのセレクタをオーバーライドまたは禁止するセレクタをスタイルシートに宣言します。オーバーライドしないように選択したセレクタは、そのスキンで定義されているスタイルを引き続き使用します。
simpleスキンの拡張では、BLAF Plusスキンを拡張する場合ほど、多くのプロパティを禁止する必要はありません。たとえば、BLAF Plusスキンでは、テキスト、背景および境界を含むスタイル・プロパティに様々な色が使用されます。simpleスキンでは、特定の色ではなく、.AFDarkBackground:aliasのように:alias疑似クラスが使用されます。色のスキームの変更では、複数の色を指定するコンポーネント・スキン・セレクタの場合より、オーバーライドする必要のあるグローバル・スキン・セレクタの数はかなり少なくなります。
スキンで使用されるテキストは、リソース・バンドル内で定義されます。blafplus-richスキンのセレクタと同様に、このテキストは、カスタム・リソース・バンドルを作成し、変更するテキストのみを宣言することによってオーバーライドできます。カスタム・リソース・バンドルを作成した後、スキンにそれを登録します。
複数のスキンを作成して適用できます。たとえば、Webアプリケーションのバージョン用にスキンを1つ作成し、PDAでアプリケーションが実行されるときに使用するスキンを別に作成します。あるいは、現在のユーザーのブラウザで設定されているロケールに基づいてスキンを変更することもできます。また、af:selectOneChoiceコンポーネントなどのコンポーネントを構成し、ユーザーがスキンを切り替えられるようにできます。
カスタム・スキン・リソースおよび構成ファイルを、デプロイするアプリケーションとバンドルできる一方、スキン定義をJavaアーカイブ（JAR）ファイルに格納して、デプロイしたアプリケーションに追加することも可能です。JARファイルを使用する利点は、カスタム・スキンをアプリケーションとは別に開発およびデプロイでき、ルック・アンド・フィールの一貫性が高まることです。また、スキン定義およびイメージ・ファイルを独自のJARファイルに分割できるため、アプリケーションにデプロイする必要のあるファイル数が少なくなることです。
カスタム・スキンをアプリケーションに適用する手順は、次のとおりです。
カスタム・スキンをアプリケーションに追加します。詳細は、20.2.1項「アプリケーションへのカスタム・スキンの追加方法」を参照してください。
カスタム・スキンを登録します。詳細は、20.2.2項「カスタム・スキンの登録方法」を参照してください。
カスタム・スキンを使用するようにアプリケーションを構成します。詳細は、20.2.3項「カスタム・スキンを使用するためのアプリケーションの構成方法」を参照してください。
JARファイルにカスタム・スキンをデプロイします。詳細は、20.2.4項「JARファイルへのカスタム・スキンのデプロイ方法」を参照してください。
アプリケーションにカスタム・スキンを追加するには、JDeveloper内にCSSファイルを作成します。CSSはアプリケーションとともにデプロイするために、JDeveloperによりプロジェクトのソース・ファイルに配置されます。
CSSを作成する手順:
JDeveloperで、「CSSレベル3」および「ADF Faces」が選択されていることを確認します。メイン・ツールバーから、「ツール」→「設定」→「CSSエディタ」を選択します。サポート・レベルにドロップダウン・メニューから「CSSレベル3」を選択し、「サポート対象コンポーネント」に「ADF Faces拡張機能」を選択します。
アプリケーション・ナビゲータで、ユーザー・インタフェースのコードが含まれるプロジェクトを右クリックし、ポップアップ・メニューから「新規」を選択します。
「新規ギャラリ」の「カテゴリ」で、「Web層」を開いて「HTML」を選択します。
「CSSファイル」オプションをダブルクリックします。
「Cascading Style Sheetの作成」ダイアログで、CSSの名前とパスを入力します。
「OK」をクリックします。
これで、CSSエディタにCSSを開いて、アプリケーションのスタイルを定義できます。ADF Facesコンポーネントのスタイル・セレクタ設定の詳細は、20.3項「スキン・スタイル・プロパティの定義」を参照してください。
例20-5に、File Explorerデモ・アプリケーションから抜粋したsporty.cssファイルのコンテンツを示します。
例20-5 File Explorerデモから抜粋したsporty.cssスタイルシートのコンテンツ
af|document[theme="dark"] {
background-image: url('skins/sporty/sporty-template-hdr-bgrnd.PNG');
background-repeat: repeat;
background-color: rgb(180,0,0);
}
af|decorativeBox::center[theme="dark"],
af|decorativeBox::start[theme="dark"],
af|decorativeBox::end[theme="dark"],
af|decorativeBox::center[theme="medium"],
af|decorativeBox::start[theme="medium"],
af|decorativeBox::end[theme="medium"] {
background-color: #C0C0C0;
}
af|decorativeBox::center[theme="light"],
af|decorativeBox::start[theme="light"],
af|decorativeBox::end[theme="light"] {
background-color: #E0E0E0;
}
af|commandButton {
background-color: rgb(180,0,0);
border-color: rgb(180,0,0);
color: white;
}
af|navigationPane-list::bullet {
background-image: url('/skins/sporty/sporty-navpane-bullet.PNG');
}
af|navigationPane-list::link {
color: black;
text-decoration: underline;
font-size: 11px;
color: #000;
}
af|navigationPane-list::link:hover {
text-decoration: underline;
font-size: 11px;
color: #f00;
}
af|navigationPane-list::link:visited {
color: #666;
text-decoration: underline;
font-size: 11px;
}
af|panelTabbed {
font-size: 10px;
color: #000000;
}
af|commandLink,
af|commandLink:link,
af|commandLink:active,
af|commandLink:active:link,
.AFActiveLinkForeground:alias,
.AFLinkForeground:alias {
color: #000;
}
af|commandLink:visited:hover,
af|commandLink:hover {
color: #f00;
}
af|commandLink:visited,
af|commandLink:visited:active,
af|commandLink:visited:focus,
.AFVisitedLinkBackground:alias,
.AFVisitedLinkForeground:alias {
color: Gray;
}
また、Oracle JDeveloperのコンテキスト外にCSSを作成し、スキン・リソースとともにCSSをJARファイルにパッケージ化できます。この推奨オプションの詳細は、20.2.4項「JARファイルへのカスタム・スキンのデプロイ方法」を参照してください。
スキンの登録では、trinidad-skins.xmlという名前のファイルを作成し、スキンのID、ファミリ、場所およびカスタム・リソース・バンドルのいずれかを使用している場合は、このファイルにそれらを識別するタグのリストを移入します。
カスタム・スキンを登録する手順:
アプリケーション・ナビゲータで、スキンを適用するアプリケーションに属するプロジェクトの「WEB-INF」フォルダを右クリックし、ポップアップ・メニューから「新規」を選択します。
「新規ギャラリ」の一般ノードで、「XMLファイル」を選択します。
「XML文書」を選択し、「OK」をクリックします。
「ファイル名」フィールドに、ファイル名trinidad-skins.xmlを入力します。
「ディレクトリ名」フィールドに、ファイルを格納する場所へのパスを入力するか、デフォルトをそのまま使用します。ファイルは「WEB-INF」フォルダに格納する必要があります。
「OK」をクリックしてファイルを作成します。
例20-6のコードと似ているコードを追加します。
例20-6 trinidad-skins.xmlファイルのデフォルト・コード
<?xml version="1.0" encoding="windows-1252" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>myskin.desktop</id>
<family>myskin</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>css/myskin.css</style-sheet-name>
</skin>
</skins>
ソース・エディタで、スキンの登録に必要なタグを入力します。
<id>
スキンには一意のIDが必要です。EL式を使用してスキンIDを参照することもできます。たとえば、ロケールごとに異なるスキンを使用する場合、IDに基づいて適切なスキンを選択するEL式を作成できます。blafplus-medium.desktopのように、IDの最後にdesktop、.pdaまたは.portletを追加するという規則があります。
<family>
特定のスキン・ファミリを使用するようにアプリケーションを構成します。これにより、使用されるレンダー・キットを基に、アプリケーションのスキンをグループ化できます。
たとえば、blafplus-rich.desktopスキンおよびblafplus-rich.pdaスキンがrichDemoファミリの一部になるように定義すると、システムにより、render-kit-idに基づいて適切なスキンが自動的に選択されます。
<skin>
<id>richdemo.desktop</id>
<family>richDemo</family>
<extends>blafplus-rich.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/richdemo/richdemo.css</style-sheet-name>
</skin>
<skin>
<id>richdemo.pda</id>
<family>richDemo</family>
<extends>blafplus-rich.pda</extends>
<render-kit-id>pda</render-kit-id>
<style-sheet-name>skins/richdemo/richdemo.css</style-sheet-name>
</skin>
<extends>
この要素を使用してカスタム・スキンを拡張します。この要素のデフォルト値はsimple.desktopです。ただし、この要素を使用することで任意のスキンを拡張できます。
たとえば、スキンを拡張し、フォント別名を使用してCSSを作成することで、スキン全体のフォントを簡単に変更できます。たとえば、次のようにしてblafplus-rich.desktopファミリを拡張します。
<extends>blafplus-rich.desktop</extends> <style-sheet-name>skins/skins/myStyle/mystyle.css</style-sheet-name>
CSSに、スキン全体のフォントを変更するための別名を設定します。
.AFDefaultFontFamily:alias {font-family: Tahoma}.AFDefaultFont:alias {font-size: 16px}
<render-kit-id>
この値によって、スキンに使用するレンダー・キットが決まります。次のいずれかを入力できます。
org.apache.myfaces.trinidad.desktop: アプリケーションのデスクトップでのレンダリング時にスキンが自動的に使用されます。
org.apache.myfaces.trinidad.pda: このスキンは、アプリケーションがPDAにレンダリングされる際に使用されます。
<style-sheet-name>
カスタム・スタイルシートのURLです。スタイルシート名ファイルは、次の方法でURLオブジェクトとして取得されます。
サーバーの起動後に変更可能な非静的URLの場合、style-sheet-nameがhttp:、https:、file:、ftp:またはjar:で始まる場合には、new java.new.URL(style-sheet-name)をコールすることでURLが作成されます。そうでない場合、URLは<FacesContext> <ExternalContext> getResource<style-sheet-name>をコールして作成されます。存在しない場合には、URLのパーツを区切るためにスラッシュ（/）が追加されます。たとえば、skins/bigfont/bigfont.cssの間にスラッシュが追加されます。
まだ取得されていない場合は、<ClassLoader> getResourceを使用して、META-INF/purpleSkin/styles/myPurpleSkin.cssに類似のstyle-sheet-nameの書式でURLが作成されます。URLがこの書式に変換されたら、スタイルシートを含むJARファイル内で検索できます。
<bundle-name>
スキン用に作成されたリソース・バンドルです。カスタム・バンドルを作成していない場合は、この要素を宣言する必要はありません。詳細は、20.3.1項「テキストへのスキンの適用方法」を参照してください。
|
注意: リソース・バンドルのローカライズ済バージョンをすでに作成してある場合、必要な作業はベース・リソース・バンドルを登録することのみです。 |
<translation-source>
MapまたはResourceBundleを指すELバインディングです。実行時のスキンの変換をより動的に行う場合は、バンドル名のかわりにこれを使用できます。<bundle-name>タグが優先されます。
例20-7に、mySkinスキンのtrinidad-skins.xmlファイルのエントリを示します。
例20-7 trinidad-skins.xmlファイルのスキンのエントリ
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>
mySkin.desktop
</id>
<family>
mySkin
</family>
<extends>blafplus-rich.desktop</extends>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/mySkin/mySkin.css
</style-sheet-name>
<bundle-name>
myBundle
</bundle-name>
<translation-source></translation-source>
</skin>
</skins>
ファイルを保存します。
trinidad-config.xmlファイル内に、使用するスキン（および必要な場合は、それが使用される条件）を決定する要素を設定します。
|
注意: スキンが表示されない場合は、af:documentタグがページに追加されているかどうかを確認してください。af:documentタグによりスキン・フレームワークが初期化され、CSSが作成されてページにリンクされます。 |
スキンを使用するようにアプリケーションを構成する手順:
trinidad-config.xmlファイルを開きます。
<skin-family>値を、使用するスキンのファミリ名で置き換えます。
例20-8に、mySkinスキン・ファミリを使用するための構成を示します。
値を条件付きで設定するには、表示するスキンを決定するために評価できるEL式を入力します。
たとえば、ユーザーのブラウザがドイツのロケールに設定されているときにはドイツ語のスキンを使用し、それ以外のときには英語のスキンを使用する場合、trinidad-config.xmlファイル内に次のように入力します。
<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>
ファイルを保存します。
スキン定義をJavaアーカイブ（JAR）ファイルに保存し、デプロイ済アプリケーションに追加することが必要な場合があります。次に、アプリケーションにバンドルする場合と比較して、スキンをJARファイルにパッケージ化することの利点を示します。
アプリケーションとは別に、スキンをデプロイおよび開発できます。これにより、スキンへの変更の適用が必要な場合に、確認するファイル数を減らすこともできます。一番の利点は、JARファイルに格納されたスキン定義を使用することで、アプリケーションのルック・アンド・フィールの一貫性が高まることです。
スキン定義とイメージを、それぞれ独自のJARファイルに分割できます。そのため、すべてのアプリケーションに全ファイルをデプロイする必要がないように、イメージ・ベースを別々のJARファイルに分けられます。
JARファイルにスキンをデプロイするには、次のルールに従います。
スキンを定義し、CSSファイルを参照するtrinidad-skins.xmlファイルは、META-INFディレクトリに内に存在する必要があります。
すべてのイメージ・リソースおよびCSSファイルも、META-INFディレクトリに配置する必要があります。例20-9に示すように、イメージは、adfルート・ディレクトリ、またはリソース・サーブレットのweb.xmlファイルにマップされている任意のディレクトリ名で始まるディレクトリに存在する必要があります。
JARファイルは、デプロイするアプリケーションのビュー・レイヤー・プロジェクトのWEB-INF/libディレクトリに配置する必要があります（または、アプリケーション・サーバー・レベルの共有ライブラリを使用する必要があります）。
例20-9 パスが含まれるweb.xmlファイル
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/adf/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/afr/*</url-pattern>
</servlet-mapping>
JARファイルにスキンをデプロイする手順:
次のようなディレクトリ構造を作成します。
c:\temp\META-INF\adf\oracle\skin\images
META-INF\skins\oracleblaf.css
META-INF\trinidad-skins.xml
META-INFディレクトリのディレクトリがadfで始まることを確認します。imagesディレクトリには、oracleblaf.cssスキン内に使用されたすべてのイメージが含まれます。イメージへのCSS参照のパスは、次のようになります。
af|inputColor::swatch-overlay-icon:rtl {
content:url(../adf/oracle/skin/images/cfsortl.gif);
width: 12; height: 12;
left:-7px;
position:relative;
right:-7px;
top:5px;
}
イメージ・パス../adf/oracle/skin/images/cfsortl.gifの先頭にある2つのピリオドに注意してください。これにより、CSSが存在するMETA-INF/skinディレクトリの1つ上のディレクトリから、META-INFルートの検索を開始できます。
trinidad-skins.xmlファイルがMETA-INFディレクトリに存在し、次のような形式でコンテンツが含まれることを確認してください。
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>oracleblaf.desktop</id>
<family>oracleblaf</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/oracleblaf.css</style-sheet-name>
</skin>
</skins>
この例では、oracleblafファミリのoracleblaf.desktopとしてスキンが定義されています。trinidad-skins.xmlファイルには、複数のスキン定義を含めることが可能です。oracleblaf.cssファイル（またはカスタムのCSSファイル）は、style-sheet-name要素から参照されます。
JARファイルを作成するには、c:\tempディレクトリから次のコマンドを発行します。
jar -cvf customSkin.jar META-INF/
結果のcustomSkin.jarファイルを、使用するADFプロジェクトのWEB-INF/libディレクトリにコピーします。ADFプロジェクトのWEB-INFディレクトリにあるtrinidad-skins.xmlファイルを構成します。
<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>oracleblaf</skin-family>
</trinidad-config>
スキンは実行時に検出されるため、スキンのファミリ名のコードを記述する必要はありません。
|
注意: JARファイルのスキン定義は、JDeveloperのビジュアル・エディタに表示されません。ログ・ウィンドウに、スキン・ファミリが見つからなかったというメッセージが表示されます。このメッセージは無視できます。 |
ADF Facesスキン・スタイル・セレクタでは、アプリケーションにカスタムのルック・アンド・フィールを作成するために、コンポーネントにスキンを適用する複数のオプションがサポートされています。表20-1に、af:goButtonコンポーネントのスキン・スタイル・セレクタを説明します。
表20-1 af:goButtonコンポーネントのスタイル・セレクタ
| 名前 | 説明 |
|---|---|
|
|
|
|
|
ボタン・アイコンのスタイル（ |
|
|
ボタンのテキストのスタイル。 |
図20-3に、af:goButtonコンポーネントおよびコンポーネント・アイコンに、デフォルトのblafplus-richスキンを適用した様子を示します。
図20-4に、カスタム・スキンに次のスタイル・プロパティを設定したことによる、ボタンおよびアイコンの新しい外観を示します。
af|goButton::access-key {color: red;}
af|goButton::icon-style {border: 1px solid black;}
デフォルト・スキンにより使用されるADF Facesスキン・スタイル・セレクタは、JDeveloperオンライン・ヘルプの「FusionのADF Facesコンポーネントのスキン・セレクタ」および「Fusionのデータの可視化ツール・コンポーネントのスキン・セレクタ」のトピックに定義されています。これらのトピックは、「参照」→Oracle ADF Facesにあります。
JDeveloperでは、CSSファイルの編集中に、コーディングがサポートされます。ファイル・ディレクトリの編集時、またはJSPソース・エディタのADF Facesコンポーネントの編集時に、CSSコード・エディタを起動できます。次のような場合に、コード・サポートを使用できます。
コード・インサイト
エラーの強調表示
スタイルのプレビュー
リファクタ
使用方法の検索
クイック・コメント
書式設定
一致タグの強調表示
CSSファイルを使用してスタイルが決定されるだけでなく、スキンでは、リソース・バンドルも使用してコンポーネント内のテキストが決定されます。ADF Facesコンポーネントがレンダリングするテキストは、リソース文字列として変換および抽象化できます。たとえば、af_chooseDate.LABEL_SELECT_YEARは、af:chooseDateコンポーネントを使用して年の選択に使用されるフィールド・ラベルのリソース文字列です。すべてのADF Facesスキンでは同じリソース・バンドルが使用されます。
ADF Facesコンポーネントのテキストにスキンを適用するには、カスタム・リソース・バンドルを作成し、デフォルトのリソース文字列値をオーバーライドします。次に、trinidad-skins.xmlファイルのカスタム・リソース・バンドルに<bundle-name>プロパティを設定します。
|
注意: ADF Facesコンポーネントでは自動変換がサポートされています。コンポーネントのスキンに使用されるリソース・バンドルは、28の言語に変換されます。ユーザーがドイツ語を使用するようにブラウザを設定した場合、コンポーネント内に含まれるテキストはすべて自動的にドイツ語で表示されます。このため、カスタム・スキン用のリソース・バンドルを作成した場合は、アプリケーションでサポートされる他の言語に対応する、そのバンドルのローカライズ済バージョンも作成する必要があります。詳細は、第21章「ページの国際化およびローカライズ」を参照してください。 |
カスタム・リソース・バンドルを作成および登録する手順:
JDeveloperで、単純なJavaクラスを新規に作成します。
アプリケーション・ナビゲータで、ファイルの保存場所を右クリックし、「新規」を選択して「新規ギャラリ」を開きます。
「カテゴリ」ツリーで「JAVA」を選択し、「項目」リストで「Javaクラス」を選択します。
クラスの名前とパッケージを入力します。クラスはjava.util.ListResourceBundleを拡張している必要があります。
オーバーライドするキーをバンドルに追加し、必要に応じてテキストを設定します。例20-10に、SkinBundleカスタム・リソース・バンドルを示します。
例20-10 カスタムのSkinBundleに設定されているリソース文字列
public class SkinBundle extends ListResourceBundle {
@Override
public Object[][] getContents() {
return _CONTENTS;
}
static private final Object[][] _CONTENTS = {
{"af_tableSelectMany.SELECT_COLUMN_HEADER", "Select A Lot"},
{"af_tableSelectOne.SELECT_COLUMN_HEADER", "Select Just One"},
{"af_showDetail.DISCLOSED_TIP", "Click to Hide"}
};
}
trinidad-skins.xmlファイルの<bundle-name>パラメータにカスタム・リソース・バンドルの名前を設定します。例20-11に、trinidad-skins.xmlファイルのカスタムSkinBundle設定を示します。
例20-11 trinidad-skins.xmlのカスタムSkinBundle設定
<skin>
<id>
purple.desktop
</id>
<family>
purple
</family>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/purple/purpleSkin.css
</style-sheet-name>
<bundle-name>
org.apache.myfaces.trinidaddemo.resource.SkinBundle
</bundle-name>
</skin>
テキストにスキンを適用する別のオプションでは、<bundle-name>ではなく<translation-source>パラメータを使用します。<translation-source>パラメータは、MapまたはResourceBundleを指すELバインディングです。このオプションの利点は、実行時に使用する任意のロジックに基づいて、変換値を自動的に変更できることです。両方が設定されている場合、<bundle-name>タグが優先されます。例20-12に、バンドル・マップへの<translation-source>パラメータの設定にEL式を使用するコードを示します。
例20-12 カスタム・リソース・バンドル・マップ
public class SkinTranslationMapDemo
{
/* Test a skin's translation-source EL pointing to a Map */
public Map<String, String> getContents()
{
return _CONTENTS;
}
static private final Map<String, String> _CONTENTS = new HashMap<String, String>();
static
{
_CONTENTS.put("af_inputDate.LAUNCH_PICKER_TIP", "Launch PickerMap");
_CONTENTS.put("af_showDetail.DISCLOSED_TIP", "Hide Tip Map");
_CONTENTS.put("af_showDetail.DISCLOSED", "Hide Map");
}
}
例20-13に、trinidad-skins.xmlファイルのリソース・マップへの<translation-source>パラメータの設定を示します。
例20-13 trinidad-skins.xmlに設定されているカスタム・リソース・バンドル・マップ
<skin>
<id>
purple.desktop
</id>
<family>
purple
</family>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/purple/purpleSkin.css
</style-sheet-name>
<translation-source>
#{skinTranslationMap.resourceBundle}
</translation-source>
</skin>
アイコン・スタイル・セレクタにあるアイコン・イメージへのURLパスを指定することで、ADF Facesコンポーネントに関連付けられているデフォルト・アイコンにスキンを適用できます。
アイコン・セレクタでは、疑似クラス（:hoverなど）のようなCSS構文、および子セレクタやコンポジット・クラス・セレクタは機能しないことに注意してください。
|
注意: アイコンのセレクタをオーバーライドする場合、アイコン・イメージへのURLのコンテキスト相対パス（スラッシュ（/）から始まるパス）を使用します。疑問符は使用しません。
また、アイコンの幅と高さを含める必要があります。 |
例20-14に、アイコンのセレクタを示します。
アイコンとボタンは両方とも、rtl疑似クラスを使用できます。これにより、アプリケーションが右から左へのモードで表示されるときに使用されるアイコンやボタンが定義されます。例20-15に、アイコンに使用されるrtl疑似クラスを示します。
特定レベルのメッセージが関連付けられているかどうかに基づいて、ADF Faces入力コンポーネントにスタイルを適用できます。コンポーネントに特定タイプのメッセージが追加されると、そのコンポーネントのスタイルは、新しいステータスを反映するように自動的に変更されます。そのステータスにスタイルが定義されていない場合は、デフォルトのスタイルが使用されます。
関連付けられているメッセージ・レベルに基づいて入力コンポーネントにスタイルを定義するには、コンポーネント定義にスタイル疑似クラスを追加します。たとえば、af:inputTextコンポーネントのコンテンツ・リージョンのベース・スタイルを、背景色が紫になるように定義するには、スタイル・セレクタaf|inputText::content{background-color:purple}を使用します。エラー・メッセージがある場合のコンポーネントのコンテンツ・リージョンを定義するには、スキン・スタイル・セレクタaf|inputText:error::contentを使用します。
有効なメッセージ・プロパティは、:fatal、:error、:warning、:confirmationおよび:infoです。
テーマは、コンポーネント・レベルのルック・アンド・フィールを実装する方法です。目的は、ページの一部分にある複数のコンポーネント全体に一貫したルック・アンド・フィールを提供することです。テーマは一般的には、特定領域の外観がそれぞれ異なるJSFページ・テンプレートに使用されます。たとえば、上部のブランド領域に暗い背景色と明るいテキストが使用され、より明るい背景色のナビゲーション・コンポーネントと、明るい背景色のメイン・コンテンツ領域があるページです。
色調スタイル・クラス.AFDarkTone、.AFMediumTone、.AFLightToneおよび.AFDefaultToneも使用できますが、テーマがデフォルトのスタイルです。テーマは色調スタイルより作成しやすく、依存するセレクタが少ない上に、CSS包含セレクタも使用されません。これらの理由から、問題が発生する可能性が低くなります。1つのCSSファイル内のセレクタ数に対する制限により、色調スタイルおよびテーマの両方を、同じアプリケーションでサポートすることはできません。
テーマを設定するコンポーネントにより、子コンポーネントにそのテーマが公開されるため、テーマが継承されます。テーマは、次のコンポーネントにより設定（開始または変更）されます。
af:document
af:decorativeBox
af:panelStretchLayout
af:panelGroupLayout
BLAF Plusスキンblafplus-richおよびblafplus-mediumでは、次のテーマがサポートされています。
dark
medium
light
none（デフォルト）
JSPXページにおいて、テーマは次に示すように、af:documentコンポーネントによって開始されます。
<af:document theme="dark"> <af:panelTabbed>...</af:panelTabbed> </af:document>
コンポーネントにテーマを設定するには、CSSファイルのスキン・セレクタにtheme属性を指定します。たとえば、af:panelTabbedコンポーネントのテキストの色をdarkテーマに変更するセレクタは次のとおりです。
af|panelTabbed[theme="dark"] {
color: red;
}
テーマがサポートされ、スタイル・クラスのあるコンポーネントのすべてのHTML要素にテーマが追加されるため、テーマの包含スタイルCSSセレクタは不要です。すべてのテーマ・セレクタは、必ずセレクタの最後の要素に含まれている必要があります。たとえば、af:breadCrumbsコンポーネントの各ステップにdarkテーマを適用するセレクタは次のとおりです。
af|breadCrumbs::step:disabled[theme="dark"] {
color:#FFFFFF;
}
コンポーネントの背景色が、周囲のテーマ色には不適切な色に設定されている場合、色の不適合が起こる場合があります。たとえば、panelHeaderコンポーネントがdarkテーマに配置されている場合、panelHeaderコンポーネント内のCSSスタイルにより、前景色は変更されずに、コンポーネントの背景色が明るい色に設定されます。その結果、コンポーネントは、明るい背景色で明るい前景色になります。その他多くのコンポーネントも、darkテーマに配置されると、前景色が明るい色に設定されます。
色の不適合が起こった場合は、コンポーネントのテーマ色を、周囲のテーマ色に適切な色に手動で設定できます。これを実行するには、コンポーネントにpanelGroupLayoutまたはpanelStretchLayoutコンポーネントを挿入し、panelGroupLayoutまたはpanelStretchLayoutのテーマを適切な色に設定します。
<af:panelHeader text="Header Level 0">
<af:panelGroupLayout layout="vertical" theme="default">
...
</af:panelGroupLayout>
</af:panelHeader>
テーマがデフォルトの場合でも、アプリケーションにパラメータを設定して、色調スタイルの使用を続けることができます。
ソース・エディタでプロジェクトのweb.xmlを開いて、例20-16のコードに示すように、コンテキスト初期化パラメータを設定する色調スタイルを有効にします。
例20-16 web.xmlのアプリケーションの色調スタイルの有効化
<context-param> <param-name>oracle.adf.view.rich.tonalstyles.ENABLED</param-name> <param-value>true</param-value> </context-param>
テーマを使用するために、web.xmlファイルを変更する必要はありません。
デフォルトでは、テーマはコンポーネントやその子コンポーネントには設定されていません。テーマは継承されるため、コンポーネントに設定されていないtheme属性がある場合には、次の値がサポートされます。
指定なし: テーマが指定されていない場合、<af:decorativeBox>...のようにテーマが継承されます。
#{null}: 指定なしの場合と同じように、テーマが継承されます。
inherit: nullの場合と同じように、テーマが継承されます。
default: テーマは、コンポーネントおよびその子コンポーネントから削除されます。
空の文字列: テーマが空の文字列に設定されている場合は、defaultと同じように動作します。たとえば、<af:decorativeBox theme="">では、コンポーネントおよびその子コンポーネントからテーマが削除されます。
独自の別名を作成してから、後で他のセレクタに含めることができます。
カスタム別名を作成する手順:
別名のセレクタ・クラスを作成します。たとえば、マウス・カーソルが置かれたリンクの色を設定するために別名を追加できます。
.MyLinkHoverColor:alias {color: #CC6633;}
別のセレクタに別名を含めるには、既存のセレクタに疑似要素を追加して新しいセレクタを作成し、-tr-rule-ref:selectorプロパティを使用してその別名を参照します。
たとえば、カーソルが置かれたときの色をスタイル設定するためにaf|menuBar::enabled-linkセレクタに対する新規のセレクタを作成してから、カスタム別名を参照できます（例20-17を参照）。
スキンを動的に変更するようにコンポーネントを構成するには、最初にJSFページでコンポーネントを構成し、後で構成ファイルによる評価が可能なスコープで値を設定する必要があります。次に、この値によって動的に設定されるようにtrinidad-configファイルでスキン・ファミリを構成します。
スキン・ファミリを設定するためにコンポーネントを条件付きで構成する手順:
スキン・ファミリの設定に使用されるコンポーネントが含まれるメインのJSFページ（index.jspxまたは類似のファイルなど）を開きます。
sessionScopeコンポーネントを使用して、スキン・ファミリが表示されるようにページを構成します。
例20-18は、選択された値を取得し、この値をindex.jspxページにあるsessionScopeコンポーネントのskinFamily属性の値として設定するaf:selectOneChoiceコンポーネントを示しています。
例20-18 コンポーネントを使用したスキン・ファミリの設定
<af:selectOneChoice label="Choose Skin:" value="#{sessionScope.skinFamily}" autoSubmit="true">
<af:selectItem value="blafplus-rich" label="blafplus-rich"/>
<af:selectItem value="blafplus-medium" label="blafplus-medium"/>
<af:selectItem value="simple" label="simple"/>
<af:selectItem value="richDemo" label="richDemo"/>
<af:selectItem value="mySkin" label="mySkin"/>
</af:selectOneChoice>
ページの「リフレッシュ」ボタンにより、ページが再度送信されます。ページがリフレッシュされるたびにEL式が評価され、変更がある場合、新しいスキンを使用してページが再描画されます。
実行時にスキンを変更するためにコンポーネントを条件付きで構成する手順:
trinidad-config.xmlファイルで、EL式を使用してスキン・ファミリを動的に評価します。
<skin-family>#{sessionScope.skinFamily}</skin-family>
ADF Facesコンポーネントでは、Cascading Style Sheet（CSS）仕様に基づいてCSSスタイル・プロパティを使用しています。Cascading Style Sheetには、スタイルを適用する方法を定義するセレクタと宣言からなる規則が含まれます。これらのルールは後にブラウザにより解釈され、ブラウザのデフォルト設定をオーバーライドします。
|
警告: コンポーネントを拡大するためにスタイルを使用しないでください。拡大を目的としたスタイルの使用は宣言的でなく、多くの場合、異なるWebブラウザ間で動作の一貫性がなくなります。かわりに、ADFフレームワークに用意されているジオメトリ管理を使用して、コンポーネントを拡大できます。レイアウトおよび拡大の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。 |
inlineStyle属性を定義して、コンポーネントにインライン・スタイルを設定します。インライン・スタイルは、コンポーネントのインスタンス用コンポーネントのスタイルの指定に使用できます。詳細は、8.3項「コンテンツをページ全体に拡大するための設定」を参照してください。
インライン・スタイルを設定する手順:
コンポーネントのinlineStyle属性を、使用するインライン・スタイルに設定します。
スタイルの設定にプロパティ・インスペクタを使用すると、図20-5に示すように、ドロップダウン・リストから必要なスタイル機能を選択できます。
JDeveloperにより、コンポーネントの対応するコードがJSFページに追加されます。例20-19に、inlineStyle属性が指定されたaf:outputTextコンポーネントのソースを示します。
inlineStyle属性自体にEL式を使用して、インライン・スタイル属性を条件付きで設定できます。たとえば、アクションがまだ完了していない場合に日付を赤で表示するには、例20-20のようなコードを使用できます。
ADF Facesコンポーネントには、ルートDOM要素に登録されていないスタイル設定には使用できない、その他のスタイル属性もあります。たとえば、af:inputTextコンポーネントの場合、例20-21に示すように、contentStyleプロパティを使用して要素のテキストを設定します。
