ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11g リリース2(11.1.2.4.0)
B66719-05
  目次へ移動
目次
前
前 		 次
次		  

28 スタイルおよびスキンを使用した外観のカスタマイズ

この章では、コンポーネントのスタイル属性を変更またはADFスキンを使用することにより、アプリケーションの外観をカスタマイズする方法を説明します。

この章では、次の項目について説明します。

28.1 スタイルおよびスキンを使用した外観のカスタマイズについて

アプリケーションに適用する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-1 simpleスキンを使用した索引ページ

File Explorerアプリケーションでのsimpleスキン

図28-2に、fusion ADFスキンを適用した同じアプリケーションの同じページを示します。

図28-2 fusion ADFスキンを使用した索引ページ

fusion ADFスキンを使用した索引ページ

File Explorerアプリケーションには、アプリケーションの外観をカスタマイズするためにいくつかのADFスキンが用意されています。これらのADFスキンとFile Explorerアプリケーションのソース・ファイルを表示できます。詳細は、2.1項「ADF Facesデモ・アプリケーションについて」を参照してください。

このガイドでは、CSSの概念については説明しません。公式仕様など、スタイルシートの広範な情報は、次に示すWorld Wide Web ConsortiumのWebサイトを参照してください。

http://www.w3.org/

ADFスキン・エディタを使用して、アプリケーションにADFスキンを作成できます。ADFスキンの作成、またはアプリケーションへの適用の方法については、このガイドでは説明していません。詳細は、『Oracle Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド』を参照してください。

複数のADFスキンを作成する場合、エンド・ユーザーがアプリケーションで使用する好みのADFスキンを選択するように、アプリケーションを構成できます。詳細は、28.3項「エンド・ユーザーによるアプリケーションのADFスキン変更の許可」を参照してください。

28.1.1 外観のカスタマイズのユースケースおよび例

様々な目的のために、ADFスキンをカスタマイズできます。たとえば、図28-3に示すように、エンド・ユーザーがADF Faces表コンポーネントでレンダリングされたデータ行を選択すると、アプリケーションによりその行が強調表示され、フィードバックが提供されるように、ADFスキンのプロパティを定義できます。

図28-3 ADF表コンポーネントでのADFスキン・プロパティ

ADF表コンポーネントでのADFスキン・プロパティ

ADFスキン・プロパティを使用して、CSSのみでは指定できない、またはコンポーネントのプロパティに依存していて、その結果、CSSを使用して定義できない動作や外観を定義します。たとえば、ADF Facesでは、ブラウザでのアニメーションをサポートしていますが、CSS 3アニメーションは使用できません。アニメーションの継続時間を構成する場合、ADFスキン・プロパティを使用して行います。例28-1に、ADFスキン・プロパティにより、ADF Faces carouselコンポーネントでスピン・アニメーションが500ミリ秒間表示されるように継続時間がどのように定義されるかを示します。

例28-1 ADFスキン・プロパティを使用したスピン・アニメーションの長さの指定

af|carousel {
  -tr-spin-animation-duration: 500;
}

28.1.2 外観のカスタマイズの追加機能

アプリケーションの外観のカスタマイズを決定する前に、その他のADF Faces機能とADF Faces以外の機能を理解しておくと役に立ちます。次のリンクでは、知っておくと役に立つ詳細情報を提供しています。

  • テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、3.5.2項「EL書式タグの使用方法」を参照してください。

  • 国際化およびローカライズ: アプリケーションに適用するために作成するADFスキンは、ADF Facesページを国際化およびローカライズするためのプロセスの一部としてカスタマイズできます。このプロセスの詳細は、第29章「ページの国際化およびローカライズ」を参照してください。

  • アクセシビリティ: アプリケーションに適用するために作成するADFスキンは、ADF Facesをアクセス可能にするためのプロセスの一部としてカスタマイズできます。このプロセスの詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。

28.2 コンポーネントのスタイル・プロパティの変更

コンポーネントのスタイル関連のプロパティの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項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

28.2.1 インライン・スタイルの設定方法

inlineStyle属性を定義して、コンポーネントにインライン・スタイルを設定します。インライン・スタイルは、コンポーネントのインスタンス用コンポーネントのスタイルの指定に使用できます。詳細は、9.3項「コンテンツをページ全体に拡大するための設定」を参照してください。

始める前に:

inlineStyle属性が他の属性とどのように関連しているかについて理解しておくと役立ちます。詳細は、28.2項「コンポーネントのスタイル・プロパティの変更」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、28.1.2項「外観のカスタマイズの追加機能」を参照してください。

インライン・スタイルを設定する手順:

  1. コンポーネントのinlineStyle属性を、使用するインライン・スタイルに設定します。

  2. スタイルの設定にプロパティ・インスペクタを使用すると、図28-4に示すように、ドロップダウン・リストから必要なスタイル機能を選択できます。

    図28-4 inlineStyle属性の設定

    inlineStyle属性の設定

    JDeveloperにより、コンポーネントの対応するコードがJSFページに追加されます。例28-2に、inlineStyle属性が指定されたaf:outputTextコンポーネントのソースを示します。

    例28-2 ページ・ソースのinlineStyle

    <af:outputText value="outputText1"
               inlineStyle="color:Red; text-decoration:overline;"/>

  3. inlineStyle属性自体にEL式を使用して、インライン・スタイル属性を条件付きで設定できます。たとえば、アクションがまだ完了していない場合に日付を赤で表示するには、例28-3のようなコードを使用できます。

    例28-3 inlineStyle属性の設定に使用されるEL式

    <af:outputText value="#{row.assignedDate eq  
    null?res['srsearch.unassignedMessage']:row.assignedDate}"
              inlineStyle="#{row.assignedDate eq null?'color:rgb(255,0,0);':''}"/>

  4. ADF Facesコンポーネントには、ルートDOM要素に登録されていないスタイル設定には使用できない、その他のスタイル属性もあります。たとえば、af:inputTextコンポーネントの場合、例28-4に示すように、contentStyleプロパティを使用して要素のテキストを設定します。

例28-4 contentStyleプロパティの使用

<af:inputText value="outputText1"
          contentStyle="color:Red;"/>

28.2.2 スタイル・クラスの設定方法

スタイル・クラスを使用して、コンポーネントのスタイルを定義できます。スタイル・クラスは、一連のインライン・スタイルをグループ化するために作成します。スタイル・クラスを参照するには、styleClass属性を使用します。

始める前に:

styleClass属性が他の属性とどのように関連しているかについて理解しておくと役立ちます。詳細は、28.2項「コンポーネントのスタイル・プロパティの変更」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、28.1.2項「外観のカスタマイズの追加機能」を参照してください。

スタイル・クラスを使用してスタイルを設定する手順:

  1. コンポーネントのstyleClass属性を、使用するスタイル・クラスに設定します。

    例28-5に、ページ・ソースに使用されているスタイル・クラスの例を示します。

    例28-5 スタイル・クラスを使用するためのページ・ソース

    <af:outputText value="Text with a style class" 
               styleClass="overdue"/>

  2. styleClass属性にEL式を使用して、スタイル属性を条件付きで設定できます。たとえば、アクションがまだ完了していない場合に日付を赤で表示するには、例28-3のようなコードを使用できます。

28.3 エンド・ユーザーによるアプリケーションのADFスキン変更の許可

エンド・ユーザーが他のADFスキンを選択できるように、アプリケーションを構成できます。エンド・ユーザーが必要により適したADFスキンを使用して、アプリケーションのページをレンダリングできるようにする場合に、この機能を構成します。たとえば、アプリケーションで、ユーザーのブラウザが日本語のときに、日本のロケール固有の特徴を持つADFスキンを使用する場合などです。別の例としては、障害を持つユーザーにとってアプリケーションのページをよりアクセスしやすいものにするために構成されたADFスキンをアプリケーションで使用する場合があります。

図28-5では、コンポーネント(af:commandMenuItemなど)を構成して、エンド・ユーザーが実行時にアプリケーションで使用されるADFスキンを変更できるようにすることで、この機能をどのように実装するかを示しています。JSFページ上のコンポーネントを構成して、後からtrinidad-configファイルのskin-familyプロパティにより評価されるscope値を設定します。

図28-5 アプリケーションのADFスキンの変更

アプリケーションのADFスキンの変更

28.3.1 エンド・ユーザーによるアプリケーションのADFスキン変更を許可する方法

trinidad-configファイルのskin-familyプロパティの値の更新を可能にするコンポーネントを公開することにより、エンド・ユーザーがアプリケーションのADFスキンを変更できるようにします。

始める前に:

加えた変更が機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、28.3項「エンド・ユーザーによるアプリケーションのADFスキン変更の許可」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、28.1.2項「外観のカスタマイズの追加機能」を参照してください。

エンド・ユーザーにアプリケーションのADFスキンの変更を許可する手順:

  1. スキン・ファミリの設定に使用するコンポーネントを構成するメインのJSFページを開きます。

  2. 図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>

  3. エンド・ユーザーにより選択された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();
 }

  4. アプリケーション・ナビゲータで、trinidad-skins.xmlファイルをダブルクリックします。

  5. trinidad-config.xmlファイルで、EL式を記述してスキン・ファミリを動的に評価します。

    <skin-family>#{skins.skinFamily}</skin-family>

28.3.2 実行時にアプリケーションADFスキンを変更するときの処理

実行時に、エンド・ユーザーは公開されたコンポーネントを使用して、別のADFスキンを選択します。例では、これは多数のaf:commandMenuItemコンポーネントの1つです。このコンポーネントは、エンド・ユーザーが選択した値をマネージドBeanに発行し、次にこれがマネージドBeanのプロパティ(skinFamily)の値を設定します。実行時に、trinidad-configファイルの<skin-family>プロパティでは、EL式を使用してマネージドBeanから値を読み取ります。

  前
前 		 次
次
  目次へ移動
目次