1. アプリケーション・ナビゲータで「ViewController」プロジェクト・ノードを右クリックし、「New...」を選択します。

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

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

2. New Galleryで、Web Tierノードの下にあるJSF/Faceletsにナビゲートし、Itemsペインで「Page」を選択します。 「OK」をクリックします。

   

3. Create JSF Pageダイアログで、ページの名前をDeptEmpPage.jsfに変更し、Document Typeラジオ・ボタンが「Facelets」に設定されていることを確認し、Page LayoutタブでPage Templateラジオ・ボタンを選択して「Oracle Three Column Layout」を選択します。

   

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

4. 設計エディタでページが表示されます。 ページ・テンプレートには3つの領域がありますが、必要なのは2つだけなので、3つめの領域を削除します。
   一番右側のendと呼ばれる領域にカーソルを置き、右クリックして「Delete」を選択します。

   

   Structureペインで選択したaf:pageTemplateのプロパティ・インスペクタで、startColumnSizeプロパティを350に設定します。

   

5. ページにいくつかのレイアウト・コンポーネントを追加します。
   コンポーネント・パレットでコンポーネントの「Layout」グループを展開し、Interactive Containers and Headersセクションにある「Panel Accordion」コンポーネントを見つけて、 作成中のページのstartファセットにドラッグします。

   

6. Structureウィンドウで「af:showDetailItem」（前の手順でページに追加したパネル・アコーディオン）を選択し、プロパティ・インスペクタでTextプロパティをDepartmentsに変更します。

   

7. 新しい「Departments」アコーディオンを右クリックして、「Insert after Show Details Item - Departments」→「Show Detail Item」を選択します。 これによって、ページにアコーディオンがもう1つ追加されます。

   

8. TextプロパティをMore Infoに変更します。

   

   この方法はページにコンポーネントを追加する別のやり方で、コンポーネント・パレットからドラッグ・アンド・ドロップする代わりに、設計エディタのコンテキスト・メニューを直接使用します。

9. Layoutコンポーネントから、「Panel Splitter」コンポーネントをクリックして、ページのcenterファセットにドラッグします。

   

10. プロパティ・インスペクタで、新しいスプリッタのOrientationプロパティをverticalに変更します。

    

11. Layoutコンポーネントから、「Panel Collection」コンポーネントをページのスプリッタ上部にあるfirstファセットにドラッグします。

    

    パネル・コレクションとは、標準メニューまたはアプリケーション・メニュー、ツールバーおよびステータスバーの項目に、table、treeTable、treeなどのコレクション・コンポーネントをまとめて表示できるようにするコンポーネントです。

12. Structureウィンドウを使用して、ページのスプリッタのsecondファセットにPanel Tabbedコンポーネントをドラッグします。

    

13. ページ上部にある「DeptEmpPage.jsf」タブをダブルクリックして全体を表示します。 ページは次のスクリーンショットのようになります。

    

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

このステップでは、このチュートリアルのパート1で作成したビジネス・コンポーネントをユーザー・インタフェースにバインドします。 このバインディングは、簡単なドラッグ・アンド・ドロップ操作で行います。内部では、Oracle ADFモデル・レイヤーが処理をしています。

1. 設計エディタで、「Departments」アコーディオンをクリックして展開します。

   

2. アプリケーション・ナビゲータで、「Data Controls」アコーディオンを展開し、さらに「AppModuleDataControl」を展開すると、このチュートリアルの最初のパートで定義したビジネス・サービスが表示されます。

   

3. 「DepartmentsView1」データ・コントロールをJSFページのDepartmentsアコーディオンにドラッグします。 作成するコンポーネントの種類を選択するよう要求されたら、「Forms」→「ADF Read-only Form」を選択します。

   

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

   

5. Data Controlsアコーディオンで、「DepartmentsView1」データ・コントロールを展開して、含まれているフィールドを表示させます。同時にEmployeesView3（各部門の従業員用）データ・コントロールも表示させます。 これらは、"マスター"である部門に所属する、"ディテール"の従業員データです。これらはリンクされているので、このビュー・オブジェクトには、閲覧している特定の部門に所属している従業員のデータが表示されます。

   

6. PanelSplitterのfirstファセットに作成したPanel Collectionに「EmployeesView3」データ・コントロールをドラッグし、 ADF Read-Only Tableとして作成します。

   

7. Edit Table Columnsダイアログで、Row Selectionの「Single Row」を選択し、「Enable Sorting」と「Enable Filtering」のチェック・ボックスを選択します。 「OK」をクリックします。

   

8. 今度は、panelSplitterのsecondファセットにあるpanelTabbedコンポーネントの中のShowDetailItemに「EmployeesView3」データ・コントロールをドラッグし、 ADF Formとして作成します。

   

9. Edit Form Fieldsダイアログで、「Include Submit Button」チェック・ボックスを選択します。 マウスと[Shift]キーを使用して、リストの下部にある「CommissionPCT」、「ManagerId」、および「DepartmentId」の3つのフィールドを選択し、ダイアログ・ボックスの右上隅にあるDeleteボタン「」を押して削除します。 「OK」をクリックします。

   

10. JDeveloperメニュー・バーのSave Allアイコン「」をクリックして、作業内容を保存します。
    ページを右クリックして「Run」を選択します。 この操作はプロジェクトをコンパイルしてビルドし、統合されているOracle WebLogic Serverを起動してプロジェクトを実行します。 Webブラウザが開き、ページが表示されます。 一連のステップの進行状況は、Oracle JDeveloperのLogウィンドウで追跡できます。

    

11. ページがブラウザで表示されたら、スプリッタを使用してページ領域のサイズを変更し、部門データを表示します。 「Next」ボタンを使用して、部門データをスクロールします。 部門データの変化に合わせて、表やその下にあるフォームの従業員データも変化します。

    

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

このステップでは、検証規則、書式設定、およびデフォルト値を追加して、ビジネス・サービスを改良します。

1. アプリケーション・ナビゲータで、Modelプロジェクトの下から「Employees」エンティティ・オブジェクトを見つけて、ダブルクリックします。オブジェクトが開いて編集できるようになります。

   

2. Employees.xmlウィンドウで、「Attributes」フィンガー・タブをクリックし、属性「Salary」を見つけて選択します。 Validation Rulesタブが現れるまでページを下にスクロールし、「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. 次に、雇用日のフィールドにデフォルト値を追加して、新規従業員の作成時には雇用日がデフォルトで今日の日付になるようにします。
   Employees.xmlウィンドウで、HireDate属性を見つけて選択します。 プロパティ・インスペクタのValueセクションでDefault Value Typeプロパティを見つけて、「Expression」を選択した後、Default Valueプロパティをadf.currentDateに設定します。 これにより、新しいレコードのデフォルト値が、確実に今日の日付に設定されます。

   

6. 属性のUI Hintsも指定して、それらが使用されるフォームやページでのデフォルトの表示方法を管理できます。 この手順では、雇用日フィールドにデフォルトのフォーマット・マスクを追加します。 ここで、ラベルやツールチップ・ヘルプも指定できます。
   プロパティ・インスペクタのUI Hintsセクションで、Format Typeプロパティを見つけて「Simple Date」を選択します。

   

   Formatプロパティを「dd/MMM/yyyy」に設定します。

   

7. 再度ページを実行して、改良内容をテストします。

   

8. HireDateフィールドをテストします。 フィールドをクリックすると同時に、日付の書式例が（定義したとおりに）表示されます。

   

9. 試しに従業員の1人のHireDateフィールドを、11/11/123などの無効な日付に更新し、「Submit」ボタンを押すとエラー・メッセージが表示されることを確認します。

   

   このフィールドの横にあるClock/Calendarアイコンを使用してポップアップ・カレンダーを表示し、有効な日付を選択します。

   

10. Salaryフィールドを更新して、-9など、前に作成した検証規則に違反する値にします。「Submit」ボタンをクリックして、作成したエラー・メッセージを表示させます。

    

11. 部門50を閲覧し、従業員表のデータをスクロールできるようになっていることを確認します。 表の列ヘッダーのいずれかをクリックして、表のデータをソートします。

    

12. 表の列の見出しをクリックしてドラッグし、表の列の位置を変更します。

    

    新しい列の順番は次のようになります。

    

13. LastName列の上のFilterフィールドに、B%と入力します。[Enter]キーを押して、表をフィルタリングして、姓がBで始まる従業員のみを表示します。

    

14. 表にある別のメニューやボタンを操作して、他の機能を確認してみます。 終了したら、ブラウザを閉じてOracle JDeveloperに戻ります。

次の手順では、ユーザー・インタフェースを機能強化するために、従業員の表に列選択機能を追加する変更を行い、Employeeのディテール・タブのフィールドの並べ替えをし、ビジネス・コンポーネントをグラフ表示にバインドします。 このバインディングは、簡単なドラッグ・アンド・ドロップ操作で行います。内部では、Oracle ADFモデル・レイヤーが処理をしています。

1. 「DeptEmpPage.jsf」タブをクリックして、設計エディタのページに戻ります。 設計エディタまたはStructureペインで「Employees」表を選択します。 表のColumnSelectionプロパティを「Single」に設定します。

   

2. Structureウィンドウで、showDetailItemタブ内のEmployeeディテール・フィールドを囲む「panelFormLayout」を選択します。

   

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

   
   
   この後の手順でページを実行したとき、タブ内のフィールドは2列に整理されて表示されます。詳細表示
   レイアウト・コンテナ内のオブジェクトのレイアウトは、コンテナのプロパティを設定することで制御できます。

4. 次に、ページにデータのグラフ表示を追加します。これは、JSFコンポーネントのADFデータ可視化セットを使用して行います。
   設計エディタで、「More Info」アコーディオンをクリックして展開します。 次に、「EmployeesView3」データ・コントロールをMore Infoアコーディオンにドラッグし、Graphとして作成します。

   
   グラフは、PNGの静止画像あるいはインタラクティブなFlashコンポーネントとして表示されます。
   詳細表示
   グラフの動作はグラフ・コンポーネントのプロパティを指定して制御します。

5. Component Galleryで、左側のグラフのリストから「Pie」を選択して、グラフ・タイプとして再度「Pie」を選択します。 下部ペインのQuick Start Layoutで、3番目のレイアウトを選択します。

   

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

6. Create Pie Graphダイアログで、Pieフィールドに「Salary」を選択し、「LastName」をSlicesフィールドにドラッグ・アンド・ドロップします。 「OK」をクリックします。

   

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

   

8. 部門50を参照します。 Column SelectionをSingleに設定したため、列を選択すると利用できるようになるフリーズ、ラップなど、表に追加された動作を確認してください。 列を選択して、「Freeze」ボタンをクリックします。 ここで、水平スクロール・バーを使用して、最右端の列を表示します。

   

9. 部門50で「More Info」アコーディオンを展開し、グラフ、およびマウスをグラフに合わせると表示されるポップアップに注目してください。

   

10. showDetailItem1タブまでスクロールし、フィールドが2列に並べ替えられていることを確認します。

    

確認したら、ブラウザを閉じてOracle JDeveloperに戻ります。

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

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

   

2. Create View ObjectウィザードのNameページで、NameにEmpDetailsと入力し、Entity objectはデフォルトのデータ・ソースのままにします。

   

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

3. ウィザードのEntity Objectsページで、まず「Employees」を選択して右側のSelectedペインに移動したあと、「Departments」エンティティを選択してSelectedペインに追加します。
   Updatableチェック・ボックスにチェックを入れるのはEmployeesエンティティだけです。Departmentsエンティティは、データの読取りのみに使用されます。

   

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

4. ウィザードのAttributesページで、Employeesの次の属性をSelectedペインに移動します。
   EmployeeId、FirstName、LastName、Email、Salary、HireDate、JobId。
   
   Departmentsエンティティからは、次の属性をSelectedペインに移動します。
   DepartmentId、DepartmentName。

   

   「Finish」をクリックして、ビュー・オブジェクトの作成を完了させます。

5. 次は、ビュー・オブジェクトに計算属性、つまり従業員の年間給与を表示する属性を追加します。
   アプリケーション・ナビゲータで、「EmpDetails」をダブルクリックしてこれを開きます。

   

6. 「Attributes」フィンガー・タブをクリックし、ドロップダウン・リストから「New Attribute」を選択します。

   

7. New View Object Attributeダイアログで、新しい属性の名前としてAnnualSalaryと入力し、「OK」をクリックします。

   

8. 属性リストの下部にあるDetailsタブで、AnnualSalary属性の次のプロパティを設定します。

   フィールド	値
   Name	AnnualSalary
   Type	Number
   Default Value	Expression (チェックする)
   Value	Salary * 12

   

9. 続く一連の手順では、別の表に保存されている一連の値に基づいて、フィールドに値のリストを追加します。 この例では、役職名として使用できる値のリストをJobs表に基づいて作成します。
   EmpDetails.xmlのエディタで「Attributes」フィンガー・タブをクリックして属性「JobId」を選択します。 属性リストの下部にある「List Of Values」タブをクリックします。

   

10. List of Valuesタブで「Add」ボタンをクリックして値リストを作成します。

    

11. Create List of Valuesダイアログで、List Data Sourceフィールドの右側にある緑色の「+」をクリックします。 View Accessorsダイアログで、JobsViewをView Accessorsペインに移動します。

    

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

12. Create List of Valuesダイアログに戻り、List Attributeとして「JobId」を選択します。

    

13. 引き続きCreate List of Valuesダイアログで「UI Hints」タブをクリックして、Default List Typeとして「Combo Box with List of Values」を選択し、JobTitle属性をSelectedペインに移動します。

    

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

14. 次は、作成した新しいオブジェクトをデータ・モデルに追加します。
    アプリケーション・ナビゲータで「AppModule」をダブルクリックして編集用に開いて、「Data Model」フィンガー・タブを選択します。

    

15. 「EmpDetails」ビュー・オブジェクトをクリックし、Data Modelペインに移動します。
    作業内容を保存します。

    

16. EmpDetailsビュー・オブジェクトを経由して組み込んだ新しい機能を、Oracle Business Component Browserを使用してテストします。 アプリケーション・ナビゲータで「AppModule」を右クリックして「Run」を選択し、テスターを起動します。

    

17. 「EmpDetails1」ビュー・オブジェクトをダブルクリックします。

    

18. DepartmentIdおよびDepartmentNameとともに、新しい計算フィールドAnnualSalaryが表示されていることを確認します。 ここではいずれのフィールドも更新できません。

    

19. JobIdのドロップダウン・リストを使用して、新しい役職名を選択します。

    

20. フィールドに新しい役職名が移入されます。

    

21. 変更をコミットせずに、Oracle Business Component Browserウィンドウを閉じます。