Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース2 (11.1.2.1.0) B66719-01 |
|
![]() 前 |
![]() 次 |
この章では、コンポーネントのスタイル属性を変更またはADFスキンを使用することにより、アプリケーションの外観をカスタマイズする方法を説明します。
この章では、次の項目について説明します。
アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClass
またはinlineStyle
)がコンポーネントで公開されている場合は、CSSスタイル・プロパティを直接ADF FacesまたはADF DVTコンポーネントに適用することにより、ADF FacesおよびADFデータ視覚化コンポーネントの外観をカスタマイズできます。後者を選択すると、アプリケーションのそのコンポーネント用のADFスキンで定義されたスタイル・プロパティをオーバーライドすることになります。アプリケーション中のすべてのコンポーネントに対してではなく、あるページで1つコンポーネントの1インスタンスのスタイルを変更する場合、あるいはプログラムでスタイルを条件付きで設定する場合には、これを実行します。たとえば、ある特定の条件においてのみテキストが赤色で表示されるように設定する場合などです。詳細は、28.2項「コンポーネントのスタイル・プロパティの変更」を参照してください。
ADFスキンは、CSSファイルの1種で、ここでCSSスタイル・プロパティを、外観をカスタマイズするコンポーネントのカスケード・スタイル・シート(CSS)仕様に基づいて定義します。ADFスキンでは、特定のコンポーネントやコンポーネントのグループに対してCSSスタイル・プロパティを適用する方法を決めるルールを定義します。エンド・ユーザーのブラウザでは、これらのルールが解釈され、ブラウザのデフォルトの設定がオーバーライドされます。図28-1および図28-2では、ADFスキンを適用した結果、アプリケーションに表示されるADF FacesおよびADFデータ視覚化コンポーネントの外観がどうなったかを示しています。図28-1に、simple
ADFスキンを適用したFile Explorerアプリケーションのページを示します。
図28-2に、fusion
ADFスキンを適用した同じアプリケーションの同じページを示します。
File Explorerアプリケーションには、アプリケーションの外観をカスタマイズするためにいくつかのADFスキンが用意されています。これらのADFスキンとFile Explorerアプリケーションのソース・ファイルを表示できます。詳細は、2.1項「ADF Facesデモ・アプリケーションについて」を参照してください。
このガイドでは、CSSの概念については説明しません。公式仕様など、スタイルシートの広範な情報は、次に示すWorld Wide Web ConsortiumのWebサイトを参照してください。
ADFスキンの作成、変更またはアプリケーションへの適用の方法についても、このガイドでは説明していません。詳細は、『Oracle Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド』を参照してください。
複数のADFスキンを作成する場合、エンド・ユーザーがアプリケーションで使用する好みのADFスキンを選択するように、アプリケーションを構成できます。詳細は、28.3項「エンド・ユーザーによるアプリケーションのADFスキン変更の許可」を参照してください。
様々な目的のために、ADFスキンをカスタマイズできます。たとえば、図28-3に示すように、エンド・ユーザーがADF Faces表コンポーネントでレンダリングされたデータ行を選択すると、アプリケーションによりその行が強調表示され、フィードバックが提供されるように、ADFスキンのプロパティを定義できます。
ADFスキン・プロパティを使用して、CSSのみでは指定できない、またはコンポーネントのプロパティに依存していて、その結果、CSSを使用して定義できない動作や外観を定義します。たとえば、ADF Facesでは、ブラウザでのアニメーションをサポートしていますが、CSS 3アニメーションは使用できません。アニメーションの継続時間を構成する場合、ADFスキン・プロパティを使用して行います。例28-1に、ADFスキン・プロパティにより、ADF Faces carousel
コンポーネントでスピン・アニメーションが500
ミリ秒間表示されるように継続時間がどのように定義されるかを示します。
アプリケーションの外観のカスタマイズを決定する前に、その他のADF Faces機能とADF Faces以外の機能を理解しておくと役に立ちます。次のリンクでは、知っておくと役に立つ詳細情報を提供しています。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、3.5.2項「EL書式タグの使用方法」を参照してください。
国際化およびローカライズ: アプリケーションに適用するために作成するADFスキンは、ADF Facesページを国際化およびローカライズするためのプロセスの一部としてカスタマイズできます。このプロセスの詳細は、第29章「ページの国際化およびローカライズ」を参照してください。
アクセシビリティ: アプリケーションに適用するために作成するADFスキンは、ADF Facesをアクセス可能にするためのプロセスの一部としてカスタマイズできます。このプロセスの詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。
コンポーネントのスタイル関連のプロパティのinlineStyle
およびstyleClass
(どちらもルートDOM要素上でレンダリング)を変更することにより、コンポーネントのルック・アンド・フィールを設計時に調整できます。設計時に指定したスタイル関連プロパティ(inlineStyle
またはstyleClass
)は、コンポーネントの特定のインスタンスに対してアプリケーションのADFスキンで指定された対応するスタイルをオーバーライドします。コンポーネントのinlineStyle
プロパティに指定した値は、styleClass
属性に設定された値をオーバーライドします。
inlineStyle
属性は、CSSスタイルのセミコロンで区切られた文字列で、background-color:red; color:blue; font-style:italic; padding:3px
のように、個々の属性を設定できます。styleClass
属性は、一連のインライン・スタイルのグループ化に使用されるCSSスタイル・クラス・セレクタです。スタイル・クラスは、.AFInstructionText
などのADFパブリック・スタイル・クラスを使用して定義でき、af:outputText
コンポーネントに表示されるテキストのすべてのプロパティを設定します。
特定のセレクタの場合、カスタム・コンポーネントのスタイル・プロパティはレンダラのクラスを作成することにより取得できます。詳細は、31.4.7項「レンダラのクラスの作成方法」を参照してください。
警告: コンポーネントを拡大するためにスタイルを使用しないでください。拡大を目的としたスタイルの使用は宣言的でなく、多くの場合、異なるWebブラウザ間で動作の一貫性がなくなります。かわりに、ADF Facesフレームワークに用意されているジオメトリ管理を使用して、コンポーネントを拡大できます。レイアウトおよび拡大の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。 |
inlineStyle
属性を定義して、コンポーネントにインライン・スタイルを設定します。インライン・スタイルは、コンポーネントのインスタンス用コンポーネントのスタイルの指定に使用できます。詳細は、9.3項「コンテンツをページ全体に拡大するための設定」を参照してください。
始める前に:
inlineStyle
属性が他の属性とどのように関連しているかについて理解しておくと役立ちます。詳細は、28.2項「コンポーネントのスタイル・プロパティの変更」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、28.1.2項「外観のカスタマイズの追加機能」を参照してください。
インライン・スタイルを設定する手順:
コンポーネントのinlineStyle
属性を、使用するインライン・スタイルに設定します。
スタイルの設定にプロパティ・インスペクタを使用すると、図28-4に示すように、ドロップダウン・リストから必要なスタイル機能を選択できます。
JDeveloperにより、コンポーネントの対応するコードがJSFページに追加されます。例28-2に、inlineStyle
属性が指定されたaf:outputText
コンポーネントのソースを示します。
inlineStyle
属性自体にEL式を使用して、インライン・スタイル属性を条件付きで設定できます。たとえば、アクションがまだ完了していない場合に日付を赤で表示するには、例28-3のようなコードを使用できます。
ADF Facesコンポーネントには、ルートDOM要素に登録されていないスタイル設定には使用できない、その他のスタイル属性もあります。たとえば、af:inputText
コンポーネントの場合、例28-4に示すように、contentStyle
プロパティを使用して要素のテキストを設定します。
スタイル・クラスを使用して、コンポーネントのスタイルを定義できます。スタイル・クラスは、一連のインライン・スタイルをグループ化するために作成します。スタイル・クラスを参照するには、styleClass
属性を使用します。
始める前に:
styleClass
属性が他の属性とどのように関連しているかについて理解しておくと役立ちます。詳細は、28.2項「コンポーネントのスタイル・プロパティの変更」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、28.1.2項「外観のカスタマイズの追加機能」を参照してください。
スタイル・クラスを使用してスタイルを設定する手順:
エンド・ユーザーが他のADFスキンを選択できるように、アプリケーションを構成できます。エンド・ユーザーが必要により適したADFスキンを使用して、アプリケーションのページをレンダリングできるようにする場合に、この機能を構成します。たとえば、アプリケーションで、ユーザーのブラウザが日本語のときに、日本のロケール固有の特徴を持つADFスキンを使用する場合などです。別の例としては、障害を持つユーザーにとってアプリケーションのページをよりアクセスしやすいものにするために構成されたADFスキンをアプリケーションで使用する場合があります。
図28-5では、コンポーネント(af:commandMenuItem
など)を構成して、エンド・ユーザーが実行時にアプリケーションで使用されるADFスキンを変更できるようにすることで、この機能をどのように実装するかを示しています。JSFページ上のコンポーネントを構成して、後からtrinidad-config
ファイルのskin-family
プロパティにより評価されるscope値を設定します。
trinidad-config
ファイルのskin-family
プロパティの値の更新を可能にするコンポーネントを公開することにより、エンド・ユーザーがアプリケーションのADFスキンを変更できるようにします。
始める前に:
加えた変更が機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、28.3項「エンド・ユーザーによるアプリケーションのADFスキン変更の許可」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、28.1.2項「外観のカスタマイズの追加機能」を参照してください。
エンド・ユーザーにアプリケーションのADFスキンの変更を許可する手順:
スキン・ファミリの設定に使用するコンポーネントを構成するメインのJSFページを開きます。
図28-5のように、エンド・ユーザーが実行時に多数の使用可能なADFスキンの1つを選択できるようにする多数のコンポーネント(af:commandMenuItem
コンポーネントなど)を構成します。
例28-6に、図28-5のように、エンド・ユーザーが実行時に使用可能なADFスキンを選択できるようにするaf:commandMenuItem
コンポーネントの構成方法を示します。各af:commandMenuItem
コンポーネントにより、actionListener
属性の値を指定します。エンド・ユーザーがメニュー項目をクリックすると、この属性でactionEvent
がskins
というマネージドBean上のメソッド(skinMenuAction
)に渡されます。
例28-6 コンポーネントを使用したスキン・ファミリの設定
<af:menu text="Change Skin" id="skins" binding="#{backing_ChangeSkin.skins}"> <af:commandMenuItem text="blafplus-rich" id="skin1" binding="#{backing_ChangeSkin.skin1}" type="radio" actionListener="#{skins.skinMenuAction}" selected="#{skins.skinFamily}"/> <af:commandMenuItem id="skin2" text="blafplus-medium" type="radio" actionListener="#{skins.skinMenuAction}" selected="#{skins.skinFamily=='blafplus-medium'}"/> <af:commandMenuItem id="skin3" text="fusion" type="radio" actionListener="#{skins.skinMenuAction}" selected="#{skins.skinFamily=='fusion'}"/> <af:commandMenuItem id="skin4" text="fusion-projector" type="radio" actionListener="#{skins.skinMenuAction}" selected="#{skins.skinFamily=='fusion-projector'}"/> <af:commandMenuItem id="skin5" text="simple" type="radio" actionListener="#{skins.skinMenuAction}" selected="#{skins.skinFamily=='simple'}"/> <af:commandMenuItem id="skin6" text="skin1" type="radio" actionListener="#{skins.skinMenuAction}" selected="#{skins.skinFamily=='skin1'}"/> </af:menu>
エンド・ユーザーにより選択されたADFスキンの値を格納するために、skins
というマネージドBean上にメソッド(skinMenuAction
など)を記述します。例28-7に、エンド・ユーザーが選択した値をとり、それをマネージドBean内のskinFamily
の値の設定に使用するメソッドを示します。例28-7内のメソッドでは、skinFamily
の値を設定した後、ページを再ロードするメソッドも呼び出します。
例28-7 ADFスキンを変更するためのマネージドBeanのメソッド
public void skinMenuAction(ActionEvent ae) { RichCommandMenuItem menuItem = (RichCommandMenuItem)ae.getComponent(); // Invoke another managed bean method to set the value of skinFamily setSkinFamily(menuItem.getText()); // Invoke a method to reload the page. The application reloads the page // using the newly-selected ADF skin. reloadThePage(); }
アプリケーション・ナビゲータで、trinidad-skins.xmlファイルをダブルクリックします。
trinidad-config.xml
ファイルで、EL式を記述してスキン・ファミリを動的に評価します。
<skin-family>#{skins.skinFamily}</skin-family>