| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-11 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-11 |
|
前 |
次 |
この章では、ADF Facesのスキンおよびコンポーネントのスタイル属性を使用してスタイル・プロパティを変更することにより、アプリケーションの外観を変更する方法を説明します。
この章では、次の項目について説明します。
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アプリケーションを使用すると、ドロップダウン・リストから複数のスキンを選択できます。スキンの選択をサポートするためのCSSファイルが複数用意されています。詳細は、1.4.3項「File Explorerアプリケーションの概要」を参照してください。
このガイドでは、CSSの概念については説明しません。公式仕様など、スタイルシートの広範な情報は、次に示すW3CのWebサイトを参照してください。
|
注意: 11gリリース2 (11.1.2.0.0)では、ADFスキン・エディタが導入されました。このスタンドアロン製品を使用して、複数のリリースのADF Facesアプリケーションのスキンを視覚的に作成および変更できます。ADFスキン・エディタには、スキンの作成プロセスを簡略化する様々な機能があります。ADFスキン・エディタのインストール方法などの詳細は、 |
スキンはCSS 3.0構文に基づくスタイルシートで、アプリケーション全体用に1箇所で指定されます。各コンポーネントへのスタイルシートの指定、または各ページへのスタイルシートの挿入を実行するかわりに、アプリケーション全体に対して1つのスキンを作成できます。各コンポーネントでは、スキンに記述されているスタイルが自動的に使用されます。スキンを使用すると、ページの外観を変更するためにJSFページに設計時の変更を加える必要がありません。スキンを使用すると、ADF Facesコンポーネントの外観をグローバルに変更できます。
既存のADF Facesアプリケーションでは、アプリケーションが作成されたときに使用するように構成されたスキンが使用されます。たとえば、Oracle ADF 11g (11.1.1.7.0)を使用してアプリケーションを作成する場合、アプリケーションではskyrosスキンが使用されます。アプリケーションをアップグレードした場合、最初に作成されたときに使用するように構成されたスキンが引き続き使用されます。アプリケーションで別のスキンを使用する場合は、カスタム・スキンを使用するためのアプリケーションの構成方法に関する項で説明されているように、trinidad-config.xmlファイルを編集します。
ADF Facesにより提供されたスキンの1つを拡張して、独自のカスタム・スキンを作成できます。詳細は、アプリケーションへのカスタム・スキンの追加方法に関する項を参照してください。自分で作成したカスタム・スキンをアプリケーションで使用する場合、カスタム・スキンの登録方法に関する項で説明されているように、trinidad-skins.xmlファイルを作成または編集し、さらにtrinidad-config.xmlファイルを編集します。
ADF Facesには、アプリケーションで使用する次のスキンが用意されています。
simple : 最低限の書式設定のみが含まれています。
fusion: ADF Facesコンポーネントのスタイルを定義します。このスキンは、非常に多くのスタイルを提供します。
fusion-11.1.1.3.0: より明瞭なタブのレンダリングを行う特定のコンポーネントに階層構造を作成するように、fusionスキンを変更します。これらのコンポーネントは、panelTabbed、navigationPane (属性hint="tabs")とdecorativeBoxです。またこのスキンでは、公開されたpanelAccordionコンポーネント・ペインに表示されるテキストを読みやすくするために、このペインのための、より目立たない背景イメージを定義しています。
fusionFx-v1: このスキンは、fusion-11.1.1.3.0スキンから拡張されます。ADF Facesによって提供されたスキンのいずれかを拡張してカスタム・スキンを作成した場合、trinidad-skins.xmlファイルに登録する必要があります。fusionFx-v1スキンを拡張するには、trinidad-skins.xmlファイルで次の値を使用します。
<skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>fusionFx-v1.desktop</extends> </skin>
アプリケーションでfusionFx-v1スキンを使用するには、trinidad-config.xmlファイルで次の値を使用します。
<skin-family>fusionFx</skin-family>
fusionFx-v1スキンには、数多くの問題に対応するためのデザインの改善と変更が含まれています。具体的には、これによって次のものが追加されます。
特定のブラウザでインライン・ポップアップが表示されたときに、基礎となるフレームのコンテンツが表示されないようにするため、背景色を.AFMaskingFrameグローバル・スタイル・セレクタにします。
inputComboboxListOfValuesコンポーネントのための、ブールADFスキン・プロパティ-tr-stretch-dropdown-table。このプロパティは、表の列のコンテンツを表示するためにドロップダウン・リスト内の表をストレッチするか、または表の幅をinputComboboxListOfValuesコンポーネント内の入力フィールドの幅に制限するかどうかを指定します。
inlineFrameコンポーネントは、フレームのコンテンツのロードが完了したことをブラウザが判別するまで、ロード・インジケータとして機能するイメージを表示します。
作成するカスタム・スキンにこの機能を実装できます。af|inlineFrameセレクタにある擬似クラスのbusyとflowを使用すると、このことを行うことができます。inlineFrameコンポーネントが親コンポーネントによってストレッチされない(inlineFrameコンポーネントがフローである)場合にのみ、inlineFrameコンポーネントによってIFrame要素が生成されます。af|inlineFrame:busy:flowを使用して、ロード・インジケータを参照する背景イメージ・スタイルを定義します。親コンポーネントによってinlineFrameコンポーネントがストレッチされる場合、生成されるコンテンツはより複雑になります。この複雑性により、af|inlineFrame::status-iconを使用してコンテンツ・イメージのURLを定義でき、af|inlineFrame::status-icon-styleを使用して、オプションで追加の背景イメージを定義できます。また、これにより、他のコンポーネント・セレクタが使用するイメージを再利用することもできます。たとえば、carouselコンポーネントのaf|carousel::status-iconセレクタとaf|carousel::status-icon-styleセレクタです。スキニング別名を使用して、これらのイメージを再利用します。
次のグローバル・セレクタも、ADFスキンにこの機能を実装している場合に使用できるものとして導入されています。
.AFBackgroundImageStatus:alias: af|inlineFrame::busy:flowで使用される背景イメージを参照するために使用します。
.AFStatusIcon:alias: af|carousel::status-iconとaf|inlineFrame::status-iconを参照するために使用します。
.AFStatusIconStyle:alias: af|carousel::status-icon-styleとaf|inlineFrame::status-icon-styleを参照するために使用します。
リソース・キー(af_inlineFrame.LABEL_FETCHING)は、inlineFrameコンポーネントのロード・アイコンに表示する文字列を定義します。
fusionFx-v1.1: このスキンはfusionFx-v1スキンから拡張されます。これにより、af:tableコンポーネントでQuery-By-Example (QBE)フィルタをクリアする機能にサポートが追加されます。
ADF Facesによって提供されたスキンのいずれかを拡張してカスタム・スキンを作成した場合、trinidad-skins.xmlファイルに登録する必要があります。fusionFx-v1スキンを拡張するには、trinidad-skins.xmlファイルで次の値を使用します。
<skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>fusionFx-v1.1.desktop</extends> ... </skin>
アプリケーションでfusionFx-v1.1スキンを使用するには、trinidad-config.xmlファイルで次の値を使用します。
<skin-family>fusionFx</skin-family> <skin-version>v1.1<skin-version>
fusionFx-v1.2: このスキンは、fusionFx-v1.1スキンから拡張されます。アプリケーションがタッチ・スクリーン・デバイスでレンダリングされる際の最適化を含め、多数のユーザー・インタフェースの拡張が含まれています。
fusionFx-v1.2スキンを拡張するには、trinidad-skins.xmlファイルで次の値を使用します。
<skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>fusionFx-v1.2.desktop</extends> ... </skin>
アプリケーションでfusionFx-v1.2スキンを使用するには、trinidad-config.xmlファイルで次の値を使用します。
<skin-family>fusionFx</skin-family> <skin-version>v1.2<skin-version>
Fusion Simple: ADF Facesには、Fusion Simpleファミリのスキンも用意されています。これらのスキンはFusionファミリのスキンと似ていますが、使用される色とフォントが少ないため、ADFスキン・エディタを使用して簡単に変更できます。Fusion Simpleファミリには、Fusionファミリの各スキンに対応するスキンがあります。たとえば、fusionFx-simple-v1スキンはfusionFx-v1スキンに対応します。
プロジェクタ・スキン: ADF Facesでは、プロジェクタを使用してデモを行うアプリケーションのスタイルを定義します。各プロジェクタ・スキンでは、卓上プロジェクタ(特に古いモデルのプロジェクタ)を使用して表示した場合にアプリケーションが適切にレンダリングされるように、親スキンの複数の要素を変更します。たとえば、fusion-projectorスキンでは、fusionスキンの複数の要素が変更されます。これらのスキンは、プロジェクタと同じ場所にいる人を対象としている場合に役立ちます。これらは、Web会議を介して、オンラインでアプリケーションを表示する場合には適していない場合があります。ADF Facesではプロジェクタ・スキンを提供しており、これは、Oracle Technology Network (OTN) Webサイトからダウンロードできます。
skyros: ADF Facesコンポーネントのデフォルトのスタイルを定義します。simpleスキンを拡張したもので、このスキンを使用するアプリケーションにカラフルなルック・アンド・フィールを提供します。また、ADFスキン・エディタとの完全な互換性があります。さらに、skyrosスキンでは、イメージの枠線をDOM構造で代替できるようになり、fusionスキンなどより容易に扱えるようになっています。最後に挙げた機能は、trinidad-skins.xmlファイルで<feature>要素を構成することで、simpleスキンを拡張するカスタム・クラスでも有効にできます。詳細は、第20.2.3項「カスタム・スキンの登録方法」を参照してください。
skyrosスキンを拡張するには、trinidad-skins.xmlファイルで次の値を使用します。
<skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>skyros-v1.desktop</extends> ... </skin>
アプリケーションでskyrosスキンを使用するには、trinidad-config.xmlファイルで次の値を使用します。
<skin-family>skyros</skin-family> <skin-version>v1<skin-version>
図20-1に、File Explorerアプリケーションの索引ページに適用されたデフォルトのskyrosスキンを示します。
図20-2でFile Explorerアプリケーションの索引ページに適用されているように、ADF Facesにはsimpleスキンも用意されています。
スキンには、標準のCSSスタイルやレイアウトを設定するよりも多くのオプションがあります。スキンのCSSファイルは、スキン・フレームワークによって処理され、スキン・プロパティとアイコンが抽出されてSkinオブジェクトに登録されます。たとえば、スキニング・フレームワークによりサポートされているルールおよび疑似クラスを使用して、スキン・ファイルをカスタマイズできます。サポートされているルールと擬似クラスには、@platform、@agent、@accessibility-profile、:rtl、@localeなどがあります。詳細は、第20.1.2項「スキン・スタイル・セレクタ」を参照してください。
スタイルシート・ルールには、要素を識別するスタイル・セレクタ、およびコンポーネントの外観を説明する一連のスタイル・プロパティが含まれます。ADF Facesコンポーネントには、2つのカテゴリのスキン・スタイル・セレクタがあります。
グローバル・セレクタ
グローバル・セレクタは、複数のADF Facesコンポーネントのスタイル・プロパティを決定します。グローバル・セレクタ名が:alias疑似クラスで終了する場合、そのセレクタはコンポーネント固有の別のセレクタに含まれていることが多く、複数のコンポーネントのスキンに影響を与えます。たとえば、すべてではなくとも多くの場合、コンポーネントでは.AFDefaultFontFamily:alias定義を使用してフォント・ファミリを指定します。スキンが異なるフォント・ファミリを使用してこのセレクタをオーバーライドすると、その変更は、セレクタ定義にそのセレクタが含まれているすべてのコンポーネントに影響します。例20-1に、アプリケーションのADF Facesコンポーネント用のデフォルト・フォント・ファミリのグローバル・セレクタを示します。
コンポーネント・セレクタ
コンポーネント固有のセレクタは、スキンを特定のADF Facesコンポーネントに適用できるセレクタです。例20-2に、af:inputTextコンポーネントのコンテンツ領域の背景色が赤に設定されているセレクタを示します。
各カテゴリには、次のタイプのADF Facesスキン・セレクタが1つ以上含まれることがあります。
標準セレクタ
標準セレクタは、スタイルを適用できる要素を直接表すセレクタです。たとえば、af|bodyはaf:bodyコンポーネントを表します。このタイプの要素には、CSSスタイル、プロパティおよびアイコンを設定できます。
疑似要素を持つセレクタ
疑似要素は、スタイルを適用できるコンポーネントの特定の領域を示すために使用します。疑似要素は、コロン(:)2つで始まり、その後にセレクタが表すコンポーネントの部分が続きます。たとえば、af|chooseDate::days-rowは、カレンダ・グリッド内の日付の外観に関するスタイルとプロパティを提供します。
アイコン・セレクタ
一部のコンポーネントは、ベース・アイコンのセットを使用して、アイコン(<img>タグ)をレンダリングします。background-image CSSプロパティにエントリが表示されるように、エントリがアイコン用にCSSソース・ファイルに表示されなくても、これらのアイコンにスキンを適用できます。かわりに、アイコンは、レンダラが使用できるようSkinオブジェクトに登録されます。ブラウザが解釈するCSSソース・ファイルにアイコン・セレクタのエントリが表示されないため、アイコン定義用に包含セレクタ定義を作成できません。CSSソース・ファイルのエントリがあるアイテムのみに包含セレクタを作成できます。
アイコン・セレクタは、コンポーネント・セレクタでは-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疑似クラスは特殊なタイプのクラスで、スキン・ファイルのコードを構成するための構文の補助として役立ちます。たとえば、これを使用して、複数のコンポーネント、またはコンポーネントの複数の部分のスタイルを設定します。独自の別名クラスを作成してから、後で他のセレクタに含めることもできます。たとえば、別名疑似クラス(.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.pngファイルになります。右から左のpanelBoxの最後のイメージは、反転された左から右へのpanelBoxの最初のイメージと同じです。
af|panelBox::medium af|panelBox::top-end:rtl {
background-image: url(/skins/purple/images/panelBoxStart.png);
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
@platformを使用してプラットフォーム・スタイルを、@agentを使用してブラウザ・スタイルを定義します。
プラットフォーム固有のスタイルの設定用にサポートされている値は、windows、macos、linux、solarisおよびppcです。ブラウザ・エージェント固有のスタイルにサポートされている値は、ie、mozilla、gecko、webkit (safariへのマップ)、iceおよびemailです。
次の例では、WindowsおよびLinuxプラットフォームで、af:inputTextコンポーネントのコンテンツ領域の色は、Internet Explorerのバージョン7および8、バージョン1.9のgeckoではピンクに設定されます。
@platform window, linux {
@agent ie and (version: 7) and (version: 8), gecko and (version: 1.9) {
af|inputText::content {background-color:pink
}
}
}
次の構文の例は同じ動作になることに注意してください。
@agent ie and (version: 7.*) @agent ie and (version: 7)
たとえば、Internet Explorerのバージョン7.0.xのみを指定する場合は、次の構文を使用します。
@agent ie and (version: 7.0)
現在、バージョンの範囲を指定する構文はありません。
@agentルールを使用して、タッチ・スクリーン・デバイスのエージェントに適用するスタイルを指定することもできます。次の例に、この機能を構成するカスタム・スキン・ファイルに記述する構文を示します。
@agent (touchScreen:none) {
/* Styles that should not render on touchscreen devices. */
}
@agent (touchScreen:single) {
/* Styles specific for a touchscreen device with single touch. */
}
@agent (touchScreen:multiple) {
/* Styles specific for a touchscreen with multiple touch. */
}
@agent (touchScreen) {
/* Touchscreen specific styles for all touchscreen devices: both single and multiple touch. */
}
タッチ・スクリーン・デバイスでレンダリングするアプリケーションの作成の詳細は、付録D「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
@accessibility-profile
trinidad-config.xmlファイルのhigh-contrastおよびlarge-fontsの各アクセシビリティ・プロファイル設定にスタイルを定義する、@accessibility-profileを定義します。
high-contrast値は、背景色と前景色のコントラストを相互に高める必要がある場合に使用します。large-fonts値は、ユーザーがWebブラウザのテキスト・スケーリング設定を増減できる必要がある場合に使用します。large-fontsを定義してもフォントは大きくなりませんが、固定ピクセル・サイズではなく、スケーラブル・フォントまたはディメンションになります。
<!-- Enable both high-contrast and large-fonts content --> <accessibility-profile>high-contrast large-fonts</accessibility-profile>
:rtl
ブラウザで読み方向が右から左の言語を表示する場合は、:rtl疑似クラスを使用してスタイルまたはアイコンの定義を作成します。
@locale
-tr-inhibitスキン・プロパティを使用して、スキン・スタイルを抑制します。
-tr-inhibitスキン・プロパティを使用して、ベース・スキンから継承されたCSSプロパティを抑制またはリセットします。たとえば、-tr-inhibit:paddingプロパティは継承されたパディングを削除します。-tr-inhibit:allプロパティを使用すると、継承されたすべてのプロパティが削除(クリア)されます。抑制するプロパティ名は、ベース・スキンのプロパティ名と完全に一致する必要があります。
-tr-rule-refプロパティを使用してスタイルをマージします。
独自の別名を作成し、-tr-rule-refプロパティを使用して別のスタイル・セレクタと組み合せます。詳細は、20.3.5項「カスタム別名の作成方法」を参照してください。
-tr-children-themeプロパティを使用して、子コンポーネントのテーマを変更します。
詳細は、コンポーネントへのテーマの適用方法に関する項を参照してください。
例20-3に、最終的なスタイルを提供するために一緒にマージされるCSSファイル内のセレクタをいくつか示します。
例20-3 スタイル・セレクタのマージ
/** 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 7 and 8, we also need some margins.*/
@agent ie (version: 7) and (version: 8)
{
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.png);
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.png);
height: 8px;
width: 8px;
}
ADF Facesコンポーネントへのスキンの適用に使用されるセレクタは、JDeveloperのヘルプ・センターの、Oracle ADF Facesのスキン・セレクタに関するトピック、および、Oracle ADFのデータの可視化ツールのスキン・セレクタに関するトピックに定義されています。ヘルプ・センターの「目次」タブで次のノードを開いて、次の参照ドキュメントを表示してください。
Oracle ADFアプリケーションの開発→Oracle ADF Facesアプリケーションの開発
コンポーネント・レベルにルック・アンド・フィールを実装する方法として、テーマを適用することもできます。テーマの詳細は、20.3.4項「コンポーネントへのテーマの適用方法」を参照してください。
スキン・スタイル・プロパティの定義方法の詳細は、20.3項「スキン・スタイル・プロパティの定義」を参照してください。
任意のコンポーネントのルック・アンド・フィールは、設計時に、スタイル関連プロパティinlineStyleおよびstyleClassを変更することによって調整できます。この2つのプロパティは、root DOM要素でレンダリングされます。設計時に指定するスタイル関連プロパティは、アプリケーション・スキンまたはコンポーネントの特定インスタンスのCSSに指定されている類似のスタイルをオーバーライドします。
inlineStyle属性は、CSSスタイルのセミコロンで区切られた文字列で、background-color:red; color:blue; font-style:italic; padding:3pxのように、個々の属性を設定できます。styleClass属性は、一連のインライン・スタイルのグループ化に使用されるCSSスタイル・クラス・セレクタです。スタイル・クラスは、.AFInstructionTextなどのADFパブリック・スタイル・クラスを使用して定義でき、af:outputTextコンポーネントに表示されるテキストのすべてのプロパティを設定します。
コンポーネント・スタイル・プロパティの適用方法の詳細は、20.4項「コンポーネントのスタイル・プロパティの変更」を参照してください。
特定のセレクタの場合、カスタム・コンポーネントのスタイル・プロパティはレンダラのクラスを作成することにより取得できます。詳細は、第32.4.7項「レンダラのクラスの作成方法」を参照してください。
カスタム・スキンは、企業の希望するルック・アンド・フィールを実現するために、色、フォントおよびADF Facesコンポーネントの一部の場所を変更できます。スキンは、CSSファイルにスタイル・セレクタを定義して作成します。カスタム・スタイルシートを作成したら、アプリケーションの有効なスキンとして登録し、そのスキンを使用するようにアプリケーションを構成します。同じスキン・ファミリ内の複数のADFスキンをバージョニングした場合は、カスタム・スキンのバージョニングに関する項で説明されているように、<skin-version>要素を使用して、アプリケーションが使用する特定のバージョンを指定してください。
デフォルトでは、ADF Facesコンポーネントではskyrosスキンが使用されます。カスタム・スキンは、任意のADF Facesスキン(skyros、fusionまたはsimple)を拡張できます。カスタム・スキンを作成するには、拡張するスタイルシートのセレクタをオーバーライドまたは禁止するセレクタをスタイルシートに宣言します。オーバーライドしないように選択したセレクタは、そのスキンで定義されているスタイルを引き続き使用します。
simpleスキンの拡張では、他のスキンのいずれかを拡張する場合ほど、多くのプロパティを禁止する必要はありません。たとえば、skyrosスキンでは、テキスト、背景、枠線などのスタイル・プロパティに様々な色が使用されます。simpleスキンでは、特定の色ではなく、.AFDarkBackground:aliasのように:alias疑似クラスが使用されます。色のスキームの変更では、複数の色を指定するコンポーネント・スキン・セレクタの場合より、オーバーライドする必要のあるグローバル・スキン・セレクタの数はかなり少なくなります。
スキンで使用されるテキストは、リソース・バンドル内で定義されます。skyrosスキンのセレクタと同様に、このテキストは、カスタム・リソース・バンドルを作成し、変更するテキストのみを宣言することによってオーバーライドできます。カスタム・リソース・バンドルを作成した後、スキンにそれを登録します。
複数のスキンを作成して適用できます。たとえば、Webアプリケーションのバージョン用にスキンを1つ作成し、ハンドヘルド・デバイスでアプリケーションが実行されるときに使用するスキンを別に作成します。あるいは、現在のユーザーのブラウザで設定されているロケールに基づいてスキンを変更することもできます。また、af:selectOneChoiceコンポーネントなどのコンポーネントを構成し、ユーザーがスキンを切り替えられるようにできます。
デプロイするアプリケーションにカスタム・スキン・リソースおよび構成ファイルをバンドルできますが、Javaアーカイブ(JAR)ファイルにスキン定義を保存して、デプロイ済アプリケーションにこれを追加することもできます。JARファイルを使用する利点は、ルック・アンド・フィールの一貫性を改善しつつ、アプリケーションとは別にカスタム・スキンを開発およびデプロイできるということと、スキン定義およびイメージ・ファイルを独自のJARファイルに分けて、アプリケーションにデプロイする必要のあるファイル数を減らすことができるということです。
カスタム・スキンをアプリケーションに適用する手順は、次のとおりです。
カスタム・スキンをアプリケーションに追加します。詳細は、20.2.1項「アプリケーションへのカスタム・スキンの追加方法」を参照してください。
カスタム・スキンを登録します。詳細は、カスタム・スキンのためのXMLスキーマ定義ファイルの登録方法に関する項およびカスタム・スキンの登録方法に関する項を参照してください。
カスタム・スキンを使用するようにアプリケーションを構成します。詳細は、20.2.4項「カスタム・スキンを使用するためのアプリケーションの構成方法」を参照してください。
JARファイルにカスタム・スキンをデプロイします。詳細は、JARファイルへのカスタム・スキン・ファイルのデプロイに関する項を参照してください。
アプリケーションにカスタム・スキンを追加するには、JDeveloper内にCSSファイルを作成します。CSSはアプリケーションとともにデプロイするために、JDeveloperによりプロジェクトのソース・ファイルに配置されます。
カスタム・スキンをアプリケーションに追加する手順:
JDeveloperで、「CSSレベル3」および「ADF Faces」が選択されていることを確認します。メイン・ツールバーで、「ツール」→「プリファレンス」→「CSSエディタ」を選択します。サポート・レベルにドロップダウン・メニューから「CSSレベル3」を選択し、「サポート対象コンポーネント」に「ADF Faces拡張機能」を選択します。
アプリケーション・ナビゲータで、ユーザー・インタフェースのコードが含まれるプロジェクトを右クリックし、ポップアップ・メニューから「新規」を選択します。
「新規ギャラリ」の「カテゴリ」で、「Web層」を開いて「HTML」を選択します。
「CSSファイル」オプションをダブルクリックします。
「Cascading Style Sheetの作成」ダイアログで、CSSの名前とパスを入力します。
「OK」をクリックします。
これで、CSSエディタにCSSを開いて、アプリケーションのスタイルを定義できます。ADF Facesコンポーネントのスタイル・セレクタ設定の詳細は、20.3項「スキン・スタイル・プロパティの定義」を参照してください。
また、Oracle JDeveloperのコンテキスト外にCSSを作成し、スキン・リソースとともにCSSをJARファイルにパッケージ化できます。この推奨オプションの詳細は、JARファイルへのカスタム・スキン・ファイルのデプロイに関する項を参照してください。
カスタム・スキンの登録方法に関する項で説明されているように、カスタム・スキンを登録する場合、trindidad-skins.xsdファイルをJDeveloperに登録する必要があります。trindidad-skins.xsdファイルでは、カスタム・スキンに有効な要素を定義します。
XMLスキーマ定義ファイルを登録する手順:
JDeveloperで、「ツール」→「プリファレンス」の順に選択します。
「プリファレンス」ダイアログの左ペインで「XMLスキーマ」を選択し、「追加」をクリックします。
「スキーマの追加」ダイアログで「参照」をクリックして、使用しているバージョンのJDeveloperに含まれているXMLスキーマに移動します。
XMLスキーマへのディレクトリ・パスは次のようになります。
JDeveloper_Home/jdeveloper/modules/oracle.adf.view_11.1.1/trinidad-impl.jar!/org/apache/myfaces/trinidadinternal/ui/laf/xml/schemas/skin/trinidad-skins.xsd
|
注意: 「スキーマの追加」ダイアログでは、「拡張子」入力フィールドの値が |
「OK」をクリックします。
スキンの登録では、trinidad-skins.xmlという名前のファイルを作成し、スキンのID、ファミリ、場所およびカスタム・リソース・バンドルのいずれかを使用している場合は、このファイルにそれらを識別する値を移入します。
始める前に:
trinidad-skins.xmlファイルに有効な要素を定義するXMLスキーマ定義ファイルを登録します。詳細は、カスタム・スキンのためのXMLスキーマ定義ファイルの登録方法に関する項を参照してください。
カスタム・スキンを登録する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「XML」を選択します。
「XMLスキーマからXMLドキュメント」を選択し、「OK」をクリックします。
「XMLスキーマからXMLを作成 - ステップ1/2」ダイアログで次を入力します。
XMLファイル: trinidad-skins.xmlと入力します。
ディレクトリ: ディレクトリ・エントリの最後に\src\META-INFを追加します。
「登録済のスキーマを使用」を選択して、「次へ」をクリックします。
「XMLスキーマを作成 - ステップ2/2」ダイアログで次を入力します。
ターゲット・ネームスペース: http://myfaces.apache.org/trinidad/skinを選択します。
ルート要素: skinsを選択します。
「終了」をクリックします。新規ファイルは、XMLエディタで自動的に開きます。
XMLエディタで、次の要素の値を入力します。
<id>
スキンには一意のIDが必要です。EL式を使用してスキンIDを参照することもできます。たとえば、ロケールごとに異なるスキンを使用する場合、IDに基づいて適切なスキンを選択するEL式を作成します。skin1.desktopのように、IDの最後に.desktop、.pdaまたは.portletを追加するという規則があります。
<family>
スキンの特定のファミリを使用するようにアプリケーションを構成できます。これにより、使用されるレンダー・キットを基に、アプリケーションのスキンをグループ化できます。
たとえば、richDemo.desktopスキンおよびrichDemo.pdaスキンがrichDemoファミリの一部になるように定義すると、render-kit-idに基づいて適切なスキンが自動的に選択されるようにできます。
<skin>
<id>richdemo.desktop</id>
<family>richDemo</family>
<extends>skyros-v1.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>skyros-v1.pda</extends>
<render-kit-id>pda</render-kit-id>
<style-sheet-name>skins/richdemo/richdemo.css</style-sheet-name>
</skin>
<extends>
この要素を使用してカスタム・スキンを拡張します。この要素のデフォルト値はsimple.desktopです。ただし、この要素を使用することで任意のスキンを拡張できます。
たとえば、スキンを拡張し、フォント別名を使用してCSSを作成することで、スキン全体のフォントを簡単に変更できます。たとえば、次のようにしてskyros.desktopファミリを拡張します。
<extends>skyros-v1.desktop</extends> <style-sheet-name>skins/fod_skin.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>タグが優先されます。
<feature>
simpleスキンを拡張したカスタム・スキンの単純な枠線スタイルを指定できます。カスタム・スキンに単純な枠線スタイルを指定すると、decorativeBoxコンポーネントやパネル・コンポーネント(panelBoxやpanelAccordion)などのコンポーネントが実行時にレンダリングするセレクタの数が少なくなり、結果としてDOM構造が簡略化されます。例20-4に、<feature>要素を構成してこの変化を実装する方法を示します。
|
注意:
|
例20-4に、mySkinスキンのtrinidad-skins.xmlファイルのエントリを示します。
例20-4 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>simple.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>
<features>
<feature name="BORDER_STYLE">simple</feature>
</features>
</skin>
</skins>
ファイルを保存します。
trinidad-config.xmlファイル内に、使用するスキン(および必要な場合は、それが使用される条件)を決定する要素を設定します。
|
注意: スキンが表示されない場合は、 |
スキンを使用するようにアプリケーションを構成する手順:
trinidad-config.xmlファイルを開きます。
trinidad-config.xmlファイルに、使用するスキンの<skin-family>要素、および<skin-version>要素(オプション)の値を指定するためのエントリを書き込みます。
例20-5に、mySkinスキン・ファミリを使用するための構成を示します。
値を条件付きで設定するには、表示するスキンを決定するために評価できるEL式を入力します。
たとえば、ユーザーのブラウザがドイツのロケールに設定されているときにはドイツ語のスキンを使用し、それ以外のときには英語のスキンを使用する場合、trinidad-config.xmlファイル内に次のように入力します。
<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>
ファイルを保存します。
開発中、カスタム・スキンを変更したら、例20-6に示すように、web.xmlファイル・パラメータorg.apache.myfaces.trinidad.CHECK_FILE_MODIFICATIONをtrueに設定することで、サーバーを再起動せずにCSSの変更を確認できます。ただし、アイコンおよびスキン・プロパティの変更を確認するには、サーバーを再起動する必要があります。
ADF Facesスキン・スタイル・セレクタでは、アプリケーションにカスタムのルック・アンド・フィールを作成するために、コンポーネントにスキンを適用する複数のオプションがサポートされています。表20-1に、af:goButtonコンポーネントのスキン・スタイル・セレクタを説明します。
表20-1 af:goButtonコンポーネントのスタイル・セレクタ
| 名前 | 説明 |
|---|---|
|
|
|
|
|
ボタン・アイコンのスタイル( |
|
|
ボタンのテキストのスタイル。 |
図20-3に、af:goButtonコンポーネントおよびコンポーネント・アイコンにデフォルトのskyrosスキンを適用した様子を示します。
図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-7に、SkinBundleカスタム・リソース・バンドルを示します。
例20-7 カスタムの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-8に、trinidad-skins.xmlファイルのカスタムSkinBundle設定を示します。
例20-8 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-9に、バンドル・マップへの<translation-source>パラメータの設定にEL式を使用するコードを示します。
例20-9 カスタム・リソース・バンドル・マップ
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-10に、trinidad-skins.xmlファイルのリソース・マップへの<translation-source>パラメータの設定を示します。
例20-10 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-11に、アイコンのセレクタを示します。
アイコンとボタンは両方とも、rtl疑似クラスを使用できます。これにより、アプリケーションが右から左へのモードで表示されるときに使用されるアイコンやボタンが定義されます。例20-12に、アイコンに使用されるrtl疑似クラスを示します。
特定レベルのメッセージが関連付けられているかどうかに基づいて、ADF Faces入力コンポーネントにスタイルを適用できます。コンポーネントに特定タイプのメッセージが追加されると、そのコンポーネントのスタイルは、新しいステータスを反映するように自動的に変更されます。そのステータスにスタイルが定義されていない場合は、デフォルトのスタイルが使用されます。
関連付けられているメッセージ・レベルに基づいて入力コンポーネントにスタイルを定義するには、コンポーネント定義にスタイル疑似クラスを追加します。たとえば、af:inputTextコンポーネントのコンテンツ・リージョンのベース・スタイルを、背景色が紫になるように定義するには、スタイル・セレクタaf|inputText::content{background-color:purple}を使用します。エラー・メッセージがある場合のコンポーネントのコンテンツ・リージョンを定義するには、スキン・スタイル・セレクタaf|inputText:error::contentを使用します。
有効なメッセージ・プロパティは、:fatal、:error、:warning、:confirmationおよび:infoです。
テーマは、コンポーネント・レベルのルック・アンド・フィールを実装する方法です。目的は、ページの一部分にある複数のコンポーネント全体に一貫したルック・アンド・フィールを提供することです。テーマは一般的には、特定領域の外観がそれぞれ異なるJSFページ・テンプレートに使用されます。たとえば、上部のブランド領域に暗い背景色と明るいテキストが使用され、より明るい背景色のナビゲーション・コンポーネントと、明るい背景色のメイン・コンテンツ領域があるページです。
テーマを設定するコンポーネントにより、子コンポーネントにそのテーマが公開されるため、テーマが継承されます。テーマは、次のコンポーネントにより設定(開始または変更)されます。
af:document
af:decorativeBox
skyrosおよびfusionスキンは、次のテーマをサポートします。
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;
}
子コンポーネントがJSPXページの親コンポーネントに対する変更を継承しないようにする場合は、CSSファイルで-tr-children-themeプロパティの値を設定します。たとえば、af:panelTabbed子コンポーネントがJSPXページのaf:document親コンポーネントに定義されているdarkテーマを継承しないようにするとします。次のように、CSSファイルの-tr-children-themeプロパティを設定します。
af|panelTabbed::content {
-tr-children-theme: default;
}
デフォルトでは、テーマはコンポーネントやその子コンポーネントには設定されていません。テーマは継承されるため、コンポーネントに設定されていないtheme属性がある場合には、次の値がサポートされます。
指定なし - テーマが指定されていない場合、<af:decorativeBox>...のようにテーマが継承されます。
#{null}: 指定なしの場合と同じように、テーマが継承されます。
inherit - nullの場合と同じように、テーマが継承されます。
default - テーマは、コンポーネントおよびその子コンポーネントから削除されます。
空の文字列 - テーマが空の文字列に設定されている場合は、defaultと同じように動作します。たとえば、<af:decorativeBox theme="">では、コンポーネントおよびその子コンポーネントからテーマが削除されます。
テーマがサポートされ、スタイル・クラスのあるコンポーネントのすべてのHTML要素にテーマが追加されるため、テーマの包含スタイルCSSセレクタは不要です。:ltrおよび:rtlを除いて、すべてのテーマ・セレクタは、必ずセレクタの最後の要素に含まれている必要があります。たとえば、af:breadCrumbsコンポーネントの各ステップにdarkテーマを適用するセレクタは次のとおりです。
af|breadCrumbs::step:disabled[theme="dark"] {
color:#FFFFFF;
}
コンポーネントの背景色が、周囲のテーマ色には不適切な色に設定されている場合、色の不適合が起こる場合があります。たとえば、panelHeaderコンポーネントがdarkテーマに配置されている場合、panelHeaderコンポーネント内のCSSスタイルにより、前景色は変更されずに、コンポーネントの背景色が明るい色に設定されます。その結果、コンポーネントは、明るい背景色で明るい前景色になります。その他多くのコンポーネントも、darkテーマに配置されると、前景色が明るい色に設定されます。色の不適合が発生した場合は、-tr-children-themeプロパティの値を設定して、親コンポーネントと子コンポーネント間の色の不適合を解決できます。
独自の別名を作成してから、後で他のセレクタに含めることができます。
カスタム別名を作成する手順:
別名のセレクタ・クラスを作成します。たとえば、マウス・カーソルが置かれたリンクの色を設定するために別名を追加できます。
.MyLinkHoverColor:alias {color: #CC6633;}
別のセレクタに別名を含めるには、既存のセレクタに疑似要素を追加して新しいセレクタを作成し、-tr-rule-ref:selectorプロパティを使用してその別名を参照します。
たとえば、カーソルが置かれたときの色をスタイル設定するためにaf|menuBar::enabled-linkセレクタに対する新規のセレクタを作成してから、カスタム別名を参照できます(例20-13を参照)。
スキンを動的に変更するようにコンポーネントを構成するには、最初にJSFページでコンポーネントを構成し、後で構成ファイルによる評価が可能なスコープの値を設定する必要があります。次に、この値によって動的に設定されるようにtrinidad-configファイルでスキン・ファミリを構成します。
スキン・ファミリを設定するためにコンポーネントを条件付きで構成する手順:
スキン・ファミリの設定に使用されるコンポーネントが含まれるメインのJSFページ(index.jspxまたは類似のファイルなど)を開きます。
sessionScopeコンポーネントを使用して、スキン・ファミリが表示されるようにページを構成します。
例20-14は、選択された値を取得し、この値をindex.jspxページにあるsessionScopeコンポーネントのskinFamily属性の値として設定するaf:selectOneChoiceコンポーネントを示しています。
例20-14 コンポーネントを使用したスキン・ファミリの設定
<af:selectOneChoice label="Choose Skin:" value="#{sessionScope.skinFamily}" autoSubmit="true">
<af:selectItem value="skyros-v1" label="skyros"/>
<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 Facesフレームワークに用意されているジオメトリ管理を使用して、コンポーネントを拡大できます。レイアウトおよび拡大の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。 |
inlineStyle属性を定義して、コンポーネントにインライン・スタイルを設定します。インライン・スタイルは、コンポーネントのインスタンス用コンポーネントのスタイルの指定に使用できます。詳細は、8.3項「コンテンツをページ全体に拡大するための設定」を参照してください。
インライン・スタイルを設定する手順:
コンポーネントのinlineStyle属性を、使用するインライン・スタイルに設定します。
スタイルの設定にプロパティ・インスペクタを使用すると、図20-5に示すように、ドロップダウン・リストから必要なスタイル機能を選択できます。
JDeveloperにより、コンポーネントの対応するコードがJSFページに追加されます。例20-15に、inlineStyle属性が指定されたaf:outputTextコンポーネントのソースを示します。
inlineStyle属性自体にEL式を使用して、インライン・スタイル属性を条件付きで設定できます。たとえば、アクションがまだ完了していない場合に日付を赤で表示するには、例20-16のようなコードを使用できます。
ADF Facesコンポーネントには、ルートDOM要素に登録されていないスタイル設定には使用できない、その他のスタイル属性もあります。たとえば、af:inputTextコンポーネントの場合、例20-17に示すように、contentStyleプロパティを使用して要素のテキストを設定します。
URLは、スキンのCSSファイルから様々なフォーマットで参照できます。サポートされているフォーマットは次のとおりです。
絶対
リソースの完全なURLを指定します。たとえば、次のようなフォーマットのURLです。
http://www.mycompany.com/WebApp/Skin/skin1/img/errorIcon.gif
相対
URLの先頭が/ではなく、プロトコルが示されていない場合は、相対URLを指定できます。相対URLは、スキンのCSSファイルの場所に基づいています。たとえば、スキンのCSSファイル・ディレクトリがWebApp/Skin/skin1/であり、指定されたURLがimg/errorIcon.gifの場合、最終的なURLは/WebApp/Skin/mySkin/img/errorIcon.gifとなります。
コンテキスト相対
このURLのフォーマットは、Webアプリケーションのコンテキスト・ルートに対して相対的に解釈されます。コンテキスト相対ルートの先頭は/になります。たとえば、Webアプリケーションのコンテキスト相対ルートが次のとおりであるとします。
/WebApp
このとき、次のURLを指定したとします。
/img/errorIcon.gif
最終的なURLは次のようになります。
/WebApp/img/errorIcon.gif
サーバー相対
サーバー相対URLは、Webサーバーに対して相対的に解釈されます。これがコンテキスト相対URLと異なるのは、同じWebサーバー上にある別のアプリケーション内のリソースを参照できることです。URLの先頭は//を使用して指定します。たとえば、次のフォーマットでURLを作成します。
//WebApp/Skin/mySkin/img/errorIcon.gif
<version>要素を使用して、trinidad-skins.xmlファイルでカスタム・スキンのバージョン番号を指定できます。trinidad-skins.xmlファイル内の<family>要素の値が同じであるカスタム・スキンを区別する場合は、この機能を使用します。特定のカスタム・スキンを使用するようにアプリケーションを構成する場合は、アプリケーションへのカスタム・スキンの適用に関する項で説明されているように、trinidad-config.xmlファイルで値を指定して行うことに注意してください。
trinidad-skins.xmlファイル内の<version>要素に値を入力して、カスタム・スキンのバージョンを指定します。
カスタム・スキンをバージョニングする手順:
アプリケーション・ナビゲータで、trinidad-skins.xmlファイルをダブルクリックします。これは、デフォルトではWeb Content/WEB-INFノードにあります。
構造ウィンドウで、バージョニングするカスタム・スキンのskinノードを右クリックし、「skinの中に挿入」→「version」を選択します。
trinidad-config.xmlファイルの<skin-version>要素に値が指定されていない場合に、このバージョンのカスタム・スキンがアプリケーションで使用されるようにするには、アプリケーションへのカスタム・スキンの適用に関する項で説明されているように、バージョンの挿入のためのダイアログで、デフォルト・リストからtrueを選択します。
名前フィールドに値を入力します。たとえば、カスタム・スキンの最初のバージョンである場合はv1と入力します。
「OK」をクリックします。
例20-19に、カスタム・スキンの3つのソース・ファイル(skin1.css、skin2.cssおよびskin3.css)を参照するtrinidad-skins.xmlの例を示します。これらの各カスタム・スキンの<family>要素は同じ値(test)になっています。<version>要素の子要素の値によって、これらのカスタム・スキンがそれぞれ区別されます。実行時に、アプリケーションのtrinidad-config.xmlファイルにおける<skin-family>要素の値としてtestが指定されたアプリケーションでは、skin3を使用します。これは、このカスタム・スキンがtrinidad-skins.xmlファイルでデフォルト・スキンとして構成されているためです(<default>true</default>)。この動作は、アプリケーションへのカスタム・スキンの適用に関する項で説明されているように、trinidad-config.xmlファイル内の<skin-version>要素に値を指定してオーバーライドできます。
例20-19 バージョニングされたカスタム・スキン・ファイルが含まれたtrinidad-skins.xml
<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>skin1.desktop</id>
<family>test</family>
<extends>simple.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin1/skin1.css</style-sheet-name>
<version>
<name>v1</name>
</version>
</skin>
<skin>
<id>skin2.desktop</id>
<family>test</family>
<extends>skyros-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
<version>
<name>v2</name>
</version>
</skin>
<skin>
<id>skin3.desktop</id>
<family>test</family>
<extends>fusion.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin3/skin3.css</style-sheet-name>
<version>
<default>true</default>
<name>v3</name>
</version>
</skin>
</skins>
スキン定義をJavaアーカイブ(JAR)ファイルに保存し、デプロイ済アプリケーションに追加することが必要な場合があります。次に、アプリケーションにバンドルする場合と比較して、スキンをJARファイルにパッケージ化することの利点を示します。
アプリケーションとは別に、スキンをデプロイおよび開発できます。これにより、スキンへの変更の適用が必要な場合に、確認するファイル数を減らすこともできます。一番の利点は、JARファイルに格納されたスキン定義を使用することで、アプリケーションのルック・アンド・フィールの一貫性が高まることです。
スキン定義とイメージを、それぞれ独自のJARファイルに分割できます。そのため、すべてのアプリケーションに全ファイルをデプロイする必要がないように、イメージ・ベースを別々のJARファイルに分けられます。
JARファイルにスキンをデプロイするには、次のルールに従います。
スキンを定義し、CSSファイルを参照するtrinidad-skins.xmlファイルは、META-INFディレクトリに内に存在する必要があります。
すべてのイメージ・リソースおよびCSSファイルも、META-INFディレクトリに配置する必要があります。例20-20に示すように、イメージは、adfルート・ディレクトリ、またはリソース・サーブレットのweb.xmlファイルにマップされている任意のディレクトリ名で始まるディレクトリに存在する必要があります。
JARファイルは、デプロイするアプリケーションのビュー・レイヤー・プロジェクトのWEB-INF/libディレクトリに配置する必要があります(または、アプリケーション・サーバー・レベルの共有ライブラリを使用する必要があります)。
例20-20 パスが含まれる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\skyrosskin.css
META-INF\trinidad-skins.xml
META-INFディレクトリのディレクトリがadfで始まることを確認します。imagesディレクトリには、oracle.cssスキンで使用されたすべてのイメージが含まれます。イメージへのCSS参照のパスは、次のようになります。
af|inputColor::launch-icon:rtl {
content:url(../adf/oracle/skin/images/cfsortl.png);
width: 12; height: 12;
left:-7px;
position:relative;
right:-7px;
top:5px;
}
イメージ・パス../adf/oracle/skin/images/cfsortl.pngの先頭にある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>richdemo.desktop</id>
<family>richDemo</family>
<extends>skyros-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/richdemo/richdemo.css</style-sheet-name>
</skin>
</skins>
この例では、richDemoファミリのrichdemo.desktopとしてスキンが定義されています。trinidad-skins.xmlファイルには、複数のスキン定義を含めることが可能です。richdemo.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>oracle</skin-family>
</trinidad-config>
スキンは実行時に検出されるため、スキンのファミリ名のコードを記述する必要はありません。
|
注意: JARファイルのスキン定義は、JDeveloperのビジュアル・エディタに表示されません。ログ・ウィンドウに、スキン・ファミリが見つからなかったというメッセージが表示されます。このメッセージは無視できます。 |
