Oracle JDeveloper 12c（12.1.2）チュートリアル - EJB、JPA、JavaServer Facesを使用したWebアプリケーションの構築

パート2：ビュー・プロジェクトの構築

ここでは、EJ/JPAコンポーネントをベースとするデータ・コントロールを使用したJSFページの作成を開始します。

Data Controlsパネルから項目をドラッグし、特定のUIコンポーネントとしてページ上にドロップすることで、データ・バインドされたユーザー・インタフェースを設計できます。データ・コントロールを使用してUIコンポーネントを作成する場合、JDeveloperによって自動的に各種コードおよびオブジェクトが作成され、選択したデータ・コントロールに対してコンポーネントがバインドされます。

ステップ1：JavaServer Facesページのグローバル・レイアウトの作成

次に、ADF Facesコンポーネントを使用して、Departments Employees Master DetailページのJavaServer Faces Pageを作成します。

「ViewController」プロジェクトを右クリックして、コンテキスト・メニューから「New」→「From Gallery」を選択します。
New Galleryで、「Web Tier」→「JSF/Facelets」カテゴリを選択し、「Page」項目を選択して、「OK」をクリックします。
ファイル名にmainHR.jsfと入力します。

「Facelets」チェック・ボックスを選択し、Page Layoutセクションで「Copy Quick Start Layout」ラジオ・ボタンをクリックします。ベスト・プラクティスとしてクイック・スタート・レイアウトを使用すると、表示の問題の発生を防止できます。

ダイアログのPage Layoutセクションで「Two Column」カテゴリをクリックし、リスト内の最初のレイアウトを選択します。「OK」をクリックして、ページを作成します。

設計エディタに空のmainHR.jsfページが表示されます。

次に、このページにデータ・バインドされたADF Facesコンポーネントを追加します。これらのコンポーネントは、部門とその部門に属する従業員を表示します。
Structureペインで、「panelSplitter」コンポーネントを選択し、プロパティ・インスペクタでSplitterPositionを300に設定します。
コンポーネント・パレットで、ADF Facesライブラリの「Layout」セクションを開き、「Panel Accordion」コンポーネントをfirstファセットにドラッグします。
Structureペインで、「panelAccordion」コンポーネントを展開し、「Show Detail Item」コンポーネントを選択して、TextフィールドにDeptと入力します。
コンポーネント・パレットからページのsecondファセットに対して、「Panel Splitter」コンポーネントをドラッグします。
プロパティ・インスペクタで、Orientationプロパティをverticalに設定します。
Structureペインは次のように表示されます。
コンポーネント・パレットから「Panel Tabbed」コンポーネントをドラッグし、secondファセット上にドロップします。
Structureペインで「af:panelTabbed」項目を展開し、Detail ItemのTextプロパティをEmpに変更します。
ビジュアル・エディタで「Emp」タブを右クリックし、「Insert After Show Detail Item」→「Show Detail Item」を選択します。
Show Detail ItemコンポーネントのTextにGraphと入力します。
「Panel Collection」をドラッグし、firstファセット（右上）にドロップします。
ページ・スケルトンは次のように表示されます。
「」Save Allアイコンをクリックして作業内容を保存します。

ステップ2：ページへのデータ・コントロール・コンポーネントのバインド

次に、ADF Facesを使用して、従業員データを編集する問合せページを構築します。

「Data Controls」アコーディオンを開き、「HRFacadeBean」ノードを展開します。次に、「departmentsFindAll」ノードをfirstファセットにドラッグ・アンド・ドロップします。
Createポップアップ・メニューから「ADF Form...」を選択します。
Edit FormダイアログのFieldsで、以下を除くすべての列を削除します。
departmentId
departmentName
locationId
Include Controls forの「Row Navigation」オプションをチェックします。
「OK」をクリックします。

ユーザーがData Controlsパネルから項目をドラッグしてページ上にドロップすると、JDeveloperによって多数のアクションが実行されます。プロジェクトのデフォルト・パッケージ内にDataBindings.cpxファイルを作成し（まだ作成されていない場合）、ページ・エントリを追加します。
また、META-INFディレクトリにadfm.xmlファイルを作成します。このファイルはDataBindings.cpxファイルのレジストリを作成します。アプリケーション・メタデータ・レイヤーはこのファイルを使用して、アプリケーションのカスタマイズやパーソナライズを実行します。また、ページ定義サブパッケージにページ定義ファイルを追加します（まだ作成されていない場合）。デフォルトのサブパッケージは、adfmsrcディレクトリにあるview.pageDefsです。

Data Controlsアコーディオンで「HRFacadeBean」→「departmentsFindAll」ノードを展開します。ビジュアル・エディタ内の右上のファセット（Panel Collection）に「employeesList1」コレクションをドラッグします。
Createポップアップ・メニューから「ADF Table」を選択します。
Edit TableダイアログのColumnsで、「Single Row」、「Enable Sorting」、「Enable Filtering」を選択します。salaryを含めて、以降の列をすべて選択し、削除します。
右側の矢印を使用して、「lastName」と「firstName」を上に移動します。
「firstName」と「lastName」の両方を選択し、「Group」ボタンをクリックします。
最上部に作成された新規行のDisplay LabelにNameと入力します。firstNameとlastNameがインデントされていることから、これらがNameグループ・コンポーネントのサブコンポーネントであることが分かります。
「OK」をクリックします。
ページ・デザイナの「Emp」タブをクリックし、Data Controlsアコーディオンから「employeesList1」をドラッグしてEmpペインにドロップします。
「ADF Form」メニュー・オプションを選択します。
Edit TableダイアログのColumnsで以下を除くすべての列を削除します。
commissionPct
email
employeeId
firstName
hiredate
jobId
lastName
phoneNumber
salary
また、Include Controls forの「Submit」チェック・ボックスをチェックします。
「OK」をクリックします。
この時点で、ページは次のように表示されます。
「Graph」タブをクリックしてペインを切り替えます。Data Controlsアコーディオンから「employeesList1」をドラッグし、Graphペインにドロップします。
コンテキスト・メニューから「Graph」を選択します。
Component Galleryで「Bar」カテゴリを選択し、「Bar」タイプと最初のQuick Start Layoutを選択します。
「OK」をクリックします。
Create Bar GraphページでBarsフィールドに「salary」をドラッグ・アンド・ドロップし、X Axisフィールドに「firstName」をドラッグ・アンド・ドロップします。
「Swap Bars with X Axis」ボタンをクリックして、フィールドを再配置します。
「OK」をクリックします。
プロパティ・インスペクタのBarコンポーネントで、AppearanceのThreeDEffectプロパティをtrueに設定し、ShortDescにEmps Salariesと入力します。
ページは次のように表示されます。
「」Save Allアイコンをクリックして作業内容を保存します。

ステップ3：ページの実行とテスト

ここではADF Facesを使用して、新しいADF問合せ機能を利用した検索ページを作成します。

ページ・エディタで、ページの任意の場所を右クリックして、「Run」を選択します。
ページがデフォルトのブラウザ・ウィンドウ内にアップロードされるまで待ちます。ロードが完了すると、ページが表示されます。「Next」ボタンをクリックして、複数の従業員が存在する部門を表示します。ページのDeptフォーム内のラベルを確認してください。このフォームでは、UI Hintsに設定したラベルが使用されます。
部門を変更すると、それに従って従業員も変更されることを確認します。Employees表で別の行を選択すると、下部のペインにその従業員の詳細情報が表示されます。
「Graph」タブをクリックして、該当部門の給与グラフを表示します。
Employees表の右端からsalary列を探し、Nameグループの隣に移動します。
salary列の上矢印をクリックし、給与を昇順にソートします。新しいソート順が反映されて、グラフも変更されていることを確認します。
「Emp」タブをクリックして従業員データを表示し、salaryを変更します（例として、Karen Colmenaresのsalaryを2,500から5,000に変更します）。「Submit」をクリックします。
「Graph」タブをクリックし、グラフに新しい値が反映されていることを確認します。新しい値は、上部のEmployee表にも表示されています。
再度、「Emp」タブをクリックします。salaryに100未満を入力して、「Submit」をクリックします。入力した値の検証が実行され、エラー・メッセージが表示されます。値を有効な値に変更し、再度「Submit」をクリックします。
メニューバーの「Detach」ボタンをクリックし、ページ・コンテキストからEmployee表を分離します。
「Detach」ボタンをクリックして、もとの表示に戻します。
メニューバーから「View」→「Columns」を選択し、現在アクティブな列を表示します。
メニューバーから「View」→「Reorder Columns」を選択し、Reorder Columnsダイアログで上矢印と下矢印を使用して列を上下に動かしてみてから、「OK」をクリックします。
Employees表の列が新しい順序で表示されます。
ブラウザ・ウィンドウを閉じます。

ステップ4：作成機能と削除機能のページへの追加

ここでは、JDeveloperで提供されているネイティブの作成機能、永続化機能、削除機能を追加します。これらの機能をページに実装するには、以下の手順を実行します。

JDeveloperに戻り、Data ControlsパレットでdepartmentsFindAllの下の「Operations」ノードを開き、「Create」操作をDeptフォームのPanel Group Layoutファセットにドラッグ・アンド・ドロップします。
コンテキスト・メニューから「ADF Button」を選択します。
Deleteメソッドに対しても同じ操作を繰り返します。
HRFacadeBeanノードの「persistDepartments(Departments)」をドラッグし、CreateボタンとDeleteボタンの間にADF Buttonとしてドロップします。
Edit Action BindingダイアログでValueフィールドの下矢印をクリックし、「Show EL Expression Builder」を選択します。
Variablesダイアログで、「ADF Bindings」→「bindings」→「departmentsFindAllIterator」→「currentRow」を展開し、「dataProvider」を選択します。
「OK」をクリックします。