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

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

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

   
このアプリケーションの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タブで「Reference ADF Page Template」ラジオ・ボタンを選択して、「Oracle Three Column Layout」を選択します。

   

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

5. 設計エディタでページが表示されます。ページ・テンプレートには3つの領域がありますが、必要なのは2つだけなので、3つめの領域を削除します。
   Structureウィンドウで、「af:form」→「af:pageTemplate」→「Template facets」を展開します。「af:facet - end」を右クリックし、「Delete」を選択します。この操作をしても、endファセットはページ・テンプレート・ファセットのリストから削除されませんが、ページの使用からは削除されます。

   

6. Structureウィンドウで選択したaf:pageTemplateのPropertiesウィンドウで、startColumnSizeプロパティを350に設定します。

   

次に、ページにいくつかのレイアウト・コンポーネントを追加します。

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

   
   
   

8. Create Panel Accordionウィンドウで、TextプロパティにDepartmentsをセットし、OKをクリックします。

   

9. af:panelAccordionを展開するとshow detail itemが表示されます。新しい「Departments」を右クリックして、「Insert after Show Detail Item - Departments > Show Detail Item」を選択します。これによって、ページにアコーディオンがもう1つ追加されます。

   

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

    

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

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

    

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

    

13. Layoutコンポーネントから、「Panel Collection」コンポーネントをページのスプリッタ上部にあるfirstファセットにドラッグします。
    
    コンポーネントを正しい位置にドロップするには、Structureペインを使用する方法が簡単です。

    

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

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

    

15. Create Panel Tabbed ウィンドウで、以下のイメージのようにデフォルトのままでOKをクリックします。

    

16. Structureウィンドウには以下のスクリーン・ショットのようになります。

    

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

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

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

   

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

   

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

   

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

   

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

   

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

   

7. Create Tableダイアログで、Row Selectionの「Single Row」を選択し、「Sorting and Filtering and Read-Only Table」のチェック・ボックスを選択します。「OK」をクリックします。

   

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

   

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

   

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

    

11. ページがブラウザで表示されたら、スプリッタを使用してページ領域のサイズを変更し、部門データを表示します。Nextボタンを使用して、部門データをスクロールします。表示されている部門内の従業員を表示するように、従業員データが変化します。また、従業員フォームに現在選択中の従業員が表示されます。

    

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

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

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

   

2. Employees.xmlウィンドウで、「Attributes」フィンガー・タブをクリックし、属性「Salary」を見つけて選択します。Validation Rulesタブが現れるまでページを下にスクロールし、「Add」アイコンをクリックして新しい検証規則を追加します。

   

3. Nameはデフォルトのままにし、Add Validation Ruleダイアログで、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に設定します。これにより、新しいレコードのデフォルト値が、確実に今日の日付に設定されます。

   

属性のUI Hintsも指定して、UI Hintsが使用されるフォームやページでのデフォルトの表示方法を管理できます。この手順では、雇用日フィールドにデフォルトの書式マスクを追加します。ここで、ラベルやツールチップ・ヘルプも指定できます。

6. プロパティ・インスペクタのUI Hintsセクションで、Format Typeプロパティを見つけて「Simple Date」を選択します。

   

   Formatプロパティをdd/MMM/yyyyに設定します。この設定によって、リソース・バンドル内の書式が変更されることを示す警告メッセージが表示されます。「Yes」をクリックして、このメッセージを受け入れます。

   

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

   

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

   

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

   

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

    

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

    

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

    

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

    

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

    

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

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

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

   

2. Structureウィンドウで、showDetailItemタブの表示で従業員詳細フィールドを囲む「panelFormLayout」を選択します。

   

3. プロパティ・ウィンドウで、Rowsプロパティの値を5に設定します。

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

次に、ページにデータのグラフ表示を追加します。これは、JSFコンポーネントのADFデータ可視化セットを使用します。

4. 設計エディタで、「More Info」アコーディオンをクリックして展開します。次に、「EmployeesView3」データ・コントロールをMore Infoアコーディオンにドラッグし、Chartとして作成します。

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

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

   

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

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

   

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

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

   

8. 部門50を参照します。ColumnSelectionをsingleに設定したため、列を選択すると利用できるようになるFreeze、Wrapなど、表に追加された動作を確認してください。
   
   列を選択して、「Freeze」ボタンをクリックします。ここで、水平スクロール・バーを使用して、最右端の列を表示します。Columns Frozenには、固定された列の左側にある列（その列を含む）の数が表示されます。

   
   
   
   
   
   
   

9. 部門50で「More Info」アコーディオンを展開し、グラフ、およびマウスをグラフに合わせると表示されるポップアップに注目してください。
   給与を姓ごとに描画しているため、円グラフのそれぞれのスライスは、他の従業員と比較した相対的な給与額を表します。この例の場合、Weiss、Fripp、およびKauflingが最大値です。

   

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

    

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

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

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

   

2. Create View ObjectウィザードのNameページで、NameにEmpDetailsと入力し、Data Sourceのデフォルト値Entityはそのままにします。

   

   「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と入力し、TypeにNumberと入力して、「OK」をクリックします。

   

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

   フィールド	値
   Name	AnnualSalary
   Type	Number
   Default Value	Expression（チェックする）
   値	(Salary == null ?0 :Salary) * 12

   

   続く一連の手順では、別の表に保存されている一連の値に基づいて、フィールドに値のリストを追加します。この例では、役職名として使用できる値のリストをJobs表に基づいて作成します。

9. EmpDetails.xmlのエディタで「Attributes」タブをクリックして、属性「JobId」を選択します。属性リストの下部にある「List Of Values」タブをクリックします。

   

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

    

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

    

    「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」を選択し、Job Title属性をSelectedペインに移動します。

    

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

次に、作成した新しいオブジェクトをデータ・モデルに追加します。

15. アプリケーションウィンドウで「AppModule」をダブルクリックして編集用に開いて、「Data Model」タブを選択します。

    

16. 「EmpDetails」ビュー・オブジェクトをクリックし、Data Modelペインに移動します。新しいインスタンスの名前がEmpDetails1になることを確認します。
    作業内容を保存します。

    

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

    

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

    

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

    

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

    

21. フィールドに新しい役職名が設定されます。

    

22. 変更をコミットせずに、Oracle ADF Model Testerウィンドウを閉じます。

すべて表示 | すべて非表示