ADF Business ComponentsとJavaServer Facesを使用したエンドツーエンドのWebアプリケーション構築

目的

このチュートリアルでは、Oracle JDeveloper（10.1.3.1.0）とADF Business Componentsを使用して、Webアプリケーションを構築します。ADF Business Componentsは、データ・モデルの作成に使用し、JavaServer Facesは、マスター/ディテール・ページ、検索ページ、編集ページを含むWebクライアントの作成に使用します。

所要時間

60分

トピック

このチュートリアルでは、以下のトピックについて説明します。

	概要
	前提条件
	データベース接続の作成
	ADF Business Componentsを使用したデータ・モデルの構築
	マスター/ディテールJSFページの作成
	JSFの実行
	Business Componentsコントロール・ヒントの使用
	ビジネス・モデルへのADF Business Componentsの追加
	検索ページの作成
	編集ページの作成
	検索ページと編集ページの同期化
	まとめ

スクリーンショットの表示

このアイコンの上にカーソルを置くと、すべてのスクリーンショットがロードし、表示されます。（警告：この操作によっ て、同時にすべてのスクリーンショットがロードされるため、ご使用のインターネット接続によってはレスポンス時間が遅くなる場合があります）。

注：各手順に関連したスクリーンショットのみを表示する場合は、それぞれの手順にあ るアイコンの上にカーソルを置いてください。スクリーンショットをクリックすると、非表示になります。

概要

このアプリケーションにはModel-View-Controller（MVC）アーキテクチャが 反映されています。モデルはADF Business Componentsによって、また、ビューとコントローラはJavaServer Facesによって、それぞれ提供されます。ここでは、JSF標準のADF Facesコンポーネント・ライブラリを使用して、使いやすいWebユーザー・インタフェースを構築します。ADF FacesはJSFコンポーネントのセットであり、簡素なものから複雑なものまでデータ認識コントロールを提供します。

最初に、アプリケーションのデータ・モデル部分を構築します。これが、中間層のビジネス・ロジック および検証規則を配置する場所です。ADFのモデル・レイヤーは、3つのレイヤー（モデル、ビュー、コントローラ）間で宣言的なデータ・バインディングを 提供します。次に、顧客の注文とともに顧客情報を表示するためのマスター/ディテール・フォームを作成します。基本的なマスター/ディテール・ページの作 成方法に従い、検索や編集などの機能を含む、より複雑なページを作成します。

アプリケーションの開発とテストを行いながら、Oracle JDeveloper 10gが提供する組込みJava EEアプリケーション・サーバーを使用します。アプリケーションが完成すると、Oracle Application Server 10gまたは他の外部のアプリケーション・サーバーに配置できます。

ト ピック・リストに戻る

前提条件

このチュートリアルを始める前に、次のことを確認してください。

トピック・リストに戻る

データベー ス接続の作成

Java Database Connectivity（JDBC）は、Javaアプリケーションをリレーショナル・データベースに接続するために使用される標準的な Application Program Interface（API）です。JDeveloperは、接続ナビゲータを使用して、アプリケーションの接続情報を保持します。接続ナビゲータによっ て、データベース接続の作成、管理、テストが容易になります。

データベースに接続していない場合は、以下の手順で接続します。

トピック・リストに戻る

ADF Business Componentsを使用したデータ・モデルの構築

データ・モデルは、アプリケーションにデータ・アクセスおよび検証を提供します。クライアントが実 装されていても、データは常にモデルによって検証されます。これによって、検証とビジネス・ルールをユーザー・インタフェースから明確に隔離できます。

次に、JDeveloperでアプリケーションを作成し、さらにアプリケーション用のビジネス・コ ンポーネント・モデルを作成します。

	新しいアプリケーション とプロジェクトの作成
	ビジネス・コンポーネン トの作成
	ビジネス・コンポーネン ト・ビューのカスタマイズ

トピック・リストに戻る

新しいアプリケーションとプロジェク トの作成

Oracle JDeveloperでは、常にアプリケーションに含まれるプロジェクトを使用して作業を行います。アプリケーションは、制御構造の最上位にあります。

JDeveloperプロジェクトは、関連するファイルを論理的に分類するために使用される組織構 造です。ソース・コードの体系化、アクセス、変更、再使用を容易にするために、多数のプロジェクトをアプリケーションに加えることができます。アプリケー ション・ナビゲータでは、プロジェクトは階層内の二番目のレベルとして、アプリケーションの下に表示されます。

表示用に記述されたコードからモデル・コードを分離するには、プロジェクトを使用することがベス ト・プラクティスであると考えられています。このチュートリアルでは、ADF Business Componentsモデル用に1つのプロジェクトを作成し、後にJSPビュー用にもう1つのプロジェクトを作成します。

コンポーネントを作成する前に、まず、アプリケーションとプロジェクトを作成する必要があります。 作成するには、以下の手順に従います。

1.	「アプリケーション」タブをクリックして、アプリケーション・ナビゲータに戻ります。 アプリケーション・ノードを右クリックし、コンテキスト・メニューから「新規アプリケーション・ワー クスペース」を選択します。
2.	アプリケーション・ワークスペースの作成ダイアログ・ボックスにアプリケーション名をOrderEntryと入力します。アプリケー ション名を入力すると、ディレクトリ名が自動的に変更されることに注意してください。 アプリケーション・パッケージの接頭辞としてoracleと入力します。 アプリケーション・テンプレートのドロップダウン・リストから値「Web Application[JSF, ADF BC]」を選択します。 「テンプレートの管理」ボタンをクリックします。
3.	アプリケーション・テンプレート・ツリーのWeb Application [JSF, ADF BC]ノードで、View and Controllerを選択し、View and Controllerペインでプロジェクト名をUserInterface.jprに、 デフォルトのパッケージをviewに設定します。
4.	アプリケーション・テンプレート・ツリーのWeb Application [JSF, ADF BC]ノードで、Data Modelを選択し、Data Modelペインでプロジェクト名をDataModel.jprに、 デフォルトのパッケージをdatamodelに設定します。 「OK」をクリックします。
5.	アプリケーション・ワークスペースの作成に戻り、「OK」をクリックしてアプリケー ションを作成します。
6.	ツールバーの「すべて保存」をクリックして、作業内容を保存します。または、メニューから「ファ イル」→「すべて保存」を選択します。 アプリケーション・ナビゲータの表示は以下のようになります。 これでチュートリアル用のアプリケーション・コンポーネントを作成する準備ができました。次に、アプリケーションのモデル を作成します。

トピックに戻る

トピック・リストに戻る

表からのビジネス・コンポーネント の作成

この項では、データベース内の表をベースにADF Business Componentsを作成します。先に作成したoeconnデータベース接続を使用します。これらのオブジェクトをModelプロジェク トで作成します。

1.	アプリケーション・ナビゲータでDataModelプロジェクトを右クリックし、コンテキスト・メニューか ら「新規」を選択します。
2.	新規ギャラリでBusiness Tierを開き、カテゴリ・リスト内のADF Business Componentsを選択します。 項目リスト内の表からのビジネス・コンポーネントを選択します。 「OK」をクリックします。
3.	Business Components Project Initializationウィンドウで、接続リストから「oeconn」 を選択し、「OK」をクリックします。
4.	ビジネス・コンポーネントの作成ウィザードの初期画面が表示されたら、「次へ」をクリックします アプリケーションの作成時にパッケージ名が指定されていない場合、デフォルトで、プロジェクト名、つまりモデルが使用され ます。 注：ADFエンティティ・オブジェクトは、Javaコンポーネントです。このコンポー ネントは、Java EEアプアリケーションで、ドメインのビジネス・オブジェクトとして、基本的なデータベース表の行を示します。ADFエンティティ・オブジェクトは、ドメ イン・オブジェクトのビジネス・ルールをカプセル化し、ユーザーがデータベースに加えた変更内容の保存を自動的に処理します。エンティティ・オブジェクト は、Oracle Formsレコード・マネージャに類似した機能を提供しますが、カプセル化されたビジネス・ルールを各種類の'ビジネス・レコード'構造に関連付ける機能 を備えています。 スキーマのドロップダウン・リストから「OE」を選択します。 「問合せ」をクリックして、使用可能リストに移入します。 使用可能リストで、CUSTOMERSとORDERSを、[Ctrl]を押しながらクリック します。 「追加」ボタンをクリックして、2つの表を選択リストに移動します。 「次へ」をクリックして続行します。
5.	ビジネス・コンポーネントの作成ウィザードの"更新可能ビュー・オブジェクト"ページで、両方のエンティティ・オブジェク トを選択し、「追加」ボタンをクリックして両方の表を選択リストに移動します。 注：ADFビュー・オブジェクトは、1つ以上の基本的な表に対するSQL問合せを表す Javaコンポーネントです。これによって、エンド・ユーザーに提供する必要のあるユーザー・インタフェースに対して、エンド・ユーザーが必要とする表示 方法で、ビジネス情報の提供、結合、フィルタ、ソートが可能になります。基本的なADFエンティティ・オブジェクトに関連付けられている場合、ビュー・オ ブジェクトによって、ユーザーは、ビジネス・ルールを自動的に施行して、行を作成、更新、および削除できます。ビュー・オブジェクトは、Oracle Forms Data Blockに類似した機能を提供しますが、ビュー・オブジェクトには柔軟性が追加されており、SQL問合せを微調整し、エンティティ・オブジェクトによっ てカプセル化された中央のビジネス・ルールを自動的に利用できます。 「次へ」をクリックします。
6.	「次へ」をクリックして、ウィザードの"Read-only View Objects"ページをスキップします。更新可能なビュー・オブジェクトのみを使用します。
7.	ウィザードのアプリケーション・モジュール・ページで、アプリケーション・モジュールをOrderEntryAMとします。 注：ADFアプリケーション・モジュールは、マスター/ディテール関連のビュー・オブ ジェクト問合せのトランザクション・データ・モデルを表すJavaコンポーネントです。これによって、サービス指向アーキテクチャのあらゆる種類のクライ アント・インタフェース・テクノロジは、データ・モデルに含まれているビュー・オブジェクト・インスタンスによって公開されるビジネス情報を簡単に操作で きます。アプリケーション・モジュールは、Oracle Formsフォーム・オブジェクトに類似したトランザクションのデータ・コンテナの機能を提供していますが、任意のユーザー・インタフェースがビュー・オ ブジェクトの'データ・ブロック'内のデータと連動できるように設計されています。 「次へ」をクリックします。
8.	Oracle JDeveloperは、コンポーネントを管理するためにさまざまなテクノロジを提供します。その1つは、コンポーネントおよびコンポーネントの関係を表 すダイアグラムを使用することです。ここで、JDeveloperは、そのようなダイアグラム・オプションを提供します。 このチュートリアルでは、このオプションを使用しません。「次へ」をクリックして続行します。
9.	ビジネス・コンポーネント・ウィザードの最後のページでは、これから作成するオブジェクトとリレーションシップが表示され ます。 「終了」をクリックして、ウィザードのアクションを終了します。
10.	アプリケーション・ナビゲータは、次のように表示されます。 ナビゲータ・ペインのツールバー右端のボタンを使用して、要素を種類別に分類します。

トピックに戻る

トピック・リストに戻る

ビジネス・コンポーネント・ビュー のカスタマイズ

前の項では、2つの表（CustomersとOrders）からデフォルトのビジネス・コンポーネ ントを作成しました。デフォルトのビュー・オブジェクトは、これらの表のすべての列を公開します。ここで使用するアプリケーションでは、これらの列の一部 のみを公開します。ADF Business Componentsによって、これらのオブジェクトを簡単にカスタマイズして、特定のアプリケーションのニーズに合わせることができます。

以下の手順に従い、CustomersViewビュー・オブジェクトから公開された属性のいくつか を削除します。

1.	アプリケーション・ナビゲータでCustomersViewノードを右クリックし、コンテキスト・メニュー から「Edit CustomersView」を選択します。
2.	属性ノードを選択して、ビュー・オブジェクトのすべての属性を表示します。
3.	ビュー・オブジェクト・エディタの選択済ペインで、[Ctrl]を押しながら、以下の属性を除いたすべてをクリックしま す。 CustomerId CustFirstName CustLastName CustEmail
4.	「削除」ボタンを使用して、選択した属性を選択リストから移動します。
5.	次に、CustomersViewにOrder By句を追加し、返されるデータが必ず顧客IDによってソートされるようにします。 左のペインで、SQL文ノードを選択します。
6.	SQL文ペインの下部にあるOrder ByフィールドにCustomers.CUSTOMER_IDと 入力します。 「OK」をクリックして、変更を適用し、ビュー・オブジェクト・エディタを終了します。
7.	Oracle JDeveloperメニュー･バーの「すべて保存」アイコンをクリックするか、メニューから「ファイル」 →「すべて保存」を選択します。
	これで、Customersビューがカスタマイズされ、アプリケーションの特定のニーズに対応するようになりました。次 に、OrderEntryモデルを使用するWebクライアントの作成に進みます。

トピックに戻る

トピック・リストに戻る

マスター/ ディテールJavaServer Facesページの作成

JSF標準に準拠するADF Facesによって、マークアップ言語とタグよりも、アプリケーションとレイアウトに専念できます。ADF FacesとADF Business Componentsが統合されたため、ユーザー・インタフェースのデフォルトのフィールド・ラベルをADF Business Components内部から簡単に変更できます。

次に、構築したばかりのADF Business Componentsモデルをベースとする、ADF Facesアプリケーションの作成手順に進みます。また、ADF Business Componentsのデフォルト設定の一部を変更して、デフォルトUIを改善します。

1.	アプリケーションを作成すると、DataModelとUserInterfaceの2つのプロジェクトが定義されます。 DataModelプロジェクトには、アプリケーションのデータ・モデルの役割を果たすビジネス・コンポーネントが含まれます。 UserInterfaceプロジェクトにはアプリケーションのビューの部分が含まれ、これによってユーザー・インタフェースが定義されます。 アプリケーション・ナビゲータが次のように表示されるように、DataModelノー ドを閉じます。
2.	アプリケーション・ナビゲータでUserInterfaceを右クリックして、コンテ キスト・メニューから「新規」を選択し、新しいJSFを作成します。
3.	新規ギャラリでWeb Tierを開き、カテゴリ・リスト内のJSFを 選択します。項目リストのJSF JSPを選択します。
4.	新しいJSFを選択すると、JSF JSPの作成ウィザードが開きます。「次へ」をクリックして、JSF JSPウィザードの初期画面をスキップします（初期画面が表示された場合）。
5.	新しいJSPにCustomerOrders.jsp.という名前を付けます。他のデフォルトを受け入れ て、「次へ」をクリックして続行します。
6.	次のページ（コンポーネント・バインディング）で、「UIコンポーネントを自動公開しない」 を選択します。他のデフォルト値はそのままにして、「次へ」をクリックします。
7.	次のライブラリが選択されていることを確認してください。 JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML 「次へ」をクリックして、上記のライブラリを受け入れます。
8.	「終了」をクリックして、デフォルトのHTMLオプションを受け入れ、新しいJSPを作成します。 これで、空のCustomerOrders.jspページができました。次に、データ・バインドされたADF Facesコンポーネントをページに追加します。このコンポーネントでは、顧客とその顧客の注文が表示されます。
9.	CustomerOrders.jspページを作成したとき、JDeveloperはそれをJDeveloper IDE中央のビジュアル・エディタで開きました。ADF Facesは、コンポーネント・パレットまたはデータ・コントロール・パレットのいずれかから、ビジュアル・エディタにドラッグして追加します。ここで は、データ・コントロール・パレットを使用して、先に作成したビュー・オブジェクトをベースに、いくつかのデータバウンド・コンポーネントをドロップしま す。 まず、データ・コントロール・パレットでOrderEntryDataAMControlを開きます。
10.	CustomersView1を開きます。 注：デフォルトでは、Tablesウィザードのビジネス・コンポーネントは、 ORDERS表とCUSTOMER表の間の外部キー・リレーションシップを認識して、OrderEntryDataAMのデータ・モデル内でデフォルトの データ・モデルを作成しました。OrderEntryDataAMのデータ・モデルには、すべての注文を表示するOrdersView1、および OrdersView1にリンクされてすべての顧客を表示するOrderView2があります。このシナリオでは、CustomersView1と OrdersView2を使用して、顧客および各顧客の注文のセットを表示します。
11.	OrdersView2をビジュアル・エディタにドラッグします。JDeveloperは、コンテキスト・ メニューを開いて、そのデータ制御に使用できるオプションを表示します。
12.	カーソルを「マスター/ディテール」の上に置いて、「ADFマスター・フォーム、ディテール表」 を選択します。
13.	JDeveloperは、ADF Master DetailコンポーネントをJSFページに追加します。 これで、ADF Business Componentsビジネス・サービスにデータバウンドされた完全なJSFができました。次に、新しいアプリケーションをテストします。

トピック・リストに戻る

JSFペー ジの実行

新しいADF Facesアプリケーションを構築したので、テストを行う必要があります。組込みのOC4Jサーバーを介して、JDeveloperでJSFを簡単にテス トできます。JDeveloperの内部でページをテストすると、このサーバーが自動的に起動します。

次に、テストのプロセスを段階的に説明します。

1.	ページをテストするには、アプリケーション・ナビゲータでCustomerOrders.jspを右クリッ クして、コンテキスト・メニューから「実行」を選択します。（ビジュアル・エディタの内部で右クリックして、コンテキスト・メニューから「実 行」を選ぶこともできます。）
2.	ページは次のように表示されます。 注：JDeveloperは、デフォルトのWebブラウザを開いて、ページを表示しま す。表示されない場合、 「ツール」→「設定」をクリックして、Web Browser and Proxyカテ ゴリを選択します。ここで、選択したブラウザへのコマンドラインを入力します。設定後、もう一度ページを実行します。
3.	顧客の行を移動し、各顧客の順序の違いに注意してください。リスト中最初の2、3人の顧客は、複数の注文をしています。 終了したら、ブラウザを閉じます。

トピック・リストに戻る

Business Componentsコントロール・ヒントの使用

JSFアプリケーションの作業用バージョンができたので、ページ上でいくつかのラベル をカスタマイズします。すべてのレイアウト・コンポーネントに対して、デフォルト値を使用し、ページを作成しました。これは第一歩としては良い方法です が、完成したページをより制御可能にする必要があります。

ページ上のフィールド・ラベルは、ハードコードされておらず、実行時に抽出されます。これらの フィールドの値は、実行時にADF Business Components定義から取得されます。ADF Business Componentsは、それらの実行時プロパティをカスタマイズする手段を提供します。変更できるプロパティの1つは、コントロール・ヒントと呼ばれて います。コントロール・ヒントを使用すると、実行時にADF Facesによってレンダリングされる、ラベル、フィールド・サイズ、フォーマット・マスクなどの表示プロパティを作成できます。

次に、CustomersViewオブジェクトのコントロール・ヒントを変更し、アプリケーション を再テストして、これらの変更が適用されていることを確認します。

1.	モデル・プロジェクトで変更を行います。 アプリケーション・ナビゲータでCustomersViewを選択します（「DataModel」 →「Application Sources」→「oracle.datamodel」）。
2.	CustomersViewを右クリックして、コンテキスト・メニューから「Edit CustomersView」を選択します。
3.	属性ノードを選択し、開きます。
4.	属性リストで、CustomerIdを選択します。
5.	「Control Hints」タブをクリックします。
6.	Customer ID:などの値を、Label Textフィールドに入力します。これは、CustomerIDフィー ルドの最初のラベルになります。
7.	次のフィールドをクリックして、Label Textフィールドにテキストを追加します（CustomerIdの場合と同様）。 CustFirstName 名： CustLastName 姓： CustEmail 電子メール： 「OK」をクリックして変更内容を受け入れ、適用 します。 注：提供されるコントロール・ヒントは、他のロ ケールに変換でき、ADF実行時はブラウザの言語設定に応じて、現在のユーザーに適したラベルを使用します。
8.	ViewプロジェクトのCustomerOrders.jspを右クリックして、コン テキスト・メニューから「実行」を選択します。
9.	作業しているページでは、CustomersViewオブジェクトに追加したばかりのフィールド・ラベルが使用されます。 ADFコンポーネントが統合されているので、ビューにおいて変更する必要はありません。

トピック・リストに戻る

データ・モデルへのADF Business Componentsの追加

ここでは、既存のデータ・モデルにビジネス・コンポーネントを追加します。また、アプリケーショ ン・モジュールのデータ・モデルにビュー・オブジェクトを追加し、検索ページおよび関連する編集ページをサポートします。検索ページは、 CustomersとOrdersの間の情報の結合をベースとします。

次に、データ・モデル内でビジネス・コンポーネントを追加します。

	SQL文に基づく ビュー・オブジェクトの作成(I)
	SQL文に基づく ビュー・オブジェクトの作成(II)
	SearchOrders ページ用新規ビュー・オブジェクトの作成
	ビュー・オブジェクトの 改良およびアプリケーション・モジュールの更新

トピック・リストに戻る

SQL文に基 づくビュー・オブジェクトの作成(I)

この項では、SQL文に基づいて、Promotions表を問い合わせる読取り専用のビュー・コン ポーネントを作成します。ビュー・オブジェクトはPromotions表に保存されている使用可能な値を提供します。これらの値は、編集ページでドロップ ダウン・リストとして使用されます。

1.	アプリケーション・ナビゲータでDataModelプロジェクトを右クリックし、コンテキスト・メニューか ら「新規」を選択します。
2.	新規ギャラリでBusiness Tierを開き、カテゴリ・リスト内のADF Business Componentsを選択します。項目ペインでビュー・オブジェクトを選択します。 「OK」をクリックします。
3.	「次へ」をクリックして、ビュー・オブジェクトの作成ウィザードの初期画面をスキップ します。手順1で、ビューをPromotionsLOVと名付けます。「Rows Populated by a SQL Query」にチェックマークを付けて、「Read-Only Access」 を選択します。 「次へ」をクリックして続行します。
4.	手順2では、以下のクエリー文を入力します。 SELECT Promotions.PROMO_ID, Promotions.PROMO_NAME FROM PROMOTIONS Promotions ORDER BY Promotions.PROMO_NAME 「テスト」ボタンをクリックして、SQL文を確認し、「OK」 をクリックします。「次へ」を2回クリックしてから、「終了」をクリックします。
5.	アプリケーション・ナビゲータは、次のように表示されます。

トピックに戻る

トピック・リストに戻る

SQL文に基 づくビュー・オブジェクトの作成(II)

この項では、Orders表のMode列に認可された値を構成するSQL文をベースとした、読取り 専用のビュー・コンポーネントを作成します。これらの値は、編集ページでドロップダウン・リストとして使用されます。

1.	アプリケーション・ナビゲータでDataModelプロジェクトを右クリックし、コンテキスト・メニューか ら「新規」を選択します。
2.	新規ギャラリでBusiness Tierを開き、カテゴリ・リスト内のADF Business Componentsを選択します。項目ペインでビュー・オブジェクトを選択します。 「OK」をクリックします。
3.	「次へ」をクリックして、ビュー・オブジェクトの作成ウィザードの初期画面をスキップ します。手順1で、ビューをModelLOVと名付け、「Rows Populated by a SQL query」にチェックマークを付けて、「Read-Only Access」を選択しま す。 「次へ」をクリックして続行します。
4.	手順2では、以下のクエリー文を入力します。 select 'direct' as modevalue from dual union all select 'online' from dual order by 1 「テスト」ボタンをクリックして、SQL文を確認します。「次へ」 を2回クリックしてから、「終了」をクリックします。
5.	アプリケーション・ナビゲータは、次のように表示されます。

トピックに戻る

トピック・リストに戻る

SearchOrders ページ用新規ビュー・オブジェクトの作成

次に、CustomersおよびOrdersエンティティ・オブジェクトの両方のデータを提示する ビュー・オブジェクトを作成します。ウィザードは、基本的なデータベース表の間で適切な問合せを自動的に作成します。

1.	アプリケーション・ナビゲータでDataModelノードを右クリックし、コンテキス ト・メニューから「新規」を選択します。
2.	新規ギャラリでBusiness Tierを開き、カテゴリ・リスト内のADF Business Componentsを選択します。項目ペインでビュー・オブジェクトを選択します。 次に「OK」をクリックします。
3.	「次へ」をクリックして、ビュー・オブジェクトの作成ウィザードの初期画面をスキップ します。手順1で、ビューをSearchOrdersと名付け、「Rows Populated by a SQL query」にチェックマークを付けて、「Updatable Access through Entity Objects access」を選択します。 「次へ」をクリックします。
4.	手順2では、Ordersエンティティ・オブジェクトを選択して「追 加」ボタンをクリックします。そして、選択肢を移動してCustomersを選択し、「追 加」ボタンをクリックします。 注：上記の順序に従って選択したエンティティを移動することが重要です。 「次へ」をクリックします。
5.	手順3では属性ノードをクリックして、以下の属性を選択します。 Orders.OrderId Orders.OrderTotal Customers.CustomerId Customers.CustFirstName Customers.CustLastName 「追加」ボタンをクリックして、選択肢を移動します。 「次へ」をクリックします。
6.	手順4では、OrderId属性を選択します。これは、基本的なOrdersエンティ ティ・オブジェクトのキー属性であるため、自動的にキー属性のしるしが付けられます。この問合せの各行がOrderIDによって一意に識別されるので、基 本的なCustomersエンティティ・オブジェクトが提供するオプションのキー属性を削除できます。 ドロップダウン・リストからCustomerId属性を選択し、「キー 属性」チェック・ボックスの選択を解除します。 「次へ」をクリックします。
7.	次に、検索ページを提供する必要があります。この検索ページによって、エンド・ユーザーは、総額が一定の範囲に入っている 注文を検索できるだけでなく、大文字と小文字を区別せず顧客の名または姓で検索することもできます。この手順では、ビュー・オブジェクトにカスタムの WHERE句を追加します。このビュー・オブジェクトは、実行時にユーザーが提供できることが望ましいパラメータの名前付きバインド変数を参照します。こ こでバインド変数を参照し、次のウィザードの手順でバインド変数の名前、データ型、デフォルト値を正式に定義します。 手順5では、「ExpertMode」チェック・ボックスをクリックし、クエリー文の ダイアログで文の最後に次のコードを加えます。 AND ORDER_TOTAL BETWEEN :TotalLow AND :TotalHigh AND (UPPER(CUST_FIRST_NAME) LIKE UPPER(:CustName) ||'%' OR UPPER(CUST_LAST_NAME) LIKE UPPER(:CustName)||'%') 「テスト」ボタンをクリックして、SQL文が有効であることを確認します。「次 へ」を2回クリックします。
8.	手順7では「新規」ボタンを使用して、以下のプロパティを持つ3つの名前付きバインド 変数を作成します。 名前 タイプ デフォルト CustName String   TotalLow Number 0 TotalHigh Number 50000
9.	ビュー・オブジェクト属性の場合と同様に、名前付きバインド変数のコントロール・ヒントを定義できます。 CustName変数を選択して「Control Hints」 タブをクリックします。Label TextフィールドにCustomer Nameを入力します。
10.	TotalLowについては、Label TextフィールドにOrder Total Greater Thanと入力します。
11.	TotalHighについては、Label TextフィールドにOrder Total Lower Thanと入力します。 「終了」をクリックします。
12.	アプリケーション・ナビゲータは次のようになります。

トピックに戻る

トピック・リストに戻る

ビュー・オブ ジェクトの改良およびアプリケーション・モジュールの更新

1.	アプリケーション・ナビゲータで、SearchOrdersノードを右クリックして、 コンテキスト・メニューから「Edit」を選択します。
2.	次に、OrderTotalが通貨として表示されるように、形式マスクを追加します。 属性ノードを開いてOrderTotalを選択 し、「Control Hints」タブで形式を「Currency」に設定しま す。 「OK」をクリックします。 注：ビュー・オブジェクト・レベルで形式が指定されているので、この特定のビュー定義を使用するコンポーネ ントのみが、この形式定義を継承します。
3.	アプリケーション・ナビゲータで、Ordersエンティティ・オブジェクトを右クリッ クして、コンテキスト・メニューから「Edit」を選択します。
4.	属性ノードを開いてOrderDateを選択し、 「Control Hints」タブで形式を「Simple Date」に設定し て、次の形式を指定します。 dd-MMM-yyyy 「OK」をクリックします。 注：エンティティ・オブジェクト・レベルで形式が指定されているので、このエンティティ定義に基づくビュー のすべてが、この形式定義を継承します。
5.	アプリケーション・ナビゲータでOrderEntryAMを右クリックし、コンテキス ト・メニューから「Edit」を選択します。
6.	アプリケーション・モジュールのデータ・モデルに新しいビュー・オブジェクトのインスタンスを取り入れる必要があります。 アプリケーション・モジュール・エディタでData Modelノードを選択して、使 用可能なオブジェクトのリストでModelLOVを選択します。「追加」ボタンをクリックして、Data Modelペインで選択肢を移動します。 SearchOrdersおよびPromotionsLOVで、 移動処理を繰り返します。 「OK」をクリックします。 注：インスタンス名フィールドを使用して、データ・モデルの選択されたビュー・オブ ジェクト・インスタンスの名前を変更できます。
7.	JDeveloperのメニュー･バーで「すべて保存」アイコンをクリックするか、メニューから「ファイル」 →「すべて保存」を選択します。
8.	これで、SearchOrdersビューがカスタマイズされ、アプリケーションの特定のニーズに対応するようになりまし た。次に、このデータ・モデルを使用するJSFページを作成します。

トピックに戻る

トピック・リストに戻る

検索ページの作成

次に、定義したばかりのSearchOrdersビューを使用して、ADF Business ComponentsモデルをベースとするADF Facesページの作成手順に進みます。

1.	アプリケーション・ナビゲータでDataModelプロジェクトを閉じて、UserInterfaceプロジェクトを開き ます。faces-config.xmlノードをダブルクリックして、ダイアグラムを開きます。 注：別の方法として、UserInterfaceノー ドを右クリックし、コンテキスト・メニューから「Open JSF Navigation」を選択できます。
2.	コンポーネント・パレットからJSFページ・アイコンをダイアグラムにドラッグ・ア ンド・ドロップします。
3.	ページの名前を検索に変更します JSFページ・アイコンをダブルクリックして、ページ作成ウィザードを起動します。
4.	新しいJSFを選択すると、JSF JSPの作成ウィザードが開きます。「次へ」をクリックして、JSF JSPの作成ウィザードの初期画面をスキップします（初期画面が表示された場合）。
5.	「JSP Page (*.JSP)」をSearch.jspのタイプとして選択しま す。その他はデフォルトのままにします。 「次へ」をクリックして続行します。
6.	次のページ（コンポーネント・バインディング）で、「UIコンポーネントを自動公開しない」 を選択します。他の値はデフォルトのままにします。 「次へ」をクリックします。
7.	次のライブラリが選択されていることを確認してください。 JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML 「次へ」をクリックして、上記のライブラリを受け入れます。
8.	「終了」をクリックして、デフォルトのHTMLオプションを受け入れ、新しいJSPを作成します。これで、 空のSearch.jspページができました。 次に、このページに、データ・バインドされたADF Facesコンポーネントを追加します。これらのコンポーネントは、選択の条件に適合する行を検索するための検索基準を表示します。
9.	データ・コントロール・パレットで、ノードのOrderEntryAMDataControl → SearchOrders1 → Operationsを開いて、ExecuteWithParamsを選択 します。
10.	ExecuteWithParamsをこのページにドラッグ・アンド・ドロップして、 コンテキスト・メニューで「作成」→「パラメータ」→「ADFパラメータ・フォーム...」 を選択します。 Edit Form Fieldsダイアログが表示されます。 「OK」をクリックします。 エディタでページが表示されます。
11.	データ・コントロール・パレットでSearchOrders1を選択し、パラメータ・ フォームの下へドラッグ・アンド・ドロップします。
12.	新しいダイアログで「作成」→「表」→「ADF Read Only Table」を選択します。
13.	表列の編集ダイアログで、「Enable Selection」と「Enable Sorting」の各ボックスをクリックします。 「OK」をクリックします。 これで、ADF Business Componentsビジネス・サービスにデータバウンドされた完全なJSFページができました。
14.	ツールバーの緑色の矢印をクリックして、検索ページを実行します。
15.	Customer Name、Total Low、 およびTotal Highの各フィールドに値を指定して検索ページを試し、「ExecuteWithParams」 ボタンをクリックします。 注：顧客名の検索は、大文字と小文字を区別しません。基本的なビュー・オブジェクトの WHERE句での指定に基づいて、名前または姓のいずれかを照合します。実際のアプリケーションでは、プロパティ・インスペクタを使用して、「ExecuteWithParams」 ボタンの名前を"探す"または"検索"に簡単に変更できます。
16.	さまざまな検索の組合せを試します。任意の列のヘッダーをクリックして、ソート機能をテストします。ヘッダーを2回ク リックすると、順序が昇順から降順に変わります。逆の場合も同じです。終了したら、ブラウザを閉じます。

トピック・リストに戻る

編集ページの作成

次に、構築したばかりのOrders、PromotionsLOV、ModelLOVの各ビューを 使用して、ADF Business ComponentsモデルをベースとするADF Facesページの作成手順に進みます。

1.	アプリケーション・ナビゲータでfaces-config.xmlノードをダブルク リックして、ダイアグラムを開きます。
2.	コンポーネント・パレットからJSFページ・アイコンをダイアグラムにドラッグ・ア ンド・ドロップします。
3.	ページの名前をEditOrderに変更します。 EditOrder jspページ・アイコンをダブルクリックして、ウィザードを起動 します。
4.	新しいJSFを選択すると、JSF JSPの作成ウィザードが開きます。「次へ」をクリックして、JSF JSPの作成ウィザードの初期画面をスキップします。
5.	JSP標準によって、作成するページは適格なXMLドキュメントになります。これらは、XMLツールを使用して簡単にペー ジのソースを解析できるため、特に便利です。また、ページでコードの混合を避けるベスト・プラクティスを促進します。JDeveloperは、*.jsp ページまたはXMLベースの*.jspxページのいずれかと連動します。ここでは、いわゆるJSPドキュメント、すなわちXMLベースのJSPページを使 用して、編集ページを構築します。 「JSP Document (*.JSPX)」をEditOrder.jspxの タイプとして選択します。その他はデフォルトのままにします。 「次へ」をクリックして続行します。
6.	次のページ（コンポーネント・バインディング）で、「UIコンポーネントを自動公開しない」 を選択します。他の値はデフォルトのままにします。 「次へ」をクリックします。
7.	次のライブラリが選択されていることを確認してください。 JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML 「次へ」をクリックして、上記のライブラリを受け入れます。「終了」をクリックして、デフォ ルトのHTMLオプションを受け入れ、新しいJSPXを作成します。
8.	これで、空のEditOrder.jspxページができました。次に、このページに データ・バインドされたADF Facesコンポーネントを追加します。これらのコンポーネントは、さまざまなUI表示を使用して、Orders情報を表示します。
9.	データ・コントロール・パレットでOrderEntryAMDataControlノードを開いて、OrdersView1を 空のページへドラッグ・アンド・ドロップします。
10.	新しいダイアログで「作成」→「フォーム」→「ADFフォー ム...」を選択します。
11.	Edit Form Fieldsで、OrderModeおよびPromotionId属 性を削除して、「Include Submit Button」を選択します。 「OK」をクリックします。
12.	データ・コントロール・パレットから、OrdersView1を開いてOrderMode属 性をページのOrder Total.labelフィールドの後にドラッグ・アンド・ドロップします。 コンテキスト・メニューで、「作成」→「単一選択」→「ADF選 択肢を1つ選択...」を選択します。
13.	リスト・バインディング・エディタで、「Dynamic List」を選択します。こ の特殊なケースでは、値の数が小さいため、固定リスト・オプションを使用してから、許可されている値のリストを指定することもできます。 List Data Sourceで、「追加」ボタンを クリックし、Add Data Sourceエディタで、ModelLOV1データ・コントロールを選択して、「OK」 をクリックします。 Base Data Source属性を「OrderMode」に、List Data Source属性を「Modevalue」に設定します。 リスト項目で、Display Attributeを「Modevalue」に、No Selection Itemを「Include Blank Item」に設定します。 「OK」をクリックします。
14.	データ・コントロール・パレットから、PromotionId列を選択してPromotionId属 性をページのOrderMode.labelフィールドの後にドラッグ・アンド・ドロップします。 コンテキスト・メニューで、「作成」→「単一選択」→「ADF選 択肢を1つ選択...」を選択します。
15.	リスト・バインディング・エディタで「Dynamic List」を選択します。 List Data Sourceで、「追加」ボ タンをクリックし、Add Data Sourceエディタで、PromotionsLOV1データ・コントロールを 選択して、「OK」をクリックします。 List Data Source属性を「PromoId」に設定します。リスト項目で、Display Attributeを「PromoName」に、No Selection Itemを「Include Blank Item」に設定します。 「OK」をクリックします。
16.	faces-configダイアグラムを再び開いて、コンポーネント・パレットで「JSF Navigation Case」を選択します。検索ページをクリックして、EditOrderペー ジに線を引きます。
17.	プロパティ・ペインでFrom Outcomeをeditに 設定して、ナビゲーションの名前を変更します。
18.	コンポーネント・パレットで「JSF Navigation Case」を選択しま す。EditOrderページをクリックして、検索ページに線を引きます。
19.	ダイアグラムで、結果に成功ラベルを選択し、その値を検索に 変更して、結果のナビゲーションの名前を変更します。
20.	EditOrderページを再び開いて、データ・コントロール・パレットで最下部までスクロール・ダウンして、Operationsノー ドを開き、Commitアクションを既存の「Submit」ボタンにドラッグ・ア ンド・ドロップします。 コンテキスト・メニューで「Bind Existing CommandButton」 を選択します。 プロパティ・ペインの「Commitボ タンで、actionをドロップダウン・リストの「検索」に設定します。次にDisabledプ ロパティを選択してReset to Defaultアイコンをクリックし、falseを 移入します。これによって「Commit」ボタンが常に選択可能になります。
21.	データ・コントロール・パレットのOperationsノードで、Rollbackを 「Commit」ボタンの横にドラッグ・アンド・ドロップします。 コンテキスト・メニューで「ADF Command Button」を選択します。 プロパティ・ペインにおいて、「Rollback」ボタンで、actionを ドロップダウン・リストの「検索」に設定します。次にDisabledプロパティ を選択してReset to Defaultアイコンをクリックし、falseを 移入します。これによって、「Rollback」ボタンが常に選択可能になります。
22.	ページ・フロー・ダイアグラムを再び開いて、ダイアグラム上の「検索」アイコンをダブ ルクリックして検索ページを開き、「Submit」ボタンを選択します。
23.	プロパティ・ペインで、テキストの値としてEditを入力し、ドロップダウン・リスト から「edit」を選択します。
24.	faces-configを再び開いて、検索ペー ジを選択して実行します。
25.	検索ページで行の1つを選択して、「Edit」ボタンをクリックします。
26.	編集ページが呼び出されていますが、検索ページから選択された行を表示していないという点に注意してください。検索ページ と編集ページの両方が同一のビュー・オブジェクトをベースとしていれば、検索ページの選択された行は編集ページの行にもなります。ただし、検索ページと編 集ページは異なるビュー・オブジェクトをベースにしているので、この2つのページの列は互いに無関係です。次の項では、検索ページで選択されている現在の 行と編集ページで編集する現在の行を同期化するために、宣言的な手順を構成します。 OrderModeおよびPromotionId属 性のドロップダウン・リストをテストします。 先にエンティティ・オブジェクト・レベルで指定したフォーマットに従って、Orderdateが 表示されますが、OrderTotalは、検索ページのように通貨のフォーマットを表示しません。これは、フォーマッ トがSearchOrderビューで定義され、OrderV1ビューで定義されなかったためです。
27.	ブラウザを閉じて、JDeveloperに戻ります。

トピック・リストに戻る

検索ページと編集ページの同期化

検索ページで選択された情報を、編集ページで表示されている情報と同期化する必要があ ります。

検索ページのEditボタンを使用して、現在選択されている行のキーを変数に割り当て ることで同期化を実行できます。編集ページは、ページを表示する前に、現在の行を設定するため、この変数を参照します。

次に、テストのプロセスを段階的に説明します。

1.	設計エディタで検索ページを開いて、「Edit」 ボタンをクリックします。
2.	ADF Facesによって、プロセスは簡単で宣言的になり、リンクまたはボタンをクリックすると、アプリケーション変数の値が自動的に設定されます。ここでは、 検索ページのEditボタンにSetActionListenerコンポーネントを追加して、変数を現在選択されている行のキーの値に設定します。この キーは行を一意に識別します。 構造ペインでedit commandButtonを右クリックして、コンテキスト・ メニューから「Insert Inside」→「ADF Faces Core」→「SetActionListener」 を選択します。
3.	Insert SetActionListenerダイアログで次の値を入力します。 From #{row.rowKeyStr} To #{processScope.orderKey} 「OK」をクリックします。 注：標準のJSF式言語（EL）の構文を使用して、 SetActionListenerのFromおよびToのプロパティを指定します。 実行時にFrom式は評価され、その値は、To式が識別するプロパティまたは属性を設定するために使用されます。 #{row.rowKeyStr} 式は、表の現在の行にあるrowKeyStr という名前のプロパティを参照します。その値は、この行を表す一意のキーです。 #{processScope.orderKey}式 は、ADF Faces処理スコープ内の'orderKey'という名前の属性を参照します。処理スコープは、値が単一のリクエストよりも長く持続する必要があり（た とえば、forwardの代わりにredirectを使用してページをナビゲートする場合）、さらに値が関連するWebページの特定のセットに限定される 必要のある属性を保持します。'orderKey'という名前は、この属性が現在選択されている注文のキーを持っていることを明らかにするために作った名 前です。
4.	次に、ADFモデル・レイヤーによって提供される組込みのsetCurrentRowWithKeyアクションを使用し て、編集ページを構成し、このページが最初に表示されたときに編集する現在の行を宣言的に設定するようにします。これは、各ページのADFページ定義に保 存されているページのデータ・バインディング・メタデータ内で構成されます。 アプリケーション・ナビゲータでEditOrderノードを右クリックします。コンテ キスト・メニューから「Go to Page Definition」を選択します。
5.	次に、OrdersView1IteratorのsetCurrentRowWithKeyアクション・バインディングを 追加します。イテレータは、最初にデータ・コントロール・パレットからADF Formをドロップした際に、ページ定義内で自動的に作成されました。イテレータは、基本的なデータソースの現在の行を追跡し、「次へ」、 「戻る」、「setCurrentRowWithKey」、その他のユーザー・インタフェースを構築する一方で、多数の便利 な組込みの処理を提供します。 バインディング・ノードを右クリックします。コンテキスト・メニューから「Insert Inside bindings」→「action」を選択します。
6.	アクション・バインディング・エディタを使用して、Select an Iteratorフィールドで、ダイアログ下部のドロップダウン・リストから「OrdersView1Iterator」 を選択します。
7.	Select an Actionで、ドロップダウン・リストから「setCurrentRowWithKey」 を選択して、Valueフィールド内をダブルクリックします。次に、以下の値を入力します。 #{processScope.orderKey} 「OK」をクリックします。 注：組込みのsetCurrentRowWithKeyアクションは、現行にしたい列 のキーを表す'rowKey'という名前のパラメータを取ります。前述の手順で、検索ページの（「Edit」）ボタンを構成して、ADF Faces処理スコープで'orderKey'という名前の属性に現行の列のキーを保存しました。したがって、その列のキーの値をパラメータとして setCurrentRowWithKeyアクションに渡す必要があります。これを行うには、パラメータの値と同じEL式を使用します。 #{processScope.orderKey}
8.	JDeveloperメニュー・バーの「すべて保存」アイコンをクリックするか、メニューから「ファイル」 →「すべて保存」を選択します。
9.	構造ペインでexecutablesノードを右クリックして、コンテキスト・メニュー から「Insert inside executables」→「invokeAction」を選択し ます。
10.	ページ定義のアクション・バインディングは、それ自体では命令されるまでアクションを実行しません。アクション・バイン ディングは以下の3つの方法のいずれかで起動できます。 1. コードを記述して、プログラムで起動できます。 2. ユーザーがページのボタンまたはリンクをクリックしたときに、宣言的に起動できます。 3. ページがレンダリングされたときに宣言的に起動できます。ユーザーは何もクリックする必要がありません。 この場合、ページがロードされたときにアクションを自動的に発生させたいので、宣言的な方法でこれを実行するために、ページ定義の "executables"セクションでinvokeAction命令を構成します。 「Insert InvokeAction」ダイアログで次の値を入力します。 Id setCurrentRowFromOrderId Binds setCurrentRowWithKey （ドロップダウ ン・リストから） 注：ID名は、開発者が必要とする意味のある名前にできます。 「Advanced Properties」タブをクリックします。 注：デフォルトでは、ページがレンダリングされるたびに"invokeAction" が実行されます。これは、ページが最初にレンダリングされる場合、およびユーザーがページ上のボタンやリンクを使用するなど、その後の"ポストバック"イ ベントを処理した後でページがレンダリングされる場合などを含みます。ブール値のEL式を使用してオプションのRefreshConditionを指定す ることによって、invokeActionをいつ"作動"させるかを宣言的に構成できます。式の結果がtrueの場合、invokeActionは関連す るアクション・バインディングを起動します。式の結果がfalseの場合、invokeActionはスキップされ、関連するアクション・バインディング は起動されません。 後にポストバック・イベントを処理するときではなく、ページが最初にレンダリングされたときにアクション・バインディング をトリガーさせる必要があるので、EL式#{adfFacesContext.postback == false}を使用して、この作業を実行します。ページが最初にレンダリングされると、このポストバック・プロパティはfalseになります。 次の値を入力します。 Refresh ifNeeded Refresh Condition ${adfFacesContext.postback==false} 「OK」をクリックします。
11.	検索ページを選択し、実行します。
12.	検索ページで検索パラメータを指定し、「ExecuteWithParams」ボタン をクリックして問合せを実行します。詳細リストで行を選択し、「Edit」ボタンをクリックしてEditOrderペー ジを呼び出します。
13.	EditOrderページでOrderTotalの値を変更して、変更内容をコ ミットします。
14.	検索ページに元の検索リクエストの列が表示されます。以前に行った更新もページに反映されています。
	成功しました。これでOBEは完了です。

トピック・リストに戻る

まとめ

このチュートリアルでは、Oracle JDeveloper、ADF Business Components、およびADF Facesを使用して、エンドツーエンドのアプリケーションを作成しました。学習した内容は次のとおりです。

	ADF Business Componentsモデルの作成
	ADF Facesコンポーネントを使用したJavaServer Facesページの作成
	UIの要 素をカスタマイズするためのADF Business Componentsの使用
	ADF Facesアプリケーションの実行とテスト
	アプリ ケーションをカスタマイズするためのBusiness Componentsコントロール・ヒントの使用
	LOVおよび検証制御のための新しいBusiness Componentsの作成
	結合演算に基づく検索ページの作成
	編集ページの作成
	異なるビュー・オブジェクトをベースとする編集ページと検 索ページの同期化

トピック・リストに戻る

このアイコンの上にカーソルを置くと、すべてのスクリーンショットが非表示になります。