ヘッダーをスキップ
Oracle Application Development Framework開発者ガイド
10g(10.1.3.0)
B40012-02
  目次
目次
索引
索引

戻る
戻る
 
次へ
次へ
 

4 ADF Facesの概説

この章では、ADF Facesを使用するためにユーザー・インタフェース・プロジェクトを設定するプロセスについて説明します。また、ユーザー・インタフェースにADF Facesコンポーネントを利用するWebページの作成およびレイアウトに関する基本情報も示します。

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

4.1 ADF Facesの概要

Oracle ADF Facesは、JavaServer Faces(JSF)に100%準拠したコンポーネント・ライブラリで、JSFアプリケーション開発用に一連の広範な拡張UIコンポーネントを提供します。JSF JSR 127仕様に基づいて、ADF FacesコンポーネントはJSFをサポートするIDEで使用できます。すなわち、ADF FacesはSun社のJSF Reference Implementation 1.1_01(以上)およびApache MyFaces 1.0.8(以上)と連携して機能します。

ADF Facesによってアプリケーションの一貫したルック・アンド・フィールが確保されるため、ルック・アンド・フィールの整合性よりもユーザー・インタフェースの操作性に集中できるようになります。コンポーネント・ライブラリは、多言語および翻訳を実装する他、アクセシビリティ機能もサポートします。また、ADF Facesは、HTML、モバイルおよびTelnetユーザーに対して複数のレンダー・キットをサポートします。つまり、Webページの表示に使用されるデバイスに関係なく、同一のコンポーネントを持つWebページを構築できます。

ADF Facesコンポーネントの部分ページ・レンダリング機能を使用すると、完全なページ・リフレッシュを必要とせずに表示を更新する対話型Webページを作成できます。オラクル社では、将来的に、Ajaxテクノロジ(JavaScript、XMLおよびDocument Object Model(DOM))をさらに高度な形で使用することにより、デスクトップ・スタイルのアプリケーションに近い操作性を備えたリッチなインターネット・アプリケーションを実現するレンダー・キットを提供する予定です。

ADF Facesには、JSF開発者が現在最も必要とする、次のような多くのフレームワークおよびコンポーネント機能があります。

ADF Faces UIコンポーネントには、列ソート機能と行選択機能がある高度な表、データを階層的に表示するためのツリー・コンポーネント、カラー・ピッカーと日付ピッカー、その他多くのコンポーネント(メニュー、コマンド・ボタン、シャトル選択、進捗メーター)があります。

初期設定のまま使用できるADF Facesコンポーネント(ファイルをアップロードするための入力ファイル・コンポーネントや、2次ウィンドウにナビゲートして選択した値が表示される元のページに戻るためのダイアログ・サポートが組み込まれている選択入力コンポーネントなど)により、ユーザーの操作は簡略化されます。

ADF Facesの詳細は、次のリソースを参照してください。

UIにADF Facesコンポーネントを使用し、ページ・ナビゲーションにJSFテクノロジを使用するJSF JSPページを作成する場合は、ADFモデルのバインディング機能をページのコンポーネントに使用することでOracle Application Development Framework(Oracle ADF)を活用できます。データ・コントロールおよびADFモデルの詳細は、1.1.2項「Oracle ADFおよびJavaServer Facesによる宣言的な開発」を参照してください。

表4-1に、ADF Faces用に現在サポートされているプラットフォームを示します。

表4-1 ADF Faces用にサポートされているプラットフォーム

ユーザー・エージェント Windows Solaris Mac OS X Red Hat Linux Windows Mobile Palm OS

Internet Explorer

6.0 *




2003以上


Mozilla

1.7.x



1.7.x



Firefox

1.0.x



1.0.x



Safari



1.3, 2.0 **




WebPro (Mobile)






3.0


* アクセシビリティおよびBiDiは、Windows上のIEでのみサポートされます。

** Safari 1.3パッチ312.2およびSafari 2.0パッチ412.5で提供されるAppleの不具合の修正が必須です。


ヒント:

UNIXサーバー・ボックスでは、ボタン・イメージが想定どおりにレンダーされない場合があります。JDK1.4以上を使用する場合は、UNIXボックスで-Djava.awt.headless=trueをコマンドライン・オプションとして使用することを強くお薦めします。

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

4.2 ワークスペースおよびプロジェクトの設定

JDeveloperには、すでに指定されているテクノロジを適切に組み合せてワークスペースおよびプロジェクト構造を迅速に作成できるようにするアプリケーション・テンプレートが用意されています。SRDemoアプリケーションでは、「Webアプリケーション[JSF、EJB、TopLink]」アプリケーション・テンプレートを使用しています。このテンプレートは、データ・モデル用のプロジェクトと、コントローラ・コンポーネントおよびビュー(ユーザー・インタフェース)・コンポーネント用のプロジェクトをそれぞれ1つずつワークスペースに作成します。

JDeveloperでアプリケーション・ワークスペースを新規作成し、アプリケーション・テンプレートを選択するには、次のようにします。

  1. アプリケーション・ナビゲータで「アプリケーション」ノードを右クリックし、「新規アプリケーション」を選択します。

  2. 「アプリケーションの作成」ダイアログで、「Webアプリケーション[JSF、EJB、TopLink]」アプリケーション・テンプレートをリストから選択します。

アプリケーション・ワークスペースを作成するために、JDeveloperのアプリケーション・テンプレートを必ずしも使用する必要はありません。これらは単に便宜上提供されているにすぎません。

場合によっては、既存のWARファイルがあり、そのファイルをJDeveloperにインポートすることがあります。

JDeveloperでWARファイルを新規プロジェクトにインポートするには、次のようにします。

  1. アプリケーション・ナビゲータで該当のアプリケーション・ワークスペースを右クリックし、「新規プロジェクト」を選択します。

  2. 「新規ギャラリ」の「カテゴリ」ツリーで、Generalを開き、Projectsを選択します。

  3. 「項目」リストで、「WARファイルからのプロジェクト」をダブルクリックします。

  4. ウィザードの指示に従って、プロジェクトの作成を完了します。

4.2.1 アプリケーション・テンプレートを使用したワークスペースの作成時に発生する処理

デフォルトでは、データ・モデル用のプロジェクトにはModel、ユーザー・インタフェースおよびコントローラ用のプロジェクトにはViewControllerと名前が付けられます。プロジェクトの名前は、プロジェクトの作成後に「ファイル」「名前の変更」を使用して変更できます。あるいは、「ツール」「テンプレートの管理」を使用してJDeveloperで使用されるデフォルトの名前を変更できます。


注意:

この章で使用される図およびプロジェクト名は、JDeveloperのデフォルトの名前です。ただし、SRDemoアプリケーションでは、JSFのビュー・コンポーネントおよびコントローラ・コンポーネントにはUserInterface、Plain Old Java Objectを使用するEJBセッションBeanおよびTopLinkが含まれるプロジェクトにはDataModelをプロジェクト名として使用しています。アプリケーション・ナビゲータのSRDemoアプリケーションには、追加のプロジェクトも含まれます(BuildAndDeployなど)。これらのプロジェクトを手動で作成し、論理フォルダにアプリケーション・コンポーネントを分類できます。

図4-1に、ワークスペース作成後のアプリケーション・ナビゲータでのViewControllerプロジェクトを示します。

図4-1 ワークスペース作成後のナビゲータでのViewControllerプロジェクト

アプリケーション・ナビゲータでの新しいViewControllerワークスペース

図4-2に、ファイル・システムでの<JDEV_HOME>/jdev/myworkフォルダに作成された実際のフォルダを示します。

図4-2 ワークスペース作成後のファイル・システムでのViewControllerフォルダ

ファイル・システムでの新しいViewControllerフォルダ

たとえば、Application1というワークスペースを作成すると、ViewControllerフォルダとそのサブフォルダがファイル・システムの<JDEV_HOME>/jdev/mywork/Application1に配置されます。

「Webアプリケーション[JSF、EJB、TopLink]」テンプレートを使用してワークスペースを作成すると、次の処理が行われます。

  • JSFテクノロジを使用するViewControllerプロジェクトが作成されます。プロジェクト・プロパティには、次のものがあります。

    • JSPタグ・ライブラリ: JSF Core、JSF HTML。表4-2を参照してください。

    • ライブラリ: JSF、Commons Beanutils、Commons Digester、Commons Logging、Commons Collections、JSTL。

    • テクノロジ・スコープ: JSF、JSPおよびサーブレット、Java、HTML。

    ViewControllerプロジェクトで作業する際、新規ギャラリはフィルタ処理され、Web Tierカテゴリには標準Webテクノロジ(JSFなど)が表示されます。

    JDeveloperでは、Servlet 2.4およびJSP 2.0をサポートするJSTL 1.1およびJ2EE 1.4のWebコンテナがデフォルトで使用されます。

  • デフォルト設定を使用した初期web.xmlファイルがViewControllerプロジェクトの/WEB-INFに作成されます。JDeveloperによってweb.xmlに追加されるものの詳細は、4.2.1.1項「初期web.xmlファイル」を参照してください。

  • 空のfaces-config.xmlファイルがViewControllerプロジェクトの/WEB-INFに作成されます。faces-config.xmlの詳細は、4.2.1.2項「初期faces-config.xmlファイル」を参照してください。

    アプリケーション・ナビゲータでfaces-config.xmlファイルをダブルクリックして開くと、JDeveloperによりファイル・システムのViewControllerフォルダにモデル・フォルダが作成され、そのモデル・フォルダにfaces-config.oxd_facesファイルが追加されます。faces-config.oxd_facesファイルの詳細は、4.3.2項「JSFページの作成時に発生する処理」を参照してください。

  • jsf-impl.jarがViewControllerプロジェクトの/WEB-INF/libに追加されます。

  • TopLinkおよびEJBテクノロジを使用するModelプロジェクトが作成されます。Modelプロジェクトの詳細は、1.2.1.2項「Modelプロジェクトでのビジネス・サービスの作成」を参照してください。

4.2.1.1 初期web.xmlファイル

JSFアプリケーションの構成の部分も、J2EEアプリケーション・デプロイメント・ディスクリプタweb.xmlの内容によって決定されます。web.xmlファイルは、サーバーで認識する必要があるアプリケーションに関するあらゆることを定義します(ただし、アプリケーションのデプロイ時にJDeveloperまたはシステム管理者によって割り当てられるルート・コンテキスト・パスは除きます)。通常のランタイム設定には、初期化パラメータ、カスタム・タグ・ライブラリの場所およびセキュリティ設定が含まれます。

例4-1に、JDeveloperによって最初に作成される初期web.xmlファイルを示します。

例4-1 JDeveloperによって作成される初期web.xmlファイル

<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
          http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
         version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee">
  <description>Empty web.xml file for Web Application</description>

  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
...
</web-app>

JSFサーブレットおよびJSFサーブレット・マッピングの構成設定は、JSFプロジェクトの初回作成時に、初期web.xmlファイルに自動的に追加されます。

  • JSFサーブレット: JSFサーブレットはjavax.faces.webapp.FacesServletで、JSFを利用してユーザー・インタフェースを構築するWebアプリケーションのライフサイクルを処理するリクエストを管理します。この構成設定により、JSFサーブレットはシンボリック名にマップされます。

  • JSFサーブレット・マッピング: サーブレット・マッピングにより、URLパターンはJSFサーブレットのシンボリック名にマップされます。パス接頭辞または拡張子接尾辞のいずれかのパターンを使用できます。

    JDeveloperでは、パス接頭辞/faces/*がデフォルトで使用されます。つまり、URLのhttp://localhost:8080/SRDemo/faces/index.jspが発行されると、JSFサーブレットがアクティブになり、faces接頭辞を除いて/SRDemo/index.jspファイルがロードされます。

JDeveloperでweb.xmlを編集するには、アプリケーション・ナビゲータでweb.xmlを右クリックし、ポップアップ・メニューから「プロパティ」を選択し、Webアプリケーション・デプロイメント・ディスクリプタ・エディタを開きます。構成要素名に精通している場合は、XMLエディタを使用してweb.xmlを変更することもできます。

JSFを使用する際にweb.xmlで使用できる構成要素の詳細は、A.8項「web.xml」を参照してください。


注意:

ADFデータ・コントロールを使用してデータ・バインドされたWebページを構築すると、ADFバインディング・フィルタおよびアプリケーション・バインディング・コンテナ用のサーブレット・コンテキスト・パラメータがweb.xmlに追加されます。詳細は、5.4項「ADFバインディング・フィルタの構成」を参照してください。

4.2.1.2 初期faces-config.xmlファイル

JSF構成ファイルには、JSFアプリケーションのリソース(カスタム・バリデータ、マネージドBeanなど)を登録し、ページ間のナビゲーション・ルールをすべて定義します。アプリケーションは任意の名前のJSF構成ファイルを保持できますが、通常そのファイル名はfaces-config.xmlです。例4-2に、JSFテクノロジを使用するプロジェクトの作成時に、JDeveloperによって最初に作成される初期faces-config.xmlファイルを示します。

小規模なアプリケーションには、通常faces-config.xmlファイルが1つあります。複数の構成ファイルの使用方法は、4.2.3項「複数のJSF構成ファイルについての考慮事項」を参照してください。

例4-2 JDeveloperによって作成される初期faces-config.xmlファイル

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config xmlns="http://java.sun.com/JSF/Configuration">

</faces-config>

JDeveloperでは、次のエディタのいずれかを使用してfaces-config.xml編集できます。

  • JSF構成エディタ: ビジュアル編集環境が提供されるため、JSF構成エディタを使用することをお薦めします。

  • XMLソース・エディタ: JSFの構成要素に習熟している場合は、このソース・エディタを使用してファイルを直接編集できます。

JSF構成エディタを起動するには、次のようにします。

  1. アプリケーション・ナビゲータで、faces-config.xmlをダブルクリックしてファイルを開きます。

    デフォルトでは、faces-config.xmlは、エディタ・ウィンドウの下部のアクティブ「ダイアグラム」タブによって示されるようにダイアグラム・モードで開かれます。JSFナビゲーション・ルールを作成または変更する場合は、JSF構成エディタのダイアグラム・モードを使用することをお薦めします。

    JDeveloperでは、ページ・フローを視覚的に作成および管理できるようにするダイアグラム・ファイルがfaces-config.xmlに関連付けられます。JSFナビゲーション・ルールの作成の詳細は、第9章「ページ・ナビゲーションの追加」を参照してください。

  2. ナビゲーション・ルールではなく構成要素を作成または変更する場合は、JSF構成エディタの概要モードを使用してください。エディタ・ウィンドウの下部で、「概要」を選択します。

概要とダイアグラムのどちらのモードでも、faces-config.xmlファイルは更新されます。


ヒント:

JSFでは、単一のfaces-config.xmlファイルに複数の<application>要素を含めることが可能です。JSF構成エディタでは、ファイルの1番目の<application>インスタンスしか編集できません。その他の<application>要素については、XMLエディタを使用してファイルを直接編集する必要があります。

faces-config.xmlで使用できる構成要素の詳細は、A.10項「faces-config.xml」を参照してください。


注意:

ADFデータ・コントロールを使用してデータ・バインドされたWebページを構築すると、5.2.3項「データ・コントロール・パレットの使用時に行われる処理」で説明されているように、ADFフェーズ・リスナーがfaces-config.xmlに追加されます。

4.2.2 ViewControllerプロジェクトについての考慮事項

ViewControllerプロジェクトには、WebページとWebアプリケーションのその他のリソースから成るWebコンテンツが含まれます。デフォルトでは、選択したJDeveloperのWebアプリケーション・テンプレートにより、プロジェクト名にcontrollerという語が付加され、Webページそのもの(ビュー)の他に、アプリケーションのフローまたはページ・ナビゲーション(コントローラ)を定義する特定のファイルがWebアプリケーションに含まれていることを示します。


注意:

ページ・ナビゲーションとページ表示を区別する概念はしばしばモデル2と呼ばれ、ページ・ナビゲーションをページそのものの内部で完全管理する旧スタイル(モデル1)のアプリケーションと区別されます。モデル2スタイルのアプリケーションでは、テクノロジによって、実行時にページ・ナビゲーション・イベントを処理するページ・コントローラと呼ばれる特化されたサーブレットが導入されます。

JDeveloperでWebページを作成するために使用するテクノロジにより、ViewControllerプロジェクトのコンポーネントおよびアプリケーションで使用するページ・コントローラのタイプが決定されます。SRDemoアプリケーションでは、JSFをJSPと組み合せて使用してWebページを構築しています。

  • JSFは、動的Webコンテンツを表示するためのコンポーネントベースのフレームワークです。また、ページ・ナビゲーションを管理するための独自のページ・コントローラを備えています。

  • JSPは、JSFユーザー・インタフェースにプレゼンテーション・レイヤー・テクノロジを提供します。JSFコンポーネントは、JSPページでは特殊なJSPカスタム・タグによって表されます。

JDeveloperのツールを使用すると、JSFコンポーネントとModelプロジェクトのJavaオブジェクトをバインドして、データ・バインドされたUIコンポーネントを簡単に作成できます。先に述べたように、ViewControllerプロジェクトには、ユーザー・インタフェース用のWebページが含まれます。WebページのUIコンポーネントをデータ・モデルに宣言してバインドするには、ViewControllerプロジェクトがModelプロジェクトのデータ・コントロールにアクセスできる必要があります。ViewControllerプロジェクトがデータ・コントロールにアクセスできるようにするには、Modelプロジェクトに依存性を指定します。最初にデータ・コントロール・パレットからアイテムをドラッグしてJSFページにドロップしたときに、JDeveloperにより自動的に依存性が構成されます。手動でModelプロジェクトに依存性を設定する場合は、次の手順に従います。

JDeveloperでViewControllerプロジェクトについて依存性をModelプロジェクトに設定するには、次のようにします。

  1. アプリケーション・ナビゲータでViewControllerをダブルクリックし、「プロジェクト・プロパティ」ダイアログを開きます。

  2. 「依存性」を選択した後、Model.jprの横のチェック・ボックスを選択します。

4.2.3 複数のJSF構成ファイルについての考慮事項

JSFアプリケーションは複数のJSF構成ファイルを保持できます。たとえば、アプリケーションの領域ごとに別個のJSF構成ファイルが必要な場合、あるいはカスタム・コンポーネントまたはカスタム・レンダラを含むライブラリをパッケージすることにした場合には、領域またはライブラリごとに異なるJSF構成ファイルを作成できます。

別のJSF構成ファイルを作成するには、テキスト・エディタを使用するか、JDeveloperに用意されているJSFページ・フローと構成ウィザードを使用します。

JSFページ・フローと構成ウィザードを起動するには、次のようにします。

  1. アプリケーション・ナビゲータで、ViewControllerを右クリックし、「新規」を選択します。

  2. 新規ギャラリ・ウィンドウで、Web Tierを開きます。JSFを選択した後、「JSFページ・フローと構成(faces-config.xml)」をダブルクリックします。

ライブラリJARに配信されるカスタム・コンポーネントまたはその他のJSFクラス用にJSF構成ファイルを作成する場合は、次のようにします。

  • 必要に応じて、ファイルにfaces-config.xmlと名前を付けます。

  • 新規ファイルを/META-INFに格納します。

  • このファイルをカスタム・コンポーネントまたはカスタム・クラスの配布に使用するJARに含めます。

この方法は、カスタム・コンポーネントおよびカスタム・レンダラを含むライブラリをパッケージしているアプリケーションに適しています。

アプリケーションの領域ごとにJSF構成ファイルを作成する場合は、次のようにします。

  • faces-config.xml以外の名前をファイルに付けます。

  • そのファイルを/WEB-INFに格納します。

  • JSFが新しいJSF構成ファイルをアプリケーションの構成の一部として読み取るには、そのファイルへのパスを、コンテキスト・パラメータjavax.faces.CONFIG_FILESを使用してweb.xmlに指定します。このパラメータ値は、複数のファイルがある場合は、新規構成ファイル名のカンマ区切りリストです。

    JSFページ・フローと構成ウィザードを使用する場合は、「参照をWeb.xmlに追加」チェック・ボックスを選択して、JDeveloperが新しいJSF構成ファイルをweb.xmlに登録できるようにします。例4-3に、そのチェック・ボックスを選択した場合に、どのように複数のJSF構成ファイルがweb.xmlに設定されるかを示します。

この方法は、アプリケーションの領域ごとに別個の構成ファイルが必要な大規模なアプリケーションに適しています。

例4-3 web.xmlファイルでの複数のJSF構成ファイル用の構成

<context-param>
  <param-name>javax.faces.CONFIG_FILES</param-name>
  <param-value>/WEB-INF/faces-config1.xml,/WEB-INF/faces-config2.xml</param-value>
</context-param>

JSF構成ファイルは、名前がfaces-config.xmlであるかどうかにかかわらず、http://java.sun.com/dtd/web-facesconfig_1_x.dtdにあるSun社のDTDに準拠する必要があります。ウィザードを使用してJSF構成ファイルを作成する場合は、自動的に準拠します。

アプリケーションで複数のJSF構成ファイルを使用する場合、JSFは実行時にアプリケーションの構成設定を次の順に検出してロードします。

  1. アプリケーションのJARファイルでMETA-INF/faces-config.xmlというファイルを検索し、それぞれを構成リソースとして(検出順序とは逆の順序で)ロードします。

  2. アプリケーションのweb.xmlファイルでjavax.faces.CONFIG_FILESコンテキスト・パラメータ・セットを検索します。次に、名前付きファイルをそれぞれ構成リソースとしてロードします。

  3. WEB-INFディレクトリでfaces-config.xmlというファイルを検索し、構成リソースとしてロードします。

その後で、JSFはApplicationクラスをインスタンス化し、各種構成ファイルで検出される設定を移入します。

4.3 Webページの作成

JSFが様々なプレゼンテーション・レイヤー・テクノロジをサポートする一方で、JDeveloperはJSF Webページの作成にJSPをプレゼンテーション・テクノロジとして使用します。JSFをJSPとともに使用すると、JSFページをJSPページ(.jsp)またはJSPドキュメント(.jspx)にできます。JSPドキュメントは、整形式XML文書であるため、XML標準によりDocument Type Definition(DTD)に基づく検証などの多くの機能が提供されます。したがって、ADF Facesコンポーネントを使用してWebページを構築する際は、JSPドキュメントを使用することをお薦めします。特に明記されていないかぎり、このマニュアルでは、JSFページという用語はJSF JSPページとJSF JSPドキュメントの両方を指します。

JDeveloperでViewControllerプロジェクト内にJSFページを作成するには、次の2つの方法があります。

4.3.1項「JSFページの追加方法」では、後者の方法を使用します。また、この項ではJSFナビゲーション・モデラーを紹介します。このモデラーを使用すると、ダイアグラム形式でのアプリケーション・ページの設計、ページ間のナビゲーション・フローの定義、ページの作成ができます。

4.3.1 JSFページの追加方法

アプリケーション・ページ・フローの設計および構築には、JSFナビゲーション・ダイアグラムを使用することをお薦めします。JSFナビゲーション・ダイアグラムは、アプリケーションのページを視覚的に表示するため、WebページをJSP/HTMLビジュアル・エディタで編集する際に各ページにドリルダウンする場合には特に便利な方法でもあります。

JSFナビゲーション・ダイアグラムを使用して、JSFページをViewControllerプロジェクトに追加するには、次のようにします。

  1. アプリケーション・ナビゲータでViewControllerWeb ContentWEB-INFの順にフォルダを開き、faces-config.xmlをダブルクリックするか、またはViewControllerのポップアップ・メニューの「JSFナビゲーションを開く」を選択してfaces-config.xmlファイルを開きます。

    デフォルトでは、ファイルはJSFナビゲーション・ダイアグラムである「ダイアグラム」タブで開かれます。ViewControllerプロジェクトを開始したばかりの場合、ナビゲーション・ダイアグラムには空の製図面が表示されます。faces-config.xmlを開いたときに空の製図面が表示されない場合は、エディタの下部で「ダイアグラム」を選択します。

  2. コンポーネント・パレットのドロップダウン・リストからJSF Navigation Diagramを選択した後、JSF Pageを選択します。

    イエローの警告ラベルが重なったページを表すアイコン
  3. ページを表示する場所で、ダイアグラムをクリックします。ページ名のラベルが付いたページ・アイコンがダイアグラムに表示されます。このページ・アイコンには、イエローの警告が重なっています。これは、実際のページがまだ作成されていないことを意味する、ページを表すアイコンにすぎません。

  4. ページを新規作成するには、ページ・アイコンをダブルクリックしてJSF JSPの作成ウィザードを使用します。

    初めてJDeveloperでページを作成する場合は、ウィザードの全ステップを必ず完了するようにしてください。

  5. JSF JSPの作成ウィザードのステップ1では、JSPファイルのタイプ「JSPドキュメント(*.jspx)」を選択します。

  6. ファイル名を入力し、デフォルトのディレクトリ名で確定するか、新しい場所を選択します。デフォルトでは、ファイルはファイル・システムの/ViewController/public_htmlに保存されます。

  7. ウィザードのステップ2では、コンポーネント・バインディングを自動的に使用しないため、デフォルトの選択のままにします。

  8. ウィザードのステップ3では、次のライブラリが「選択済のライブラリ」リストに追加されていることを確認します。

    • ADF Faces Components

    • ADF Faces HTML

    • JSF Core

    • JSF HTML

  9. 残りのページでデフォルトの選択を確定し、「終了」をクリックします。

JSP/HTMLビジュアル・エディタで新しいJSFページが開きます。ここで、コンポーネント・パレットのADF Facesコンポーネントや、データ・コントロール・パレットからドロップされたデータ・バインドされたコンポーネントを使用して、ページのレイアウトを開始できます。

JSFナビゲーション・ダイアグラムに(上部の「faces-config.xml」エディタ・タブをクリックして)切り替えると、ページ・アイコンに重なっていたイエローの警告が表示されなくなります。


ヒント:

新規ギャラリからウィザードを使用してJSFページを新規作成すると、アプリケーション・ページ・フローの設計時に、JSFページをアプリケーション・ナビゲータからJSFナビゲーション・ダイアグラムにドラッグできます。

4.3.2 JSFページの作成時に発生する処理

図4-3に、ウィザードのステップを完了してJSFページを追加した後のアプリケーション・ナビゲータでのViewControllerプロジェクトを示します。

図4-3 JSFページ追加後のナビゲータでのViewControllerプロジェクト

ナビゲータでのViewControllerプロジェクトの新規JSFページ

図4-4に、ファイル・システムの<JDEV_HOME>/jdev/myworkフォルダに作成された実際のフォルダを示します。

図4-4 JSFページ追加後のファイル・システムでのViewControllerフォルダ

ファイル・システムでのViewControllerフォルダ

JSFナビゲーション・ダイアグラムを介してViewControllerプロジェクトに初めてJSFページを作成すると、次の処理が行われます。

  • adf-faces-impl.jar/WEB-INF/libに追加されます。

  • 次のライブラリがViewControllerプロジェクト・プロパティに追加されます。

    • JSPタグ・ライブラリ: ADF Faces Components、ADF Faces HTML。表4-2を参照してください。

    • ライブラリ: JSP Runtime、ADF Faces Runtime、ADF Common Runtime。

  • ファイル・システム(<JDEV_HOME>/jdev/mywork/Application1/ViewController/model/public_html/WEB-INFなど)にのみfaces-config.oxd_facesファイルが作成されます。JSFナビゲーション・ダイアグラムでページ・フローを設計および構築する際、このファイルはすべてのダイアグラムの詳細(レイアウト、注釈など)を保持するファイルとなります。JDeveloperでは、常にこのファイルを関連付けられたXMLファイルfaces-config.xmlとともに保持します。faces-config.oxd_facesファイルは、アプリケーション・ナビゲータまたはシステム・ナビゲータには表示されません。

JSFナビゲーション・ダイアグラムからJSF JSPの作成ウィザードを起動してJSFページを作成しようと、新規ギャラリから起動して作成しようと、デフォルトでは、JSF JSP 2.0ファイルである初期ページが作成され、JSFタグ・ライブラリが初期ページに自動的にインポートされます。ウィザードのステップ3でADF Facesタグ・ライブラリを追加した場合は、初期ページにADF Facesタグ・ライブラリもインポートされます。例4-4に、JSF JSPドキュメントの初期ページを示します。

例4-4 JDeveloperによって作成される初期JSF JSPドキュメント

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces"
          xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
  <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=windows-1252"/>
  <f:view>
    <html>
      <head>
        <meta http-equiv="Content-Type"
              content="text/html; charset=windows-1252"/>
        <title>untitled1</title>
      </head>
      <body>
        <h:form></h:form>
      </body>
    </html>
  </f:view>
</jsp:root>

4.3.3 JSFナビゲーション・ダイアグラムの使用についての考慮事項

JSFナビゲーション・ダイアグラムでは、ページ・アイコンのラベルはスラッシュ(/)で始まるページ名です。先頭のスラッシュは、ページをダイアグラムから実行できるようにするために必要です。スラッシュを削除すると、自動的に元の状態に戻されます。

JSFナビゲーション・ダイアグラムからページの名前変更や削除を実行する際に、次のことに注意してください。

  • ページの名前変更: JSFナビゲーション・ダイアグラムでJSFページの名前を変更すると、元の名前のページをダイアグラムから削除し、新しい名前の新しいページを追加することになります。ページ・アイコンは、ページがまだ存在しないことを示すイエローの警告が重なったアイコンに変化します。基礎となるページを作成しておいた場合、アプリケーション・ナビゲータでそのページは元の名前のままです。

    同様に、アプリケーション・ナビゲータにJSFページが存在し、ページ・アイコンがダイアグラムに表示されている場合に、アプリケーション・ナビゲータでそのページ名を変更すると、元のファイルを削除して新しいファイルを作成することになります。ただし、ダイアグラムは元の名前を保持するため、ページが存在しないことを示すイエローの警告が重なったページ・アイコンが表示されます。

  • ページの削除: JSFナビゲーション・ダイアグラムでページ・アイコンを削除すると、関連付けられたWebページはダイアグラムに表示されなくなります。実際のファイルが作成されている場合、これまでどおりそのファイルは、アプリケーション・ナビゲータのViewControllerプロジェクトのWeb Contentフォルダから使用できます。

JSFナビゲーション・ダイアグラムおよびナビゲーション・ルールの作成の詳細は、第9章「ページ・ナビゲーションの追加」を参照してください。

4.3.4 ADF Facesの依存性およびライブラリについての考慮事項

ADF FacesはJDK 1.4(以上)と互換性がありますが、Sun社のJSF Reference Implementation 1.0のみをサポートするサーバー上では稼働できません。実装は、JSF 1.1_01(以上)またはApache MyFaces 1.0.8(以上)である必要があります。

ADF Facesの配信可能なものは次のとおりです。

  • adf-faces-api.jar: ADF FacesのパブリックAPIはすべてoracle.adf.view.facesパッケージの中にあります。

  • adf-faces-impl.jar: ADF FacesのプライベートAPIはすべてoracle.adfinternal.view.facesパッケージの中にあります。

ADF Facesには、JSFページで使用できるタグ・ライブラリが2つあります。

  • ADF Faces Coreライブラリ

  • ADF Faces HTMLライブラリ

表4-2に、ADF FacesのURIおよびデフォルトの接頭辞と、JDeveloperで使用されるJSFタグ・ライブラリを示します。

表4-2 ADF FacesとJSFタグ・ライブラリ

ライブラリ URI 接頭辞

ADF Faces Core

http://xmlns.oracle.com/adf/faces

af

ADF Faces HTML

http://xmlns.oracle.com/adf/faces/html

afh

JSF Core

http://java.sun.com/jsf/core

f

JSF HTML

http://java.sun.com/jsf/html

h


JDeveloperはADF FacesキャッシュとADF Faces Industrialタグ・ライブラリも提供します。これらは、それぞれ接頭辞afcafiを使用します。ADF Faces Cacheの詳細は、第15章「キャッシングによるアプリケーション・パフォーマンスの最適化」を参照してください。ADF Faces Industrialの詳細は、JDeveloperのオンライン・ヘルプのADFモバイル・アプリケーションの開発に関するトピックを参照してください。

すべてのJSFアプリケーションはServlet仕様バージョン2.3(以上)およびJSP仕様バージョン1.2(以上)に準拠する必要があります。デプロイするJ2EE Webコンテナには、JavaServer Pages Standard Tag Library(JSTL)に必要なJARファイル、すなわちjstl.jarおよびstandard.jarを用意する必要があります。使用するJSTLバージョンは、J2EE Webコンテナによって異なります。

  • JSTL 1.0: Servlet 2.3およびJSP 1.2をサポートするJ2EE 1.3 Webコンテナが必要です。

  • JSTL 1.1: Servlet 2.4およびJSP 2.0をサポートするJ2EE 1.4 Webコンテナが必要です。

ADF FacesおよびJSFのデプロイ要件の詳細は、第22章「ADFアプリケーションのデプロイ」を参照してください。

4.4 Webページのレイアウト

SRDemoのほとんどのページでは、ADF FacesのpanelPageコンポーネントを使用してページ全体をレイアウトしています。panelPageコンポーネントを使用すると、アプリケーション内のすべてのWebページで一貫したルック・アンド・フィールを確保しながら、ブランド・イメージ、ナビゲーション・メニューとナビゲーション・ボタン、ページレベルまたはアプリケーションレベルのテキスト用の特殊な領域をページ上に定義できます。図4-5に、panelPageコンポーネントを使用して作成されたページの例を示します。

図4-5 panelPageコンポーネントを使用して作成されたページ・レイアウト

メニュー・タブとメニュー・バー、グローバル・ボタンを表示するページ・レイアウト

ウィザードを使用してJSFページを新規作成すると、JSP/HTMLビジュアル・エディタに空白ページが自動的に開きます。ページを編集するために、使い慣れたJDeveloperのページ設計ツールを組み合せて使用できます。

設計ツールのいずれかでページを変更すると、その他のツールではその変更が自動的に反映されます。

4.4.1 JSFページにUIコンポーネントを追加する方法

同じJSFページ内で標準JSFコンポーネントとADF Facesコンポーネントの両方を使用できます。たとえば、JDeveloperによって作成された初期JSFページにpanelPageコンポーネントを挿入して使用するには、次の手順に従います。

JSFページにUIコンポーネントを挿入するには、次のようにします。

  1. 初期JSFページをまだ開いていない場合は、アプリケーション・ナビゲータでダブルクリックしてビジュアル・エディタで開きます。

  2. コンポーネント・パレットで、ドロップダウン・リストからADF Faces Coreを選択します。

  3. PanelPageをパレットからビジュアル・エディタのページにドラッグ・アンド・ドロップします。

    ボックスで囲まれたh:form

    ビジュアル・エディタのページにコンポーネントをドラッグすると、構造ウィンドウではh:formコンポーネントがボックスで囲まれて強調表示され、h:formコンポーネントがターゲット・コンポーネントであることを示します。ターゲット・コンポーネントとは、ソース・コンポーネントがドロップされるときに挿入先となるコンポーネントです。

  4. 構造ウィンドウで、新規挿入されたaf:panelPageまたはPanelPage facetsのいずれかを右クリックし、「の前に挿入」メニュー、「の中に挿入」メニュー、「の後ろに挿入」メニューのいずれかを選択して、目的のUIコンポーネントを追加します。

    構造ウィンドウでのaf:panelPageとPanelPage facetsフォルダ

    入力フォームまたは検索フォーム、表、その他のページ・ボディ・コンテンツをpanelPageコンポーネントの内部に作成します。panelPageとそのファセットの詳細は、4.4.4項「PanelPageコンポーネントの使用方法」を参照してください。


    ヒント:

    構造ウィンドウのポップアップ・メニューを使用してコンポーネントを追加すると、必ず正しいターゲットの場所にコンポーネントが挿入されます。コンポーネント・パレットから構造ウィンドウにコンポーネントをドラッグすることもできます。構造ウィンドウにコンポーネントをドラッグすると、ターゲットの場所はボックスで囲まれるか、矢先が埋め込まれた実線で強調表示され、ソース・コンポーネントがドロップされるときにそのターゲットの場所が挿入先となることを示します。構造ウィンドウを使用したコンポーネントの挿入の詳細は、4.4.3.1項「構造ウィンドウでの編集」を参照してください。

  5. 挿入されたコンポーネントの属性を編集するには、構造ウィンドウでコンポーネントをダブルクリックしてプロパティ・エディタを開くか、コンポーネントを選択してプロパティ・インスペクタを使用します。

コンポーネントを挿入してページ・レイアウトを構築する場合に、データ・コントロール・パレットを使用してデータ・バインドされたUIコンポーネントを挿入することもできます。データ・コントロール・パレットからアイテムをドラッグして、ページ上の目的の場所にドロップするだけです。データ・コントロール・パレットの使用方法は、第5章「ページでのデータの表示」を参照してください。

4.4.2 ADF Facesコンポーネントの初回挿入時に発生する処理

図4-6に、ページに初めてADF Facesコンポーネントを追加した後のアプリケーション・ナビゲータでのViewControllerプロジェクトを示します。

図4-6 ADF Facesコンポーネント初回挿入後のナビゲータでのViewControllerプロジェクト

アプリケーション・ナビゲータで開かれたWEB-INFフォルダ

JSFページに初めてADF Facesコンポーネントを追加すると、次の処理が自動的に行われます。

  • ADF Facs CoreおよびADF Facs HTMLのタグ・ライブラリ(まだ挿入されていない場合)がページにインポートされます。例4-4を参照してください。

  • htmlタグ、headタグ、bodyタグがそれぞれafh:htmlafh:headafh:bodyで置換されます。例4-5を参照してください。

  • ADF FacesフィルタおよびADF Facesマッピングの構成設定がweb.xmlに追加されます。4.4.2.1項「web.xmlファイルの追加情報」を参照してください。

  • デフォルトのADF Facesレンダー・キットの構成設定がfaces-config.xmlに追加されます。4.4.2.2項「faces-config.xmlファイルの追加情報」を参照してください。

  • 初期adf-faces-config.xmlがViewControllerプロジェクトの/WEB-INFに作成されます。4.4.2.3項「初期adf-faces-config.xmlファイル」を参照してください。

  • /ViewController/public_html/WEB-INF/temp/adfフォルダがファイル・システムに作成されます。このフォルダには、JDeveloperでADF Facesコンポーネントに使用されるイメージおよびスタールが格納されます。このフォルダは、ワークスペースを閉じて開きなおすまでアプリケーション・ナビゲータには表示されません。


ヒント:

WEB-INF/libフォルダとWEB-INF/temp/adfフォルダは、実行時にのみJDeveloperによって使用されます。アプリケーション・ナビゲータのクラッタを減らすために、ViewControllerプロジェクトからこれらのフォルダを除外できます。ViewControllerをダブルクリックして「プロジェクト・プロパティ」ダイアログを開きます。「プロジェクト・コンテンツ」の下の「Webアプリケーション」を選択した後、「除外」タブを使用して除外するフォルダを追加します。

例4-5 ADF Facesコンポーネント初回追加後のJSF JSPドキュメント

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces">
  <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=windows-1252"/>
  <f:view>
    <afh:html>
      <afh:head title="untitled1">
        <meta http-equiv="Content-Type"
              content="text/html; charset=windows-1252"/>
      </afh:head>
      <afh:body>
        <h:form>
          <af:panelPage title="Title 1">
            <f:facet name="menu1"/>
            <f:facet name="menuGlobal"/>
            <f:facet name="branding"/>
            <f:facet name="brandingApp"/>
            <f:facet name="appCopyright"/>
            <f:facet name="appPrivacy"/>
            <f:facet name="appAbout"/>
          </af:panelPage>
        </h:form>
      </afh:body>
    </afh:html>
  </f:view>
</jsp:root>

4.4.2.1 web.xmlファイルの追加情報

JSFページに初めてADF Facesコンポーネントを挿入すると、次のADF Facesの構成設定がweb.xmlに自動的に挿入されます。

  • ADF Facesフィルタ: oracle.adf.view.faces.webapp.AdfFacesFilterをインストールします。このフィルタは、AdfFacesContextオブジェクトを設定することによって必ずADF Facesが適切に初期化されるようにするサーブレット・フィルタです。AdfFacesFilterは、ファイルのアップロード処理にも必要です。この構成設定により、AdfFacesFilterはシンボリック名にマップされます。

  • ADF Facesフィルタ・マッピング: JSFサーブレットのシンボリック名をADF Facesフィルタにマップします。

  • ADF Facesリソース・サーブレット: oracle.adf.view.faces.webapp.ResourceServletをインストールします。このサーブレットは、ResourceLoaderに委譲することによって、Webアプリケーション・リソース(イメージ、スタイル・シート、JavaScriptライブラリなど)を提供します。この構成設定により、ResourceServletはシンボリック名にマップされます。

  • ADF Facesリソース・マッピング: URLパターンをADF Facesリソース・サーブレットのシンボリック名にマップします。

例4-6に、初めてADF Facesコンポーネントを追加した後のweb.xmlファイルを示します。

例4-6 web.xmlファイルにおけるADF Facesの構成

<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
          http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
         version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee">
  <description>Empty web.xml file for Web Application</description>

  <!-- Installs the ADF Faces filter -- >
  <filter>
    <filter-name>adfFaces</filter-name>
    <filter-class>oracle.adf.view.faces.webapp.AdfFacesFilter</filter-class>
  </filter>

  <!-- Adds the mapping to ADF Faces filter -- >
  <filter-mapping>
    <filter-name>adfFaces</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
  </filter-mapping>

  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <!-- Installs the ADF Faces ResourceServlet -- >
  <servlet>
    <servlet-name>resources</servlet-name>
    <servlet-class>oracle.adf.view.faces.webapp.ResourceServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>

  <!-- Maps URL pattern to the ResourceServlet's symbolic name -->
  <servlet-mapping>
    <servlet-name>resources</servlet-name>
    <url-pattern>/adf/*</url-pattern>
  </servlet-mapping>
...
</web-app>

ADF Facesを使用する際にweb.xmlで使用できる構成要素の詳細は、A.8.1項「web.xmlファイルでサポートされるタスク」を参照してください。


ヒント:

アプリケーションで複数のフィルタを使用する場合、実行する順番でweb.xmlに記載されている必要があります。実行時には、ファイル内に記載された順番でフィルタがコールされます。

4.4.2.2 faces-config.xmlファイルの追加情報

すでに述べたように、JSFテクノロジを使用するプロジェクトを新規作成すると、空のfaces-config.xmlファイルが1つ自動的に作成されます。JSFページに初めてADF Facesコンポーネントを挿入すると、例4-7に示すように、ADFコンポーネント用のデフォルトのレンダー・キットがfaces-config.xmlに自動的に挿入されます。

例4-7 faces-config.xmlファイルにおけるADF Facesコンポーネントの構成

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config xmlns="http://java.sun.com/JSF/Configuration">
  ...
  <!-- Default render kit for ADF components -->
  <application>
    <default-render-kit-id>oracle.adf.core</default-render-kit-id>
  </application>
  ...
</faces-config>

4.4.2.3 初期adf-faces-config.xmlファイル

ADF Facesコンポーネントを使用してJSFアプリケーションを作成する場合、ADF Faces固有の機能(スキン・ファミリ、ページ・アクセシビリティ・サポートのレベルなど)をadf-faces-config.xmlファイルで構成します。adf-faces-config.xmlファイルは、JSF式言語(EL)または静的値を使用して要素プロパティを定義できる単純なXML構造を持っています。

JDeveloperでJSFページに初めてADF Facesコンポーネントを挿入すると、初期adf-faces-config.xmlファイルがViewControllerプロジェクトの/WEB-INFディレクトリに自動的に作成されます。例4-8に、初期adf-faces-config.xmlファイルを示します。

例4-8 JDeveloperによって作成される初期adf-faces-config.xmlファイル

<?xml version="1.0" encoding="windows-1252"?>
<adf-faces-config xmlns="http://xmlns.oracle.com/adf/view/faces/config">

  <skin-family>oracle</skin-family>

</adf-faces-config>

デフォルトでは、Oracleスキン・ファミリがJSFアプリケーションに使用されます。このデフォルトをminimalに変更するか、カスタム・スキンを使用することができます。SRDemoアプリケーションでは、srdemoスキンを使用しています。カスタム・スキンを使用する場合は、adf-faces-skins.xml構成ファイルを作成し、カスタム・スキンを使用するようにadf-faces-config.xmlを変更する必要があります。詳細は、14.3.1項「スキンの使用方法」を参照してください。

JDeveloperでadf-faces-config.xmlファイルを編集するには、次の手順に従います。

adf-faces-config.xmlファイルを編集するには、次のようにします。

  1. アプリケーション・ナビゲータで、adf-faces-config.xmlをダブルクリックしてファイルをXMLエディタで開きます。

  2. 要素名に精通している場合は、それらをエディタに入力します。精通していない場合は、構造ウィンドウを使用すると要素名を簡単に挿入できます。

  3. 構造ウィンドウを使用するには、次の手順に従います。

    1. 要素を右クリックして「の前に挿入」または「の後ろに挿入」のいずれかのメニューを選択し、挿入する要素をクリックします。

    2. 構造ウィンドウで新規挿入した要素をダブルクリックしてプロパティ・エディタで開きます。

    3. 値を入力するか、ドロップダウン・リスト(使用できる場合)から選択します。

      ほとんどの場合、JSF EL式(#{view.locale.language=='en' ? 'minimal' : 'oracle'}など)または静的値(<debug-output>true</debug-output>など)のいずれかを入力できます。EL式は、リクエストごとに動的に再評価され、適切なオブジェクト(Booleanオブジェクトなど)を戻す必要があります。


注意:

すべての要素は、ルート要素<adf-faces-config>内に任意の順序で定義できます。また、要素の複数のインスタンスを含めることもできます。adf-faces-config.xmlで使用できる構成要素の詳細は、A.11項「adf-faces-config.xml」を参照してください。

通常、次の情報をadf-faces-config.xmlで構成します。

また、ファイル・アップロード用のカスタム・ファイル・アップロード・プロセッサを登録できます。詳細は、11.6.5項「カスタムのアップロード・ファイル・プロセッサの構成」を参照してください。

adf-faces-config.xmlファイルで要素を構成すると、プログラム的に、またはJSF EL式を使用してプロパティ値を取得できます。詳細は、A.11.1.12項「adf-faces-config.xmlからの構成プロパティ値の取得」を参照してください。

4.4.3 JSFページの作成についての考慮事項

JSF Webページを開発する際は、次の事柄を考慮してください。

  • JSFページではJSTLタグおよびHTMLタグを使用しないでください。JSTLタグは、J2EE 1.5より前ではJSFとはまったく連携して機能しません。また、JSFタグ内部のHTMLタグはf:verbatimの使用が必要なことを意味する場合があります。

    たとえば、JSFタグの周囲ではc:forEachはまったく使用できません。ボディに対して反復処理を実行するJSF以外のタグ内部でJSFタグをネストすると、ページの初回処理時に、ネストされたタグはコレクションのアイテムごとに1回起動され、起動のたびに新しいコンポーネントが作成されます。後続のリクエストでは、アイテム数が異なるため、反復ごとに新しいコンポーネントIDが必要となる問題を解決する適切な方法がありません。JSPページのスコープ変数は、JSFでは参照できません。前のレンダリング・フェーズでのJSFリクエストのスコープ変数は、現在のポストバック・リクエストでは使用できません。

    その他のJSF以外のタグは、JSFタグと併用できますが、細心の注意を払う必要があります。たとえば、c:ifc:chooseを使用する場合は、ネストされたJSFタグのid属性を設定する必要があります。JSFタグ内でJSF以外のタグをネストする場合は、JSF以外のタグをf:verbatim内にラップする必要があります。JSFコンテンツを含むJSPページを動的に組み込む場合は、f:subviewを使用し、かつ組み込まれるJSF以外のコンテンツもすべてf:verbatim内にラップする必要があります。

  • SRDemoユーザー・インタフェースでは、ADFモデルから取得されない文字列リソース(ページ・タイトル、フィールド・ラベルなど)はすべて、ViewControllerプロジェクトのリソース・プロパティ・ファイルに追加されます。リソース・プロパティ・ファイルを使用してUI文字列を保持する場合、f:loadBundleタグを使用してプロパティ・ファイルをJSFページにロードします。リソース・バンドルとf:loadBundleタグの詳細は、14.4項「アプリケーションの国際化」を参照してください。

  • ADF Facesコンポーネントの使用時に、ADF Facesのaf:formタグを使用するための要件はありません。JSF標準のh:formは、すべてのADF Facesコンポーネントで使用できます。af:formを使用する場合は、af:formコンポーネントがJSFのNamingContainer APIを実装しないことに注意してください。つまり、生成されたHTMLのコンポーネントIDには、フォームのIDが接頭辞として含まれていません。複数のフォームがあるページの場合、フォーム間でIDの値を再利用できないことを暗に示しています。たとえば、次のコードは、inputTextのコンポーネントID foo:barを生成します。

    <h:form id="foo">
      <af:inputText id="bar"/>
    </h:form>
    

    しかし、次のコードは、inputTextのコンポーネントID bar2を生成します。

    <af:form id="foo2">
      <af:inputText id="bar2"/>
    </af:form>
    

    af:formを使用する利点は次のとおりです。

    • コンテンツ内のname属性とid属性に(前述のとおり)接頭辞が付かないため、JavaScriptの作成がより簡単になります。

    • フォームIDが不明な場合など、より簡潔なHTMLになります。

    • フィールドで一部のCSS機能を使用できます。

    • フォーム送信用のデフォルト・コマンドを設定できます。af:formdefaultCommand属性を、[Enter]キーが押されたときにデフォルトの送信ボタンとして使用されるコマンド・ボタンのIDに設定します。フォームのデフォルト・コマンド・ボタンを定義することによって、ユーザーが[Enter]キーを押すと、ActionEventが作成されフォームが送信されます。フォームのデフォルト・コマンド・ボタンが定義されていないと、[Enter]を押してもフォームは送信されず、ページが再表示されるだけです。

  • afh:bodyタグを使用すると、ページでの部分ページ・レンダリング(PPR)が可能になります。ページでafh:bodyタグが使用できない場合にPPRのサポートが必要なときは、afh:bodyタグのかわりにaf:panelPartialRootタグを使用します。PPRの詳細は、11.4項「部分ページ・レンダリングの有効化」を参照してください。

  • af:documentタグは、HTMLページの標準ルート要素、すなわちhtmlheadおよびbodyを生成するため、afh:htmlafh:headおよびafh:bodyのかわりにaf:documentを使用できます。

ADF Facesコンポーネントの使用方法に関するヒントは、4.6項「ADF Facesのベスト・プラクティス」を参照してください。

4.4.3.1 構造ウィンドウでの編集

構造ウィンドウでは、要素の挿入、コピー、移動の際に、ターゲット要素に関連して、ページについて表示される構造で挿入ポイントを選択します。JDeveloperには、ターゲット要素の前、後あるいは内部に含まれる挿入ポイントの場所を示す視覚的な合図があります。

要素を挿入ポイントにドラッグする場合は、次のいずれかを実行します。

中央に上向きの矢先がある横線
  • 要素をターゲット要素の前に挿入するには、ターゲット要素の上方にドラッグし、上向きの矢先が埋め込まれた横線が表示されたらマウス・ボタンを離します。

中央に下向きの矢先がある横線
  • 要素をターゲット要素の後に挿入するには、ターゲット要素の下方にドラッグし、下向きの矢先が埋め込まれた横線が表示されたらマウス・ボタンを離します。

  • 要素をターゲット要素の内部に挿入または含めるには、ターゲット要素の上にドラッグし、ターゲット要素がボックスで囲まれたらマウス・ボタンを離します。挿入する要素をターゲット要素に含めることができない場合、その要素はターゲット要素の後に挿入されます。

ボックスで囲まれたaf:panelPage

ヒント:

ドラッグ・カーソルが丸に斜線のマークに変化した場合は、許可されない挿入ポイントを示します。

4.4.3.2 エラーの表示

SRDemoのほとんどのページでは、af:messagesを使用してエラー・メッセージを表示しています。データ・コントロール・パレットを使用してデータ・バインドされたページを作成すると、ADF Facesによってaf:messagesタグがページ上部に自動的に挿入されます。実行時にエラーがあると、ADF Facesによってメッセージがカラーでオフセットされたメッセージ・ボックスに自動的に表示されます。エラー・メッセージの詳細は、12.7項「エラー・メッセージの表示」を参照してください。

メッセージ・ボックスでのエラーのレポートに加えて、致命的エラー(スタック・トレースなど)を書式設定された形式で表示するために汎用のJSFエラー処理ページを使用できます。汎用のエラー処理ページを使用する場合、<error-page>要素をweb.xmlで使用してエラー・ページの例外タイプを指定するか(例4-9を参照)、JSPページ・ディレクティブを使用してエラー・ページを指定します(例4-10を参照)。

例4-9 web.xmlファイルでのerror-pageおよびexception-typeの構成

<error-page>
  <exception-type>java.lang.Exception</exception-type>
  <location>/faces/infrastructure/SRError.jspx</location>
</error-page>

例4-10 JSPディレクティブを使用したJSFページでのerrorPageの指定

<jsp:root ...>
  <jsp:output ...>
  <jsp:directive.page contentType="text/html;charset=windows-1252"
                      errorPage="faces/SRError.jspx"/>
  <f:view></f:view>
</jsp:root>

汎用のJSF JSPエラー・ページを作成および使用する場合は、次の事柄を考慮してください。

  • Sun社のJSFリファレンス実装における現在の制限のため、JDeveloperでJSF JSPの作成ウィザードを使用してJSF JSPエラー・ページを作成する場合、<f:view></f:view><f:subview></f:subview>で置換する必要があります。

  • web.xmlで、次の設定をADF Facesフィルタ・マッピングに追加する必要があります。

    <dispatcher>REQUEST</dispatcher>
    <dispatcher>ERROR</dispatcher>
    
  • エラー・ページを使用するJSFページでは、次のコードに示すように、<jsp:directive errorPage=""/>errorpageのURIに接頭辞faces/を含める必要があります。

    <jsp:directive.page contentType="text/html;charset=windows-1252"
                        errorPage="faces/SRError.jspx"/>
    

4.4.4 PanelPageコンポーネントの使用方法

SRDemoのページでは、panelPageを主要なADF Facesレイアウト・コンポーネントとして使用しています。このコンポーネントを使用すると、図4-5に示すように、ナビゲーション・メニュー、ブランド・イメージ、ページ・ボディ・コンテンツ用の特殊な領域があるページ全体をレイアウトできます。

panelPageコンポーネントでは、ファセット(JSFのf:facetタグ)を使用して子コンポーネントをページ上の特定の事前に定義された場所にレンダリングします。ファセットは、1つの子コンポーネントに対するプレースホルダとみなします。各ファセットには名前と用途があり、子コンポーネントがレンダリングされる場所を親コンポーネントを基準に決定します。子コンポーネントは、通常、他の子コンポーネントのコンテナ・コンポーネントになります。

panelPageコンポーネントでは、ユーザーがアプリケーション内の関連ページに素早く移動できるようにする階層的なナビゲーション・メニューを作成するためにmenu1menu2およびmenu3ファセットを使用します。メニュー・ファセットでは、次のいずれかを実行できます。

  • メニュー・コンポーネント(menuTabsmenuBarなど)とその子メニュー・アイテムを手動で挿入します。個々の子コンポーネントを手動で挿入することによって、JSFページでは大量のコードが必要となり、作成およびメンテナンスに多くの時間を要します。

    たとえば、サブタブを含む2つのメニュー・タブを作成するには、次のようなコードが必要です。

    <f:facet name="menu1">
      <af:menuTabs>
        <af:commandMenuItem text="Benefits" selected="true"
                            action="go.benefits"/>
        <af:commandMenuItem text="Employee Data" action="go.emps"/>
      </af:menuTabs>
    </f:facet>
    <f:facet name="menu2">
      <af:menuBar>
        <af:commandMenuItem text="Insurance" selected="true"
                            action="go.insurance"/>
        <af:commandMenuItem text="Paid Time Off" selected="false"
                            action="go.pto"/>
      </af:menuBar>
    </f:facet>
    
  • メニュー・コンポーネントをMenuModelオブジェクトにバインドし、メニュー・コンポーネントごとにnodeStampファセットを使用して、メニュー・アイテムを排除します(各メニュー・コンポーネント内に複数のメニュー・アイテム・コンポーネントを保持する必要がなくなります)。MenuModelオブジェクトにバインドしてnodeStampファセットを使用することによって、JSFページで使用するコードが少なくなり、同じメニュー・コードを使用して(階層内での位置に関係なく)ほとんどのページをレンダリングできます。たとえば、前述のものと同じ2つのメニュー・タブを作成するには、次のようにします。

    <f:facet name="menu1">
      <af:menuTabs var="menutab" value="#{menuModel.model}">
        <f:facet name="nodeStamp">
          <af:commandMenuItem text="#{menutab.label}"
                              action="#{menutab.getOutcome}"/>
        </f:facet>
      </af:menuList>
    </f:facet>
    <f:facet name="menu2">
      <af:menuBar startDepth="1" var="menusubtab" value="#{menuModel.model}">
        <f:facet name="nodeStamp">
          <af:commandMenuItem text="#{menusubtab.label}"
                              action="#{menusubtab.getOutcome}"/>
        </f:facet>
      </af:menuList>
    </f:facet>
    

    SRDemoのページでは、メニュー・コンポーネントは、マネージドBeanによって構成されるメニュー・モデル・オブジェクトにバインドされています。マネージドBeanを使用したメニュー構造の作成方法は、11.2項「動的なナビゲーション・メニューの使用」を参照してください。

階層的なメニューのレイアウトに加えて、panelPageコンポーネントでは、図4-7および図4-8に示すように、ページレベルおよびアプリケーションレベルのテキスト、イメージ、アクション・ボタンを特殊な領域でレイアウトするために、その他のファセットを使用できます。

ファセットまたはpanelPage自体に子コンポーネントを挿入する方法は、4.4.1項「JSFページにUIコンポーネントを追加する方法」を参照してください。

4.4.4.1 PanelPageのファセット

図4-7に、ブランド・イメージ、グローバル・ボタン、メニュー・タブ、メニュー・バー、メニュー・リストおよびアプリケーションレベルのテキストをレイアウトするためのpanelPageのファセット(番号1〜12)を示します。

図4-7 ブランド・イメージ、ナビゲーション・メニューおよびアプリケーションレベルのテキストがある基本ページ・レイアウト

ページ・レイアウト。説明は表4-3を参照してください。

表4-3に、(図4-7で番号が付けられた)panelPageのファセットと、その内部で使用できる推奨される子コンポーネントを示します。JDeveloperの構造ウィンドウでファセットを右クリックすると、使用できる推奨コンポーネントがあれば「の中に挿入」ポップアップ・メニューに表示されます。

表4-3 ブランド・イメージ、ナビゲーション・メニューおよびアプリケーションレベルのテキスト用のPanelPageのファセット

番号 ファセット 説明

1

branding

企業のロゴまたは組織のブランド用。objectImageを使用します。ページの左上隅に子コンポーネントをレンダリングします。

2

brandingApp

アプリケーションのロゴまたは製品のブランド用。objectImageを使用します。使用される場合は、brandingイメージの後に子コンポーネントをレンダリングします。panelPagechromeTypeがexpandedに設定されている場合は、brandingAppイメージは、brandingイメージの下に配置されます。

3

brandingAppContextual

通常、outputFormattedテキストとともに使用して、アプリケーションの最新のブランド・コンテキストを表示します。outputFormattedstyleUsage属性をinContextBrandingに設定してください。

4

menuSwitch

menuChoiceコンポーネント用。ユーザーがアクティブなページから別のアプリケーションに切り替えることができるようにします。ページの右上隅に子コンポーネントをレンダリングします。menuChoiceコンポーネントは、メニュー・モデル・オブジェクトにバインドできます。

5

menuGlobal

menuButtonsコンポーネント用。一連のメニュー・アイテムをグローバル・ボタンとしてレイアウトします。グローバル・ボタンとは、アプリケーションのアクティブなページから常時使用できるボタン(「ヘルプ」ボタンなど)です。使用される場合は、ページの右上隅、menuSwitchの子の前に子コンポーネントをレンダリングします。テキスト・リンク形式のグローバル・ボタンが、ページ下部に自動的に繰り返されます。menuButtonsコンポーネントは、メニュー・モデル・オブジェクトにバインドできます。

6

menu1

menuTabsコンポーネント用。一連のメニュー・アイテムをタブとしてレイアウトします。ページ上部(右寄せで)、ブランド・イメージ、メニュー・ボタンまたはメニュー・スイッチの直下に子コンポーネントをレンダリングします。テキスト・リンク形式のタブが、ページ下部に自動的に繰り返されます。メニュー・タブのテキスト・リンクは、テキスト・リンク形式のグローバル・ボタンの前にレンダリングされます。どちらのタイプのテキスト・リンクもページの中央に配置されます。menuTabsコンポーネントは、メニュー・モデル・オブジェクトにバインドできます。

7

menu2

menuBarコンポーネント用。一連のメニュー・アイテムをメニュー・タブの直下の水平バーの中にレイアウトします。子コンポーネントは、バーの中で左寄せされ、縦線で区切られます。menuBarコンポーネントは、メニュー・モデル・オブジェクトにバインドできます。

8

menu3

menuListコンポーネント用。メニュー・アイテムの箇条書きリストをレイアウトします。ページの左側、メニュー・バーの直下のカラーでオフセットされた領域内に子コンポーネントをレンダリングします。menuListコンポーネントは、メニュー・モデル・オブジェクトにバインドできます。

9

search

検索領域用。inputTextコンポーネントを使用します。水平メニュー・バーの直下に子コンポーネントをレンダリングします。この領域とその下のページ・タイトルは、点線によって区切られます。

10

appAbout

アプリケーションの詳細へのリンク用。commandLinkを使用します。リンク・テキストは、ページの左下隅に表示されます。

11

appCopyright

著作権のテキスト用。outputTextを使用します。テキストは、appAboutリンクの上に表示されます。

12

appPrivacy

アプリケーションのプライバシ・ポリシーの記述へのリンク用。commandLinkを使用します。リンク・テキストは、ページの右下隅に表示されます。



ヒント:

多くのUIコンポーネントでは、panelPage以外のファセットも使用できます。コンポーネントでファセットを素早く追加または削除するには、構造ウィンドウでコンポーネントを右クリックし、「ファセット - <component name>」を選択します。<component name>は、UIコンポーネントの名前です。コンポーネントでファセットが使用できる場合は、ファセット名のリストが表示されます。名前の横のチェックマークは、そのファセットのf:facet要素はすでにページに挿入されていて、子コンポーネントを含めることができる(子コンポーネントがない)ことを意味します。

図4-8に、ページレベルのアクションおよびテキストをレイアウトするためのpanelPageのファセット(番号1〜7)を示します。

図4-8 ページレベルのアクションおよび情報テキストがある基本ページ・レイアウト

ページ・レイアウト。説明は表4-4を参照してください。

表4-4に、(図4-8で番号が付けられた)panelPageのファセットと、その内部で使用できる推奨される子コンポーネントを示します。

表4-4 ページレベルのアクションおよび情報テキスト用のPanelPageのファセット

番号 ファセット 説明

1

actions

ページ・コンテンツに対して機能するページレベルのアクション用。通常、panelButtonBarとともに使用し、一連のボタンprocessChoiceBarまたはselectOneChoiceをレイアウトします。ページ・タイトルの下、右寄せで子コンポーネントをレンダリングします。子コンポーネントは、特定のデバイスおよびスキンでは、ページの一番下近く(テキスト・リンク形式のメニュー・タブおよびグローバル・ボタンの上)に自動的に繰り返されます。

2

contextSwitcher

コンテキスト・スイッチャを使用すると、コンテキストに基づいてページのコンテンツを変更できます。たとえば、部門の会社資産を表示している際に、コンテキスト・スイッチャを使用して別の部門の資産に切り替えることができます。すべてのページが選択したコンテキストに変ります。通常、selectOneChoiceコンポーネントとともに使用します。このファセットは、ページ・タイトルと同じレベルに、右寄せで子コンポーネントをレンダリングします。

3

infoFootnote

当面のタスクを補助するページレベルの情報用。通常、styleClassまたはstyleUsageを適切な値に設定したoutputFormattedコンポーネントとともに使用します。このファセットは、ページの一番下近く、infoReturnリンクの上に左寄せで子コンポーネントをレンダリングします。

4

infoReturn

「Xに戻る」リンク用。commandLinkを使用します。ユーザーがアクティブなメニュー・タブのデフォルト・ページに素早く戻ることができるようにします。このファセットは、ページの一番下近く、テキスト・リンク形式のメニュー・タブおよびグローバル・ボタンの上に左寄せで子コンポーネントをレンダリングします。

5

infoStatus

当面のタスクに関するページレベルのステータス情報用。重要な注釈を示すためにも使用できます。重要な注釈とは、ページ・コンテンツ内で使用されるアイコン、要素または用語を定義するために使用される説明文です。通常、styleClassまたはstyleUsageを適切な値に設定したoutputFormattedコンポーネントとともに使用します。このファセットは、ページ・タイトルの下、左寄せで子コンポーネントをレンダリングします。

6

infoSupplemental

その他の追加情報用。通常、panelBoxとともに使用し、カラーでオフセットされた領域に情報を示します。panelBoxでは、panelListoutputFormattedなどのテキストを使用して、ユーザーを支援してもタスクの完了には必要ない追加情報を示すことができます。このファセットは、ページの右側、infoUserファセットの子コンポーネントの下に子コンポーネントをレンダリングします。

7

infoUser

ユーザーのログイン情報および接続情報の表示用。通常、styleClassまたはstyleUsageを適切な値に設定したoutputFormattedコンポーネントとともに使用します。このファセットは、ページの右側、メニュー・バーの直下に子コンポーネントをレンダリングします。



ヒント:

panelPageと同様、pageコンポーネントを使用すると、特殊なコンテンツ領域があるページ全体をレイアウトできます。panelPageとは異なり、pagevalueをメニュー・モデル・オブジェクトにバインドして、ページの階層的なメニューを作成できます。個々のメニュー・コンポーネントをメニュー・モデル・オブジェクトにバインドする必要はありません。

4.4.4.2 ページ・ボディ・コンテンツ

panelPageのファセットを設定したら、panelPageコンポーネントの内部にフォーム、表およびその他のページ・ボディ・コンテンツを作成します。ADF Facesのパネル・コンポーネント(など)を使用すると、ページ上のコンテンツを簡単に編成できます。表4-5に従って、用途に適したコンポーネントを決定してください。

各コンポーネントに設定できるコンポーネントの属性の詳細は、JDeveloperのオンライン・ヘルプを参照してください。各コンポーネントが表すもののイメージは、次のURLでADF Faces Coreタグのドキュメントを参照してください。

http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/tagdoc/core/imageIndex.html

表4-5 レイアウトおよびパネルのADF Facesコンポーネント

用途 使用するコンポーネント

フォーム入力コンポーネントを1列以上に整列させる。ラベルは右寄せ、フィールドは左寄せ。

panelForm

コンポーネントを水平に整列させる。必要に応じて水平または垂直の位置合せを指定する。

panelHorizontal

コンポーネントを横1列または縦1列に続けて整列させる。必要に応じて折り返す。

panelGroup

1列以上の箇条書きリストを作成する。

panelList

ラベル、ヒントおよびメッセージを使用して、1つ以上のコンポーネントをレイアウトする。

panelLabelAndMessage

複数のpanelLabelAndMessageコンポーネントをpanelForm内に配置します。

入力コンポーネントをレイアウトする場合は、入力コンポーネントのsimple属性をtrueに設定する必要があります。

カラーでオフセットされたコンテナの中にコンポーネントを配置する。

panelBox

通常、panelBoxの内部で単一の子(panelGrouppanelFormなど)を使用するので、表示用のコンポーネントが含まれます。

ファセットを使用して事前に定義された場所にコンポーネントを配置する。

panelBorder

一連のボタンをレイアウトする。

panelButtonBar

追加のページレベルまたはセクションレベルのヒントをユーザーに表示する。

panelTip

ヘッダーを使用してページ・セクションおよびサブセクションを作成する。

panelHeadershowDetailHeader

長いページのセクションにクイック・リンクを追加する。

panelPagequickLinksShown属性をtrueに設定します。

コンポーネント・グループの表示(公開)/非表示(非公開)を切り替えることができるようにする。

showDetail

同時にコンテンツ・グループを選択および表示できるようにする。

showDetailItemコンポーネントを指定したShowOneコンポーネント

ShowOneコンポーネントには、showOneTabshowOneChoiceshowOneRadioおよびshowOnePanelがあります。

セパレータの線または空白をレイアウトに挿入する。

objectSeparatorobjectSpacer


4.5 Webページ用のバッキングBeanの作成および使用

JSFでは、バッキングBeanとは、主にUIロジックの提供と、アプリケーションのWeb層とビジネス層の間のデータ管理に使用される(データ転送オブジェクトに似た)JavaBeansです。通常、バッキングBeanはJSFページごとに1つあります。バッキングBeanには、ページで使用されるUIコンポーネントに対するロジックとプロパティが含まれます。たとえば、一部のユーザー・アクティビティの結果としてUIコンポーネントをプログラムで変更する、またはADF宣言アクション・メッソドの前または後でコードを実行するには、必要なコードをページのバッキングBeanに指定して、Bean内の対応するプロパティまたはメソッドにコンポーネントをバインドします。

アプリケーションの起動時にバッキングBeanを使用できるようにするには、名前とスコープを指定してマネージドBeanとしてfaces-config.xmlに登録します。実行時に、JSF EL値またはメソッド・バインディング式によってマネージドBeanがページで参照されるたびに、JSF実装ではBeanを自動的にインスタンス化して宣言されたデフォルト値を移入し、faces-config.xmlに定義されているマネージドBeanのスコープ内に配置します。

4.5.1 バッキングBeanの作成および構成方法

JSF構成エディタの概要モードを使用すると、バッキングBeanを宣言して作成および構成できます。ファイル名がSRDemopage.jspxのJSFページがあるとします。ここで、このページのバッキングBeanを作成します。

マネージドBeanとしてバッキングBeanを作成および構成するには、次のようにします。

  1. アプリケーション・ナビゲータで、faces-config.xmlをダブルクリックしてJSF構成エディタのデフォルト・モードで開きます。

  2. エディタの下部で、「概要」タブを選択し、概要モードに切り替えます(必要な場合)。

  3. 左側の要素リストで、「Managed Bean」を選択します。

  4. 「新規」をクリックして、「マネージドBeanの作成」ダイアログを開きます。

  5. このダイアログで、マネージドBeanについて次の情報を指定します。

    • 名前: マネージドBeanの一意の識別子(backing_SRDemopageなど)を入力します。この識別子は、Beanの完全修飾クラス名ではなく、EL式を使用してプリケーション内でBeanを参照する方法を決定します。

    • クラス: 完全修飾クラス名(oracle.srdemo.view.backing.SRDemopageなど)を入力します。これは、ページで使用されるUIコンポーネントのデータを保持するプロパティとともに、対応するアクセッサ・メソッドとその他のメソッド(ナビゲーション、検証など)を格納するJavaBeanです。既存のクラスでも、新規のクラスでもかまいません。

    • 有効範囲: Beanが格納されるスコープを決定します。スコープの有効値は次のとおりです。

      • application: BeanはWebアプリケーションの継続時間の間使用できます。LDAPディレクトリなどのグローバルBeanに適しています。

      • リクエスト: Beanはインスタンス化された時点からクライアントにレスポンスが返信されるまで使用できます。通常、現在ページの有効期間です。ページのバッキングBeanでは、通常このスコープを使用します。

      • セッション: Beanはクライアントのセッション中、クライアントで使用できます。

      • なし: Beanは参照されるたびにインスタンス化されます。

  6. 「クラスが存在しない場合は生成」チェック・ボックスを選択すると、Javaクラスが自動的に作成されます。すでにJavaクラスが作成されている場合は、このチェック・ボックスを選択しないでください。


注意:

この時点では、JSFページとバッキングBean間に厳密な関係を定義していません。faces-config.xmlでバッキングBeanを構成しただけです。これで、ページでJSF EL式を使用して参照できます。ページとバッキングBean間に厳密な関係を定義するには、4.5.3項「JSFページでのバッキングBeanの使用方法」を参照してください。

4.5.2 バッキングBeanの作成および構成時に発生する処理

「クラスが存在しない場合は生成」チェック・ボックスを選択すると、「クラス」の値として設定された完全修飾クラス名を使用して、Javaクラスが新規作成されます。新しいファイルは、図4-9に示すように、アプリケーション・ナビゲータのViewControllerプロジェクトのApplication Sourcesノード内に表示されます。

図4-9 ナビゲータでのSRDemopage.jspxのバッキングBean

ViewControllerプロジェクトのApplication Sourcesフォルダ

バッキングBeanクラスを編集するには、アプリケーション・ナビゲータでファイル(SRDemopage.javaなど)をダブルクリックしてソース・エディタで開きます。新しいクラスの場合は、例4-11のようなコードが表示されます。

例4-11 JDeveloperによって作成される空のJavaクラス

package oracle.srdemo.view.backing;

public class SRDemopage {
    public SRDemopage() {
    }
}

faces-config.xmlには、例4-12に示すように、<managed-bean>要素を使用してバッキングBeanの構成が追加されます。

例4-12 faces-config.xmlファイルでのマネージドBeanの登録

<faces-config xmlns="http://java.sun.com/JSF/Configuration">
  ...
  <!-- Page backing beans typically use request scope-->
  <managed-bean>
    <managed-bean-name>backing_SRDemopage</managed-bean-name>
    <managed-bean-class>oracle.srdemo.view.backing.SRDemopage</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
  ...
</faces-config>

注意:

実行時にバッキングBeanでADFモデルのバインディング・レイヤーにアクセスするため、バッキングBeanでADFバインディング・コンテナをインジェクトできます。これを実現する方法は、4.5.7項「ADFデータ・コントロールおよびバッキングBeanの使用方法」を参照してください。

4.5.3 JSFページでのバッキングBeanの使用方法

関連のプロパティおよびメソッドを指定してバッキングBeanを定義したら、JSF EL式(#{someBean.someProperty}#{someBean.someMethod}など)を使用して、UIコンポーネントの属性をBeanの適切なプロパティまたはメソッドにバインドします。

たとえば、次のコードは、値バインディング式とメソッド・バインディング式を示しています。

<af:inputText value="#{someBean.someProperty}"/>
..
<af:inputText disabled="#{someBean.anotherProperty}"/>
..
<af:commandButton action=#{someBean.someMethod}"/>
..
<af:inpuText valueChangeListener="#{someBean.anotherMethod}"/>

このような式が実行時に検出されると、faces-config.xmlで構成されたBeanのスコープにまだ存在しない場合は、JSFはBeanをインスタンス化します。

値バインディングおよびメソッド・バインディングに加えて、binding属性を使用してUIコンポーネントのインスタンスをBeanのプロパティにバインドすることもできます。

<af:commandButton binding="#{backing_SRDemopage.commandButton1}"

UIコンポーネントのbinding属性でBeanのプロパティを参照すると、Beanによりコンポーネントに直接アクセスできます。そのため、必要に応じてBeanのロジックでコンポーネントの他の属性をプログラム的に操作できます。たとえば、バッキングBeanのなんらかのUIロジックに基づいて、表示テキストの色を変更したり、ボタンまたはフィールドを無効にしたり、あるいはコンポーネントをレンダリングしないようにできます。

繰り返すと、コンポーネントのvalue属性またはその他の属性値をBeanのプロパティにバインドするか、コンポーネント・インスタンスをBeanのプロパティにバインドすることができます。どちらを選択するかは、コンポーネントに対して必要なコントロールの数によって決まります。コンポーネントの属性をバインドすると、Beanの関連プロパティはその属性の値を保持するため、コンポーネントのライフサイクルのモデル値の更新フェーズ中にその値を更新できます。コンポーネント・インスタンスをBeanのプロパティにバインドすると、プロパティはコンポーネント・インスタンス全体の値を保持します。つまり、コンポーネントのその他の属性値を動的に変更できます。

4.5.4 自動コンポーネント・バインディング機能の使用方法

JDeveloperには、JSFページ上のUIコンポーネント・インスタンスをバッキングBeanのプロパティに自動的にバインドできるようにする機能があります。ページの自動バインド機能を有効にすると、ページに挿入するUIコンポーネントについて、プロパティ・コードがページのバッキングBeanに自動的に追加され、コンポーネントのbinding属性がバッキングBeanの対応するプロパティにバインドされます。バッキングBeanでページのUIコンポーネントの属性をプログラム的に変更しない場合は、自動コンポーネント・バインディング機能を使用する必要はありません。

JSFページの自動コンポーネント・バインディングを有効にするには、次のようにします。

  1. JSFページをビジュアル・エディタで開きます。エディタ・ウィンドウの下部で「設計」を選択します。

  2. 「設計」「ページ・プロパティ」の順に選択し、「ページ・プロパティ」ダイアログを表示します。

  3. 「コンポーネント・バインディング」を選択します。

  4. 「自動バインド」を選択します。

  5. ドロップダウン・リストからマネージドBeanを選択するか、「新規」をクリックしてページのマネージドBeanを新規構成します。


注意:

JSFページの自動コンポーネント・バインディングを有効にすることによって、JDeveloperで厳密な関係をページとバッキングBeanの間に定義しています。

4.5.5 JDeveloperでの自動コンポーネント・バインディングの使用時に発生する処理

JSFページの自動バインド機能を有効にすると、特殊なコメント行がページの最後の方に挿入されます。

...
   </f:view>
   <!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_SRDemopage-->
</jsp:root>

faces-config.xmlでは、同様のコメント行がページのバッキングBeanの構成の最後に挿入されます。

<managed-bean>
  <managed-bean-name>backing_SRDemopage</managed-bean-name>
  <managed-bean-class>oracle.srdemo.view.backing.SRDemopage</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
  <!--oracle-jdev-comment:managed-bean-jsp-link:1SRDemopage.jspx-->
</managed-bean>

ページの自動バインド機能を有効にすると、UIコンポーネントをページに追加するたびに次の処理が行われます。

  • コンポーネントのプロパティとプロパティ・アクセッサ・メソッドがバッキングBeanに追加されます。たとえば、次のコードは、inputTextコンポーネントとcommandButtonコンポーネントについて追加されたコードを示しています。

        private CoreInputText inputText1;
        private CoreCommandButton commandButton1;
        public void setInputText1(CoreInputText inputText1) {
            this.inputText1 = inputText1;
        }
    
        public CoreInputText getInputText1() {
            return inputText1;
        }
    
        public void setCommandButton1(CoreCommandButton commandButton1) {
            this.commandButton1 = commandButton1;
        }
    
        public CoreCommandButton getCommandButton1() {
            return commandButton1;
        }
    
  • 次のコードに示すように、EL式をbinding属性の値として使用して、コンポーネントが対応するBeanのプロパティにバインドされます。

    <af:inputText binding="#{backing_SRDemopage.inputText1}"
    <af:commandButton binding="#{backing_SRDemopage.commandButton1}"
    

ページの自動バインド機能を無効にすると、特殊なコメントはJSFページおよびfaces-config.xmlから削除されます。ページ上のbinding EL式と、関連するバッキングBeanのコードは削除されません。


ヒント:

自動バインドを有効にしてUIコンポーネントをページから削除すると、対応するプロパティおよびアクセッサ・メソッドはページのバッキングBeanから自動的に削除されます。

4.5.6 バッキングBeanおよびマネージドBeanについての考慮事項

マネージドBeanとは、JSFのfaces-config.xmlファイルに登録されているアプリケーションJavaBeansです。バッキングBeanとは、JSFページ上の一部または全部のUIコンポーネントに対するロジックおよびプロパティを格納するマネージドBeanです。たとえば、UIコンポーネントがbinding属性を通じてバッキングBeanのプロパティにバインドされている場合、検証およびイベント処理のロジックをバッキングBeanに挿入すると、コードはページ上のUIコンポーネントにプログラムでアクセスできます。

すべてのバッキングBeanはマネージドBeanであるため、このマニュアルでは、バッキングBeanという用語を、マネージドBeanという用語と同義で使用します。ただし、バッキングBeanではないマネージドBean、すなわち、ページのUIコンポーネントに対するプロパティとプロパティのgetterメソッドおよびsetterメソッドを保持しないJavaBeanも使用できます。このBeanは、faces-config.xmlで構成され、単一のページに限定されないコードを保持します。SRDemoアプリケーションでバッキングBeanではないマネージドBeanが使用される場合の例として、次のBeanがあります。

  • コンテナ・セキュリティからの認証されたユーザーの情報にアクセスするBean

  • ナビゲーション・メニュー・システム(メニュー・タブ、メニュー・バーなど)を作成するBean

  • EL式によるバンドル内の文字列リソースを公開するBean

マネージドBeanのプロパティは、Beanがインスタンス化されるときに値を移入するBeanのプロパティです。Beanが作成されると、宣言された各プロパティに対してsetメソッドが実行されます。マネージドBeanのプロパティを設定値で初期化するには、<managed-property>要素をfaces-config.xmlで使用します。マネージドBeanの管理プロパティを構成する際に、例4-13に示すように、プロパティ名、クラス・タイプ、デフォルト値を宣言します。

例4-13 faces-config.xmlファイルにおけるマネージドBeanのプロパティの初期化コード

<managed-bean>
  <managed-bean-name>tax</managed-bean-name>
  <managed-bean-class>com.jsf.databeans.TaxRateBean</managed-bean-class>
  <managed-bean-scope>application</managed-bean-scope>
  <managed-property>
    <property-name>rate</property-name>
    <property-class>java.lang.Float</property-class>
    <value>5</value>
  </managed-property>
</managed-bean>

例4-13rateプロパティは、EL式#{tax.rate}を使用してBeanがインスタンス化されると、値5(Floatに変換)で初期化されます。

マネージドBeanとマネージドBeanのプロパティは、BeanまたはプロパティのタイプがListまたはMapであるか、java.util.Mapまたはjava.util.Listを実装することを指定すると、リストまたはマップとして初期化できます。リストまたはマップ内の値のデフォルト・タイプは、java.lang.Stringです。

例4-14に、ListであるマネージドBeanの例を示します。

例4-14 faces-config.xmlファイルにおけるマネージドBeanのリスト

<managed-bean>
  <managed-bean-name>options</managed-bean-name>
  <managed-bean-class>java.util.ArrayList</managed-bean-class>
  <managed-bean-scope>application</managed-bean-scope>
  <list-entries>
    <value>Text Only</value>
    <value>Text + HTML</value>
    <value>HTML Only</value>
  </list-entries>
</managed-bean>

アプリケーションがEL式#{options.text}を検出すると、Listオブジェクトが作成され、宣言されたlist-entriesのvalueの値で初期化されます。managed-property要素は宣言されませんが、かわりにlist-entriesmanaged-bean要素の子要素となります。


ヒント:

マネージドBeanは、同じスコープまたはより長い存続期間のスコープを持つBean内の管理プロパティのみを参照できます。たとえば、sessionスコープのBeanは、requestスコープのBeanの管理プロパティを参照できません。

4.5.7 ADFデータ・コントロールおよびバッキングBeanの使用方法

データ・コントロール・パレットからJSFページにアイテムをドロップしてデータ・バインドされたUIコンポーネントを作成する場合、多くの処理が自動的に実行されます。詳細は、5.2.3項「データ・コントロール・パレットの使用時に行われる処理」を参照してください。データ・バインドされたUIコンポーネントでは、#{bindings.ProductName.inputValue}などのADFデータ・バインディングのEL式を使用して、ページのバインディング・コンテナ内の関連バインディング・オブジェクトを参照します(bindingsは現在のページのADFバインディング・コンテナへの参照です)。

ADFデータ・バインディングを使用するページのバッキングBeanでは、必要に応じてバインディング・コンテナのバインディング・オブジェクトを参照できます。ADFバインディング・コンテナを参照する目的で、JSF値バインディングを#{bindings} EL式に解決し、その結果をoracle.binding.BindingContainerインタフェースにキャストできます。または、簡単な方法として、バッキングBeanが実行時にADFバインディング・コンテナでプログラム的に動作するように、同じ#{bindings} EL式を参照するbindingsという名前の管理プロパティをfaces-config.xmlの適切なページのマネージドBean構成に追加できます。例4-15に、SRMainページのbacking_SRMainマネージドBeanのbindings管理プロパティを示します。

例4-15 faces-config.xmlファイルにおけるbindings管理プロパティ

<faces-config xmlns="http://java.sun.com/JSF/Configuration">
  ...
  <managed-bean>
    <managed-bean-name>backing_SRMain</managed-bean-name>
    <managed-bean-class>oracle.srdemo.view.backing.SRMain</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
    <managed-property>
      <property-name>bindings</property-name>
      <value>#{bindings}</value>
    </managed-property>
  </managed-bean>
  ...
</faces-config>

バッキングBeanでは、バインディング・コンテナに対するgetterメソッドとsetterメソッドを追加します。例4-16に、bindingsの関連コードを格納するSRMain.javaの一部を示します。

例4-16 バッキングBeanにおけるbindingsのgetterメソッドとsetterメソッド

...
import oracle.binding.BindingContainer;

    private BindingContainer bindings;

    public BindingContainer getBindings() {
        return this.bindings;
    }

    public void setBindings(BindingContainer bindings) {
        this.bindings = bindings;
    }

...

実行時に、アプリケーションがADFバインディング・コンテナを参照するADFデータ・バインディングのEL式(#{bindings.bindingObject.propertyName}など)を検出すると、JSFによりその式が評価され、バインディング・オブジェクトから値が取得されます。

ADFデータ・バインディングのEL式およびADFバインディングのプロパティの詳細は、5.6項「ADFデータ・バインディングEL式の作成」を参照してください。

JSFバッキングBeanがADFモデル・レイヤーとどのように連携して機能するかの概要は、第1章「Oracle ADFアプリケーションの概要」を参照してください。

4.6 ADF Facesのベスト・プラクティス

ADF Facesを使用して開発する際は、次のベスト・プラクティスを考慮してください。