Oracle JDeveloper 11g Release 2チュートリアル - EJB、JPA、JavaServer Facesを使用したWebアプリケーションの構築

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

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

詳細表示

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

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

「ViewController」プロジェクトを右クリックして、コンテキスト・メニューから「New」を選択します。
New Galleryで、「Web Tier」→「JSF/Facelets」カテゴリを選択し、「Page」項目を選択します。

「OK」をクリックします。
ファイル名としてmainHR.jsfを入力します。「Facelets」チェック・ボックスを選択し、Page Layout セクションで「Quick Start Layout」ラジオ・ボタンをクリックします。ベスト・プラクティスとしてクイック・スタート・レイアウトを使用すると、表示の問題の発生を防止できます。
「Browse」をクリックしてレイアウトを選択します。
Component Galleryで「Two Column 」レイアウト・カテゴリを選択し、最初のタイプと最初のレイアウトを選択します。

Optionsペインのチェック・ボックスを選択すると、テーマを適用することができます。詳細表示

「OK」をクリックして、レイアウト選択を保存します。Create JSF Pageダイアログで、「OK」をクリックしてページを作成します。
空のmainHR.jsfページが設計エディタに表示されます。

次に、このページにデータ・バインドされたADF Facesコンポーネントを追加します。これらのコンポーネントは、部門とその部門に属する従業員を表示します。
Structureペインで、「panelSplitter」コンポーネントを選択し、Property InspectorでSplitterPositionを300に設定します。
Component Paletteで、ADF Facesライブラリの「Layout」セクションを開き、「Panel Accordion 」コンポーネントをfirstファセットにドラッグします。

Component Palette内のページにファイルまたはページ・コンポーネントが整理されます。詳細表示
Structureペインで、「panelAccordion」コンポーネントを開き、「Show Detail Item」コンポーネントを選択して、TextフィールドにDeptと入力します。
Component Paletteからページのsecondファセットに対して、「Panel Splitter」コンポーネントをドラッグします
Property Inspectorで、Orientationプロパティをverticalに設定します。
Structureペインは次のように表示されます。
Component Paletteｔから「Panel Tabbed」コンポーネントをドラッグし、secondファセット上にドロップします。
Show Detail Itemの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」アコーディオンを開き、「HRFacadeLocal」ノードを展開します。次に、「DepartmentsFindAll」ノードを最初のファセットにドラッグ・アンド・ドロップします。

ポップアップ・メニューから「Form」→「ADF Form」を選択します。
Edit Form Fieldsダイアグラムで、以下を除くすべての列を削除します。
departmentId
departmentName
locationId

「Include Navigation Controls 」オプションを選択します。

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

ユーザーがData Controlsパネルから項目をドラッグしてページ上にドロップすると、JDeveloperによって多数のアクションが実行されます。詳細表示
Data Controlsアコーディオンで「HRFacadeLocal」→「departmentsFindAll」ノードを展開し、右上のファセットに「employeesList」をドラッグ・アンド・ドロップします。
ポップアップ・メニューから「Table」→「ADF Read-only 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アコーディオンから「employeesList」をドラッグしてEmpペインにドロップします。
メニュー・オプションから、「Form」→「ADF Form」を選択します。
Edit Table Columnsダイアグラムで以下を除くすべての列を削除します。
commissionPct
email
employeeId
firstName
hiredate
jobId
lastName
phoneNumber
salary
また、「Include Submit Button」チェック・ボックスを選択します。

「OK」をクリックします。
この時点で、ページは次のように表示されます。
「Graph」タブをクリックしてペインを切り替えます。Data Controlsアコーディオンから「employeesList」をドラッグし、Graphペインにドロップします。
コンテキスト・メニューから「Graph」を選択します。
Component Galleryで「Bar」カテゴリを選択し、「Bar」タイプと最初のQuick Start Layoutを選択します。

「OK」をクリックします。
Create Bar GraphページでBarsフィールドに「salary」をドラッグ・アンド・ドロップし、X Axisフィールドに「firstName」をドラッグ・アンド・ドロップします。
「Swap Bars with X Axis」ボタンをクリックして、フィールドを再配置します。

「OK」をクリックします。
Property InspectorのBarコンポーネントに対して、Appearanceの3D Effectプロパティをtrueに設定します。
ページは次のように表示されます。
Save All「」アイコンをクリックして作業内容を保存します。

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

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

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

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

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

JDeveloperに戻り、Data ControlsペインでdepartmentsFindAllの下の「Operations」ノードを開き、「Create」操作をPanel Group Layoutファセットにドラッグ・アンド・ドロップします。
コンテキスト・メニューから「ADF Button」を選択します。
Deleteメソッドに対しても同じ処理を繰り返します。
HRFacadeLocalノードの「persistDepartments(Departments)」をドラッグし、CreateボタンとDeleteボタンの間のADF Buttonとしてドロップします。

Session Beanの作成時に、構造化オブジェクトに対してmergeメソッドとpersistメソッドを公開している場合、Data Controlsパネルにこれらのメソッドが表示されます。これらのメソッドを使用してボタンを作成すると、現在のオブジェクト・インスタンスをマージし、永続化することができます。詳細表示
Edit Action BindingダイアログでValueフィールドの下矢印をクリックし、「Show EL Expression Builder」を選択します。
Variablesダイアログで、「ADF Bindings」→「bindings」→「departmentsFindAllIterator」→「currentRow」を開き、「dataProvider」を選択します。

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

再度、「OK」をクリックします。
Property Inspectorで、persistDepartmentsボタンのTextフィールドにPersistと入力します。
Structureペインで、「facet-separator」タグを右クリックし、コンテキスト・メニューから「Delete」を選択します。
Structureペインと、ページのDept部分は次のように表示されます。
ページ内を右クリックし、「Run」を選択します。
ブラウザ・ウィンドウで「Create」ボタンをクリックし、空のフォームを表示します。
各フィールドに新しい値（ここでは、400 - Stock - 1800）を入力します。

「Persists」ボタンをクリックし、部門表に新しい行を挿入します。
新しい部門を追加し、部門レコード間を移動してみます。
ブラウザ・ウィンドウを閉じて、JDeveloperに戻ります。

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

トップへ戻る