Oracle ADF開発の概要

目的

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

チュートリアルでは、Webアプリケーションを構築する簡単なシナリオを説明します。Webアプリケーションは、データベース表にアクセスするユーザー・インタフェースを提供します。Oracle JDeveloper 12c Version 12.2.1とOracle ADFを使用して、ビジネス・サービス、ユーザー・インタフェース、およびページ・フローを含む完全なアプリケーションを作成します。チュートリアルの目的は、Oracle ADFによって提供されるJava EEアプリケーション開発のための視覚的かつ宣言的なアプローチを説明することです。チュートリアルを進める中で、Oracle ADFにより、低レベル・コードを記述する必要がなくなり、開発プロセスが加速することに注意してください。

前提条件

このチュートリアルを完了するための前提条件は、以下のとおりです。

1：Oracle JDeveloper 12.2.1にアクセスできるか、またはインストール済みであること。この製品は、Oracle Technology Networkからダウンロードできます。任意のディレクトリにファイルをインストールしてください。このチュートリアルでは、このディレクトリをJDEVELOPER_HOMEと呼びます。

2：HRスキーマを含むOracleデータベースにアクセスできるか、またはインストール済みであること（HRスキーマはセキュリティのためにロックされている場合があります。この場合は、システム・ユーザーとしてSQLPlusにログインし、HRスキーマをアンロックします）。作成するページの例を下に示します。

必要なファイル	ファイルのダウンロード
作成するアプリケーションでは、部門と従業員に関する情報を表示します。データベース内のデータの問合せおよび更新を実行できるように、複数のJSFページを作成します。また、複数のタスク・フローの表示コンテナとして使用するページも作成します。最終的なアプリケーションを確認するには、「Download」ボタンをクリックして最終的なアプリケーションのzipファイルをダウンロードし、JDeveloperのmyworkフォルダに解凍してください。

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

このチュートリアルのパート1では、新しいFusion Webアプリケーションを作成し、データベースにアクセスする再利用可能なビジネス・コンポーネントを構築します。Oracle ADFビジネス・コンポーネントを使用して、データベース内の既存の表にJavaオブジェクトをマップします。

1. 「スタート」→「プログラム」→「JDEVELOPER_HOME」→「OracleHome」→「Oracle JDeveloper Studio」→「Oracle JDeveloper Studio」を選択して、JDeveloperを起動します。

   以前のJDeveloperインストールからプリファレンスをインポートするかどうかを尋ねるダイアログ・ボックスが開いたら、「NO」をクリックします。

2. Select Roleダイアログで、「Studio Developer (All Features)」を選択して、「OK」をクリックします。

   

   JDeveloper環境では、ユーザーのロールに基づくシェイピング機能を使用して環境を調整できます。具体的には、メニュー、プリファレンス、新規ギャラリ、およびダイアログ上の個々のフィールドから、それぞれのロールで不要な項目が削除されます。

   また、シェイピング機能を使用してツール内のダイアログ・フィールドのデフォルト値をコントロールすることもできます。JDeveloperを最初に起動する場合、ロールの選択を指示されます。このロールはJDeveloperの使用方法を表しています。"Java Developer"、"Database Developer"、"Customization Developer"のロールのいずれを選択するかによって、まったく異なる作業環境が得られます。

3. 以前のJDeveloperインストールからプリファレンスをインポートするかどうかを尋ねるダイアログ・ボックスが開いたら、「NO」をクリックします。

   

4. 使用状況の追跡ポップアップで、「OK」をクリックします。

   

5. ロードが完了したら、JDeveloper IDEが表示されます。JDeveloperを初めて開いた場合、Start Pageが表示されます。後でStart Pageを再表示する場合は、「Help」→「Start Page」を選択します。

   JDeveloperについて学習するためのさまざまなオプションが用意されています。これらのオプションを確認したら、タブ上の「X」をクリックしてStart Pageを閉じます（タブにマウスを合わせると、Xが表示されます）。

   

6. Applicationsウィンドウで「New Application」リンクをクリックします。

   

7. New Galleryで「ADF Fusion Web Application」を選択して、「OK」をクリックします。

   

8. JDeveloperによってFusion Webアプリケーションに必要な機能がロードされ、Create ADF Fusion Web Applicationウィザードが開きます。ウィザードのName your applicationページで、名前にHRSystemと入力します。必要に応じて、ファイルを作成するディレクトリ・パスを別の場所に変更しても構いません。

   Application Package Prefixフィールドの値をdemoに設定し、「Next」をクリックします。

   

9. Name your projectページで、Project NameがModel（デフォルト）になっていることを確認します。Fusion WebアプリケーションのProject FeaturesリストにADF Business ComponentsとJavaが含まれることを確認します。

   次に、「Next」をクリックします。

   

10. Configure Java settingsページでは、デフォルト・パッケージ、Javaのソース・パス、出力ディレクトリを定義できます。デフォルト値のままにして、「Next」をクリックします。

    

11. 2番目のName your projectページで、Project NameがViewControllerになっていることを確認します。Project Featuresリストをスクロールし、Fusion Webアプリケーションで使用できるテクノロジーの種類を確認します。

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

    

12. Configure Java settingsページで、デフォルト値を受け入れて「Finish」をクリックし、Fusion Webアプリケーションとプロジェクトを作成します。

    

13. 画面左のアプリケーション・ウィンドウに、HRSystemアプリケーションと2つのプロジェクトが表示されます。変更を保存します。

    この画面右側のチェックリストも確認します。 このチェックリストは、Fusion Webアプリケーションが作成されるとデフォルトで表示されます。このリストは、この種類のアプリケーション構築に関係するタスクを示すためのものです。次のステップでは、アプリケーションの開発中にどのようにチェックリストが使用されるかについて説明します。

    

ここでは、データベースに接続して、HRスキーマ表にアクセスするシンプルなバックエンド・ビジネス・コンポーネントを作成します。

1. Checklist Overviewで、「Connect to a Database」ステップをクリックします。

   

2. このステップの内容が開き、このタスクの実行に必要な前提条件や、タスクの実行方法に関する詳しい指示などの役立つ情報が表示されます。「Create a Database Connection」ボタンをクリックします。

   

3. HRスキーマに接続するためのプロパティを指定します。

   Oracle JDBC Settingsに適切な値を入力して、使用するデータベースに合ったホスト、ポート、SIDを指定します。「Test Connection」ボタンをクリックして、接続が成功することを確認します。

   「OK」をクリックして次に進みます。

   

4. 下矢印をクリックして、Connect to a Databaseステップの内容を閉じます。

   Checklistで、Connect to a Databaseステップのステータスを「Done」に設定します。

   

5. 「Build Business Services」ステップをクリックして展開し、「Go to Substeps」ボタンをクリックします。

   

6. サブステップ・リストで「Create Entity Objects and Associations」サブステップをクリックします。

   

7. Select Project for Actionダイアログで、「Model」プロジェクトを選択し、「OK」をクリックします。

   

8. Create Business Components from Tablesウィザードが開きます。Entity Objectsページで「Query」ボタンをクリックし、データ・ディクショナリを調べて利用可能な表を表示します。

   

9. Availableリストから「EMPLOYEES」表、「JOBS」表、「DEPARTMENTS」表を選択します。右矢印をクリックして、これらをSelectedリストに移動します。これにより、選択された表に基づく更新可能なエンティティ・オブジェクトが作成されます。

   次に、「Next」をクリックします。

   

10. ウィザードのEntity-based View Objectsページで、「DepartmentsView (Departments)」、「JobsView (Jobs)」、「EmployeesView (Employees)」をSelectedリストに移動します。この手順により、先ほど作成したエンティティ・オブジェクトに対する問合せに対応したビュー・オブジェクト（DepartmentsView、JobsView、EmployeesView）が作成されます。

    「Next」をクリックし、もう一度「Next」をクリックします。

    

11. Application Moduleページで「Finish」をクリックして、Modelプロジェクト内にビジネス・コンポーネントを作成します。

    

12. Checklistで、Create Entity Objects and Associationsステップのステータスを「Done」に設定します。

    

13. 「Close Step 3」ボタンをクリックします。

    

14. Build Business Servicesステップのステータスを「Done」に設定します。

    すべての作業内容を保存します。

    

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

    

16. Oracle ADF Model Testerウィンドウで、「EmpDeptFkLink1」ノードをダブルクリックすると、部門と従業員のデータが表示されます。「Next」ボタンを使用してレコードを移動し、マスター・ディテールが自動的に同期される様子を観察します。

    

    

17. マスター・ツールバーの「Specify View Criteria」ボタン（双眼鏡アイコン）をクリックし、データの検索条件を入力します。

    

    LocationIdフィールドに1700と入力し、「Find」ボタンをクリックして、問合せを実行します。

    

18. フォームにはこのロケーションにある部門のみが表示されます。「Next」ボタンを使用して、ロケーション1700に含まれる部門データ（例：Purchasing）をスクロールします。

    

    再度すべての部門にアクセスするには、検索条件のパラメータ値を削除する必要があります。

Oracle ADF Model Testerウィンドウを閉じ、JDeveloperに戻ります。JDeveloperメニュー・バーの「Save All」アイコンをクリックするか、メニューから「File」→「Save All」を選択します。

JavaServer Faces（JSF）は、Web開発を簡素化する標準Java EEテクノロジーです。ここでは、前のステップで作成したビジネス・コンポーネントを利用するJSFページを作成します。

データの表示や変更に使用できるフォームを作成します。また、マスター・ディテール関係を利用して、一部門の従業員データを表示します。このページの作成には、Oracle ADF Faces Rich Clientコンポーネントを使用します。このコンポーネントを使用すると、低レベルのHTMLやJavaScriptコードを記述せずに、AjaxベースのリッチWeb UIを構築できます。

以下の手順に従ってページを作成します。

1. Applicationsウィンドウで「ViewController」プロジェクト・ノードを右クリックし、「New」→「Page...」を選択します。

   

   このアプリケーションのWeb部分は、ViewControllerプロジェクトという名前の独立したプロジェクトで開発しますが、これは、このチュートリアルの前のパートでFusion Webアプリケーションを作成したときに作成したプロジェクトです。

   モデル・レイヤーとユーザー・インタフェースを別々のプロジェクトで開発して分離することで、ビジネス・サービス・レイヤーを再利用しやすくなります。

2. Create JSF Pageで、File NameにHR.jsfを指定し、Document TypeがFaceletsに設定されていることを確認します。

   テンプレートを使用してページを作成するために、「Reference ADF Page Template」ラジオ・ボタンを選択します。

   Templates列で「Tablet First Template」を選択し、「OK」をクリックします。

   

3. IDEにページが表示されるとき、デフォルトで中央部分はビジュアル・エディタになります。

   左下には、構造化形式でページが表示されます。

   選択項目のプロパティは、右下で変更できます。

   

4. Structureウィンドウで「f:view」→「af:document - HR.jsf」→「af:form」の順に開き、「af:pageTemplate」を選択します。

   Propertiesウィンドウで、endWidthプロパティに0pxと指定します。

   

5. Data Controlsウィンドウを使用して、ページにデータを追加します。

   Data Controlsウィンドウを開くと、ページの開発で使用できるビジネス・サービスが表示されます。

   これらの名前は、Modelプロジェクト内に作成したビュー・コンポーネントと一致しています。

   

   いずれかのノードを開くと、コレクション、属性、処理が表示されます。

   

6. Structureウィンドウで、「Template facets」ノードを開きます。ここが、ページ上でデータが表示される場所です。データ・コントロールを通じてモデル・コンポーネントを消費し、これらをページにバインドすることができます。

   Data Controlsウィンドウで「DepartmentsView1」ノードを選択します。このノードをStructureウィンドウにドラッグして、startファセットにドロップします。

   ポップアップ・メニューで「Table/List View」→「ADF List View...」を選択します。

   

7. レイアウトとして、2番目のオプションの「Panel Grid Layout」を選択します。次に、「Next」をクリックします。

   

8. 2つの列と1つの行を使用するように、グリッド・レイアウトを設定します。左側の数値を変更すると、右側のイメージに表示されるページの見た目が変わります。

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

   

9. Column 1がスペースの20%を使用し、Column 2が80%を使用するように設定します。「Next」をクリックします。

   

10. 最初の列にDepartmentIdを表示し、2番目の列にDepartmentNameを表示するように設定します。

    「Finish」をクリックして作業内容を保存します。

    

11. Structureウィンドウを以下のスクリーンショットのように開き、リスト・ビュー、グリッド・レイアウト、2つの列（20%と80%）、IDおよび部門名を確認します。

    

12. Structureウィンドウで「af:listView」を選択し、PropertiesウィンドウでSelectionに「single」を指定します。

    

13. 次に、「Behavior」ノードを開き、「SelectionListener」プロパティにカーソルを置きます。

    青色の歯車アイコンが右端に表示されます。このアイコンにマウスを合わせると、Property Menuツールチップが表示されます。

    このリストから、データ・コントロールを使用した組込み処理を選択できます。

    

    青色の歯車アイコンをクリックし、メニューから「Method Expression Builder...」を選択します。

    

14. Method Expression Builderで、「ADF Bindings」→「bindings」→「DepartmentsView1」→「treeModel」ノードを開き、「makeCurrent」を選択します。

    「OK」をクリックして、すべての作業を保存します。

    

ここでは、既存のページをテストします。JDeveloperからページを実行するのが初めてである場合、先に統合WebLogic Serverをインストールしておく必要があります。

1. 最初のステップでは統合WebLogic Serverをインストールします。すでにインストールしている場合は、ステップ3に進みます。

   「Run」メニューから「Start Server Instance」を選択します。

   

2. Create Default Domainポップアップで、パスワードの値を2回入力します。

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

   

   WebLogic Serverのインストールと起動が完了すると、Logウィンドウにメッセージが表示されます。

   

3. 次に、WebLogic Serverにページをデプロイします。

   ビジュアル・エディタ内を右クリックし、コンテキスト・メニューから「Run」を選択します。

   

   デプロイが完了すると、LogウィンドウにターゲットURLが表示されます。

   

4. ブラウザにページが表示され、2つの列（IDと部門名）が表示されます。任意のデータ・レコードを選択できますが、レコードを選択しても何も変わりません。次のセクションでこの処理を実装します。

   ブラウザ・ウィンドウを終了せず、開いたままにします。

   

ここでは、コンポーネントをいくつか追加してページを変更し、ページのレイアウトを決定します。はじめにダッシュボードを追加して、ページの全体的なレイアウトを設定します。次に、同期データを表示するコンポーネントを追加します。

1. JDeveloperに戻り、Structureウィンドウで「f:facet - center」を選択します。

   

2. ヘッダーのレイアウトを変更します。Componentsウィンドウで「Layout」ノードを開き、Interactive Containers and HeadersセクションにあるPanel Dashboardを見つけます。

   

   このレイアウト・コンポーネントをドラッグして、Structureウィンドウのf:facetHeaderにドロップします。

   

3. 次に、ComponentsウィンドウでPanel Boxというレイアウト・コンポーネントを見つけます。

   

   これをドラッグして、Structureウィンドウのaf:panelDashboardコンポーネントにドロップします。

   

4. さらに3つのPanel Boxをaf:panelDashboardに追加します。パネル・ボックスの数は合計で4つになります。

   

5. すべてのパネル・ボックスにプロパティを設定します。Structureウィンドウで、すべてのaf:panelBoxを選択します。

   Propertiesウィンドウで、AppearanceセクションのShowDisclosureをfalseに設定します。

   作業内容を保存します。

   

6. Structureウィンドウに戻り、「af:panelDashboard」を選択します。

   Columnsを2に、RowHeightを350pxに設定します。

   すべての作業内容を保存します。

   

7. ブラウザに戻り、ページを再ロードしてパネル・ボックスを確認します。

   

ここでは、従業員表を追加して列の選択機能を加えることで、ユーザー・インタフェースを改良します。具体的には、パネルのフィールド順序を変更し、グラフにビジネス・コンポーネントをバインドします。このバインディングは、簡単なドラッグ・アンド・ドロップ操作で行います。内部では、Oracle ADFモデル・レイヤーがデータ・バインディングを処理しています。

1. JDeveloperのStructureウィンドウに戻り、「af:panelBox - PanelBox1」を選択します。

   Textプロパティに「Employees」を指定します。変更を保存します。

   

2. 次に、Data Controlsウィンドウからデータを追加します。

   「AppModuleDataControl」→「DepartmentView1」ノードを開き、EmployeesView4を表示します。これらは、"マスター"である部門に所属する"ディテール"の従業員データです。コンポーネントは互いにリンクされているので、ビュー・オブジェクト内に表示される従業員は、選択（または表示）された部門に属する従業員になります。

   「EmployeesView4」をStructureウィンドウにドラッグし、af:panelBox - Employeesノードにドロップします。ポップアップ・メニューで「Table/List View」→「ADF Table...」を選択します。

   

3. Create TableペインのRow selectionで、「Single Row」を選択します。

   「Enable Sorting」、「Enable Filtering」、「Read-Only Table」チェック・ボックスを選択します。

   FirstName、LastName、Email以外の列をすべて削除します。「OK」をクリックします。

   

4. すべての作業内容を保存します。

   ページに新しいデータを追加したので、もう一度デプロイする必要があります。ページ内を右クリックして、「Run」を選択します。この操作は、プロジェクトのコンパイルとビルド、統合WebLogic Serverの起動、プロジェクトの実行を行います。デフォルトのWebブラウザが開き、ページが表示されます。JDeveloperのログ・ウィンドウで、これらの手順の進行状況がわかります。

   

5. 1番目のパネルに従業員レコードが表示されます。

   デフォルトでは、最初の部門（Administration）の従業員データがパネルに挿入されています。

   

   別の部門をクリックすると、自動的に従業員レコードが更新されます。

   

6. 「Shipping」部門を選択します。

   「FirstName」ヘッダーにマウスを合わせると、ソート・アイコンが2つ表示されます。上向きの三角形にマウスを合わせると、Sort Ascendingツールチップが表示されます。

   昇順アイコンまたは降順アイコンを選択すると、任意の項目でソートできます。

   

7. 「LastName」列をクリックしたままで左にドラッグし、FirstName列の前に配置します。

   

   

8. LastName列の上にあるフィールドにカーソルを置きます。"M"と入力して[Enter]キーを押すと、"M"で始まる姓を持つ従業員のみが表示されます。

   

9. JDeveloperに戻り、2番目のパネル・ボックスを変更します。

   2番目のパネル・ボックスを選択し、TextプロパティにDetailsを指定します。

   

10. Data Controlsウィンドウで、先ほどと同じ「EmployeesView4」コレクションをドラッグし、Detailsパネル・ボックスにドロップします。

    ポップアップ・メニューで「ADF Form...」を選択します。

    

11. Create Formペインで、FirstName、LastName、Email、PhoneNumber、HireDate、JobId、Salary以外のフィールドを削除します。

    「OK」をクリックして作業内容を保存します。

    

12. JDeveloperのメニュー・バーのすぐ下にある再コンパイル・ボタンをクリックして、変更を反映します。

    

    ブラウザ・ページを再ロードし、選択した従業員の詳細データが2番目のパネルに表示されることを確認します。

    

13. 別の従業員を選択して、選択した従業員の値で詳細パネルが更新されることを確認します。

    

14. 日付フィールドに無効な値を入力すると、自動的にエラーが表示されます。

    

    また、日付フィールドの右側にはカレンダー・アイコンが表示されるので、正しい日付を選択できます。

    

15. 次は、3番目のパネル・ボックスに関する作業を実行します。3番目のパネル・ボックスを選択して、TextプロパティにSalariesと入力します。

    

16. Data Controlsウィンドウから「EmployeesView4」をドラッグし、Structure ウィンドウのSalariesパネル・ボックスにドロップします。

    ポップアップ・メニューで「Chart...」を選択します。

    

17. グラフを作成するとき、同じデータ・コントロールを使用して各種のグラフを作成できます。

    ここでは、「Bar」カテゴリを選択し、Chart TypeがBarになっていることと、2番目のQuick Start Layoutが選択されていることを確認します。

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

    

18. グラフを決定したら、BarsフィールドとX axisフィールドに何を使用するかを決めます。

    Available列から「Salary」をドラッグしてBarsフィールドにドロップします。次に、「LastName」をX Axisフィールドにドラッグします。

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

    

19. 先ほどと同じように、作業内容を保存して再コンパイルし、ブラウザを再ロードして変更を確認します。

    

    Salariesパネルに、部門内の全従業員とその給与が表示されています。

    

20. Employeesパネル・ボックスに指定したフィルタを削除すると、棒グラフが更新され、Shipping部門の全従業員の給与が表示されます。

    

21. 次に、グラフを変更します。

    「dvt:barChart」を選択し、Propertiesの虫メガネ・アイコンの隣にカーソルを置いてZoomと入力します。こうすることで、プロパティがフィルタリングされて探しやすくなります。

    ZoomAndScrollプロパティが表示されます。このプロパティの値をliveに変更します。

    変更を保存します。

    

22. アプリケーションを再コンパイルして、ブラウザを再ロードします。

    従業員をフィルタリングせずにShipping部門を表示すると、従業員数が多いためにすべての名前が表示されません。

    X軸にカーソルを合わせると、カーソルが十字マークに変わります。カーソルをドラッグして、グラフの一部を選択します（選択された部分の色が薄く表示されます）。選択したら、マウスを離します。

    

    マウスを離すと、選択したレコードがズームされてパネル・ボックス全体に表示されます。パネル・ボックス下部のスクロール・バーを使用すると、ビューに表示されていないレコードを表示できます。

    

    バーを左にスクロールして、残りの従業員の給与を確認します。

    

ここでは、従業員ビジネス・コンポーネントを改良するために、検証を追加してUI表示の方法を変更します。

1. Applicationsウィンドウで「Model」→「Application Sources」→「demo.model」を開き、「Employees」エンティティ・ノードをダブルクリックします。

   エディタ領域にすべての定義が表示されます。「Attributes」タブを選択すると、すべての従業員属性が表示されます。

   

2. 「Salary」属性を選択し、下部にある「Validation」タブをクリックします。

   右側に表示された緑色のプラス記号をクリックして、新しい検証ルールを追加します。

   

3. NameにSalaryRangeを、TypeにRangeを、Minimum Valueに0を、Maximum Valueに50000を入力します。

   比較、長さ、制限リストなど、検証を実装するために使用できる演算子が多数提供されています。

   

4. 「Failure Handling」タブをクリックして、エラー・メッセージのテキストを入力します。

   Message TextプロパティにThe Salary is out of range (must be between 0-50k)と入力します。

   

5. すべての作業内容を保存します。

6. 次に、HireDateの表示プロパティを変更します。

   「HireDate」属性を選択し、「UI Hints」タブをクリックします。

   LabelにHired Onと入力し、Format TypeをSimple Formatに設定し、好みのFormatを選択します。

   

7. すべての作業内容を保存し、Employees.xmlタブの「x」をクリックします。

   

8. 次に、Applicationsウィンドウで「EmployeesView」コンポーネントをダブルクリックします。

   エディタで「Attribute」タブを選択し、「JobId」を選択します。

   「List of Values」タブをクリックし、緑色のプラス記号をクリックします。

   

9. Create List of Valuesペインで、NameにJobsLOVと入力します。

   List Data Sourceで緑色のプラス記号をクリックし、「JobsView」を選択します。

   「OK」をクリックして元のペインに戻ります。

   

   LOVペインで、List AttributeにJobIdを指定します。

   

10. 次に、LOVのUIヒントを設定します。

    「UI Hints」タブをクリックし、「JobTitle」をLOVに表示するために、Selectedリストに移動します。

    ペイン下部で、取得するレコード数の上限を設定できます。「Query Limit」の選択を解除して、制限を取り除きます。

    「OK」をクリックして、LOVの設定を終了します。

    すべての作業内容を保存します。

    

11. ページを更新して、新しく追加したJobIdのLOVを表示します。

    HR.jsfページに戻り、Structureウィンドウで「af:panelBox - Details」→「af:panelFormLayout」を開きます。

    「af:inputText - JobId」を選択して削除します。

    

12. 次に、Data Controlsを使用して、もう一度ページにJobIdを追加します（これにより、LOVが表示されます）。注意すべき重要な点として、当初（EmployeesView4の場合）と同じデータ・コントロールから属性を追加する必要があります。

    Data Controlsウィンドウで、「AppModuleDataControl」→「DepartmentView1」→「EmployeesView4」を開き、「JobId」を選択します。

    これをドラッグして、HireDateとSalaryの間にドロップします。

    ポップアップ・メニューから「List of Values」→「ADF LOV Choice List」を選択します。

    

    af:inputComboboxListOfValuesの位置が正しくない場合は、正しい位置にドラッグします。

    すべての作業内容を保存します。

    

13. 最後の作業は、コミット機能とロールバック機能の追加です。

    Data Controlsウィンドウで、「AppModuleDataControl」→「Operations」を開きます。

    「Commit」処理をStructureウィンドウにドラッグし、f:facet - appNavノードにドロップします。

    ポップアップ・メニューで「ADF Link」を選択します。

    

    同じ方法で、その下にRollbackを追加します。

    

    最後に、2つのリンクの間に（Componentsウィンドウから）Spacerを追加します。ウィンドウ上部の検索エリアを使用して、Spacerコンポーネントを見つけます。

    

14. 作業内容を保存し、変更をコンパイルします。新しい検証を追加したので、「HR.jsf」ページを右クリックして「Run」を選択します。

    ブラウザが開いたらDetailsパネル・ボックスに移動し、JobIdの隣にあるウィジェットをクリックして、ドロップダウン・リストにすべての役職名が表示されることを確認します。ジョブの値を変更します。

    HireDateフィールドのラベルと形式が、先ほど設定したものと一致することも確認します。

    

通常、Webアプリケーションには複数のページが含まれています。ここでは、アプリケーションに2つのページ（役職の検索ページと編集ページ）を追加し、Oracle ADFタスク・フロー・ダイアグラマを使用して、2ページ間のナビゲーション規則を定義します。続いてOracle ADF Facesフレームワークの機能を使用して、ページに付加機能を追加します。最後に、ページ上のいずれかのパネルにタスク・フローを追加します。

このセクションでは、ViewControllerプロジェクトを使用して、ビジネス・プロセスを決定するタスク・フローを追加します。新しいタスク・フローを作成して、ビュー・コンポーネントと制御フローを追加し、HRページでこのタスク・フローを消費します。

1. Applicationsウィンドウで「ViewController」を右クリックし、「New」→「ADF Task Flow...」を選択します。

   

2. Create Task Flowペインで、File NameにJobSearch.xmlと入力します。残りの値はそのままにして、Create as Bounded Task Flowチェック・ボックスとCreate with Page Fragmentsチェック・ボックスが選択されていることを確認します。

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

   

3. タスク・フローがエディタ内に開きます。Componentsウィンドウに、追加可能なアクティビティと制御フローが表示されています。メソッドまたは別のタスク・フローをコールして、ルーターを起動するか、または呼出し元のタスク・フローに戻ることができます。ここでは処理を単純にするため、いくつかのページを追加し、その間に制御フローを定義します。

   Componentsウィンドウから「View」アクティビティをドラッグし、エディタにドロップします。searchという名前を入力します。ビューの回りの緑色の円は、これがタスク・フローに対するエントリ・ポイントであることを示しています。

   

   右側にもう1つの「View」アクティビティを追加して、editという名前を付けます。

   

4. 次に、Componentsウィンドウから「Control Flow Case」をドラッグし、起点となるsearchビュー・アクティビティにドロップします。次に、終点となる「edit」ビュー・アクティビティをクリックします。

   このフローにeditという名前を付けます。

   

   フローをもう1つ追加して、editからsearchに戻る方向に設定します。このフローにbackという名前を付けます。

   すべての作業内容を保存します。

   

5. 次に、検索ページを定義します。このページで役職を検索して、役職に関するプロパティを更新できます。

   「search」ビューをダブルクリックして、ページを作成します。

   Create a new ADF Page Fragmentペインに名前が引き継がれます。Create Blank Pageラジオ・ボタンが選択されていることを確認したら、「OK」をクリックします。

   

6. Data Controlsウィンドウで「AppModuleDataControl」→「JobView1」→「Named Criteria」を開き、「All Queryable Attributes」を選択します。

   「All Queryable Attributes」コンポーネントをエディタにドラッグし、ページの左上にドロップします。ポップアップ・メニューが表示されたら、「Quick Query」→「ADF Quick Query Table...」を選択します。

   

7. Create Tableペインで、Row SelectionにSingle Rowを設定し、「Enable Sorting」チェック・ボックスと「Enable Filtering」チェック・ボックスを選択します。

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

   

   Structureペインとエディタ領域は、次のように表示されます。

   

   すべての作業内容を保存します。

8. JobIdを変更して別のコンポーネントに変換します。

   エディタで「JobId」出力テキストを右クリックして、メニューから「Convert To...」を選択します。

   

   Convert Output Textペインで下方向にスクロールし、「Link」を選択します。「OK」をクリックします。

   

   Confirm ConvertペインでValueが選択されていることを確認したら、「OK」をクリックします。

   

9. 次に、リンクのプロパティを設定します。

   Structureウィンドウまたはエディタで「link」を選択します。Propertiesウィンドウで、TextプロパティにSelectを設定し、ドロップダウン・リストを使用してActionプロパティにeditを設定します。

   作業内容を保存します。

   

10. 次に、編集ページを作成します。

    JobSearchタスク・フローに戻り、「edit」ビューをダブルクリックします。

    

    ページの値はそのままにします。内容が次のようになっていることを確認したら、「OK」をクリックします。

    

11. Data Controlsウィンドウから「JobView1」コレクションをドラッグし、editページにドロップします。

    ポップアップ・メニューで「ADF Form...」を選択します。

    

12. Create Formペインで「Submit」チェック・ボックスを選択します。

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

    

    Structureウィンドウとエディタ領域は、次のように表示されます。

    

13. 次に、変更をコミットするためにプロパティを変更します。

    はじめに、「Submit」ボタンを見つけて選択します。TextプロパティをSaveに、Actionプロパティをbackに設定します。

    

14. 次に、コミット機能を追加します。

    Data Controlsウィンドウで「Operations」ノードを開きます。「Commit」処理を選択してドラッグし、Saveボタンにドロップします。

    

    ポップアップ・ペインで、現在の値を維持するプロパティを選択します。ここで選択しないプロパティは新しい値に更新されます。

    「text」、「disabled」、「action」の3つのプロパティを選択します。

    「OK」をクリックして、すべての作業内容を保存します。

    

15. 次に、HRページ内の最後のパネル・ボックスを変更します。

    エディタで「HR」ページを開き、「af:panelBox - PanelBox4」を選択します。

    TextプロパティにJob Searchを指定します。

    

16. Applicationsウィンドウで、「ViewController」→「Web Content」→「Page Flows」ノードを開き、「JobSearch」タスク・フローを選択します。

    「JobSearch」ページ・フローをHRページにドラッグし、Job Searchパネル・ボックスにドロップします。

    ポップアップ・メニューで「Region」を選択します。

    

    Structureウィンドウにregionが表示されます。Job Searchパネル・ボックス内にネストされていない場合は、パネル・ボックス内に移動します。

    

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

    HRページを右クリックして「Run」を選択します。

    

18. ページが開いたら、カーソルをJob Searchパネル・ボックスに移動します。

    Searchプロパティで「JobTitle」を選び、検索ボックスにMと入力します。［Enter］キーを押します。

    Mで始まるすべての役職が表示されます。

    

19. 次に、編集ページをテストします。いずれかの役職で「Select」テキスト・ボックスを選択します。

    

    このリンクは編集フローを使用して、ユーザーを編集ページにナビゲートします。

    

20. Min Salaryに10000と入力し、「Save」をクリックします。

    

    検索ページに戻ると、新しい最低給与額が表示されます。

    

21. 最後のタスクとして、

    Componentsウィンドウで「Operations」ノードを開き、Drag and Dropセクションまで下にスクロールします。

    「Component Drag Source」を選択します。このコンポーネントをStructureウィンドウにドラッグして、Employeesパネル・ボックスにドロップします。

    

    同じ手順を繰り返して、残りのすべてのパネル・ボックスにComponent Drag Sourceコンポーネントを追加します。その結果として、それぞれのパネル・ボックスに独自のドラッグ・コンポーネントが含まれます。

    

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

    HRページを右クリックして「Run」を選択します。

    

23. 実行中ページの各パネル・ボックスの中央上部にハンドル・アイコンが表示されます。

    

    マウスを使ってこのハンドルを選択し、クリックしたままでページ上の別の位置に移動してから離します。

    

    新しいパネル・ボックスの位置は、ページが再ロードされるまでそのままになります。