1. アプリケーション・ナビゲータのViewControllerプロジェクトで、Page Flowsノードの下にあるadfc-configファイルを見つけます。 このファイルをダブルクリックして、エディタで開きます。 このファイルにアプリケーションのナビゲーションを定義します。

   

2. 「DeptEmpPage.jsf」ファイルをアプリケーション・ナビゲータから空白の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ダイアログでラジオ・ボタンはデフォルトのFaceletsのままにして、「Quick Start Layout」ラジオ・ボタンを選択し、「Browse」をクリックします。

   

7. Component Galleryで、Categories、TypesおよびLayoutsをデフォルトのOne Columnのままにし、Optionsペインで「Apply Themes」チェック・ボックスを選択します。

   

   「OK」をクリックし、もう一度「OK」をクリックしてページを作成します。

8. このページに従業員検索機能を追加するには、Data Controlsアコーディオンを開いてEmpDetails1を見つけます （表示されない場合は「Refresh」ボタンをクリックします）。

   

9. 「EmpDetails1」データ・コントロールを展開し、その下にある「Named Criteria」ノードを展開します。 「All Queriable Attributes」を選択して新しいquery.jsfページにドラッグします。 「Query」→「ADF Query Panel」として作成します。

   

10. Data Controlsアコーディオンで、「EmpDetails1」データ・コントロールを選択し、ページのcenter領域にあるqueryコンポーネントの下にドラッグします。 「Form」→「ADF Form」として作成します。

    

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

    
    

11. 「panelFormLayout」を選択したまま、プロパティ・インスペクタで、Rowsプロパティを5に設定します。

    

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

    

13. プロパティ・インスペクタで、新しいボタンのTextをBackに変更し、Actionプロパティにはドロップダウン・リストから「back」を選択します。 これによって、ボタンをクリックすると、ページ・フロー・ダイアグラムで定義したナビゲーションが実行されます。

    

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

    
    
    
    

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

    

16. プロパティ・インスペクタで、RollbackボタンおよびCommitボタンのDisabledプロパティをdefaultにリセットし、両方のボタンが常に選択可能になるようにします。

    

17. 「Query.jsf」タブをダブルクリックして、設計エディタのページを最大化します。 ページは以下のようになります。

    

18. 「DeptEmpPage.jsf」タブをクリックしてページに戻ります。 このファイルや他の任意のファイルに素早くナビゲートするには、JDeveloperの右上にあるGlobal Findボックスにファイル名をタイプします。

    

    それからファイル名をクリックして、エディタで開きます。

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

    

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

    

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

    

22. ブラウザでページが表示されたら、「Query」ボタンをクリックして新しいページに移動します。 Searchページで「Advanced」をクリックして詳細な検索条件を表示します。

    

23. FirstNameフィールドはデフォルトのStarts withにしたまま、文字Gを入力します。
    「Search」をクリックします。下のフォームにGuy Himuroのレコードが表示されます。

    

24. このフォームを使用して、検索条件の保存、さらに複雑な問合せの作成、および従業員のデータの更新を試します。 作成したビュー・オブジェクトの定義（部門名のデータやJobIdの値のリスト、従業員の年間給与など）と一致するデータのビューが、このフォームにどのように表示されるか確認してください。
    データを変更し、必要に応じてトランザクションをコミットしたりロールバックしたりすることもできます。
    
    終了したらブラウザ・ウィンドウを閉じます。

次は、一連の手順を実行しながらADF Faces Frameworkの機能の一部について理解を深めます。 Oracle ADF Facesコンポーネントの持つ宣言的な開発機能を活用し、Ajaxの他の機能を使用してページを機能強化します。

以降のサブステップでは、Oracle ADF Facesが備える部分ページ・リフレッシュ機能を使用します。 詳細表示

アプリケーション要件として、Salaryフィールドが更新されたときは必ずAnnualSalaryフィールドが自動更新される機能を追加する必要があります。 ただし、更新時にページ全体をリフレッシュする必要はないため、部分ページ・リフレッシュを使用して、変更されたフィールドだけをリフレッシュします。

1. query.jsfファイルがまだ開いていない場合は、設計エディタで開きます。 「Salary」フィールドを選択します。 プロパティ・インスペクタで、idプロパティの値を「sal」に設定します。

   

2. さらに、プロパティ・インスペクタの「Behavior」ノードを展開し、AutoSubmitプロパティをtrueに設定します。

   

3. Structureウィンドウで、「AnnualSalary」フィールドを選択します （または、「query.jsf」タブをダブルクリックしてウィンドウを最大化してから、設計エディタでこのフィールドを見つけます）。
   BehaviorセクションでPartialTriggersプロパティを見つけて、右側の矢印をクリックし、「Edit」を選択します。

   

4. Edit Propertyダイアログで、Salaryフィールドを見つけ、青い矢印を使用して右に移動します。 「OK」をクリックします。

   

5. JDeveloperメニュー・バーのSave Allアイコン「」をクリックして作業内容を保存し、DeptEmpPage.jsfを実行します。

   

6. ページが表示されたら、Departmentsパネルの「Query」ボタンをクリックします。

   

7. Searchページで、名前がA%で始まる従業員を探します。

   

   SalaryとAnnualSalaryの値に注目します。

   

8. Salaryフィールドを更新して、別のフィールドにタブで移動します。 Salaryフィールドを離れると、AnnualSalaryフィールドがすぐに変更されることを確認します。 ただし、リフレッシュされるのはこのフィールドのみで、ページ全体はリフレッシュされません。

   

9. ブラウザを閉じます。
   

1. 
   queryページで「JobId」フィールドを選択します。

   

2. コンポーネント・パレットで「Operations」ノードを展開し、BehaviorセクションでAuto Suggest Behaviorを見つけます。 「Auto Suggest Behavior」操作をJobIdフィールド上にドラッグ・アンド・ドロップします。

   

3. Insert Auto Suggest Behaviorダイアログ・ボックスに#{bindings.JobId.suggestedItems}と入力します。 「OK」をクリックします。

   

4. 作業内容を保存し、queryページを実行します。

   

5. EmployeeIdフィールドに121と入力し、「Search」ボタンをクリックします。 Adam Frippのレコードで、JobIdフィールドに's'と入力して更新します。 's'で始まるいくつかの役職名が候補として表示されます。

   

6. 's'の後に'a'を追加し、候補リストが変更されることを確認します。

   

7. 残っている3つの選択肢から「Sales Representative」を選択し、フィールドに移入します。

   

8. 変更内容を保存せずにブラウザを閉じます。
   

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

1. DeptEmpPage.jsfファイルで、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」を選択します。

   

5. プロパティ・インスペクタで、新しいメニュー項目のTextプロパティをExport to Excelに設定します。

   

6. 新しいメニュー項目Export to ExcelをStructureウィンドウで選択した状態で、コンポーネント・パレットのADF FacesコンポーネントのOperationsノードに含まれる「Listeners」セクションを開きます。
   「Export Collection Action Listener」コンポーネントを見つけて、Structureウィンドウのメニュー・オプションExport to Excelにドラッグします。

   

7. Insert Export Collection Action Listenerダイアログで、ExportedIdフィールドの横にある下矢印をクリックし、「Edit」を選択します。

   

8. Edit Propertyダイアログでページの構造をナビゲートして、「table - t1」コンポーネントを見つけて選択します。 「OK」をクリックします。

   

9. Typeドロップダウン・リストから「excelHTML」を選択して「OK」をクリックします。

   

10. メニューにオプションをもう1つ追加します。 Structureウィンドウでメニュー・コンポーネント「Export to Excel」を右クリックし、コンテキスト・メニューから「Insert After af:commandMenuItem - Export to Excel」→「Menu Item」を選択します。

    

11. 新しいメニュー・オプションのTextプロパティをPrintable Pageに設定します。

    

12. コンポーネント・パレットのOperationsノードの下にあるBehaviorセクションで、「Show Printable Page Behavior」操作を選択して新しいメニュー項目に追加します。 つまり、作成した新しいメニュー・オプションにドラッグ・アンド・ドロップします。

    

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

14. ページが表示されたら、新しいメニューをクリックして分離します。

    

15. 次に、作成したメニュー・オプション（Export to Excelなど）を1つ1つ起動します。

    

    Excelファイルにアクセスするには、ブラウザ・ウィンドウのファイルのダウンロードを受け入れる必要があります。

    

16. Printable Pageメニュー・オプションを試します。

    

    これで、ページを印刷できます。

    

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

1. 「query.jsf」タブをクリックしてQueryページに戻り、Structureペインを開きます。 Data Controlsアコーディオンで「EmpDetails1」ノードを展開し、その下にある「Operations」ノードを展開します。 「CreateInsert」操作を選択します。

   

2. Structureペインの「CreateInsert」操作を、employeesフォームのフッター・ファセットのpanelGroupLayoutにドラッグします。 ADF Buttonとして作成します。

   

3. プロパティ・インスペクタで、ボタンのIdプロパティをCreateInsertに設定します。

   

4. さらに、プロパティ・インスペクタの「Behavior」ノードを展開し、PartialTriggersプロパティのドロップダウン・リストから「Edit」を選択します。

   

5. Editウィンドウで、ページのコンポーネントを下にスクロールし、CreateInsertボタンを表示します。 ボタンをSelectedペインへ移動します。

   

   「OK」をクリックします。 この操作により、CreateInsertコンポーネントは表をリフレッシュさせるトリガーとして定義されます。

6. 同様に、EmpDetails1からページ・フッターのpanelGroupLayoutにDelete操作をドロップして、Delete操作を追加します。 前回と同様、ADF Buttonとして作成します。

   

7. 2つのボタンはqueryページの下部に表示されます。

   

8. 作業内容を保存し、Queryページを実行します。

9. ページが表示されたら、LastNameフィールドにF%と入力し、「Search」ボタンをクリックします。 姓がFで始まる最初の従業員レコードが表示されます。

   

10. 「CreateInsert」ボタンをクリックします。 ページがリフレッシュされ、フィールドが消去されて新しいレコードを挿入できる状態になります（ただし、HireDateフィールドはデフォルトで今日の日付設定されるため、リフレッシュされません）。

    

 

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

   

2. Create View Objectウィザードで、NameプロパティをEmpByEmailに設定し、データソースとして「SQL Query」ラジオ・ボタンを選択します。 「Next >」をクリックします。

   

3. Create View Objectウィザードのステップ2で、次の問合せを入力します。

   select first_name,last_name from employees where email=:p_email

   p_emailの前の':'は、それが問合せに渡される変数であることを意味します。

   「Test and Explain」ボタンをクリックして、問合せを検証します。

   

   「Close」をクリックし、「Next >」をクリックします。

4. Create View Objectウィザードのステップ3で、「New」ボタンをクリックして、新しいバインド変数を定義します。 Nameプロパティをp_emailに設定します。

   

   「Control Hints」タブをクリックして、Label TextをEmailに設定します。

   

5. ウィザードのステップ8に到達するまで、「Next」をさらに数回クリックして、すべてのデフォルトを受け入れます。
   ここで、「Add to Application Module」チェック・ボックスにチェックを入れて、新しいビューをデータ・モデルに加えます。
   「Finish」ボタンをクリックします。

   

6. 作業内容を保存してからOracle Business Component Browserを実行し、新しいビューをテストします。 新しい「EmpByEmail1」ビューをダブルクリックし、変数に値を挿入するように指示されたらSKINGと入力して「OK」をクリックし、この電子メール・アドレスの結果を取得します。
   

   Business Componentテスターの実行方法。 詳細表示 アプリケーション・ナビゲータで「AppModule」ノードを右クリックし、コンテキスト・メニューから「Run」を選択します。
   
   
   
   

7. 別の値を試してみるには、「Edit Bind Variables」ボタンをクリックします。

   

   Oracle Business Component Browserを閉じます。
   

1. まず、このページ固有の新しいタスク・フローを作成します。
   アプリケーション・ナビゲータで「ViewController」プロジェクトを右クリックし、「New..」を選択します。

   

2. Web TierのJSF/Faceletsカテゴリで、「ADF Task Flow」を選択します。

   

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

3. Create Task Flowダイアログで、File Nameプロパティをsearch-email-flow.xmlに設定します。
   「Create as Bounded Task Flow」と「Create with Page Fragments」の両方のチェック・ボックスが選択されていることを確認します。

   

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

4. 設計エディタで、「View」コンポーネントをコンポーネント・パレットから空のダイアグラムにドラッグして、searchEmailという名前を付けます。 このフローで使用するのは1ページのみですが、複数ページを持つバウンド・タスク・フローを使用し、それらを他のJSFページに含めることもできます。

   

5. 新しい「searchEmail」ビュー・コンポーネントをダブルクリックして、ページ断片を作成します。
   表示されるダイアログですべてのデフォルトを受け入れて、ファイル名がsearchEmail.jsffであることを確認します。 これにより、ページがページ断片として作成され、他のJSFページに含めることができます。 「OK」をクリックします。

   

6. 設計エディタに空のページが表示されます。 必要に応じて「Data Controls」アコーディオンを展開し、「Refresh」ボタンをクリックして、新しいEmpByEmailデータ・コントロールがリストに表示されることを確認します。

   

7. 新しい「EmpByEmail1」ビューと、その下にある「Operations」ノードを開きます。 「ExecuteWithParams」操作を選択します。 この操作を使用して、このビューに対して必要なパラメータを渡して問合せを実行します。

   

8. 
   新しいページに「ExecuteWithParams」操作をドラッグし、ADF Parameter Form...として作成します。

   

9. Edit Form Fieldsダイアログで、p_email値の表示ラベルをデフォルトからEmailに変更します。 「OK」をクリックします。

   

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

    

11. Data Controlsアコーディオンから、「EmpByEmail1」ビューをボタンの下のページにドラッグします。 「Form」→「ADF Read-only Form..」として作成します。

    

12. Edit Form Fieldsダイアログに表示されるデフォルトを受け入れて、「OK」をクリックします。 作業内容を保存します。

    

    ページは次のように表示されます。

    

13. これで新しいバウンド・タスク・フローにページ断片が含まれました。次に、完成したバウンド・タスク・フローを他のJSFページに加えます。
    アプリケーション・ナビゲータで、DeptEmpPage.jsfファイルを見つけて、設計エディタで開きます（まだ開いていない場合）。 コンポーネント・パレットのLayoutセクションから、「Separator」コンポーネントをドラッグして、DeptEmpPage.jsfページの左のアコーディオンにあるDepartmentsフォームの下にドロップします。

    

14. 作成した新しいフローをRegionとして既存のページに追加します。
    アプリケーション・ナビゲータから、「search-email-flow.xml」ファイルをドラッグして、DeptEmpPage.jsfページの左のアコーディオンにある新しいセパレータの下にドロップします。 Regionとして作成します。

    

15. ページは次のスクリーンショットのようになります。

    

16. 作業内容を保存し、更新したDeptEmpPage.jsfページを実行します。
    ブラウザにページが表示されたら、Emailフィールドに電子メールの値を入力し、「Find Details」ボタンを押して、新しい機能をテストします。

    

17. 従業員名の情報が返されます。

    

このチュートリアルでは、データベースとやり取りする小規模なWebアプリケーションを作成しました。 このチュートリアルで学習した内容は、以下のとおりです。

• アプリケーションにデータを供給するビジネス・サービスの構築
• データ・バインドされたJSFページの作成
• より複雑な操作の追加によるページの機能強化
• 2つめのJSFページのアプリケーションへの追加と、ページ間のナビゲーションを定義するページ・フロー・ダイアグラムの作成
• パラメータに基づくビジネス・サービスを含む再利用可能なページ断片の作成

リッチWebアプリケーションの構築の詳細は、下記のWebサイトを参照してください。

• 『Oracle® Fusion Middleware User's Guide for Oracle JDeveloper』の"Developing Applications Using Web Page Tools"
• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1）』