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」ラジオ・ボタンをクリックします。
   
   デフォルトの「One Column」Category、Type、Layoutを選択して、「OK」をクリックします。

   

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

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

   

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

   

   Edit Forms Detailsで、「Row Navigation」と「Submit Button」のチェック・ボックスを両方とも選択します。「OK」をクリックします。

   
   

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

    

11. Structureウィンドウで「Submit」ボタンを見つけて右クリックし、「Insert After Button」→「Button」を選択します。

    

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

    

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

    
    
    
    

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

    

15. プロパティウィンドウで、RollbackボタンおよびCommitボタンのDisabledプロパティをdefaultにリセットし、両方のボタンが常に選択可能になるようにします。
    
    プロパティ・フィールドの末尾にマウスを合わせると、水色の歯車アイコンが表示されます。この操作を行うには、この歯車アイコンをクリックします。

    
    
    

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

    

17. 「query.jsf」タブをもう一度ダブルクリックして、通常のサイズに戻します。

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

    

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

19. ページの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フレームワーク機能の一部について理解を深めます。Oracle ADF Facesコンポーネントの持つ宣言的な開発機能を活用し、Ajaxの他の機能を使用してページを機能強化します。

以降の手順では、Oracle ADF Facesが備える部分ページ・リフレッシュ機能を使用します。Salaryフィールドが更新されたときにAnnual Salaryが再計算されるようにします。また、更新時にページ全体をリフレッシュする必要はないため、変更されたフィールドだけをリフレッシュします。この動作を実現するために、Oracle ADF Facesの部分ページ・レンダリング（PPR）機能を使用します。

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

   

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

   

3. 設計エディタまたはStructureウィンドウで、AnnualSalaryフィールドを見つけます。BehaviorセクションでPartialTriggersプロパティを見つけて、右側の歯車アイコンをクリックし、「Edit」を選択します。

   

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

   

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

   

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

   

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

   

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

   

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

   

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

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

   

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

   

3. Structureウィンドウで「af:autoSuggestBeahvior」コンポーネントを選択します。プロパティ・インスペクタで、SuggestedItemsプロパティの値を#{bindings.JobId.suggestedItems}に設定します。値を直接入力するか、プロパティの横にある歯車アイコンをクリックしてMethod Expression Builderを使用できます。

   

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

   

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

   

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

   

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

   

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

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

1. DeptEmpPage.jsfファイルで、Employees表を囲むパネル・コレクションのmenusファセット内をクリックします。右クリックしてコンテキスト・メニューを表示し、「Insert Inside f:facet - menus」→「Menu」を選択します。

   

2. プロパティ・インスペクタで、TextプロパティをMy Optionsに設定します。

   

3. プロパティウィンドウの「Behavior」ノードを展開し、Detachableプロパティをtrueに設定します。

   

4. Structureウィンドウでメニュー・コンポーネントを右クリックし、「Insert Inside Menu」→「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 Menu Item」→「Menu Item」を選択します。

    

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

    

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

    

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

14. ページが表示されたら、新しい "My Options" メニューをクリックして分離します。
    
    「x」をクリックしてメニューを閉じます。

    

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

    

    Excelファイルにアクセスするには、ブラウザ・ウィンドウのファイルのダウンロードを受け入れる必要があります。ダウンロードしたファイルは、デフォルトの'ダウンロード'ディレクトリに格納されます。

    

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

    

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

    

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

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

   

2. 「CreateInsert」操作を、Structureペインのemployeesフォームのフッター・ファセット、af:panelGroupLayout - horizontalにドラッグします。ADF Buttonとして作成します。ヒント：「af:panelFormlayout -5」→「Panel Form Layout facets」→「af:panelGroupLayout - vertical」→「af:panelGroupLayout - horizontal」を展開します。

   

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フィールドはデフォルトで今日の日付に設定されるため、リフレッシュされません）。

    

11. コミットせずにブラウザを閉じます。

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

   

2. Create View Objectウィザードで、NameプロパティをEmpByEmailに設定し、データソースとして「Custom 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のテキストをEmailに設定します。

   

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

   

6. 作業内容を保存してからOracle ADF Model Testerを実行し、新しいビューをテストします。新しい「EmpByEmail1」ビューをダブルクリックし、変数に値を挿入するように指示されたらSKINGと入力して「OK」をクリックし、この電子メール・アドレスの結果を取得します（Oracle ADF Model Testerを実行するには、アプリケーション・モジュールを右クリックして「Run」を選択します）。
   

   
   
   
   

7. テスターにはKingのみが表示されます。

8. Oracle ADF Model Testerを閉じます。
   

このステップでは、再利用可能なページ断片を作成します。作成後、前のステップで作成したビュー・オブジェクトをページ断片に組み込み、最後にDeptEmpPageページでページ断片を使用します。

1. まず、このページ用の新しいタスク・フローを作成します。アプリケーション・ウィンドウで「ViewController」プロジェクトを右クリックし、「New」→「From Gallery」を選択します。

   

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」ボタンをクリックして、新しいEmpByEmail1データ・コントロールがリストに表示されることを確認します。

   

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

   
   

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

   

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

   

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

    

11. Data Controlsペインから、「EmpByEmail1」コレクションをボタンの下のページにドラッグします。ADF Formとして作成します。

    

12. 「Read-Only Form」を選択し、Create Formダイアログに表示されるその他のデフォルト値を受け入れます。「OK」をクリックします。
    作業内容を保存します。

    

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

    

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

    

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

    

15. これで、ページは次の画面のようになります。

    

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

    

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

    
    

18. 終了したら、ブラウザを閉じます。

このステップでは、パネル・スプリングボードをページの起動パッドとして使用します。ページとタスク・フローを作成したら、panelSpringboardコンポーネントを使用してこれらを組み合わせることができます。すべてのページは、バウンド・タスク・フロー内でページ断片としてパッケージ化し、リージョンとして追加する必要があります。それぞれのページまたはタスク・フローにはアイコンを関連付けることができます。また、アイコンが選択されたときの項目の動作を指定できます。

1. 次の一連の手順の準備として、アプリケーションにいくつかのアイコンを追加します。次の3つの画像をそれぞれ右クリックして、アプリケーションの../public_htmlディレクトリに保存します。
   
   

   
   
   
   

2. JDeveloperに戻り、「ViewController」プロジェクトを選択し、リフレッシュ・アイコンをクリックします。ドロップダウン・メニューで、「Refresh ViewController.jpr」を選択します。
   
   
   
   アプリケーション・ウィンドウに、先ほど追加した画像が表示されます。
   
   

これで、スプリングボードのコンポーネントを作成できる状態になりました。

最初に必要となる作業は、いくつかのページを作成し、それらをバウンド・タスク・フロー上にページ断片として配置することです。この作業には数種類の方法がありますが、そのうちの1つを説明します。

3. 「View Controller」プロジェクトを右クリックし、コンテキスト・メニューで「New」→「Page...」を選択します。

   

4. Departments.jsfという名前をつけ、空のページを使用してページを作成します。

   

5. Data Controlsパレットで「AppModuleDataControl」を展開し、「DepartmentsView1」をページにドラッグ・アンド・ドロップします。
   ポップアップ・メニューで「Table/List View」→「ADF Table...」を選択します。

   

6. Create Tableダイアログで、「OK」をクリックして、すべてのフィールドを受け入れます。

   

7. 結果のページは次のようになります。作業内容を保存します。

   

8. 「ViewController」プロジェクトを選択し、コンテキスト・メニューで「New」→「ADF Task Flow...」を選択します。

   

9. depts-task-flow-definition.xmlという名前をつけ、「Create with Page Fragments」チェック・ボックスの選択を解除します。「OK」をクリックし、タスク・フローを作成します。

   

10. アプリケーションウィンドウから「Departments.jsf」ページをタスク・フローの上にドラッグ・アンド・ドロップします。

    
    
    

    結果のページがバインド・タスク・フローの一部になります。

11. 次に、タスク・フローを右クリックし、「Convert To Task Flow With Page Fragments...」を選択します。
    
    後でパネル・スプリングボード・コンポーネントを含むページを作成します。その作成後に、このタスク・フローをリージョンとしてスプリングボード上に追加できます。
    
    
    
    
    ポップアップで、「OK」をクリックして変換プロセスを完了します。
    
    
    
    すべての作業内容を保存します。
    

次に、従業員のページおよびタスク・フローに対しても同じプロセスを実行します。そうすることで、スプリングボードに追加するための2種類のコンポーネントが作成されます。

12. 「View Controller」プロジェクトを右クリックし、コンテキスト・メニューで「New」→「Page...」を選択します。

    

13. Employees.jsfという名前をつけ、空のページを使用してページを作成します。

    

14. Data Controlsパレットで「AppModuleDataControl」を展開し、「EmployeeView1」をページにドラッグ・アンド・ドロップします。
    ポップアップ・メニューで「ADF Form ...」を選択します。

    

15. Create Formダイアログで、「Read-Only Form」チェック・ボックスを選択し、次のフィールドを削除します。
    
    JobId、Salary、CommissionPct、ManagerId、DepartmentId
    
    「OK」をクリックします。

    

16. 結果のページは次のようになります。
    
    作業内容を保存します。

    

17. 「ViewController」プロジェクトを選択し、コンテキスト・メニューで「New」→「ADF Task Flow...」を選択します。

    

18. emps-task-flow-definition.xmlという名前をつけ、「Create with Page Fragments」チェック・ボックスの選択を解除します。「OK」をクリックし、タスク・フローを作成します。

    

19. アプリケーションウィンドウから「Employees.jsf」ページをタスク・フローの上にドラッグ・アンド・ドロップします。

    
    
    

20. 次に、タスク・フロー内を右クリックし、「Convert To Task Flow With Page Fragments...」を選択します。
    
    前述のとおり、後でパネル・スプリングボード・コンポーネントを含むページを作成します。その作成後に、このタスク・フローをリージョンとしてスプリングボード上に追加できます。
    

    
    

21. ポップアップで、「OK」をクリックしてプロセスを完了します。

22. 作業内容を保存します。

23. スプリングボードを含むページを作成します。このページをViewControllerプロジェクトで作成し、springboard.jsfという名前をつけ、「Create Blank Page」ラジオ・ボタンを選択します。「OK」をクリックします。

    
    

24. Componentsウィンドウから、「Layout」ノードを展開して、Interactive Containers and Headersセクションまでスクロールします。次に、「Panel Springboard」を選択し、ページにドラッグ・アンド・ドロップします。

    
    

25. 「panelSpringboard」コンポーネントを選択し、プロパティウィンドウで、Display Modeをgridに設定します。

    
    

26. panelSpringboardコンポーネント内で右クリックし、「Insert Inside Panel Springboard」→「Show Detail Item」を選択します。
    
    
    
    もう1つの詳細項目をスプリングボードに追加します。

    
    

27. それぞれのshowDetailItemについて、プロパティ・インスペクタを使用してTextの値を設定します。
    
    showDetailItem 1 = Show Departments
    showDetailItem 2 = Employees
    
    作業内容を保存します。

    
    

28. それぞれのshowDetailItemについて、「Icon」プロパティを選択し、それぞれ次の画像名に設定します。
    
    Show Departments = 36-toolbox.png
    Employee = 19-gear.jpg
    
    プロパティを設定するには、カーソルをIconプロパティの右に移動して、青の歯車アイコンをクリックします。
    
    
    
    次に、「Edit」を選択します。

29. 
    
    

    適切な画像を選択し、「OK」をクリックします。

    
    
    

    画像を'resources'ディレクトリに格納するかを確認するプロンプトが表示されたら、「Yes」をクリックします。
    Save JSF Resource Fileでデフォルト・ネームを受け入れ、OKをクリックします。

    
    

次に、スプリングボード項目により起動されるページまたはタスク・フローを指定して関連付けます。そのためには、ページまたはタスク・フローをスプリングボード詳細項目の上にドラッグ・アンド・ドロップします。

30. 「depts-task-flow-definition」をShow Departments詳細項目の上にドラッグ・アンド・ドロップします。

    マウス・ボタンを離すと、項目の作成方法を指定するプロンプトが表示されます。ここでは、項目をRegionとして作成します。

    
    

31. 「emps-task-flow-definition」をEmployees詳細項目にドラッグし、Regionとして作成します。
    


Structureウィンドウは以下のイメージのようになります。


32. 作業内容を保存します。

    

33. 最後に、「springboard.jsf」ページを右クリックして、「Run」を選択します。

    
    

34. それぞれのアイコンをクリックして、スプリングボードで個々のタスク・フローをどのように起動できるかを確認します。

    
    
    

    1つの項目を選択すると、すべてのアイコンがブラウザの上部に移動し、その下にページ詳細が表示されます。

    
    
    

    別のアイコンをクリックすると、ページが切り替わります。

    
    
    
    

35. ブラウザを閉じて、JDeveloperを終了します。

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

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

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

• Developing Applications with Oracle JDeveloper
• Using ADF Data Controls
• Getting Started with ADF Faces
• Developing Fusion Web Applications with Oracle Application Development Framework