Oracle Application Development Frameworkを使用したRIA Webアプリケーションの開発

目的

このチュートリアルでは、データベースとやり取りするリッチ・ インターネット・アプリケーション（RIA）を構築する方法を説明します。 このアプリケーションの構築には、Oracle JDeveloper 11gバージョン11.1.1.2.0とOracle Application Development Framework（Oracle ADF）のフレームワークを使用します。その過程で、Oracle ADFビジネス・コンポーネント、Oracle ADF Faces Rich Clientコンポーネント、およびOracle ADFタスク・フローを使用して作業します。

所要時間

約2時間

トピック

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

	概要
	シナリオ
	前提条件
	新規Fusionアプリケーションとビジネス・コンポーネ ントの作成
	ビジネス・コンポーネントの改良
	JSF Webページの作成
	JSFページへのデータ・コントロールのバインド
	JSFページの強化
	さらに複雑なビジネス・サービスの追加
	ページ・フローの作成
	ADF Facesフレームワーク機能の使用
	読取り専用のビジネス・サービス、ページの断片および領域 の作成
	まとめ

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

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

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

 

概要

このチュートリアルでは、リッチ・インターネット・アプリケーションを構築する簡単なシナリオを説明します。 リッチ・インターネット・アプリケーションは、データベース表にアクセスするユーザー・インタフェースを提供します。 Oracle JDeveloper 11g Version 11.1.1.2.0とOracle ADF 11gを使用して、ビジネス・サービス、ユーザー・インタフェース、およびページ・フローを含む完全なアプリケーションを作成します。

このチュートリアルの目的は、Oracle ADFによって提供されるJava EEアプリケーション開発のための視覚的かつ宣言的なアプローチを説明することです。 チュートリアルを進める中で、Oracle ADFにより、低レベル・コードを記述する必要がなくなり、開発プロセスが加速することに注意してください。

トピック・リスト に戻る

シナリオ

このチュートリアルで作成するアプリケーションでは、部門と従業員に関する情報を表示します。 データベース内のデータの問合せおよび更新を実行できるように、複数のJSFページを作成します。

トピック・リストに戻る

前提条件

1.	Oracle JDeveloper 11g Version 11.1.1.2.0にアクセスできるか、またはインストール済みであること。この製品はOracle Technology Networkからダウンロードできます。
2.	このチュートリアルでは、Oracle Databaseの最新バージョンに付属するサンプルのHRスキーマを使用します。 セキュリティ上の理由により、通常、このスキーマはロックされています。 このため、次の手順でユーザーをアンロックします。 コマンドラインからsqlplusを起動し、システム・ユーザーとしてログインし、アカウントのパスワードを入力します。
3.	SQL>プロンプトで次のコマンドを入力します。 alter user HR identified by HR account unlock; コマンドが実行されたら、sqlplusとコマンドライン・ウィンドウを終了します。
4.	インストールで作成されたショートカットを使用して、Oracle JDeveloperを起動します。 旧バージョンから移行するよう指示された場合は、「No」を選 択します。 ロールを選択するよう指示されたら、「default role」を選択します。

トピック・リストに 戻る

新規 Fusionアプリケーションとビジネス・コンポーネントの作成

JDeveloperで作業する場合、アプリケーション内のプロジェクトとして作業を整理しま す。 JDeveloperには、アプリケーションおよびプロジェクトを作成するために利用できるいくつかのテンプレートが提供されています。 テンプレートは、さまざまな種類のアプリケーションを開発するうえで必要となる基本的なテクノロジーに基づいて事前設定されており、ニーズに適したテンプ レートを選択することで作業環境を構築できます。 その後で、設定を行って、使用する予定のその他のテクノロジーを追加できます。

最初の項では、Fusionテクノロジーを使用して新規アプリケーションを作成し、データベースに アクセスする再利用可能なビジネス・コンポーネントを作成します。
Oracle ADFビジネス・コンポーネントのテクノロジーを使用して、データベースの既存の表にJavaオブジェクトをマップします。

1.	アプリケーション・ナビゲータで、「New Application」 をクリックします。 または、メニュー・オプションの「File」→「New」を 選択して、新規アプリケーションを作成します。
2.	Create Fusion Web Applicationダイアログ・ボックスで、Application NameをHRSystemと指定します。 新しいアプリケーション名を入力すると、それに合わせてディレクトリが変更されます。 他の場所にファイルを作成するには、パスのC:\JDeveloper\myworkの部分を変更できます。 Application Package Prefixフィールドの値をdemoに設定します。 Application Templateで「Fusion Web Application (ADF)」テンプ レートを選択して、「Finish」をクリックします。 Fusion Webアプリケーションの開発用のガイドとして参照可能なチェックリストがOverviewペ インに表示されます。 チェックリストは、Fusion Webアプリケーションが作成されるとデフォルトで表示されます。
3.	アプリケーション・ナビゲータには、2つの新しいプロジェクトが表示されます。1つはModel、 もう1つはViewControllerです。
4.	チェックリストの概要で、「Connect to a Database」手順をクリックします。
5.	この手順の内容が展開され、このタスクの実行に必要な前提条件などの役立つ情報が表示されます。 「Create a Database Connection」ボタンをクリックします。
6.	作成する新規接続のプロパティを次のように指定します。 Connection Name HRConn Username hr Password hr データベースの正しいホスト、ポート、およびSIDを 示すように、Oracle (JDBC) Settingsを正確に入力します。 「Test Connection」ボタンをクリックして、成功したことを確認します。 確認したら、「OK」ボタンをクリックします。
7.	下矢印をクリックして、Connect to a Database手順の内容を閉じます。 Checklistペインで、Connect to a Database手順のステータスを「Done」 に設定します。
8.	「Build Business Services」手順をクリックして展開してから、「Go to Substeps」ボタンをクリックします。
9.	サブタスク・リストで、「Create Entity Objects and Associations」 サブタスクをクリックします。 それから、「Create Entity Objects and Associations」ボ タンをクリックします。
10.	Select Project for Actionダイアログで、「Model」プロジェクトを 選択します。
11.	Initialize Business Components Projectダイアログで、ConnectionがHRConnに なっているはずです。 「OK」をクリックします。

12.	Entity Objectsページで、「Query」ボタンをクリックし、データ・ディクショナ リを調べて利用可能な表を表示します。
13.	Availableリストから「DEPARTMENTS」表と 「EMPLOYEES」表を選択します。右矢印「」をクリックして、これらをSelectedリストに移動します。 この手順により、選択する表に基づいて、更新可能なエンティティ・オブジェクトが作成されます。 「Next」をクリックして続行します。
14.	Updatable View Objectsダイアログで、Departments (HR.DEPARTMENTS)とEmployees (HR.EMPLOYEES)をSelectedリストに移動します。 この手順により、以前に作成したエンティティ・オブジェクトで問合せを実行するための適合するビュー・オブジェクト（Departments1Viewと Employees1View）が作成されます。 「Next」をクリックして続行します。
15.	Read-Only View Objectsダイアログで、「Query」ボタンをクリックし、JOBSを Selectedリストに移動します。 この手順により、Jobs表に対する問合せを行う、読取り専用のビュー・オブジェクトが作成されます。 「Next」をクリックして続行します。
16.	Application Moduleダイアログで、「Finish」をクリックして、Model プロジェクトのビジネス・コンポーネントを作成します。
17.	チェックリストで、Create Entity Objects and Associations手 順のステータスを「Done」に設定します。 「Close Step 3」ボタンをクリックします。 注： 手順3.2、3.3、および3.4も完了しているため、これらのステータスもDoneに設定できますが、より高度なレベルで設定を行います。
18.	Build Business Services手順のステータスを、「Done」 に設定します。
19.	アプリケーション・ナビゲータで「AppModule」を右クリックし、「Run」 を選択して、アプリケーション・モジュール・テスターを起動します。 このテスターは、Swingベースの小さなアプリケーションです。これを使用して、作成したばかりのOracle ADFビジネス・コンポーネントをテストできます。
20.	Oracle Business Component Browserウィンドウで、「EmpDeptFkLink1」 ノードをダブルクリックすると、部門と従業員の詳細が表示されます。 Nextボタン「」を使用してレコードを移動し、マスター・ディテールが自動的に同 期される様子を観察します。
21.	マスター・ツールバーのSpecify View Criteria（双眼鏡アイコン）ボタン「」をクリックし、データの検索条件を入力し ます。 LocationIDフィールドに1700と入力し、「Find」ボタンをクリックして問合せを実行します。
22.	フォームにはこのロケーションの部門のみが表示されます。 Oracle Business Component Browserでいろいろな個所をクリックし、他のデータと、利用できる機能を表示させます。
23.	Oracle Business Component Browserウィンドウを閉じ、JDeveloperに戻って、JDeveloperメニュー・バーのSave Allアイコン「」をクリックするか、メニューから「File」→「Save All」を 選択します。

トピック・リストに戻る

ビジネス・コンポーネントの改良

このトピックでは、検証規則、書式設定、およびデフォルト値を追加して、ビジネス・サービスを改良 します。 検証規則を追加するには、次の手順を実行します。

1.	アプリケーション・ナビゲータで、「Employees1」エンティティ・オブジェクトを見つけ て、ダブルクリックします。オブジェクトが開いて編集できます。
2.	Employees1.xmlウィンドウで、「Attributes」ノードをクリックし、属性「Salary」 を見つけてクリックします。 ページを下にスクロールして、Validationセクションを見つけます。Addアイ コン「」をクリックして新しい検証規則を追加します。
3.	Add Validation Rule for: Salaryダイアログで、Rule Typeドロップダウン・リストから「Range」 を選択します。 ここで、他のさまざまなタイプの規則を定義できます。 Operatorフィールドはドロップダウン・リストのBetween値 のままにします。Minimum Valueフィールドに0と入力し、Maximum Valueフィールドに99000と 入力します。
4.	「Failure Handling」タブをクリックして、検証が失敗したときに表示されるエ ラー・メッセージを定義します。 Message Textフィールドに、"Salary out of range 0 to 99,000"などのエラー・メッセージを入力します。 「OK」をクリックします。
5.	次に、雇用日のフィールドにデフォルト値を追加します。これによって、新規従業員を作成するときに、デフォルト値として今日の日付が入 ります。 Employees1.xmlウィンドウに戻って、「HireDate」 属性を見つけてクリックします。 まだ表示されていない場合、[CTRL]+[Shift]+[I]キーを押して、プ ロパティ・ウィンドウを表示します。 ValueセクションでDefault Value Typeプ ロパティを見つけて、「Expression」を選択した後、Default Valueプ ロパティをadf.currentDateに設定します。 これにより、新しいレコードのデフォルト値が、確実に今日の日付に設定されます。
6.	属性のUI Hintsも指定して、UI Hintsが使用されるフォームやページでのデフォルトの表示方法を管理できます。 このチュートリアルでは、雇用日フィールドにデフォルトのフォーマット・マスクを追加します。ここで、ラベルやツールチップ・ヘルプも指定できます。 プロパティ・インスペクタのUI Hintsセクションで、Format Typeプ ロパティのドロップダウン・リストを見つけて「Simple Date」を選択します。 Formatプロパティで、MM/dd/yyyyと入力しま す。
7.	再度アプリケーション・モジュール・テスターを実行し（「AppModule」を右クリックして「Run」 を選択）、追加した新規検証、新しいレコードのデフォルト値およびUIヒントを確認します。 テスターでEmployeesViewの いずれかをクリックします。
8.	検証とエラー・メッセージを確認するために、salaryに範囲外の値を入力します。
9.	Insert Recordボタン「」をクリックして、定義したデフォルト値がHireDateフィールドに表示されることを確認しま す。 テスターを閉じます。
10.	JDeveloperメニュー・バーのSave Allアイコン「」をクリックするか、メニューから「File」→「Save All」を 選択します。

トピック・リストに戻る

JSF Webページの作成

JavaServer Faces（略称JSF）は、Webアプリケーションの開発を簡潔にする標準のJava EEテクノロジーです。
この項では、前項で作成したビジネス・コンポーネントを利用するJSFページを作成します。 データの表示や変更に使用できるフォームを作成する方法を学習します。 また、マスター・ディテール関係を利用して各部門の従業員データを表示します。 JSFページを作成するには、Oracle ADF Faces Rich Clientコンポーネントを使用します。このコンポーネントを使用すると、低レベルHTMLやJavaScriptコードを記述することなく、機能が豊 富なAjaxベースのWeb UIを作成できます。
アプリケーションのWeb部分は、ViewControllerプロジェクトと呼ばれる別のプロジェクトで開発されます。 モデル・レイヤーとユーザー・インタフェースを分離することによって、ビジネス・サービスの再利用が促進されます。

1.	新規Webページを作成することから始めます。 アプリケーション・ナビゲータで「ViewController」プロ ジェクト・ノードを右クリックし、「New...」を選択します。
2.	New Galleryウィンドウで、Web TierノードからJSFノー ドに移動し、「JSF Page」オプションを選択します。 「OK」をクリックします。
3.	Create JSF Pageダイアログ・ボックスで、ページ名をDeptEmpPage.jspxに 変更します。Page Templateのドロップダウン・ボックスで「Oracle Three Column Layout」 を選択して、Create as XML Documentチェック・ボックスが選択されていることを確認します。 「OK」をクリックします。
4.	このページがビジュアル・デザイン・ビューに表示されます。 ページ・テンプレートには3つの領域がありますが、必要なのは2つだけなので、3つめの領域を削除します。 一番右側のendと表示されている領域にカーソルを置き、右クリックして「Delete」 を選択します。 Structureペインで選択したaf:pageTemplateのプロパティ・インスペクタ で、領域を拡大するためにstartColumnSizeの値を350に設定します。
5.	このページにレイアウト・コンポーネントをいくつか追加します。 コンポーネント・パレット・ウィンドウで、「Layout」アコーディオンを展開します。「Panel Accordion」コンポーネントをクリックして、ページのStart領域にドラッグします。
6.	作成された「ShowDetails1」アコーディオンをクリックして、プロパティ・インスペクタ でTextプロパティをDepartmentsに変更します。
7.	新しい「Departments」アコーディオンを右クリックして、「Insert After Show Details Item - Departments」→「Show Detail Item」を選択します。 これによって、ページにアコーディオンがもう1つ追加されます。 このTextプロパティをMore Infoに変更します。 この方法は、デザイン・ビューで直接、コンテキスト・メニューを使用してページにコンポーネントを追加する別のやり方でした。
8.	Layoutコンポーネントから、「Panel Splitter」 コンポーネントをクリックして、ページのCenter領域にドラッグします。
9.	プロパティ・インスペクタで、新しいスプリッタのOrientationプロパティをverticalに 変更します。
10.	Layoutコンポーネントから、「Panel Collection」 コンポーネントをクリックし、ページのスプリッタ上部にあるfirst領域にドラッグします。
11.	Layoutコンポーネントから、「Panel Tabbed」 コンポーネントをクリックし、ページのスプリッタ下部にあるsecond領域にドラッグします。
12.	ページは次のようになります。 JDeveloperメニュー・バーのSave Allアイコン「」をクリックして、作業内容を保存します。

トピック・リストに戻る

JSFページへのデータ・コントロールのバ インド

次の手順で、作成したビジネス・コンポーネントをユーザー・インタフェースにバインドします。 このバインディングは、簡単なドラッグ・アンド・ドロップ操作で行います。内部では、Oracle ADFモデル・レイヤーが処理をしています。

1.	Page designペインで、「Departments」アコーディオンをクリックして展開し ます。
2.	アプリケーション・ナビゲータで、「Data Controls」アコーディオンを展開し、さらに 「AppModuleDataControl」を展開すると、この実習で最初に定義したビジネス・サービスが表示され ます。
3.	「Departments1View1」データ・コントロールをJSFページのDepartmentsア コーディオンにドラッグします。 作成するコンポーネントを選択するよう要求されたら、「Forms」→「ADF Read-only Form...」を選択します。
4.	Edit Form Fieldsダイアログで、「Include Navigation Controls」 チェック・ボックスを選択します。 「OK」をクリックします。
5.	Data Controlsアコーディオンで、「Departments1View1」 データ・コントロールを展開して、含まれているフィールドを表示させます。同時にEmployees1View3（各 部門の従業員用）データ・コントロールも表示させます。 これらは、マスターの部門に所属するディテールの従業員データです。これらはリンクされているので、このビュー・オブジェクトで表示される従業員データ は、閲覧している特定の部門に勤務する従業員のデータです。
6.	「Employees1View3」データ・コントロールをJSFページの右側上部にあるPanel Collectionにドラッグします。 作成するコンポーネントを選択するよう要求されたら、「Tables」→「ADF Read-only Table」を選択します。
7.	Edit Table Columnsダイアログで、「Row Selection」、「Sorting」、お よび「Filtering」の3つのチェック・ボックスを選択します。 「OK」をクリックします。
8.	「Employees1View3」データ・コントロールを今度は、JSFページの右側下部にあるタ ブにドラッグします。 作成するコンポーネントを選択するよう要求されたら、「Forms」→「ADF Form」 を選択します。
9.	Edit Form Fieldsダイアログで、「Include Submit Button」 のチェック・ボックスを選択します。 マウスと[Shift]キーを使用して、リストの下部にある「CommissionPCT」、 「ManagerId」、および「DepartmentId」の3つのフィールド を選択し、右側上部にあるDeleteボタン「」を押して削除します。 「OK」をクリックします。
10.	JSPページは次のようになります。
11.	JDeveloperメニュー・バーのSave Allアイコン「」をクリックして、作業内容を保存します。 JSFページで右クリックし、「Run」を選択します。 この操作はプロジェクトをコンパイルしてビルドし、統合されているOracle WebLogic Serverを起動してプロジェクトを実行します。 Webブラウザが開いて、ページが表示されます。 JDeveloperのログ・ウィンドウで、これらの手順の進行状況がわかります。
12.	ページがブラウザで表示されたら、スプリッタを使用して、部門データを表示するページ領域のサイズ を変更できます。 「Next」ボタンを使用して、部門データをスクロールします。 それに応じて、表やその下にあるフォームの従業員データは変化します。
13.	試しに従業員の1人のHireDateフィールドを、11/11/123な どの無効な日付に更新してみます。このフィールドを離れようとすると、エラー・メッセージが表示されます。 このフィールドの横にあるClockアイコンを使用して、ポップアップ・カレンダーを表示させま す。カレンダーから有効な日付を選択します。
14.	Salaryフィールドを更新して、-9など、前に作成した検 証規則に違反する値にします。「Submit」ボタンをクリックして、作成したエラー・メッセージを表示させます。
15.	部門50を閲覧すると、従業員表のデータをスクロールしていることに気がつきます。 表の列ヘッダーを1つクリックして、表のデータをソートします。
16.	表の列の見出しをクリックしてドラッグし、表の列の位置を変更します。 新しい列の順番は次のようになります。
17.	LastName列の上のFilterフィールドに、B%と入 力します。[Enter]キーを押して、表にフィルタをかけて、名前がBで始まる従業員のみを表示します。
18.	表にある別のメニューやボタンを操作して、他の機能を確認します。 終了したら、ブラウザを閉じてJDeveloper に戻ります。

トピック・リストに戻る

JSFペー ジの強化

次のいくつかの手順では、ページの従業員表を変更して列の選択が可能な機能を追加し、グラフ表示の ためにビジネス・コンポーネントをユーザー・インタフェースにバインドします。 このバインディングは、簡単なドラッグ・アンド・ドロップ操作で行います。内部では、Oracle ADFモデル・レイヤーが処理をしています。

1.	JDeveloperに戻り、JFSページのデザイン・エディタまたは構造ペインで「Employees Table」 を選択します。 表のColumnSelectionプロパティを「Single」 に設定します。
2.	次に、ページにデータのグラフ表示を追加します。これは、JSFコンポーネントのADFデータ可視化セットを使用して行います。 デザイン・エディタで、「More Info」アコーディオンをクリックして展開します。 次に、「Employees1View3」 データ・コントロールをMore Infoアコーディオンにドラッグします。 作成するコンポーネントを選択するよう要求されたら、「Graphs...」を選択します。 グラフ・コンポーネントは、Oracle ADF Faces Data Visualizationコンポーネントの1つです。 グラフは、PNGの静止画像あるいはインタラクティブなFlashコンポーネントとして表示されます。 グラフ・コンポーネントのプロパティを指定して、動作を制御できます。
3.	Component Galleryダイアログで、左側のグラフのリストから「Pie」を選択し て、グラフ・タイプとして再度「Pie」を選択します。 下部ペインで、3番目の Quick Start Layoutを選択します。 「OK」ボタンをクリックします。
4.	Create Pie Graphダイアログで、Pieフィールドのリストから「Salary」を 選択して、Slicesフィールドの「LastName」をドラッグ・アンド・ドロップします。 「OK」ボタンをクリックします。
5.	JDeveloperメニュー・バーのSave Allアイコン「」をクリックして、作業内容を保存します。
6.	ページ内で右クリックし、コンテキスト・メニューから「Run」を選択します。
7.	部門30を参照します。 Column SelectionをSingleに設定したため、表に追加された動作に注目してください。これらは、フリーズやラッ プなどで、列を選択すると利用できます。 列を選択して、「Freeze」ボタンをクリックしま す。 ここで、水平スクロール・バーを使用して、最右端の列を表示します。
8.	部門30を参照して、次に、「More Info」 アコーディオンを展開して、グラフと、マウスをグラフに合わせると表示されるポップアップに注目してください。 確認したら、ブラウザを閉じてJDeveloperに戻ります。

トピック・リストに戻る

さらに複雑なビジネス・サービスの追加

この項では、アプリケーションに新しいビジネス・サービスを追加して、従業員表のフィールドのサブセットを部門 表の部門名とともに表示させます。 計算フィールドも追加します。
Oracle ADFビジネス・コンポーネントを使用すると、宣言的な方法で、このような複雑で更新可能なコンポーネントを作成できます。

1.	アプリケーション・ナビゲータで、「demo.model」パッケージを右クリックして、「New View Object」を選択します。
2.	Nameダイアログで、NameフィールドをEmpDetailsと更新し、デフォルトの Updatable access through entity objectsの選択をそのままにします。 「Next」ボタンをクリックします。
3.	Entity Objectsダイアログで、まず「Employees1」を選択して右側の Selectedリストに移動し、次に「Departments1」エンティティを選択して右側の同じリストに追加し ます。 更新可能のチェック・ボックスにチェックが入っているのはEmployees1エンティティだけです。Departments1エンティティは、データの 読取りのみに使用されます。 「Next」をクリックします。
4.	Attributeダイアログで、次のEmployees属性を右側のSelectedリストに移 動します。 EmployeeId FirstName LastName Salary HireDate JobId Departmentsエンティティからは、次の属性を右側のリストに移動します。 DepartmentId DepartmentName この時点で、「Finish」ボタンをクリックして、ビュー・オブジェクトの作成を完了できます。
5.	次に、オブジェクトに計算属性を追加する方法を学習します。ここでは、年俸を示す属性を追加します。 EmpDetails.xmlエディタで、Attributesセク ションに切り替え、Addボタン「」をクリックして新しい属性を追加します。.
6.	New View Object Attributeダイアログで、次のフィールドを更新します。 フィールド 値 Name YearlySalary Type Number Value Type Expression Value Salary * 12 「OK」ボタンをクリックします。
7.	続く2～3の手順では、別の表に保存されている一連の値に基づいて、フィールドに値のリストを追加する方法を示します。 ここでは、職務表から、ありうる役職名の値のリストを追加します。 EmpDetails.xmlエディタで、View Accessorsセ クションに切り替えて、Addボタン「」をクリックして新しいビュー・アクセッサを追加します。
8.	View Accessorsダイアログで、JobsView1を右側に移動します。 「OK」ボタンをクリックします。
9.	EmpDetails.xmlエディタで、Attributesセクションに切り替えて、「JobId」 属性を選択します。List Of Valuesセクションで、Addボタン「」をクリックします。
10.	Created List of ValuesダイアログのList Data Sourceフィールドで「JobsView1_1」 を選択して、List Attributeフィールドで「JobId」を選択します。
11.	同じダイアログで「UI Hints」タブをクリックして、Default List Typeに「Input Text with List of Values」を選択し、JobTitle属 性を右側に移動します。 「OK」ボタンをクリックします。
12.	ユーザー・インタフェース開発者に公開したデータ・モデルに、作成した新しいオブジェクトを追加する必要があります。 アプリケーション・ナビゲータで、「AppModule」をダブルクリックして、編集用に開きます。エディタの「Data Model」セクションを選択します。
13.	「EmpDetails」ビュー・オブジェクトをクリックし、右に移動します。
14.	アプリケーション・ナビゲータで「AppModule」を右クリックし、「Run」 を選択して、アプリケーション・モジュール・テスターを起動します。 このテスターは、Swingベースの小さなアプリケーションです。これを使用して、作成したばかりのOracle ADFビジネス・コンポーネントをテストできます。
15.	「EmpDetails1」ビュー・オブジェクトをダブルクリックして、定義した機能をテストしま す。
16.	試しにSalaryフィールドに-3と入力してみます。この フィールドを離れると、エラー・メッセージが表示されます。 HireDateの日付の書式と、部門名および年俸が 表示されていることに注目してください。 JobIdの値のリストを起動して、新しい役職名を選択します。
17.	選択したジョブが移入されました。
18.	変更をコミットせずに、Business Components Testerウィンドウを閉じて、 JDeveloperに戻ります。JDeveloperメニュー・バーのSave Allアイコン「」をクリックして、作業内容を保存します。

トピック・リストに戻る

ページ・フローの作成

通常、Webアプリケーションには1ページ以上が含まれています。 次の項では、アプリケーションに別のページを追加し、Oracle ADFタスク・フローを使用して2ページ間のナビゲーション規則を定義します。 ページ・フローを追加してページ間を移動するには、以下の手順を実行してください。

1.	アプリケーション・ナビゲータのViewControllerプロジェクトで、Page Flowsノードの下にあるadfc-configファイルを見つけます。 このファイルをダブルクリックして、エディタで開きます。 ここで、アプリケーションのページ間のナビゲーションを定義します。
2.	「DeptEmpPage.jspx」ファイルをアプリケーション・ナビゲータから空 白のadfc-configダイアグラムにドラッグ・アンド・ドロップします。
3.	コンポーネント・パレットから「View」コンポーネントをドラッグして、adfc-config ダイアグラムにドロップします。名前をqueryに変更します。 これが、今から作成する新しいJSFページになります。
4.	コンポーネント・パレットから「Control Flow Case」を選択した後に、「DeptEmpPage」 をクリックしてqueryページまで線をドラッグします。 この線にgoQueryと名前をつけます。
5.	コンポーネント・パレットから別の「Control Flow Case」を選択して、queryペー ジからDeptEmpPageに、先ほどとは逆のフローを作成します。 このフローにはbackと 名前をつけます。
6.	ダイアグラムの「query」ビューをダブルクリックして、新しいページを作成します。 Create JSF Pageダイアログで、Page Templateオプションを使用して「Oracle Three Column Layout」を選択します。 「OK」をクリックします。
7.	Structureペインで、テンプレートから「end」および「start」 ファセットを選択して右クリックし、これらを削除します。
8.	Data Controlsペインで、「Refresh」ボタンをクリックすると、リストにEmpDetails1が 表示されます。
9.	「EmpDetails1」データ・コントロールを見つけて展開し、下にある「Named Criteria」ノードを展開します。 「All Queriable Attributes」 を選択し、新しいquery.jspxページのcenter領域にドラッグしま す。 作成するコンポーネントを選択するよう要求されたら、「Query」→「ADF Query Panel」を選択します。
10.	Data Controlsアコーディオンで、「EmpDetails1」データ・コントロール を選択し、ページのcenter領域にあるqueryコンポーネントの下にドラッグします。 作成するコンポーネントを選択するよう要求されたら、「Forms」→「ADF Form」 を選択します。 Edit Forms Fieldsダイアログで、「Include Navigation Controls」 と「Include Submit Button」のチェック・ボックスを選択します。 「OK」をクリックします。
11.	Structureペインで「Submit」ボタンを見つけて右クリックし、「Insert after af:command:Button - Submit」→「Button」を選択し ます。 プロパティ・インスペクタを使用して、新しいボタンのTextをBackに 変更し、Actionプロパティにはドロップダウン・リストから「back」を選 択します。 これによって、このボタンからページ・フローで定義したナビゲーションが実行されます。
12.	次に、トランザクション操作をページに追加して、変更をコミットおよびロールバックできるようにします。 Data Controlsパレットで、アプリケーション・モジュール・レベルの「Operations」ノードを開いて、コ ミット操作とロールバック操作を見つけます。 「Commit」操作をStructureペインのFirst Buttonの前にドラッグします。 ドロップ・ターゲットを要求されたら、「ADF Button」 を選択します。
13.	Rollback操作に対しても、同じステップを繰り返します。 プロパティ・インスペクタで、RollbackおよびCommitボ タンについて、Disabledプロパティを「default」に設定します。
14.	この段階で、「Query.jspx」タブをダブルクリックしてデザイン・エディタを最大化する と、ページは次のようになります。
15.	「DeptEmpPage.jspx」のタブをクリックする、またはアプリケーション・ナビゲータ からこのファイルを開いて、ファイルの編集に切り替えます。 このファイルや他の任意のファイルに素早くナビゲートするには、JDeveloperの右上にあるGlobal Findボックスにファイル名をタイプします。 それからファイル名をクリックして、エディタで開きます。
16.	Page Designで、「Departments」アコーディオンを展開します。 コンポーネント・パレットから、「Button」コンポーネントを選択して、ページのDepartmentsア コーディオンにあるFirstとPreviousボタンの間にドラッグします。 または、「First」ボタンを右クリックし、「insert after」→「button」を選択して新 しいボタンを追加できます。 プロパティ・インスペクタを使用して、ボタンのTextをQueryに 変更し、Actionプロパティ・タイプをgoQueryに変更するか、使用可能 なドロップダウン・リストから「goQuery」を選択します。 これによって、このボタンからページ・フローで定義したナビゲーションが実行されます。
17.	JDeveloperメニュー・バーのSave Allアイコン「」をクリックして作業内容を保存してから、DeptEmpPage.jspxペー ジを右クリックし、「Run」を選択します。
18.	ブラウザでページが表示されたら、「Query」ボ タンをクリックして新しいページに移動します。
19.	新しいQueryページで、JobIdフィールドの 横にある「magnifying glass」（虫眼鏡）アイコンをクリックし、検索フォームを表示させます。
20.	役職名がA%で始まる職務を検索します。 「Accountant」を選択し、「OK」 をクリックします。 Queryページで「Search」ボタンをクリッ クして、下のフォームに結果を返します。
21.	このフォームを使用して、検索条件の保存、さらに複雑な検索の作成、および従業員のデー タの更新を引き続き試すことができます。 作成したビュー・オブジェクトの定義（部門名のデータやJobIdの値のリストなど）と一致するデータのビューが、このフォームにどのように表示されるか に注目してください。 また、データに変更を加え、必要に応じて、トランザクションのコミットとロールバックを 実行できます。 ブラウザ・ウィンドウを閉じます。

 

トピック・リストに戻る

ADF Facesフレームワーク機能の使用

次の項では、Ajaxの追加機能を使用し、Oracle ADF Facesコンポーネントが提供する宣言的開発を活用して、ページを強化します。

	部分ページ・リフレッシュの使用
	ドロップダウン・メニューと操作コン ポーネントの使用

部分ページ・リフレッシュの使用

最初に、Salaryフィールドの変更に基づく、YearlySalaryフィールドの自動更新を追加します。 ページ全体をリフレッシュする必要がないので、Oracle ADF Facesが提供する部分ページ・リフレッシュ機能を使用します。
それには、Salaryフィールドをautosubmitと定義し、YearlySalaryフィールドがSalaryフィールドに依存するように定義し ます。

1.	デザイン・エディタでquery.jspxファイルを開き、「Salary」 フィールドを見つけてクリックします。 プロパティ・インスペクタ・ウィンドウで、Idプロパティの値をsalに 設定します。
2.	さらに、プロパティ・インスペクタのBehaviorセクションで、AutoSubmitプ ロパティを「true」に設定します。
3.	Structureパネルで、YearlySalaryフィールドを見つけます。 または、「query.jspx」 タブをダブルクリックしてウィンドウを最大化してから、デザイン・エディタでこのフィールドを見つけます。 BehaviorセクションでPartialTriggersプロパ ティを見つけて、右側の矢印をクリックし、「Edit」を選択します。
4.	Edit Propertyダイアログで、Salaryフィールドを見つけ、青い矢印を使用して右 に移動します。 「OK」ボタンをクリックします。
5.	JDeveloperメニュー・バーのSave Allアイコン「」をクリックして作業内容を保存し、ページを実行します。
6.	ページが表示されたら、「Query」ボタンをクリックしてQueryセクションを使用します。
7.	名前がA%で始まる従業員を探します。 SalaryとYearlySalaryの値に注目します。 .
8.	Salaryフィールドを更新して、フィールドの外側に移動します。 Salaryフィールドを離れると、YearlySalaryフィールドがすぐに変更されることを 確認します。
9.	ブラウザのウィンドウを閉じます。

トピックに戻る

トピック・リストに戻る

ドロップダウン・メニューと操 作コンポーネントの使用

この項では、ページにドロップダウン・メニューを追加し、Oracle ADF Faces操作コンポーネントをいくつか使用して、ページにJavaScriptベースの操作を追加します。これらの操作により、表データは、Excel スプレッドシートや印刷ページにエクスポートされます。

1.	デザイン・エディタでDeptEmpPage.jspxファイルを開き、Employees表を囲 むパネル・コレクションのmenusプレースホルダー領域内をクリックします。 右クリックしてコンテキスト・メニューを表示し、「Insert Inside Facet - menus」→「Menu」 を選択します。
2.	プロパティ・インスペクタで、TextプロパティをMy Optionsに 設定します。
3.	プロパティ・インスペクタのBehaviorセクションで、Detachableプ ロパティをtrueに設定します。
4.	Structureペインでメニュー・コンポーネントを右クリックし、「Insert inside af:menu - My Options」→「Menu Item」を選択します。 プロパティ・インスペクタを使用して、新しいメニュー項目のTextプロパティをExport to Excelに設定します。
5.	新しいメニュー項目Export to ExcelをStructureペインで選択した状態で、コンポーネント・パレットのADF Facesコンポーネントの「Operations」セクションを開きます。 「Export Collection Action Listener」コンポーネントを見つけてクリックします。 または、Structureペインのメニュー・オプションExport to Excelにドラッグします。
6.	ポップアップ表示されるダイアログで、ExportedIdフィールドの横にある下矢印をクリック し、「Edit」を選択します。
7.	Edit Propertyダイアログでページの構造をナビゲートして、PanelCollectionで 「table* -t1」を見つけてクリックします。 「OK」をクリックします。
8.	Typeドロップダウン・リストから「excelHTML」を 選択します。 「OK」ボタンをクリックします。
9.	メニューにオプションをもう1つ追加します。 Structureペインでメニュー・コンポーネント「Export to Excel」を右クリックし、コンテキスト・メニューから「Insert After af:commandMenuItem - Export to Excel」→「Menu Item」 を選択します。
10.	新しいメニュー・オプションのTextプロパティをPrintable Pageに設定します。
11.	コンポーネント・パレットのOperationsセクションから、「Show Printable Page Behavior」をクリックして新しいメニュー項目に追加します。 これは、作成した新しいメニュー・オプションにドラッグ・アンド・ドロップすることもできます。
12.	JDeveloperメニュー・バーのSave Allアイコン「」をクリックして作業内容を保存し、「Run」を選択します。
13.	ページが表示されたら、メニューを表示し、分離します。
14.	次に、作成したメニュー・オプションを1つ1つ起動します。 たとえば、Export to Excelを 起動します。 Excelファイルにアクセスするには、ブラウザ・ウィンドウのファイルのダウンロードを受け入れる必要があります。
15.	Printable Pageオプションを試します。 これで、ページを印刷できます。
	ブラウザ・ウィンドウを閉じます。

トピックに戻る

トピック・リストに戻る

読取り専用のビジネス・サービス、ページの 断片および領域の作成

次の2つの項では、再利用可能なページの断片を作成し、電子メールで従業員を検索できるようにします。 次に、他のJSFページでこのページ断片を使用します。

	パラメータに基づく問合せ専用のビジネス・サービス
	再利用可能なタスク・フロー、ページ断片および領域

パラメータに基づく問合せ専用のビジネス・サービス

まず、パラメータに基づく適切な問合せを提供する、Oracle ADFビジネス・コンポーネントの新しいビュー・オブジェクトを作成します。

1.	アプリケーション・ナビゲータで、「demo.model package」を見つけて右クリッ クし、「New View Object...」を選択します。
2.	Create View Objectダイアログで、NameプロパティをEmpByEmailに 設定し、ビュー・オブジェクトのタイプとして「Read-only Access through SQL Query」 ラジオ・ボタンを選択します。 「Next」をクリックします。
3.	Create View Objectダイアログのステップ2で、次の問合せを入力します。 select first_name,last_name from employees where email=:p_email ':' （p_emailの前）は、それが問合せに渡される変数であることを意味します。 「Test」ボタンをクリックして、問合せを検証します。 「OK」をクリックしてから、「Next」をクリックします。
4.	Create View Objectダイアログのステップ3で、「New」ボタンをクリックし て、新しいバインド変数を定義します。 Nameプロパティをp_emailに設定します。 「Control Hints」タブをクリックして、Label TextをEmailに 設定します。
5.	ダイアログのステップ8に到達するまで、「Next」をさらに 数回クリックして、すべてのデフォルトを受け入れます。 ここで、「Application Module」チェック・ボックスにチェックを入れて、新しいビューをデータ・モ デルに加えます。 「Finish」ボタンをクリックします。
6.	これで、アプリケーション・モジュール・テスターを実行できます。新しい「EmpsByEmail1」 ビューをダブルクリックすると、パラメータの値を入力するよう要求されます。 SKINGと入力し、「OK」 を押すと、この電子メールに対する結果を得ることができます。 別の値を試してみるには、「Edit」ボタンをクリックします。 テスターを終了します。

トピックに戻る

トピック・リストに戻る

再利用可能なタスク・フロー、 ページ断片および領域

この項では、再利用可能なページの断片を作成し、電子メールで従業員を検索できるようにします。 次に、他のJSFページでこのページ断片を使用します。 アプリケーションでは、同じページ断片を他の多くのページで使用できます。

1.	まず、このページ固有の新しいタスク・フローを作成します。 アプリケーション・ナビゲータで、「ViewController」プロジェクトを見つけて右クリックし、「New...」 を選択します。 Web TierのJSFカテゴリで、「ADF Task Flow」を選択します。 「OK」をクリックします。
2.	Create Task Flowダイアログで、File Nameプロパティをsearch-email-flow.xmlに 設定します。 Create as Bounded Task FlowとCreate with Page Fragmentsの両方のオプションが選択されていることを確認します。 「OK」をクリックします。
3.	作成した新しいフローのダイアグラム・エディタで、「View」コンポーネントをコンポーネント・ パレットから空白領域にドラッグして、名前をsearchEmailに変更します。 このフローで使用するのは1ページのみですが、複数ページを持つバウンド・タスク・フローを使用し、それらを他のJSFページに含めることもできます。
4.	新しい「searchEmail」ビュー・コンポーネントをダブルクリックして、ページを作成しま す。 表示されるダイアログですべてのデフォルトを受け入れて、ファイル名がsearchEmail.jsffであることを 確認します。 これにより、ページがページ断片として作成され、他のJSFページに含めることができます。 「OK」 をクリックします。
5.	ページの空白のデザイン・ビューが表示されます。 「Data Controls」アコーディオン を展開し、「Refresh」ボタンをクリックすると、新しいEmpByEmailデータ・コントロー ルがリストに表示されます。 作成した新しいビューを見つけます。 - 「EmpByEmail1」ビューと、その下にある「Operation」 ノードを開きます。 ExecuteWithParams操作を使用して、このビューに対して必要なパラメータを渡して 問合せを実行します。
6.	「ExecuteWithParams」操作を新しいページにドラッグして、ドロップ・オプション を選択するよう要求されたら、「Parameters」→「ADF Parameter Form...」を選択します。 p_email値の表示ラベルをデフォルトからEmailに変更します。 「OK」をクリックします。
7.	このページのデザイン・エディタで、「ExecuteWithParams」ボタンをクリックし、 プロパティ・インスペクタを使用してTextプロパティをFind Detailsに 変更します。
8.	Data Controlsアコーディオンから、「EmpByEmail1」ビューをボタンの下の ページにドラッグします。 ドロップ・オプションを選択するよう要求されたら、「Forms」→「ADF Read-only Form...」を選択します。 Edit Form Fieldsダイアログに表示されるデフォルトを受け入れて、「OK」をク リックします。 ページは次のように表示されます。
9.	これで新しいバウンド・タスク・フローにページ断片が含まれるようになりました。次に、完成したバウンド・タスク・フローを他のJSF ページに加えます。 アプリケーション・ナビゲータで、DeptEmpPage.jspxファイルを見つけて、ビジュアル・デザイン・エ ディタで開きます。 コンポーネント・パレットのLayoutセクションから、「Separator」コンポーネントをドラッグして、 DeptEmpPage.jspxページの左のアコーディオンにあるDepartmentsフォームの下にドロップし ます。
10.	次に、領域として作成した新しいフローを既存のページに追加します。 アプリケーション・ナビゲータから、「search-email-flow.xml」ファイルをドラッグして、 DeptEmpPage.jspxページの左のアコーディオンにある新しいセパレータの下にドロップします。 ドロップ・ターゲットを要求されたら、領域の作成を選択します。 ページは次のように表示されます。
11.	「Save All」ボタンを押して作業内容を保存してから、更新されたDeptEmpPage.jspxペー ジを実行します。 ブラウザに表示されるページで、Emailフィールドに電子メールの値を入力し、「Find Details」ボタンを押して、新しい機能を試します。 従業員の詳細情報が返されます。

トピックに戻る

トピック・リストに戻る

これで、完全なADFアプリケーションが完成しました。 Oracle ADFビジネス・コンポーネントを使用して、データベースにマッピングする簡単なビジネス・サービスと複雑なビジネス・サ－ビスを作成しました。 また、Oracle ADF Facesコンポーネントを使用して、Ajax機能を組み込んだリッチ・ユーザー・インタフェースを作成しました。 さらに、Oracle ADFタスク・フローを使用して、ページ・フローと再利用可能なページ領域を作成しました。 JDeveloperとOracle ADFを使用する間、コードを記述する必要がほとんどなかったことに注目してください。 これは、Oracle ADFをマスターするための第一歩です。詳しくは、http://www.oracle.com/technology/global/jp/jdev/index.htmlを 参照してください。

トピック・リストに戻る

まとめ

このチュートリアルでは、Oracle ADF Faces Rich Clientを使用してJSFページを作成し、いくつかの高度な機能を使用する方法について学習しました。

	新規Fusionアプリケーションとビジネス・コンポーネントの作成
	ビジネス・コンポーネントの改良
	JSF Webページの作成
	JSFページへのデータ・コントロールのバインド
	さらに複雑なビジネス・サービスの追加
	ページ・フローの作成
	ADF Facesフレームワーク機能の使用
	読取り専用のビジネス・サービス、ページの断片および領域の作成

トピック・リストに戻る

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