Oracle JDeveloper 12c（12.1.3）チュートリアル - 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ファセットにドラッグします。
Create Panel Accordionペインで、TextフィールドにDeptと入力します。緑のプラス記号をクリックしてより詳細なアイテム・コンポーネントを追加することもできます。OKをクリックするだけです。
コンポーネント・ウィンドウからページのsecondファセットに対して、「Panel Splitter」コンポーネントをドラッグします。
プロパティ・ウィンドウで、Orientationプロパティをverticalに設定します。
Structureペインは次のように表示されます。
コンポーネント・ウィンドウから「Panel Tabbed」コンポーネントをドラッグし、secondファセット上にドロップします。
Create Panel Tabbedペインで、TextプロパティをEmpに設定し、OKをクリックします。
「Panel Collection」をドラッグし、firstファセット（右上）にドロップします。
ページ・スケルトンは次のように表示されます。
「」Save Allアイコンをクリックして作業内容を保存します。

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

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

「Data Controls」アコーディオンを開き、「HRFacadeBean」ノードを展開します。次に、「departmentsFindAll」ノードをfirstファセットにドラッグ・アンド・ドロップします。
Createポップアップ・メニューから「ADF Form...」を選択します。
Create Formで、以下を除くすべての列を削除します。
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」を選択します。
Create Tableダイアログで、「Single Row」、「Enable Sorting」、「Enable Filtering」を選択します。salaryを含めて、以降の列をすべて選択し、削除します。
右側の矢印を使用して、「lastName」と「firstName」を上に移動します。
「firstName」と「lastName」の両方を選択し、「Group」ボタンをクリックします。
最上部に作成された新規行のDisplay LabelにNameと入力します。firstNameとlastNameがインデントされていることから、これらがNameグループ・コンポーネントのサブコンポーネントであることが分かります。
「OK」をクリックします。
ページ・デザイナの「Emp」タブをクリックし、Data Controlsアコーディオンから「employeesList1」をドラッグしてEmp showDetailItemにドラッグします。
「ADF Form」メニュー・オプションを選択します。
Create Formダイアログで以下を除くすべての列を削除します。
commissionPct
email
employeeId
firstName
hiredate
jobId
lastName
phoneNumber
salary
また、Include Controls for Submit Buttonチェック・ボックスをチェックします。
「OK」をクリックします。
この時点で、ページは次のように表示されます。
「」Save Allアイコンをクリックして作業内容を保存します。

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

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

ページ・エディタで、ページの任意の場所を右クリックして、「Run」を選択します。
ページがデフォルトのブラウザ・ウィンドウ内にアップロードされるまで待ちます。ロードが完了すると、ページが表示されます。「Next」ボタンをクリックして、複数の従業員が存在する部門を表示します。
部門を変更すると、それに従って従業員も変更されることを確認します。Employees表で別の行を選択すると、下部のペインにその従業員の詳細情報が表示されます。
Employees表の右端からsalary列を探し、Nameグループの隣に移動します。
salary列の上矢印をクリックし、給与を昇順にソートします。
「Emp」タブをクリックして従業員データを表示し、salaryを変更します（例として、Karen Colmenaresのsalaryを2,500から5,000に変更します）。「Submit」をクリックします。
再度、「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」をクリックします。