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

目的

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

所要時間

約2時間

トピック

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

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

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

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

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

 

概要

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

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

トピック・リスト に戻る

シナリオ

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

トピック・リストに戻る

前提条件

1.

このチュートリアルでは、Oracle Databaseの最新バージョンに付属するサンプルのHRスキーマを使用します。
セキュリティ上の理由により、通常、このスキーマはロックされています。 このため、次の手順でユーザーをアンロックします。 コマンドラインからsqlplusを起動し、システム・ユーザーとしてログインし、アカウントのパスワードを入力します。

 
2.

SQL>プロンプトで次のコマンドを入力します。
alter user HR identified by HR account unlock;
コマンドが実行されたら、sqlplusとコマンドライン・ウィンドウを終了します。

 
3.

インストールで作成されたショートカットを使用して、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」をクリックします。

 
3.

アプリケーション・ナビゲータには、2つの新しいプロジェクトが表示されます。1つはModel、もう1つは ViewControllerです。 「 Model」プロジェクトをクリックしたあと、右クリックして「 New...」 を選択します。このとき、[Ctrl]+[N]を押すこともできます。

 
4.

New Galleryダイアログで、 Business Tierノードを見つけて、サブノード「 ADF Business Components」をクリックします。
右側の一番上にある「 Business Components from Tables」を選択し、「 OK」 ボタンをクリックします。 このオプションを使用すると、データベースの既存の表に基づいてコンポーネントを作成できます。

 
5.

Initialize Business Components Projectダイアログで、データベースへの新規接続を定義します。 Connectionフィールドの横にある 緑色の+ボ タン「 」をクリックします。

 
6.

作成する新規接続のプロパティを次のように指定します。

Connection Name HR
Username HR
Password HR

ローカルのOracle Database Express Edition（Oracle XE）に接続しない場合は、Oracle (JDBC) Settingsを適切に変更して、データベースの正しいサーバー、ポート、およびSIDを指定する必要があります。


「 Test Connection」ボタンをクリックして、成功したことを確認します。 確認したら、「 OK」 ボタンをクリックします。


7.

「 OK」ボタンを再度クリックし、Initialize Business Components Projectダイアログを閉じます。

 
8.

Entity Objectsページで、「 Query」ボタンをクリックし、データ・ディクショナ リを調べて利用可能な表を表示します。

 
9.

Availableリストから「 DEPARTMENTS」表と 「 EMPLOYEES」表を選択します。右矢印をクリックして、これらをSelectedリストに移動します。 この手順により、選択する表に基づいて、更新可能なエンティティ・オブジェクトが作成されます。 「 Next」をク リックして続行します。

 
10.

Updatable View Objectsダイアログで、 Departments1 (HR.DEPARTMENTS)と Employees1 (HR.EMPLOYEES)をSelectedリストに移動します。 この手順により、以前に作成したエンティティ・オブジェクトで問合せを実行するための適合するビュー・オブジェクトが作成されます。 「 Next」 をクリックして続行します。

 
11.

Read-Only View Objectsダイアログで、「 Query」ボタンをクリックし、 JOBSを Selectedリストに移動します。 この手順により、Jobs表に対する問合せをおこなう、読取り専用のビュー・オブジェクトが作成されます。 「 Next」 をクリックして続行します。

 
12.

Application Moduleダイアログで、「 Finish」をクリックして、Model プロジェクトのビジネス・コンポーネントを作成します。

 
13.

アプリケーション・ナビゲータで「 AppModule」を右クリックし、「 Run」 を選択して、アプリケーション・モジュール・テスターを起動します。 このテスターは、Swingベースの小さなアプリケーションです。これを使用して、作成したばかりのOracle ADFビジネス・コンポーネントをテストできます。

 
14.

Oracle Business Component Browserウィンドウで、「 EmpDeptFkLink1」 ノードをダブルクリックすると、部門と従業員の詳細が表示されます。 青色の矢印ボタンを使用してレコードを移動 し、マスター・ディテールが自動的に同期される様子を観察します。

 
15.

Specify View Criteria（双眼鏡アイコン）ボタン「 」をクリックし、データの検索条件を入力します。
LocationIdフィールドに 1700と入力し、「 Find」ボタンをクリッ クして問合せを実行します。

 
16.

フォームにはこのロケーションの部門のみが表示されます。

Oracle Business Component Browserでいろいろな個所をクリックし、ほかのデータと、利用できる機能を表示させます。

 
17.

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ヒントを確認します。 insert recordボ タン「 」を押して、新しいレコードを作成し、定義したデフォルト値をHireDateフィールドに表示するこ ともできます。

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」 を選択します。
ビジュアル・エディタ領域の使用を簡単にするには、ビジュアル・エディタ上部のドロップダウン・ボックスで定義されている解像度を"Full Screen Size"から実際の画面の解像度に変更します。こうすると、エディタでページをスクロールできます。

 
5.

このページにレイアウト・コンポーネントをいくつか追加します。
コンポーネント・パレット・ウィンドウで、「 Layout」アコーディオンを展開します。「 Panel Accordion」コンポーネントをクリックして、ページの Start領域にドラッグします。

 
6.

作成された「 ShowDetailItem 1」アコーディオンをクリックして、プロパティ・イン スペクタで 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アイコン「 」をクリックして、作業内容を保存します。

トピック・リストに戻る

トピック・リストに戻る

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

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

1.

アプリケーション・ナビゲータで、「 demo.model」パッケージを右クリックして、「 New View Object」を選択します。

 
2.

Nameダイアログで、Nameフィールドを EmpDetailsと更新し、デフォルトの Updatable access through entity objectsの選択をそのままにします。

「 Next」ボタンをクリックします。

 
3.

Entity Objectsダイアログで、まず「 Employees1」を選択して右側の Selectedリストに移動し、次に「 Departments1」エンティティを選択して右側の同じリストに追加し ます。
更新可能のチェック・ボックスにチェックが入っているのはEmployeesエンティティだけです。Departmentsエンティティは、データの読取 りのみに使用されます。

「 Next」をクリックします。

 
4.

Attributeダイアログで、次のフィールドを右側のSelectedリストに移動します。

  • EmployeeId
  • FirstName
  • LastName
  • Salary
  • HireDate
  • JobId
Departments1エンティティからは、次のフィールドを右側のリストに移動します。
  • DepartmentID
  • DepartmentName

この時点で、「 Finish」をクリックして、ビュー・オブジェクトの作成を完了できます。

 
5.

次に、オブジェクトに計算属性を追加する方法を学習します。ここでは、年俸を示す属性を追加します。
EmpDetails.xmlエディタで、 Attributesセクションに切り替え、 緑色の+ボ タン「 」をクリックして新しい属性を追加します。

 
6.

New View Object Attributeダイアログで、次のフィールドを更新します。

フィールド 値
Name YearlySalary
Type Number
Value Type Expression
Value Salary * 12
「 OK」ボタンをクリックします。

 
7.

続く2～3の手順では、別の表に保存されている一連の値に基づいて、フィールドに値のリストを追加する方法を示します。
ここでは、職務表から、ありうる役職名の値のリストを追加します。
EmpDetails.xmlエディタで、 View Accessorsセクションに切り替えて、 緑 色の+ボタン「 」をクリックして、新しいビュー・アクセッサを追加します。

 
8.

View Accessorsダイアログで、 JobsView1を右側に移動します。 「 OK」 ボタンをクリックします。

 
9.

EmpDetails.xmlエディタで、 Attributesセクションに切り替えて、「 JobId」 属性を選択します。 List Of Valuesセクションで 緑色の+ボタン「 」をクリックします。

 
10.

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.

変更をコミットせずに、Business Components Testerウィンドウを閉じて、JDeveloperに戻ります。JDeveloperメニュー・バーの Save Allアイコン「 」をクリックして、作業内容を保存します。

 

トピック・リストに戻る

ページ・フローの作成

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

ページ・フローを追加してページ間を移動するには、以下の手順を実行してください。

1.

アプリケーション・ナビゲータの ViewControllerプロジェクトで、 page flowsノードの下にある adf-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.

アプリケーション・ナビゲータで「 Data Controls」アコーディオンを展開します。 「 EmpDetails1」 データ・コントロールを見つけて展開し、下にある「 Named Criteria」ノードを展開します。 「 All Queriable Attributes」を選択し、新しいquery.jspxページのcenter領域にドラッグします。 （EmpDetails1がデータ制御パレットに表示されない場合は、データ制御パレットの内部を右クリックし、リフレッシュ・オプションを選択しま す。）
作成するコンポーネントを選択するよう要求されたら、「 Query」→「 ADF Query Panel」を選択します。

 
8.

Data Controlsアコーディオンで、「 EmpDetails1」データ・コントロール を選択し、ページのcenter領域にあるqueryコンポーネントの下にドラッグします。
作成するコンポーネントを選択するよう要求されたら、「 Forms」→「 ADF Form」 を選択します。

Edit Form Fieldsダイアログで、「 Include Navigation Controls」 と「 Include Submit Button」のチェック・ボックスを選択します。「 OK」 をクリックします。

 
9.

Structureペインで「 Submit」ボタンを見つけて右クリックし、「 Insert after af:command:Button - Submit」→「 Button」を選択し ます。

プロパティ・インスペクタを使用して、新しいボタンの Textを Backに 変更し、 Actionプロパティにはドロップダウン・リストから「 back」を選 択します。 （Actionプロパティでリストが使用できない場合は、値backをコード化します。） これによって、このボタンからページ・フローで定義したナビゲーションが実行されます。

 
10.

次に、トランザクション操作をページに追加して、変更をコミットおよびロールバックできるようにします。 データ・コントロール・パレットで、アプリケーション・モジュール・レベルの「 Operations」ノードを開い て、コミット操作とロールバック操作を見つけます。 「 Commit」操作をStructureペインの First Buttonの前にドラッグします。 ドロップ・ターゲットを要求されたら、「 Operations」 →「 ADF Button」を選択します。

 
11.

Rollback操作に対しても、同じステップを繰り返します。

 
12.

この段階で、Query.jspxタブをダブルクリックしてデザイン・エディタを最大化すると、ページは次のようになります。

 
13.

「 DeptEmpPage.jspx」のタブをクリックする、またはアプリケーション・ナビゲータ からこのファイルを開いて、ファイルの編集に切り替えます。
このファイルやほかの任意のファイルに素早くナビゲートするには、JDeveloperの右上にあるGlobal Findボックスにファイル名を入力してから、ファイル名をクリックしてエディタで開きます。


 
14.

コンポーネント・パレットから、「 Button」コンポーネントを選択して、ページの Departmentsア コーディオンにあるFirstとPreviousボタンの間にドラッグします。 または、「 First」ボタンを右ク リックし、「 insert after」→「 button」を選択して新しいボタ ンを追加できます。

プロパティ・インスペクタを使用して、ボタンの Textを Queryに 変更し、 Actionプロパティにはドロップダウン・リストから「 goQuery」 を選択します。 これによって、このボタンからページ・フローで定義したナビゲーションが実行されます。

 
15.

JDeveloperメニュー・バーの Save Allアイコン「 」をクリックして作業内容を保存してから、 DeptEmpPage.jspxペー ジを右クリックし、「 Run」を選択します。

 
16.

ブラウザでページが表示されたら、「 Query」ボ タンをクリックして新しいページに移動します。

 
17.

新しいQueryページで、 JobIDフィールドの 横にある虫メガネ・アイコンをクリックし、検索フォームを表示させます。

18.

役職名が Aで始まる職務を検索します。

「 Accountant」を選択し、「 OK」 をクリックします。
Queryページで「 Search」ボタンをクリックして、下のフォームに結果を返します。

 
19.

このフォームを使用して、検索条件の保存、さらに複雑な検索の作成、および従業員のデー タの更新を引き続き試すことができます。 作成したビュー・オブジェクトの定義（部門名のデータや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アイコン「 」をクリックして作業内容を保存し、ページを 実行します。

ページが表示されたら、Queryセクションを使用して、名前が Aで始まる従業員を探し、そのうち 1人のSalaryフィールドを更新します。

Salaryフィールドを離れると、 YearlySalaryフィールドがすぐに変更されることを 確認します。

ブラウザのウィンドウを閉じます。

トピックに戻る

トピック・リストに戻る

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

この項では、ページにドロップダウン・メニューを追加し、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」を見つけてクリックします。 「 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」ボタンをクリックして問合せを確認し、「 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」 を押すと、この電子メールに対する結果を得ることができます。

別の値を試すには、 :id アイコンの付いた青いボタンをクリックします。 テスターを終了します。

トピックに戻る

トピック・リストに戻る

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

この項では、再利用可能なページの断片を作成し、電子メールで従業員を検索できるようにします。 次に、ほかの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」アコーディオン を開き、作成した新しいビューを見つけます。 - 「 EmpByEmail1 」ビューと、その下にある「 Operation」 ノードを開きます。.

ExecuteWithParams操作を使用して、このビューに対して必要なパラメータを渡して 問合せを実行します。

 
6.

「 ExecuteWithParams」操作を新しいページにドラッグして、ドロップ・オプション を選択するよう要求されたら、「 Parameters」→「 ADF Parameter Form...」を選択します。
Edit Form Fieldsダイアログに表示されるデフォルトを受け入れて、「 OK」をクリックします。

Edit Form Fieldsダイアログで、「 OK」をクリックして、デフォルト値を受け入れ ます。

 
7.

このページのデザイン・エディタで、「 ExecuteWithParams」ボタンをクリックし、 プロパティ・インスペクタを使用して Textプロパティを Find Detailsに 変更します。

 
8.

Data Controlsアコーディオンから、「 EmpByEmails1」ビューをボタンの下 のページにドラッグします。 ドロップ・オプションを選択するよう要求されたら、「 From」→「 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/products/jdev/index.htmlを 参照してください。

トピック・リストに戻る

まとめ

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

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

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

JSF Webページの作成

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

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

ページ・フローの作成

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

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

トピック・リストに戻る

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