14 アプリケーションの外観の変更

この章では、スタイル・プロパティの変更、ADFスキンの使用、およびアプリケーションの国際化によってアプリケーションのデフォルトの外観を変更する方法について説明します。

この章の内容は次のとおりです。

• 14.1項「ADF Facesコンポーネントの変更の概要」

• 14.2項「コンポーネントのスタイル・プロパティの変更」

• 14.3項「スキンの使用によるルック・アンド・フィールの変更」

• 14.4項「アプリケーションの国際化」

14.1 ADF Facesコンポーネントの変更の概要

ADF Facesコンポーネントは、コンポーネントの機能をコンポーネント・クラスに委譲し、コンポーネントの表示をレンダラに委譲します。クライアントでコンポーネントを表示できる様々な方法、または様々なクライアントでコンポーネントを表示する方法は、レンダラによって決定されます。コンポーネント・クラスとレンダラの一意の組合せは、ページ上で使用されているコンポーネントのタグによって決定されます。デフォルトでは、ADF Facesのすべてのタグが、関連付けられたコンポーネント・クラスとHTMLレンダラを結合し、HTMLレンダリング・キットの一部になっています。たとえば、コマンド・ボタン・コンポーネントとコマンド・リンク・コンポーネントはどちらもUICommandコンポーネントですが、それぞれ別のレンダラを使用します。独自のカスタム・レンダラを作成することもできます。このドキュメントでは、JSFレンダラまたはカスタム・コンポーネントの作成方法については説明しません。

ADF Facesレンダラはカスタマイズできません。ただし、スキンを使用してコンポーネントの表示方法をカスタマイズすることはできます。デフォルトでは、ADF Facesコンポーネントを使用して作成されたアプリケーションではOracleスキンを使用します。ただし、SRDemoサンプル・アプリケーションではカスタム・スキンを使用しています。スキンは、アプリケーションのスタイルをグローバルに設定するための簡単な手段です。独自のスキンを作成して、ADF Facesコンポーネントの色、フォントおよび場所を部分的に変更できます。これには、1つのCSSファイル内にコンポーネントのスタイルを設定します。次に、スキンを使用して表示されるようにアプリケーションを構成します。ADF Facesには、デスクトップとPDAの両方での表示用にHTMLレンダリング・キットが付属しています。

アプリケーションの外観全体は変更しない場合、ページ上のコンポーネントのインライン・スタイルを変更するように選択できます。また、プログラムによって条件付きでスタイルを設定することもできます。たとえば、ある特定の条件においてのみテキストが赤色で表示されるように設定できます。

アプリケーションの外観の変更に加え、様々な地域のユーザーがブラウザの設定言語でテキスト文字列を表示できるように、アプリケーションを国際化することもできます。

多くのADF Facesコンポーネントにはテキスト文字列が含まれますが、それらの文字列の変換は各コンポーネントによって自動的に処理されます。コンポーネントの一部となっているテキストは、ユーザーのブラウザの言語で表示されます。

変換する必要があるのは、アプリケーションに追加するテキストのみです。また、テキストの向きや通貨コードなど、ロケール固有の他のプロパティも変更できます。

この章では次の内容について説明します。

• インライン・スタイルを使用してコンポーネントの外観を変更する方法

• コンポーネントに条件付きでスタイル・プロパティを設定する方法

• カスタム・スキンを作成する方法

• アプリケーションを国際化する方法

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

ADF Facesコンポーネントでは、カスケード・スタイル・シート仕様に基づいてCSSスタイル・プロパティを使用しています。カスケード・スタイル・シートには、スタイルを適用する方法を定義するセレクタと宣言からなる規則が含まれています。これらのルールは後にブラウザにより解釈され、ブラウザのデフォルト設定をオーバーライドします。このドキュメントでは、CSSの概念については説明しません。スタイル・シートの広範な情報（公式仕様など）は、W3CのWebサイト（http://www.w3c.org/）を参照してください。

スタイル・プロパティを変更して、コンポーネントの外観を変更できます。ADF Facesコンポーネントでは、インライン・スタイル・プロパティ（font-sizeやfont-colorなどの個別の属性を設定できる）とスタイル・クラス（インライン・スタイルのセットのグループ化に使用される）の両方を使用しています。たとえば、スタイル・クラス.AFFieldTextは、inputTextコンポーネントに表示されるテキストのすべてのプロパティを設定します。

14.2.1 コンポーネントのスタイル属性の設定方法

インライン・スタイルを設定するか、ページ上でADF Facesコンポーネントのスタイル・クラスを宣言することができます。

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

1. 構造ウィンドウで、スタイルを設定するコンポーネントを選択します。

2. プロパティ・インスペクタで「Core」ノードを開きます。このノードには、コンポーネントの表示方法に関連するすべての属性が含まれます。

3. コンポーネントのスタイル・クラスを設定するには、「styleClass」フィールドをクリックし、省略記号（...）ボタンをクリックします。「styleClass」ダイアログで、このコンポーネントに使用するスタイル・クラスを入力します。このダイアログの使用方法に関する追加のヘルプを表示するには、「ヘルプ」をクリックします。

4. インライン属性を設定するには、「InlineStyle」ノードを開きます。設定する属性のフィールド内をクリックし、ドロップダウン・メニューを使用して値を選択します。

   また、InlineStyle属性そのものにEL式を使用して、インライン・スタイル属性を条件付きで設定することもできます。たとえば、SRDemoアプリケーションのSRSearchページでは、サービス・リクエストがまだ割り当てられていない場合、「Assigned Date」列の日付が赤色で表示されます。例14-1に、JSFページ上のoutputTextコンポーネントのコードを示します。

   例14-1 スタイル属性の設定に使用されるEL式

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

14.2.2 テキストを書式設定するときに行われる処理

例14-1に示すように、プロパティ・インスペクタを使用してスタイルを設定すると、JDeveloperにより、コンポーネントの対応するコードがJSFページに追加されます。

14.3 スキンの使用によるルック・アンド・フィールの変更

スキンを使用すると、アプリケーション内のADF Facesコンポーネントの外観をグローバルに変更できます。スキンは、アプリケーション全体に対して1つの場所に設定するだけでよいグローバル・スタイル・シートです。コンポーネントごとにスタイルを設定したり、ページごとにスタイルシートを挿入することなく、アプリケーション全体に対して1つのスキンを作成できます。各コンポーネントは、スキンにより記述されたスタイルを自動的に使用します。アプリケーション開発者がコードを追加する必要はありません。また、スキンへの変更があれば実行時に取得されるため、コードを変更する必要はありません。

また、スキンはカスケード・スタイル・シート仕様に基づいています。デフォルトでは、ADF FacesアプリケーションではOracleスキンを使用します。Webページおよびビジュアル・エディタでのコンポーネントは、このスキンの設定を使用して表示されます。図14-1は、Oracleスキンが適用されたSRListページを示しています。

注意: スキン・スタイル・シートの構文は、CSS3仕様に基づいています。ただし、多くのブラウザはまだこのバージョンに準拠していません。実行時、ADF FacesによってCSSがCSS2仕様に変換されます。

図14-1 Oracleスキンを使用したSRListページ

ADF Facesでは、これ以外に2つのスキンが提供されています。図14-2に示すように、最小スキンではいくつかの書式設定が提供されます。色、ボタンの形状、著作権情報の表示位置など、ページのグラフィックを除くほとんどすべてが変更されていることに注意してください。

図14-2 最小スキンを使用したSRListページ

ADF Facesにより提供される3つ目のスキンは、簡易スキンです。図14-3に示すように、このスキンには特殊な書式設定はほとんど含まれていません。

図14-3 簡易スキンを使用したSRListページ

SRDemoアプリケーションでは、専用に作成したカスタム・スキンを使用しています（図14-4）。

図14-4 カスタムのSRDemoスキンを使用したSRListページ

スキンは、CSSファイルを使用してスタイルを決定する他、リソース・バンドルを使用してコンポーネント内のテキストを決定します。たとえば、図14-4に示された選択列の「Select」という語は、スキンのリソース・バンドルを使用して決定されています。含まれているスキンはすべて、同じリソース・バンドルを使用します。

14.3.1 スキンの使用方法

カスタム・スキンは簡易スキンを拡張します。カスタム・スキンを作成するには、簡易スキンのスタイル・シート内のセレクタをオーバーライドするセレクタをスタイル・シート内に宣言します。オーバーライドしないように選択したセレクタは、簡易スキンで定義されているスタイルを引き続き使用します。スキンのスタイル・シートを作成した後は、それを有効なスキンとしてアプリケーション内に登録してから、そのスキンを使用するようにアプリケーションを構成する必要があります。

簡易スキンにより使用されるセレクタのリストは、JDeveloperのオンライン・ヘルプのADF Facesコンポーネントのスキニング用のセレクタに関するトピックを参照してください。このヘルプを表示するには、「リファレンス」→「Oracle ADF Faces」を選択します。このドキュメントでは、セレクタを3つのセクション（グローバル・セレクタ、ボタン・セレクタおよびコンポーネント・レベル・セレクタ）に分類して示しています。グローバル・セレクタは、複数のコンポーネントのスタイル・プロパティを決定します。たとえば、デフォルトのフォント・ファミリや背景色などです。ボタン・セレクタは、アプリケーション内のすべてのボタンのスタイル設定に使用します。

注意: ボタン・セレクタは、アプリケーション内のすべてのボタンのスタイルを設定します。異なるボタンに対して別々のセレクタを定義することはできません。たとえば、af:commandButtonコンポーネントとaf:goButtonコンポーネントは同じように表示されます。

コンポーネント・セレクタは、特定のコンポーネントまたはコンポーネントの一部のスタイルを決定します。アイコン・セレクタは、アイコンの位置を示します。

各セクション内には、スタイルを設定できるセレクタがあります。セレクタには3種類あります。標準セレクタ、擬似要素を持つセレクタ、およびalias擬似クラスを使用するセレクタです。標準セレクタは、スタイルを適用できる要素を直接表すセレクタです。たとえば、af|bodyはaf:bodyコンポーネントを表します。このタイプの要素には、CSSスタイル、プロパティおよびアイコンを設定できます。

擬似要素は、スタイルを適用できるコンポーネントの特定の領域を示すために使用します。擬似要素は、コロン2つで始まり、その後にセレクタが表すコンポーネントの部分が続きます。たとえば、af|column::cell-textは列のセル内のテキストのスタイルとプロパティを提供します。

alias擬似クラスは、複数のコンポーネント、または1つのコンポーネントの複数の部分のスタイルを設定するセレクタに対して使用します。たとえば、.AFMenuBarItem:aliasセレクタは、すべてのaf:menuBar項目により共有されるスキン・プロパティを定義します。このaliasで定義されたプロパティは、af|menuBar::enabledおよびaf|menuBar::selectedスタイル・クラスに含められます。.AFMenuBarItem:aliasスタイルを変更すると、af|menuBar::enabledおよびaf|menuBar::selectedセレクタに影響を与えます。また、他のセレクタに含めるための独自の擬似クラスを作成することもできます。

複数のスキンを作成できます。たとえば、Webのアプリケーションのバージョン用にスキンを1つ作成し、PDAでアプリケーションが実行されるときに使用するスキンを別に作成します。あるいは、現在のユーザーのブラウザで設定されているロケールに基づいてスキンを変更することもできます。さらに、ユーザーがスキンを切り替えることができるように、selectOneChoiceなどのコンポーネントを構成できます。

スキンで使用されるテキストは、リソース・バンドル内で定義されています。簡易スキンのセレクタと同様に、このテキストは、カスタム・リソース・バンドルを作成し、変更するテキストのみを宣言することによってオーバーライドできます。オーバーライドできるテキストのキーについては、JDeveloperのオンライン・ヘルプのスキンで使用されるリソース・バンドルのキーに関するリファレンスを参照してください。カスタム・リソース・バンドルを作成した後、スキンにそれを登録します。

注意: ADF Facesコンポーネントでは自動変換が提供されています。コンポーネントのスキンに使用されるリソース・バンドルは、28の言語に変換されます。ユーザーがドイツ語を使用するようにブラウザを設定した場合、コンポーネント内に含まれるテキストはすべて自動的にドイツ語で表示されます。このため、カスタム・スキン用のリソース・バンドルを作成した場合は、アプリケーションでサポートされている他の言語に対応するそのバンドルのローカライズ済バージョンも作成する必要があります。国際化の詳細は、14.4項「アプリケーションの国際化」を参照してください。

14.3.1.1 カスタム・スキンの作成

カスタム・スキンを作成するには、簡易スキンを拡張し、セレクタをオーバーライドします。次にスキンをアプリケーションに登録する必要があります。

カスタム・スキンを作成する手順:

1. 簡易スキンを使用してページを確認して、変更する内容を決定します。スキンを変更する手順は、14.3.1.2項「スキンを使用するためのアプリケーションの構成」を参照してください。

2. JDeveloperでCSSファイルを作成します。

   1. ユーザー・インタフェースのコードが含まれるプロジェクトを右クリックし、「新規」を選択して「新規ギャラリ」を開きます。

   2. 「新規ギャラリ」で「Web Tier」ノードを開き、「HTML」を選択します。

   3. 「CSSファイル」をダブルクリックします。

   4. カスケード・スタイル・シートの作成ダイアログに必要事項を入力します。「ヘルプ」をクリックすると、このダイアログに関するヘルプが表示されます。

3. JDeveloperのオンライン・ヘルプのADF Facesコンポーネントのスキニング用のセレクタに関するトピックを参照してください。このヘルプを表示するには、「リファレンス」→「Oracle ADF Faces」を選択します。オーバーライドするセレクタをCSSファイルに追加し、必要に応じてプロパティを設定します。CSS仕様で指定されている任意のプロパティを設定できます。

   アイコンのセレクタをオーバーライドする場合、アイコン・イメージのURLのコンテンツ相対パス（スラッシュから始まるパス）を使用します。引用符は使用しません。また、アイコンの幅と高さを含める必要があります。例14-2に、アイコンのセレクタを示します。

   例14-2 アイコンのセレクタ

   .AFButtonDisabledStartIcon:alias
    {
         content:url(/skins/srdemo/images/btnDisabledStart.gif);
         width:7px; height:18px
    }
   

   アイコンとボタンは両方とも、rtl擬似クラスを使用できます。これにより、アプリケーションが右から左へのモードで表示されるときに使用されるアイコンまたはボタンが定義されます。例14-3に、アイコンに使用されるrtl擬似クラスを示します。

   例14-3 rtl擬似クラスを使用するアイコン・セレクタ

   .AFButtonDisabledStartIcon:alias:rtl
    {
         content:url(/skins/srdemo/images/btnDisabledStartRtl.gif);
         width:7px; height:18px
    }
   

   
   

   ヒント: 別名をオーバーライドすると、複数のコンポーネントの外観が変更される可能性があります。結果として何が変更されるかを理解するため、必ず参照ドキュメントをよくお読みください。

   
   

4. 独自の別名クラスを作成してから、後で他のセレクタに含めることができます。この手順は次のとおりです。

   1. 別名のセレクタ・クラスを作成します。たとえば、SRDemoスキンには、カーソルが置かれたリンクの色を設定するために使用される別名があります。

      .MyLinkHoverColor:alias {color: #CC6633;}
      

   2. 別のセレクタに別名を含めるには、既存のセレクタに擬似要素を追加して新しいセレクタを作成し、-ora-rule-ref:selectorプロパティを使用してその別名を参照します。

      たとえば、SRDemoスキンは、カーソルが置かれたときの色をスタイル設定するためにaf|menuBar::enabled-linkセレクタに対する新規のセレクタを作成してから、カスタム別名を参照しています（例14-4を参照）。

      例14-4 新規セレクタ内のカスタム別名の参照

      af|menuBar::enabled-link:hover
      {
        -ora-rule-ref:selector(".MyLinkHoverColor:alias");
      }
      

5. ファイルをディレクトリに保存します。

CSSを作成した後は、スキンを登録し、そのスキンを使用するようにアプリケーションを構成する必要があります。

スキンのカスタム・バンドルを作成する手順:

1. JDeveloperのオンライン・ヘルプのスキンで使用されるリソース・バンドルのキーに関するリファレンスおよび簡易スキンを使用してページを確認して、変更するテキストを決定します。スキンを簡易スキンに変更する手順は、14.3.1.2項「スキンを使用するためのアプリケーションの構成」を参照してください。

2. JDeveloperでリソース・バンドルを作成します。タイプはjava.util.ResourceBundleにする必要があります。詳細な手順は、14.4.1項「アプリケーションを国際化する方法」を参照してください。

3. オーバーライドするキーをバンドルに追加し、必要に応じてテキストを設定します。

   
   

   ヒント: アプリケーションを国際化する場合は、このリソース・バンドルのローカライズ済バージョンも作成する必要があります。詳細と手順は、14.4.1項「アプリケーションを国際化する方法」を参照してください。

   
   

カスタム・スキンおよびバンドルを登録する手順:

1. adf-faces-skins.xmlファイルがない場合は、作成します（このファイルは<view_project_name>/WEB-INFディレクトリ内にあります）。このファイルは、アプリケーションにアクセスできる各スキンを宣言するために使用されます。

   1. ビュー・プロジェクトを右クリックし、「新規」を選択して「新規ギャラリ」を開きます。

      「新規ギャラリ」が起動されます。ファイルがソース・エディタ内に起動されます。

   2. 左側の「カテゴリ」ツリーで「XML」を選択します。「XML」が表示されない場合、一番上の「フィルタ方法」ドロップダウン・リストを使用して「すべてのテクノロジ」を選択します。

   3. 「項目」リストで「XML文書」を選択し、「OK」をクリックします。

   4. ファイルadf-faces-skins.xmlを指定して<view_project_name>/WEB-INFディレクトリに挿入し、「OK」をクリックします。

   5. 生成されたコードを、例14-5に示すコードで置き換えます。

      例14-5 adf-faces-skins.xmlファイルのデフォルト・コード

      <?xml version="1.0" encoding="ISO-8859-1"?>
      <skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
      
        <skin>
      
        </skin>
      
      </skins>
      

2. skin要素に対して次の値を定義することにより、新しいスキンを登録します。

   • <id>: EL式内でスキンを参照する場合は、この値が使用されます。たとえば、ロケールごとに別々のスキンを持たせる場合、IDに基づいて適切なスキンを選択するEL式を作成できます。

   • <family>: 特定のスキン・ファミリを使用するようにアプリケーションを構成します。こうすることで、使用されるレンダリング・キットに基づいて、アプリケーションのスキンをグループ化できます。

   • <render-kit-id>: この値により、スキンに使用されるレンダリング・キットが決定されます。次のいずれかの要素を入力できます。

     • oracle.adf.desktop: アプリケーションがデスクトップ上にレンダリングされると、スキンが自動的に使用されます。

     • oracle.adf.pda: PDA上でレンダリングされると、スキンが使用されます。

   • <style-sheet-name>: これは、カスタムCSSファイルへの完全修飾パスです。

   • <bundle-name>: スキンに作成されたリソース・バンドル。カスタム・バンドルを作成していない場合は、この要素を宣言する必要はありません。

     
     

     注意: リソース・バンドルのローカライズ済バージョンをすでに作成してある場合、必要な作業はベース・リソース・バンドルを登録することのみです。

     
     

   例14-6に、adf-faces-skins.xmlファイル内のSRDemoスキンのエントリを示します。

   例14-6 adf-faces-skins.xmlファイル内のSRDemoスキンのスキン・エントリ

   <skin>
     <id>
       srdemo.desktop
     </id>
     <family>
       srdemo
     </family>
     <render-kit-id>
       oracle.adf.desktop
     </render-kit-id>
     <style-sheet-name>
       skins/srdemo/srdemo.css
     </style-sheet-name>
   </skin>
   

14.3.1.2 スキンを使用するためのアプリケーションの構成

adf-faces-config.xmlファイル内に、使用するスキン（および必要な場合は、それが使用される条件）を決定する要素を設定します。

スキンを使用するようにアプリケーションを構成する手順:

1. adf-faces-config.xmlファイルを開きます。

2. <skin-family>値を、使用するスキンのファミリ名で置き換えます。例14-7に、srdemoスキン・ファミリを使用する構成を示します。

   例14-7 スキン・ファミリを使用する構成

   <adf-faces-config xmlns="http://xmlns.oracle.com/adf/view/faces/config">
     <skin-family>srdemo</skin-family>
   </adf-faces-config>
   

3. 値を条件付きで設定するには、表示するスキンを決定するために評価できるEL式を入力します。

   たとえば、ユーザーのブラウザがドイツのロケールに設定されているときにはドイツ語のスキンを使用し、それ以外のときには英語のスキンを使用する場合、adf-faces-config.xmlファイル内に次のように入力します。

   <skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>
   

4. スキンを動的に変更するコンポーネントを構成するには、まずJSFページのコンポーネントを構成し、後で構成ファイルによって評価可能なスコープに値を設定する必要があります。次に、その値で動的に設定されるようadf-faces-configファイルにスキン・ファミリを構成します。

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

   2. コンポーネントを構成してスキン・ファミリをsessionScopeに設定します。例14-8に、選択された値を使用して、それをsessionScopeのskinFamily属性の値として設定するselectOneChoiceコンポーネントを示します。

      例14-8 コンポーネントを使用したスキン・ファミリの設定

      <af:selectOneChoice label="Select Skin"
                          value="#{sessionScope.skinFamily}"
                          onchange="form.submit();">
        <af:selectItem label="Simple" value="simple"/>
        <af:selectItem label="Minimal" value="minimal"/>
        <af:selectItem label="Oracle" value="oracle"/>
        <af:selectItem label="SRDemo" value="srdemo"/>
      </af:selectOneChoice>
      

      selectOneChoiceコンポーネントでスキンが選択されると、onchangeイベント・ハンドラによりフォームPOSTが実行されます。別の方法として、ページを再送信するコマンド・ボタンをページに追加することもできます。POSTが実行されてEL式が評価され、新規の値が選択されるたびに、新しいスキンでページが再描画されます。

   3. adf-faces-configファイルで、EL式を使用して動的にスキン・ファミリを評価します。

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

14.4 アプリケーションの国際化

複数の国のユーザーがアプリケーションを表示する場合、ユーザーのブラウザの言語に対応する適切な言語が表示されるように、様々なロケールを使用できるようアプリケーションを構成できます。たとえば、アプリケーションがドイツ国内で表示されるとわかっている場合、ユーザーのブラウザがドイツ語を使用するように設定されているときにはアプリケーション内のテキスト文字列がドイツ語で表示されるように、アプリケーションをローカライズすることができます。

ADF Facesコンポーネントでは自動変換が提供されています。コンポーネントのスキン（このスキンにより、ルック・アンド・フィール以外にコンポーネント内のテキストも決定される）で使用されるリソース・バンドルは、28の言語に翻訳されます。ユーザーがドイツ語を使用するようにブラウザを設定した場合、コンポーネント内に含まれるテキストはすべて自動的にドイツ語で表示されます。スキンおよびこのリソース・バンドルの詳細は、14.3.1項「スキンの使用方法」を参照してください。ADF Facesコンポーネントに含まれるすべてのテキストの完全リストについては、JDeveloperのオンライン・ヘルプのスキンで使用されるリソース・バンドルのキーに関するリファレンスを参照してください。

アプリケーションに追加したテキストについては、実際のテキストが含まれているリソース・バンドルを指定し、JSF loadBundleタグを使用してそのバンドルをページにロードする必要があります。次に、コンポーネントのText属性をリソース・バンドル内のキーにバインドします。JSFページに直接テキストを入力したり、この属性の値としてテキストを入力することはしません。その後、リソース・バンドルのバージョンをロケールごとに作成します。

注意: データベースから取得されたテキストは変換されません。このドキュメントでは、静的テキストのローカライズ方法については説明しますが、データベース内に格納されているテキストのローカライズ方法については説明しません。

図14-5は、英語（米国）を使用するように設定されたブラウザでのSRDemoアプリケーションのSRListページを示しています。

図14-5 英語でのSRListページ

このページのタイトルは「My Service Requests」ですが、PanelPageコンポーネントのtitle属性の値として「My Service Requests」を指定するのではなく、この値をUIResourcesリソース・バンドル内のキーにバインドしています。UIResourcesリソース・バンドルは、loadBundleタグを使用してページにロードされます（例14-9を参照）。リソース・バンドルには、EL式に使用可能な変数名（この場合はres）が提供されます。次にpanelPageコンポーネントのtitle属性が、そのリソース・バンドル内のsrlist.pageTitleキーにバインドされます。

例14-9 JSFページ内で使用されているリソース・バンドル

<f:view>
  <f:loadBundle basename="oracle.srdemo.view.resources.UIResources"
                  var="res"/>
  <af:document title="#{res['srdemo.browserTitle']}"
               initialFocusId="viewButton">
    <af:form>
      <af:panelPage title="#{res['srlist.pageTitle']}">

UIResourcesリソース・バンドル内には、SRDemoアプリケーションの各ページに表示されるすべての静的テキスト、メッセージのテキスト、グローバル・テキスト（汎用ラベルなど）に対する英語のエントリがあります。例14-10に、SRListページのキーを示します。

例14-10 英語で表示されるSRListページのリソース・バンドル・キー

#SRList Screen
srlist.pageTitle=My Service Requests
srlist.menubar.openLink=Open Requests
srlist.menubar.pendingLink=Requests Awaiting Customer
srlist.menubar.closedLink=Closed Requests
srlist.menubar.allRequests=All Requests
srlist.menubar.newLink=Create New Service Request
srlist.selectAnd=Select and
srlist.buttonbar.view=View
srlist.buttonbar.edit=Edit

図14-6は、ブラウザがドイツ語ロケールを使用するように設定されている場合のSRListページを示しています。

図14-6 ドイツ語でのSRListページ

注意: 値がバインディング・オブジェクトのlabelプロパティにバインドされているため、列見出しは変換されていません。この値は、エンティティ構造XMLファイル内のコントロール・ヒントとして設定されています。labelに値が設定されるたびに、リソース・バンドルが自動的に作成されます。これらを変換するには、これらのリソース・バンドルのローカライズ済バージョンを作成する必要があります。

例14-11に、ドイツ語バージョンのリソース・バンドル（UIResource_de）を示します。選択ファセットのタイトルに対するエントリがないのに、「Select」が自動的に「Auswahlen」に変換されていることに注意してください。これは、このテキストがADF Faces表コンポーネントの選択ファセットの一部になっているためです。

例14-11 ドイツ語で表示されたSRListページのリソース・バンドル・キー

#SRList Screen
srlist.pageTitle=Meine Service Anfragen
srlist.menubar.openLink=Offene Anfragen
srlist.menubar.pendingLink=Anfrage wartet auf Kunden
srlist.menubar.closedLink=Geschlossene Anfragen
srlist.menubar.allRequests=Alle Anfragen
srlist.menubar.newLink=Erstelle neue Service Anfrage
srlist.selectAnd=Kommentare wählen und
srlist.buttonbar.view=Ansich

アプリケーションのリソース・バンドルはJavaクラスまたはプロパティ・ファイルのいずれかにできます。抽象クラスResourceBundleは2つのサブクラス（PropertyResourceBundleおよびListResourceBundle）を持ちます。PropertyResourceBundleはプロパティ・ファイル内に格納されます。これは、変換可能なテキストを含むプレーン・テキスト・ファイルです。プロパティ・ファイルには、Stringオブジェクトの値しか含められません。他のタイプのオブジェクトを格納する必要がある場合は、プロパティ・ファイルではなくListResourceBundleを使用する必要があります。プロパティ・ファイルのコンテンツはISO 8859-1としてエンコーディングする必要があります。そのキャラクタ・セットにない文字は、エスケープされたUnicodeとして格納する必要があります。

他のロケールのサポートを追加するには、キーの値をローカライズ済の値で置き換え、言語コード（必須）と国コードおよび名前の識別子としてのバリアント（オプション）を付加したプロパティ・ファイル（たとえば、UIResources_de.properties）を保存するだけです。SRDemoアプリケーションでは、プロパティ・ファイルを使用しています。

注意: プロパティ・ファイル内では、IS0 8859-1キャラクタ・セットの文字を使用する必要があります。他の文字を使用する必要がある場合は、プロパティ・ファイルではなくListResourceBundleクラスを使用してください。 8859-1キャラクタ・セットにない文字はすべて、UTF-8エスケープ文字に変換される必要があります。変換されないと、適切に表示されません。

ListResourceBundleクラスは、名前、値配列内のリソースを管理します。各ListResourceBundleクラスはJavaクラス・ファイル内に含まれます。ロケール固有のオブジェクトはすべて、ListResourceBundleクラス内に格納できます。他のロケールのサポートを追加するには、ベース・クラスをサブクラス化し、ロケールまたは言語の拡張子が付いたファイルにそれを保存します。次に変換し、クラス・ファイルにコンパイルします。

ResourceBundleクラスはフレキシブルです。最初にロケール固有のString オブジェクトをPropertyResourceBundleファイルに挿入した場合でも、後でそれらのオブジェクトをListResourceBundleクラスに移動できます。キーを検索するためのコールではListResourceBundleクラスとPropertyResourceBundleファイルの両方が検索されるため、コードへの影響はありません。

プロパティよりもクラスの方が優先されます。このため、クラス・ファイルとプロパティ・ファイルの両方に同じ言語に対するキーが存在する場合、クラス・ファイル内の値がユーザーに表示されます。また、ロードするバンドルを決定するための検索アルゴリズムは次のとおりです。

1. （ベース・クラス）+（特定の言語）+（特定の国）+（特定のバリアント）

2. （ベース・クラス）+（特定の言語）+（特定の国）

3. （ベース・クラス）+（特定の言語）

4. （ベース・クラス）+（デフォルトの言語）+（デフォルトの国）+（デフォルトのバリアント）

5. （ベース・クラス）+（デフォルトの言語）+（デフォルトの国）

6. （ベース・クラス）+（デフォルトの言語）

たとえば、ユーザーのブラウザがドイツ語ロケールに設定されていて、アプリケーションのデフォルト・ロケールが米語の場合、アプリケーションは最も近い一致を見つけようとして、次の順序で検索します。

1. de_Germany

2. de

3. en_US

4. en

5. ベース・クラス・バンドル

ヒント: バンドルのロードに使用されたgetBundleメソッドは、ベース・クラス・バンドルを返す前に、デフォルトのロケール・クラスを検索します。一致が見つからなかった場合は、MissingResourceExceptionエラーがスローされます。この例外がスローされるのを回避するためには、接尾辞のないベース・クラスが常に存在している必要があります。

14.4.1 アプリケーションを国際化する方法

アプリケーションを国際化するには、次の操作を実行する必要があります。

ヒント: これらの手順を実行すると、アプリケーションはユーザーのブラウザ設定に基づいて適切な言語を表示できます。また、ユーザーが使用ロケールを手動で設定できるようなアプリケーションを作成する方法もあります。現行ロケールは、FacesContextのviewRoot内に格納されています。

1. コンポーネントそのものの一部になっていないすべてのテキスト文字列が含まれたベース・リソース・バンドルを作成します。このバンドルは、アプリケーションのデフォルト言語で作成する必要があります。

   
   

   ヒント: アプリケーション全体に対してリソース・バンドルを1つ作成するのではなく、複数のリソース・バンドルを作成できます。たとえば、JSFアプリケーションでは、faces-config.xmlファイル内で、エラー・メッセージが含まれているリソース・バンドルをアプリケーションに登録する必要があります。このため、メッセージに対して別個のバンドルを作成すると便利です。 String以外のオブジェクト値を含める必要がある場合、またはパフォーマンスを少し拡張する必要がある場合、プロパティ・ファイルではなくJavaクラスとしてリソース・バンドルを作成します。 バンドルのロードに使用されたgetBundleメソッドは、ベース・クラス・バンドルを返す前に、デフォルトのロケール・クラスを検索します。しかし、一致が見つからなかった場合は、MissingResourceExceptionエラーがスローされます。この例外がスローされるのを回避するためには、接尾辞のないベース・クラスが常に存在している必要があります。

   
   

2. JSFページ上でベース・リソース・バンドルを使用します。これには、バンドルをロードしてから、バンドル内のキーにコンポーネント属性をバインドします。

3. アプリケーションでサポートされるロケールごとに、ローカライズ済のリソース・バンドルを作成します。

4. ロケールをアプリケーションに登録します。

5. アプリケーション・メッセージに使用するバンドルを登録します。

注意: カスタム・スキンを使用する場合で、そのスキンのカスタム・リソース・バンドルを作成した場合は、そのリソース・バンドルのローカライズ済バージョンも作成する必要があります。同様に、コントロール・ヒントを使用してテキストを設定するアプリケーションの場合は、そのテキストに対して生成されたリソース・バンドルのローカライズ済バージョンを作成する必要があります。

以降に各ステップの詳細な手順を示します。

リソース・バンドルをプロパティ・ファイルとして作成する手順:

1. JDeveloperで、簡易のファイルを新規に作成します。

   1. アプリケーション・ナビゲータで、ファイルの保存場所を右クリックし、「新規」を選択して「新規ギャラリ」を開きます。

      
      

      注意: ベース・リソース・バンドルのローカライズ済バージョンを作成する場合は、ベース・ファイルと同じディレクトリにファイルを保存してください。

      
      

   2. 「カテゴリ」ツリーで「Simple Files」を選択し、「ファイル」を選択します。

   3. 拡張子.propertiesを使用して、ファイルの名前を入力します。

      
      

      注意: ベース・リソース・バンドルのローカライズ済バージョンを作成する場合は、ファイル名にISO 639の小文字の言語コードを追加する必要があります。たとえば、UIResourcesバンドルのドイツ語バージョンは、UIResources_de.propertiesになります。複数の国で1つの言語を使用する場合は、ISO 3166の大文字の国コードを追加できます（たとえば、de_DE）。また、オプションの非標準バリアント（たとえば、プラットフォームや地域の情報を提供するバリアント）を追加することもできます。 ベース・リソース・バンドルを作成する場合、コードを追加する必要はありません。

      
      

2. このバンドルの静的テキストの文字列ごとに、キーと値を作成します。キーは、文字列の一意の識別子です。値は、バンドルの言語でのテキスト文字列です。ベース・リソース・バンドルのローカライズ済バージョンを作成する場合、このバージョン内に存在しないキーは、ベース・クラスから値を継承します。

   
   

   注意: 非ASCII文字はすべてUnicodeエスケープにするか、コンパイル時のエンコーディングを明示的に指定する必要があります。たとえば、次のように指定します。 javac -encoding ISO8859_5 UIResources_de.java

   
   

   たとえば、SRListページのタイトルのキーと値は、次のようになります。

   srlist.pageTitle=My Service Requests
   

   
   

   注意: 8859-1キャラクタ・セットにない文字はすべて、UTF-8エスケープ文字に変換される必要があります。変換されないと、適切に表示されません。

   
   

リソース・バンドルをJavaクラスとして作成する手順:

1. JDeveloperで、簡易のJavaクラスを新規に作成します。

   • アプリケーション・ナビゲータで、ファイルの保存場所を右クリックし、「新規」を選択して「新規ギャラリ」を開きます。

     
     

     注意: ベース・リソース・バンドルのローカライズ済バージョンを作成する場合、これをベース・ファイルと同じディレクトリに保存する必要があります。

     
     

   • 「カテゴリ」ツリーで「Simple Files」を選択し、「項目」リストで「Javaクラス」を選択します。

   • クラスの名前とパッケージを入力します。クラスはjava.util.ListResourceBundleを拡張している必要があります。

     
     

     注意: ベース・リソース・バンドルのローカライズ済バージョンを作成する場合は、クラス名にISO 639の小文字の言語コードを追加する必要があります。たとえば、UIResourcesバンドルのドイツ語バージョンは、UIResources_de.javaになります。複数の国で1つの言語を使用する場合は、ISO 3166の大文字の国コードを追加できます（たとえば、de_DE）。また、オプションの非標準バリアント（たとえば、プラットフォームや地域の情報を提供するバリアント）を追加することもできます。 ベース・リソース・バンドルを作成する場合、コードを追加する必要はありません。

     
     

2. キーと値の組の配列を返すだけのgetContents()メソッドを実装します。適切な値を使用して、バンドルのキーの配列を作成します。例14-12に、ベース・リソース・バンドルのJavaクラスのサンプルを示します。

   
   

   注意: キーはStringsである必要があります。ベース・リソース・バンドルのローカライズ済バージョンを作成する場合、このバージョン内に存在しないキーは、ベース・クラスから値を継承します。

   
   

   例14-12 ベース・リソース・バンドルのJavaクラス

   package sample;
   
   import java.util.ListResourceBundle;
   
   public class MyResources extends ListResourceBundle {
     public Object[][] getContents() {
       return contents;
     }
     static final Object[][] contents = {
       {"button_Search", "Search"},
       {"button_Reset", "Reset"},
     };
   }
   

ページ上でベース・リソース・バンドルを使用する手順:

ページ上にベース・リソース・バンドルのみをロードします。アプリケーションにより、ユーザーのブラウザのロケール設定に基づいて、自動的に適切なバージョンが使用されます。

1. ページ・エンコーディングとレスポンス・エンコーディングを、サポートされているすべての言語のスーパーセットに設定します。エンコーディングが設定されていない場合、ページ・エンコーディングはデフォルトで、ページ・ディレクティブのcontentType属性を使用して設定されたレスポンス・エンコーディングの値に設定されます。例14-13に、SRListページのエンコーディングを示します。

   例14-13 ページおよびレスポンスのエンコーディング

   <?xml version='1.0' encoding='windows-1252'?>
   <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:af="http://xmlns.oracle.com/adf/faces"
             xmlns:afc="http://xmlns.oracle.com/adf/faces/webcache">
     <jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
                 doctype-system="http://www.w3.org/TR/html4/loose.dtd"
                 doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
     <jsp:directive.page contentType="text/html;charset=UTF-8"/>
     <f:view>
   

   
   

   ヒント: デフォルトでは、JDeveloperによりページ・エンコーディングはwindows-1252に設定されます。デフォルトを別のページ・エンコーディングに設定するには、次のようにします。 メニューから「ツール」→「設定」を選択します。 左側のペインで「環境」を選択します（まだ選択されていない場合）。 「エンコーディング」を優先されるデフォルトに設定します。

   
   

2. loadBundleタグを使用して、ベース・リソース・バンドルをページ上にロードします（例14-14を参照）。basename属性は、ロードするリソース・バンドルの完全修飾名を指定します。このリソース・バンドルは、アプリケーションのデフォルト言語に対して作成されたものである必要があります。var属性は、リソース・バンドルがMapとして公開されたリクエスト・スコープ属性の名前を指定するもので、コンポーネント属性をリソース・バンドル内のキーにバインドするEL式内で使用されます。

   例14-14 loadBundleタグ

   <f:loadBundle basename="oracle.srdemo.view.resources.UIResources"
                 var="res"/>
   

3. 前述の手順で作成した変数を使用して、ページ上に表示される静的テキストの文字列を表すすべての属性を、リソース・バンドル内の適切なキーにバインドします。例14-15に、SRListページの「View」ボタンのコードを示します。

   例14-15 リソース・バンドルへのバインド

   <af:commandButton text="#{res['srlist.buttonbar.view']}"
                     . . . />
   

ロケールを登録する手順:

1. faces-config.xmlファイルを開き、エディタ・ウィンドウ内で「概要」タブを選択します。faces-config.xmlファイルは<View_Project>/WEB-INFディレクトリ内にあります。

2. JSF構成エディタで「アプリケーション」を選択します。

3. 「ロケール構成」の三角形をクリックして「デフォルト・ロケール」フィールドと「サポートされているロケール」フィールドを表示します（まだ表示されていない場合）。

4. 「デフォルト・ロケール」には、アプリケーションで使用されるデフォルト言語のISOロケール識別子を入力します。この識別子は、ベース・リソース・バンドル内で使用されている言語を表している必要があります。

5. 「新規」をクリックして、サポートされている他のロケールを追加します。「ヘルプ」をクリックするか、[F1]を押すと、ロケールの登録に関する追加のヘルプが表示されます。

メッセージ・バンドルを登録する手順:

1. faces-config.xmlファイルを開き、エディタ・ウィンドウ内で「概要」タブをクリックします。faces-config.xmlファイルは<View_Project>/WEB-INFディレクトリ内にあります。

2. ウィンドウ内で「アプリケーション」を選択します。

3. 「メッセージ・バンドル」には、アプリケーションにより使用されるメッセージが含まれたベース・バンドルの完全修飾名を入力します。

14.4.2 ADF Facesのオプションのローカライゼーション・プロパティを構成する方法

ADF Facesでは、テキスト変換のみでなく、他のタイプ（テキストの向きや通貨コードなど）の変換も自動的に提供されます。アプリケーションにより、ユーザーの選択したロケールに基づいて、自動的に適切に表示されます。ただし、adf-faces-config.xmlファイル内でアプリケーションの次のローカライゼーション設定を手動設定することもできます。

• <currency-code>: oracle.adf.view.faces.converter.NumberConverterによって使用されるデフォルトのISO 4217通貨コードを定義して、通貨コードが指定されていない通貨フィールドを独自のコンバータで書式設定します。

• <number-grouping-separator>: 数値のグループに対して使用されるセパレータ（たとえば、カンマなど）を定義します。ADF Facesでは自動的に現行ロケールからセパレータが導出されますが、この要素内に値を指定することで、このデフォルトをオーバーライドできます。設定した場合、解析および書式設定中に、oracle.adf.view.faces.converter.NumberConverterによってこの値が使用されます。

• <decimal-separator>: 小数点に使用されるセパレータ（たとえば、ピリオドやカンマなど）を定義します。ADF Facesでは自動的に現行ロケールからセパレータが導出されますが、この要素内に値を指定することで、このデフォルトをオーバーライドできます。設定した場合、解析および書式設定中に、oracle.adf.view.faces.converter.NumberConverterによってこの値が使用されます。

• <right-to-left>: ADF Facesでは自動的に現行ロケールからレンダリング方向が導出されますが、値trueまたはfalseを使用することで、デフォルトのページ・レンダリング方向を明示的に設定できます。

• <time-zone>: ADF Facesでは自動的に、クライアント・ブラウザで使用されているタイムゾーンが使用されます。この値は、oracle.adf.view.faces.converter.DateTimeConverterによってStringsからDateへの変換中に使用されます。

オプションのローカライゼーション・プロパティを構成する手順:

1. adf-faces-config.xmlファイルを開きます。このファイルは、<View_Project>/WEB-INFディレクトリ内にあります。

2. 「コンポーネント・パレット」から、ファイルに追加する要素を構造ウィンドウ内にドラッグします。空の要素がページに追加されます。

3. 目的の値を入力します。

例14-16に、オプションのローカライゼーション要素すべてが設定されたadf-faces-config.xmlファイルのサンプルを示します。

例14-16 通貨コードおよび数値と小数点のセパレータの構成

<!-- Set the currency code to US dollars. -->
<currency-code>USD</currency-code>

<!-- Set the number grouping separator to period for German -->
<!-- and comma for all other languages -->
<number-grouping-separator>
 #{view.locale.language=='de' ? '.' : ','}
</number-grouping-separator>

<!-- Set the decimal separator to comma for German -->
<!-- and period for all other languages -->
<decimal-separator>
 #{view.locale.language=='de' ? ',' : '.'}
</decimal-separator>

<!-- Render the page right-to-left for Arabic -->
<!-- and left-to-right for all other languages -->
<right-to-left>
 #{view.locale.language=='ar' ? 'true' : 'false'}
</right-to-left>

<!-- Set the time zone to Pacific Daylight Savings Time -->
<time-zone>PDT</time-zone>