Oracle JDeveloper 11gにおけるバウンド・タスク・フロー、リー ジョン、ルーターの作業

目的

このチュートリアルでは、Oracle JDeveloper 11gを使用して、ビュー、 ルーター、オペレーション・コンポーネントを含むタスク・フローを作成します。 タスク・フローの各コンポーネントを作成したら、タスク・フローを既存のページのリージョンとしてバインドします。 データ・モデルでは、ビジネス・コンポーネントを使用します。 Webクライアントの場合は、JavaServer Faces（JSF）が使用されます。 ブラウズ・ページと編集ページはユーザー・インタフェースに含まれています。

所要時間

50分

トピック

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

	概要
	シナリオ
	前提条件
	バウンド・ タスク・フローの作成
	BrowseEmployeesページの作成
	そのほかのタスク・フロー・コンポーネントの作成
	リージョンとしてのタスク・フローの BrowseDepartmentsページへのバインド
	BrowseDepartmentsページの実行
	まとめ

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

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

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

概要

モデルはビジネス・コンポーネントによって、また、ビューとコントローラはJava Server Facesによって、それぞれ提供されます。

既存のアプリケーションには、ブラウズ・ページと編集ページの2つがあります。 ブラウズ・ページは部門リストを提供し、リストから部門を選択して部門詳細を編集できます。 編集ページは部門詳細を表示します。

既存のアプリケーションにおいて、BrowseDepartmentsページにタスク・フローをリージョンとし て追加し、機能を拡張します。 タスク・フローにはBrowseEmployeesページが含まれており、新しい社員の作成または既存の社員の編集がおこなえます。

トピック・リスト に戻る

シナリオ

ここでは、さまざまなコンポーネントが含まれるバウンド・タスク・フローを作成します。 ルーター、ビュー、オペレーションを使用して、タスク・フローで機能の参照、編集、作成ができるように設計します。 タスク・フローを作成したら、タスク・フローの各コンポーネントを作成し、BrowseDepartmentsページでタスク・フローをリージョンとして バインドします。

トピック・リストに戻る

前提条件

URL_Bookmarkハンズオンをすでに実施しているのであれば、その際のアプリケーションを続けて使用で きます。その場合は、前提条件の項をスキップし、直接" バウンド・タスク・フローの作成"の項に移動してください。

	必要なコンポーネントのダウンロードとJDeveloper 11gの起動
	スタートアップ・アプリケーションのアップロード
	データベース接続の作成
	スタートアップ・アプリケーションのテスト

トピック・リストに戻る

必要なコンポーネントのダウ ンロードとOracle JDeveloper 11gの起動

以下の手順で、JDeveloper 11gとこのチュートリアルで必要なそのほかのファイ ルをダウンロードします。

1.	Oracle JDeveloper 11g製品版にアクセスできるか、または インストール済みである必要があります。 この製品は、 Oracle Technology Networkからダウンロードできます。
2.	Oracle 10gまたは11gに付属のOracle Sample Schemaにアクセスできるか、またはインストール済みである必要があります。 このチュートリアルでは、HRスキーマを使用します。 とくにページは、実行時にDepartment表およびEmployee表と連動します。 HRスキーマのインストールおよびOracle JDeveloper 10g内における接続の作成手順は、次のURLを参照してください。 http://www.oracle.com/technology/obe/obe11jdev/11/common/connection11g.htm
3.	「 スタート」→「 すべてのプログラム」 →「 Oracle WebLogic」→「 JDeveloper Studio 11.1.1.0.0」を選択して、Oracle JDeveloperを起動します。
4.	Migrate User Settingsダイアログ・ボックスが開いたら、「 NO」 をクリックします。 ユーザー・ロールを設定するよう尋ねられたら、「 Default」 を選択します。 Tip of the Dayウィンドウを 閉じます。
5.	JDeveloper IDEが表示されます。

トピックに戻る

トピック・リストに戻る

スタートアップ・アプリケー ションのアップロード

コンポーネントを作成する前に、まずはスタートアップ・アプリ ケーションを開始する必要があります。 以下の手順を実行します。

1.	TaskFlowHandsOn.zipファイルをダウンロードします。 この リ ンクを右クリックしてコンテキストから「 対象をファイルに保存」を選択し、 TaskFlowHandsOn.zip ファイルを任意のローカ ル・ディレクトリにダウンロードします。
2.	任意のローカル・ディレクトリ（tempディレクトリなど）で、 TaskFlowHandsOn.zip ファ イルを解凍します。
3.	アプリケーション・ナビゲータで「 Open Application」 リンクをクリックします。 作業領域 c:\temp\ TaskFlowHandsOn\TaskFlowHandsOn.jws に 移動します。 「 Open」をクリックします。 プ ロジェクトを移行するか尋ねられた場合は、「 Yes」をクリックします。
4.	アプリケーションがOracle JDeveloperにロードされます。

トピックに戻る

トピック・リストに戻る

データベース接続の作成

HRスキーマにデータベース接続を作成します。 以下の手順を実行します。

1.	メニュー・バーから、「 View」→「 Database Navigator」 を選択します。
2.	Database Navigatorで「 TaskFlowHandsOn」を開き、「 HRConn」 エントリを右クリックして、コンテキスト・メニューから「 Properties」を選択します。
3.	Edit Database Connectionダイアログで、以下の値を入力します。 Connection Name HRConn UserName hr Password hr Deploy Password 選択します Driver thin Host Name localhost JDBC Port 1521 SIDまたは Service Name ORCL/XE
4.	「 Test Connection」ボタンをクリックします。 データベースが使用可能な状態であり、接続情報が適切な場合は、ステータス・ウィンドウに Success!と 表示されます。表示されたら、「 OK」をクリックします。 エラーが発生した場合、接続設定を確認します。必要に応じて変更を加え、接続を再度テストします。 それでも接続できない場合は、データベースに問題があるか、データベースが稼働していない可能性があります。
5.	アプリケーション・ナビゲータで、Application Resourcesパネルの「 Connections and Database」ノードを展開し、作成したHR接続を表示します。 「 HRConn」ノードを展開し、データ ベース・オブジェクトを表示します。

トピックに戻る

トピック・リストに戻る

スタートアップ・アプリケー ションのテスト

スタートアップ・アプリケーションは、DepartmentsおよびEmployeesエンティティ・オブジェ クト、さらにはそれらに対応するビュー・オブジェクトを使用します。

1.	アプリケーション・ナビゲータを開き、「 Model」プロジェクト・ノードを展開します。 既存のエンティティ、ビュー、リンク・オブジェクト、アプリケーション・モジュールを確認します。 モデル・プロジェクトには、アプリケーションに必要なすべてのコンポーネントが含まれています。
2.	アプリケーション・ナビゲータで「 AppModule」ノードを右クリックし、コンテキスト・メ ニューから「 Configurations」を選択します。
3.	Manage Configurationsダイアログで、「 AppModuleLocal」を選 択して「 Edit」をクリックします。
4.	Edit Business Components ConfigurationダイアログのAppModuleLocalで、接続タイプとして「 JDBC URL」、接 続名として「 HRConn」を選択します。 「 OK」をクリックし、もう一度「 OK」をクリックします。
5.	アプリケーション・ナビゲータで「 AppModule」を右クリックし、「 Run」 を選択します。
6.	Business Component Configurationダイアログで、「 Connect」 をクリックします。 ブラウザ・ウィンドウが開くまで待ちます。
7.	Oracle Business Component Browserで、「 DepartmentsView1」 をダブルクリックします。
8.	ナビゲーション・ボタンを使用して、部門を参照します。
9.	Oracle Business Component Browserウィンドウを 閉じます。
10.	「 ViewController」プロジェクト・ノードを展開します。 「 Web Content」→「 Page Flows」を展開し、「 adfc-config」 ノードをダブルクリックして、ページ・フロー・ダイアグラムを開きます。
11.	ページ・フローには、2つのページが表示されます。 BrowseDepartmentsページ と EditDepartmentページです。
12.	ページ・フロー・ダイアグラムを閉じます。

トピック・リストに戻る

バウンド・タスク・フローの作成

TaskFlowHandsOnアプリケーションをOracle JDeveloperにロードしたら、ビュー、ルーター、オペレーションを含むバウンド・タスク・フローを作成します。 それには、以下の手順を実行します。

1.	アプリケーション・ナビゲータで「 ViewController」ノードを右クリックし、コンテキ スト・メニューから「 New」を選択します。
2.	New Galleryで、「 Web Tier」→「 JSF」 ノードをクリックし、「 ADF Task Flow」を選択します。 「 OK」をクリックします。
3.	Create Task Flowダイアログで、ファイル名として employees-flow-definition.xmlと 入力します。 「 Create as Bounded Task Flow」を選択して、「 Create with Page Fragments」チェック・ボックスを選択します。
4.	新しい空のタスク・フロー・ダイアグラムが表示されます。 コンポーネント・パレットで View「 」コンポーネントを選択し、ダイアグラム上にドラッグ・アンド・ドロップします。
5.	デフォルト名を BrowseEmployeesに変更します。
6.	ダイアグラム上で新しく ビューを作成します。 名前を EditEmployeesに変更します。
7.	コンポーネント・パレットで Router「 」コンポーネントを選択し、ダイアグラム上にドラッグ・アンド・ドロップします。 名前を CreateEditに変更します。
8.	Data Controlsアコーディオンを開いて、「 AppModuleDataControl」 →「 DepartmentsView1」→「 EmployeesView3」→「 Operations」 ノードを展開し、「 CreateInsert」を選択してページへドロップします。
9.	コンポーネント・パレットから Control Flow Case「 」コンポーネントを選択し、「 BrowseEmployees」 ビューをクリックして「 CreateEdit」ルーターへドラッグ・アンド・ドロップします。 コントロール・フローの名前として createEditと入力します。
10.	次のコントロール・フローについても、前の手順を繰り返して作成します。 ソース ターゲット 名前 CreateEdit (Router) CreateInsert (Operation) create CreateEdit (Router) EditEmployees (View) edit CreateEdit (Router) BrowseEmployees unknown CreateInsert (Operation) EditEmployees (View) CreateInsert
11.	ダイアグラムは、以下のように表示されます。
12.	Data Controlsペインで「 Execute」オペレーションを選択し、ダイアグラムへド ラッグ・アンド・ドロップします。
13.	Data Controlsペインで「 setCurrentRowWithKey」オペレーション を選択し、ダイアグラムへドラッグ・アンド・ドロップします。
14.	コンポーネント・パレットから Control Flow Case「 」コンポーネントを選択して、次のコントロール・フローを作成します。   ソース ターゲット 名前 EditEmployees (View) Execute (Operation) execute Execute (Operation) SetCurrentRowWithKey (Operation) Execute SetCurrentRowWithKey (Operation) BrowseEmployees (View) SetCurrentRowWithKey
15.	この時点で、ダイアグラム全体は次のようになります。

トピック・リストに戻る

BrowseEmployees ページの作成

BrowseEmployeesページは、このタスク・フローのエントリ・ポイントとなります。ページをルー ター・コンポーネントへリンクしてみましょう。 それには、以下の手順を実行します。

1.	Employees-flow-definitionダイアグラムで「 BrowseEmployees」 ビューをダブルクリックします。
2.	Create New JSF Page Fragmentダイアログで「 OK」をクリックし、デ フォルト値を受け入れます。
3.	Data Controlsアコーディオンで「 AppModuleDataControl」→「 DepartmentView1」 を展開し、「 EmployeesView3」ノードを選択したら、ページへドラッグ・アンド・ドロップします。 コンテキスト・メニューから「 Tables」→「 ADF Read-only Table」 を選択します。
4.	Edit Table Columnsで「 Row Selection」オプションを選択したら、 [ Ctrl]を押しながら「 PhoneNumber」、「 JobId」、 「 CommissionPct」、「 ManagerId」、「 DepartmentId」 を同時に選択し、 Deleteボタン「 」をクリックします。 「 OK」をクリックします。
5.	コンポーネント・パレットのADF Faces Common Componentsグループから「 Button」 コンポーネントを選択して、Structureペインの「 af:table」ノードの下にドロップします。
6.	最後の操作を繰り返し、前のボタンの下に「 Button」コンポーネントをドロップします。
7.	「 commandButton1」を選択して、プロパティ・インスペクタのTextフィールドに Edit Employeeと入力したら、Actionプロパティで「 createEdit」を選択します。
8.	「 commandButton2」を選択して、プロパティ・インスペクタのTextフィールドに Create Employeeと入力したら、Actionプロパティで「 createEdit」を選択します。
9.	次に、[ Ctrl]を押しながら「 commanButtons」 を選択したら、右クリックしてコンテキスト・メニューから「 Surround With」を選択します。
10.	Surround Withダイアログで、「 Panel Group Layout」を選択し、「 OK」 をクリックします。
11.	プロパティ・インスペクタで、 Layoutプロパティの値として「 horizontal」 を選択します。
12.	次に、[ Ctrl]を押しながら「 af:table」と「 af:panelGroupLayout」 を選択したら、右クリックしてコンテキスト・メニューから「 Surround With」を選択します。
13.	Surround Withダイアログで「 Panel Group Layout」を選択して、「 OK」 をクリックします。
14.	プロパティ・インスペクタで、 Layoutプロパティの値として「 scroll」 を選択します。
15.	コンポーネント･パレットで「 ADF Faces」→「 Common Components」→「 Operations」を展開し、「 Set Action Listener」をドラッグして Edit Employeeボタン上にドロップし ます。
16.	Insert Set Action Listenerダイアログで、 Fromフィールドに #{'edit'}、 Toフィー ルドに #{pageFlowScope.action}を入力します。 [ Crtl]+[ C] を押して、Toフィールドのコンテンツをあとで使用できるようクリップボードへコピーします。 「 OK」をクリックします。
17.	コンポーネント･パレットで「 ADF Faces」→「 Common Components」→「 Operations」を展開し、「 Set Action Listener」をドラッグして Create Employeeボタン上にドロッ プします。
18.	Insert Set Action Listenerダイアログで、 Fromフィールドに #{'create'}と 入力し、クリップボードのコンテンツを Toフィールドにコピーします。 「 OK」をクリックします。
19.	Save All「 」アイコンをクリックして、アプリケーションを保存します。 これで、BrowseEmployeesページが定義されました。

トピック・リストに戻る

そのほかのタスク・フロー・コンポーネン トの作成

ルーターおよびそのほかのバウンド・コンポーネントを作成するには、以下の手順を実行します。

1.	「 employees-flow-definition」タブをクリックして、タスク・フロー・ ダイアグラムを再表示します。
2.	「 CreateEdit」ルーターをダブルクリックして、プロパティを開きます。
3.	プロパティ・インスペクタで、 default-outcomeドロップダウン・リストから「 unknown」 を選択します。 これにより、予期せぬ事態（ケース）が発生するとBrowseEmployeesページへ戻るようになります。
4.	そのほかのケースをルーターに追加するには、Casesセクションで Addボタン「 」をクリックして新しいケース条件を新たに作成します。
5.	expression列で、次の #{pageFlowScope.action eq 'edit'}構 文を入力します。 outcome列では、ドロップダウン・リストから「 edit」を選択します。
6.	Casesセクションで、 Add「 」ボタンをクリックして、新しいケースの条件を作成します。 expression列で、 #{pageFlowScope.action eq 'create'}構文を入力します。 outcome列では、ドロップダウン・リストから「 create」 を選択します。 ルーターは、押したボタンに関連する値に基づき、作成フローまたは編集フローを立ち上げます。
7.	タスク・フロー・ダイアグラムで「 EditEmployees」ビュー・アイコンをダブルクリック し、ページを作成します。
8.	Create New JSF Page Fragmentダイアログで「 OK」をクリックし、 デフォルト値を受け入れます。
9.	Data Controlsアコーディオンで「 EmployeesView3」を選択したら、空の ページへドラッグ・アンド・ドロップします。 コンテキスト・メニューから「 Forms」→「 ADF Form」を選択します。
10.	Edit Formダイアログで「 Include Submit Button」を選択し、「 OK」 をクリックします。
11.	EditEmployeesページで Submitボタンを選択して、プロパティ・インスペクタの Actionフィールドで「 execute」を選択します。
12.	コンポーネント・パレットで、「 Set Action Listener」を Submitボ タンにドラッグ・アンド・ドロップします。
13.	Insert Set Action Listenerダイアログで、 Fromフィールドの横にあ る「 Expression Builder」を選択します。
14.	Expression Builderダイアログで、「 ADF Bindings」→「 bindings」 →「 EmployeesView3Iterator」→「 currentRowKeyString」 を選択し、Expressionペインへ移動させます。 「 OK」をクリックします。
15.	Insert Set Action Listenerダイアログに戻り、 Toフィールドに #{pageFlowScope.rowKey}と 入力します。 「 OK」をクリックします。
16.	タスク・フロー・ダイアグラムに戻ります。 「 SetCurrentRowWithKey」オペ レーションを右クリックして、コンテキスト・メニューから「 Go To Page Definition」を選択しま す。
17.	Structureペインの「 SetCurrentRowWithKey」オペレーションで、「 bindings」 →「 setCurrentRowWithKey」を展開し、「 rowKey」を選 択します。 プロパティ・インスペクタの NDValueフィールドに #{pageFlowScope.rowKey}と 入力します。
18.	Page Definitionタブを閉じて、タスク・フロー・ダイアグラムに戻ります。

トピック・リストに戻る

リージョンとしてのタスク・フローの BrowseDepartmentsページへのバインド

作成したタスク・フローを、BrowseDepartmentsページ内のリージョンとして使用します。 それには、以下の手順を実行します。

1.	アプリケーション・ナビゲータで「 BrowseDepartments.jspx」ノードをダブ ルクリックして、エディタ内にページを開きます。
2.	アプリケーション・ナビゲータで、「 employees-flow-definition.xml」 を選択します。 BrowseDepartmentsページで一番右端へドラッグ・アンド・ドロップして、コンテキスト・メニューから「 Region」 オプションを選択します。
3.	Structureペインで「 af:region」を選択し、 mainコ ンポーネントと af:panelGroupLayoutコンポーネントの間へ移動させます。
4.	regionの上にある「 group」コンポーネントを右ク リックして、コンテキスト・メニューから「 Convert」を選択します。 Convert Groupダイアログで「 Panel Group Layout」を選択して、「 OK」 をクリックします。
5.	プロパティ・インスペクタのPanel Group Layoutで、「 scroll」を Layoutフィールドに選択します。
6.	Structureペインで「 panelGroupLayout」を選択し、「 region」 コンポーネントの上に移動させます。
7.	Structureペインは次のように表示されます。
8.	「 panelGroupLayout」→「 panelCollection」 コンポーネントを展開し、「 table」を選択します。 プロパティ・インスペクタの Behaviorタ ブで、RowSelectionとして「 single」を選択します。
9.	「 BrowseDepartments」ページを右クリックして、コンテキスト・メニューから「 Go To Page Definition」を選択します。
10.	Structureペインで「 executables」ノードを展開し、「 taskFlow - employeesflowdefinition1」を選択したら、プロパティ・インスペクタのRefreshフィールドで「 ifNeeded」 を選択します。
11.	「 taskFlow - employeesflowdefinition1」を右クリックして、 コンテキスト・メニューから「 Insert inside task flow」→「 parameters」 を選択します。
12.	「 parameters」ノードを右クリックして、コンテキスト・メニューから「 Insert inside parameters」→「 parameter」を選択します。
13.	Insert Parameterダイアログで、idフィールドに currencyと入力します。
14.	この時点で、ページ定義は次のように表示されます。
15.	「 currency」パラメータを選択した状態で、プロパティ・インスペクタにて valueフィー ルドの横にある下矢印をクリックして「 Edit」を選択します。
16.	Edit Propertyダイアログで「 ADF Bindings」→「 bindings」 →「 DepartmentView1Iterator」を展開し、「 currentRowKeyString」 を選択します。 「 OK」をクリックします。
17.	アプリケーション・ナビゲータで「 BrowseDepartments.jspx」ノードをダブル クリックし、ページのStructureペインを再度開いたら「 region」コンポーネントを選択します。次に、プ ロパティ・インスペクタの Behaviorタブの PartialTriggersフィー ルドの横で「 Edit」オプションを選択します。
18.	Edit Propertyダイアログで「 panelCollection*」を選択し、IDに p1と 入力したら[ Enter]を押します。
19.	Edit Propertyダイアログで「 table*」を選択し、IDに t1と 入力したら[ Return]を押します。 次に、「 table* -t1」コンポーネントを選択し、右矢印ボタン「 」をクリックして、選択されたペインの選択肢を移動します。 「 OK」をクリックします。
20.	Partial Triggersは、次のように表示されます。
21.	Save All「 」アイコンをクリックして、アプリケーションを保存します。

トピック・リストに戻る

BrowseDepartmentsページ の実行

これで、タスク・フローをリージョンとして BrowseDepartmentsページに統合できました。次に、ページを実行します。 以下の手順を実行します。

1.	BrowseDepartmentsページのエディタで右クリックし、コンテキスト・メニューから「 Run」 を選択します。
2.	ブラウザ内にページがロードされると、上部セクションに部門リストが表示され、下部セクションには関連する従業員が表示されます。
3.	リスト内の別の部門を選択すると、BrowseEmployeesリージョン内に関連する従業員が同期的に表示されます。
4.	ページ最下部までスクロールして、EmployeeのEditボタンおよびCreateボタンを表示させます。 リスト内の従業員を選択して、「 Edit Employee」ボタンをクリックします。
5.	Edit Employeeセクションで、値を変更（給与の更新など）して「 Submit」をク リックします。
6.	BrowseEmployeesセクションに戻り、「 Create Employee」ボタンをク リックします。
7.	Createフォームで新しい従業員を追加し、「 Submit」ボタンをクリックします。
8.	BrowseEmployeesセクションに戻ると、新しい従業員がリスト内に表示されます。
9.	「 Edit Employee」ボタンをクリックして、新規作成された従業員の詳細を確認します。
10.	希望する場合、プロパティをいくつか更新したら、「 Submit」ボタンをクリックして BrowseEmployeesページへ戻ります。
11.	ブラウザ・ウィンドウを閉じます。

トピック・リストに戻る

まとめ

このチュートリアルではタスク・フローを作成して、フロー内にビュー、ルーター、オペレーションを作成し、既存 ページにリージョンとして追加しました。 このチュートリアルで学習した内容は、以下のとおりです。

	タスク・フロー・ダイアグラムの作成
	タスク・フローのコンポーネントの作成
	タスク・フローのページへのバインド

トピック・リストに戻る

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