ヘッダーをスキップ

Oracle Database 2日でJava開発者ガイド
11g リリース1(11.1)

E05692-02
目次
目次
索引
索引

戻る 次へ

7 Oracle ADFを使用したマスター・ディテール・アプリケーションの作成

この章では、Oracle Application Developer Framework(Oracle ADF)を使用したマスター・ディテール・アプリケーションの作成方法について説明します。内容は次のとおりです。

マスター・ディテール・アプリケーションの概要

マスター・ディテール・アプリケーションを使用すると、関連する表のデータを同時に表示できます。マスター表のレコードをディテール表の関連するレコードとともに表示できます。マスター・ディテール・データを編集するためのプロビジョニングがアプリケーションに組み込まれている場合は、共通のインタフェースを使用して両方の表のデータを編集することもできます。この章で作成するマスター・ディテール・アプリケーションは、次のもので構成されます。

modelおよびviewプロジェクトは、Java EE Model-View-Controller(MVC)デザイン・パターンに基づいています。このデザイン・パターンは、Oracle ADFを使用して簡単に実装できます。

図7-1に、このアプリケーション用に開発された項目の関係を示します。

図7-1    マスター・ディテール・アプリケーションのページ


画像の説明

このアプリケーションは、Oracle DatabaseのHRスキーマにアクセスします。マスター表として部門表を使用して、従業員表からディテール・データを表示します。この章では、Oracle ADFとJDeveloperを使用してこのアプリケーションを作成する方法について説明します。

Oracle ADFの使用

Oracle ADFは、Java EE標準およびオープンソース・テクノロジに基づくエンドツーエンド・アプリケーション・フレームワークであり、サービス指向アプリケーションの作成を簡略化および促進します。Oracle ADFを使用すると、Web、ワイヤレス、デスクトップまたはWebサービス・インタフェースを使用してデータを検索、表示、作成、変更および検証するエンタープライズ・ソリューションを開発できます。Oracle JDeveloper 10g とOracle ADFを連携して使用することで、ドラッグ・アンド・ドロップによるデータ・バインディング、ビジュアルなUI設計およびチーム開発機能が組み込まれた、設計からデプロイまでの全開発のライフサイクルを網羅する環境が提供されます。

次の項では、マスター・ディテール・アプリケーションの作成に使用するいくつかのOracle ADF機能について説明します。

Oracle ADFビジネス・コンポーネント

Oracle ADFビジネス・コンポーネントは、データベース中心のEnterprise Java EEアプリケーション用のビジネス・サービスを開発するためのJava EE準拠のテクノロジです。Oracle ADFビジネス・コンポーネントにより、Oracle Formsなどの4GLツールに慣れた開発者にとって、ビジネス・サービスの構築が簡単になります。

Oracle ADFビジネス・コンポーネントのテクノロジには、次のような特徴があります。

これらの機能はすべて完全にカスタマイズ可能です。このマニュアルで作成するアプリケーションのADF中間層を作成するには、データベース表からADFビジネス・コンポーネントを作成します。

Oracle ADF Faces

Oracle ADF Facesは、JavaServer Faces(JSF)JSR 127仕様に基づいています。Oracle ADF Facesコンポーネントは、アプリケーションのユーザー・インタフェースで使用されます。これらのコンポーネントは、JSFをサポートする任意のIDEで使用できます。

Oracle ADF Facesを使用すると、アプリケーションの一貫したルック・アンド・フィールを設定できます。これにより、ルック・アンド・フィールに準拠することより、ユーザー・インタフェースの相互作用に重点を置くことができます。ADF Facesコンポーネントは、多言語および翻訳の実装やアクセシビリティ機能もサポートしています。

JDeveloperには、複数の設計ツール、ウィザード、特殊なダイアログ・ボックスおよびプロパティ・エディタがあり、これらはADF Facesコンポーネントをページに挿入して使用するのに役立ちます。たとえば、ビジュアル・エディタでは、コンポーネント・パレットからコンポーネントをドラッグ・アンド・ドロップしてユーザー・インタフェースを設計できます。XMLまたはJSP/HTMLのコーディングに慣れている場合は、ページ・ファイルのソースを編集して、ADF Facesコンポーネントのタグを挿入することもできます。

Oracle ADF Facesでのファセットの使用方法

ファセットは、名前付きの子コンポーネントに似ています。親コンポーネント内でファセットを使用して、ページでの子コンポーネントの表示方法を制御します。ファセットは、特定のタイプのUIコンポーネントのプレースホルダです。

サンプル・アプリケーションで使用されるADF Faces af:panelPageコンポーネントでは、ページ全体をレイアウトできます。ページレベルおよびアプリケーションレベルのテキスト、イメージ、アクションおよびボタンをページの特定の領域にレイアウトするためのファセットがサポートされています。

ADF Facesコンポーネントをページにドロップすると、JSP/HTMLビジュアル・エディタには、点線の四角形としてファセットが表示されます。

ADFデータ・コントロール

Oracle ADFデータ・コントロールによって、アプリケーション・クライアントは、モデル・オブジェクト・レイヤーによって定義されたビジネス・サービスにアクセスできます。ビジネス・サービスは、モデル・プロジェクトによって定義された任意のコレクション、値またはアクションです。実行時に、データ・バインドされたUIコンポーネントは、ビジネス・サービスによって定義されたビジネス・サービスにアクセスできます。

Oracle ADFビジネス・コンポーネントをビジネス・サービス・テクノロジとして使用すると、データ・モデル・コンポーネントがOracle ADFデータ・コントロールとしてモデル・レイヤーに公開されます。サンプル・アプリケーションでは、データ・コントロール・インタフェースはすでに実装されているため、作成するOracle ADFビジネス・コンポーネントのデータ・コントロールを作成する必要はありません。

アプリケーションおよびプロジェクトの作成

マスター・ディテール・アプリケーションの開発に進む前に、アプリケーションとデータベースの間の接続を確立するConnectionオブジェクトを作成する必要があります。Connectionオブジェクトの作成手順は、第3章を参照してください。

  1. 「ファイル」メニューから「新規」を選択して新規ギャラリを表示します。「一般」カテゴリから、「アプリケーション」を選択します。

  2. 「アプリケーションの作成」ダイアログ・ボックスで、アプリケーションの「名前」としてAnyCo_ADF_MDと入力し、「アプリケーション・パッケージの接頭辞」は空白のままにして、「アプリケーション・テンプレート」「テンプレートなし[すべてのテクノロジ]」を選択します。「OK」をクリックします。

  3. 「プロジェクトの作成」ダイアログ・ボックスで、「プロジェクト名」としてmodelと入力し、「OK」をクリックします。

modelというプロジェクトを含むAnyCo_ADF_MDという名前のアプリケーションができました。

modelプロジェクトでのビジネス・コンポーネントの作成

modelプロジェクトで、hr.Departmentsおよびhr.Employees表をアプリケーションで表示および編集できるようにするADFビジネス・コンポーネントを作成します。

  1. JDeveloperのアプリケーション・ナビゲータで、modelプロジェクトを選択します。

  2. 「ファイル」メニューから「新規」を選択して新規ギャラリを表示します。ビジネス層カテゴリを開き、「ADF Business Components」を選択します。「項目」リストで、「表からのビジネス・コンポーネント」を選択します。

  3. 「ビジネス・コンポーネント・プロジェクトの初期化」画面で、hr接続が選択されていることを確認し、「OK」をクリックします。

  4. 「表からのビジネス・コンポーネントの作成 - ようこそ」画面で、「次へ」をクリックします。

  5. 「エンティティ・オブジェクト」画面で、選択可能な表のリストを表示するには、「自動問合せ」チェックボックスを選択します。図7-2に示すように、表の「選択可能」リストから、DEPARTMENTSおよびEMPLOYEES表を「選択済」リストに移動します。「次へ」をクリックします。

    図7-2    エンティティ・オブジェクトを作成するスキーマ・オブジェクトの選択


    画像の説明

  6. 「更新可能なビュー・オブジェクト」画面で、Departments (HR.DEPARTMENTS)およびEmployees (HR.EMPLOYEES)「選択済」リストに移動します。「次へ」をクリックします。

  7. 「読取り専用ビュー・オブジェクト」画面で、「次へ」をクリックします。

  8. 「アプリケーション・モジュール」画面で、ADFアプリケーション・モジュールに名前を付けることができます。「名前」としてAnyCoAppModuleを入力します。「次へ」をクリックします。

  9. 「ダイアグラム」で、ビジネス・コンポーネント・ダイアグラムをリクエストできます。ただし、このアプリケーションでは重要ではないため、「次へ」をクリックします。

  10. 「終了」ダイアログ・ボックスで、詳細を確認し、正しければ「終了」をクリックします。定義したビジネス・コンポーネントがmodelプロジェクトに作成されます。

  11. 作業内容をすべて保存します。

ADF中間層を生成しました。これに対して、ユーザー・インタフェースを作成できます。この時点で、データベースからの外部キー関係を処理するその他のビジネス・コンポーネント・オブジェクトも生成されます。DeptMgrFkAssocDeptMgrFkLinkなどです。

図7-3に、アプリケーション・ナビゲータを示します。modelプロジェクトの内容を開いて、アプリケーションに作成される項目を表示できます。

図7-3    ADFモデルのナビゲート


画像の説明

マスター・ディテール・データの表示

アプリケーション・ユーザー・インタフェースは、一連のJSPページで構成されます。このアプリケーションでは、ビューと呼ばれるユーザー・インタフェース(UI)は別のプロジェクトで定義されます。

アプリケーションUIのプロジェクトの作成

アプリケーションUIを作成するには、次のようにviewという名前のプロジェクトを定義します。

  1. アプリケーション・ナビゲータでAnyCo_ADF_MDアプリケーションを選択し、「ファイル」メニューで「新規」を選択して、新規ギャラリを表示します。「一般」カテゴリから、「空のプロジェクト」を選択します。

  2. 「プロジェクトの作成」ダイアログ・ボックスで、新しいプロジェクトの「名前」としてviewと入力し、「OK」をクリックします。

従業員の詳細を表示するJSPの作成

次の手順を使用して、employees.jspという名前のページを作成します。このページを使用すると、部門および従業員のマスター・ディテール・ページの調整されたセットを参照できるようになります。

  1. アプリケーション・ナビゲータで、viewプロジェクトを選択します。プロジェクトを右クリックし、「新規」を選択して新規ギャラリを表示します。

  2. 新規ギャラリで、「Web層」カテゴリを開き、「JSF」を選択します。「項目」リストで「JSF JSP」を選択し、「OK」をクリックします。

  3. 「JSF JSPの作成 - ようこそ」画面で、「次へ」をクリックします。

  4. 「Webアプリケーション」画面で、デフォルトを受け入れて「次へ」をクリックします。

  5. 「JSPファイル」画面で、「ファイル名」としてemployees.jspと入力し、ページ・タイプに「JSPページ(*.jsp)」が選択されていることを確認します。「次へ」をクリックします。

  6. 「コンポーネント・バインディング」画面で、「マネージドBeanでUIコンポーネントを自動公開しない」が選択されていることを確認します。「次へ」をクリックします。

  7. 「タグ・ライブラリ」画面で、「ADF Faces Components」および「ADF Faces HTML」が含まれていない場合は、右側の「選択済のライブラリ」に追加します。「JSF Core」および「JSF HTML」タグ・ライブラリも、「選択済のライブラリ」として右側にリストされている必要があります。これを図7-4に示します。

    図7-4    JSF JSPのライブラリの選択


    画像の説明

  8. 「終了」をクリックします。

JSP/HTMLビジュアル・エディタに新しい空のemployees.jspが表示され、ページの設計を開始する準備が整いました。

ページ・レイアウトおよび見出しの定義

次の手順では、ページに項目を追加してページ・レイアウトを定義します。これまでの章と同様に、コンポーネント・パレットを使用して、タグをページにドロップします。このページでは、ADF Faces PanelPageコンポーネントを使用します。

  1. コンポーネント・パレットが表示されていない場合は、「表示」メニューを使用して表示します。コンポーネントの「ADF Faces Core」タブを選択します。PanelPageコンポーネントを空のページにドラッグ・アンド・ドロップします。コンポーネント・パレットの「ADF Faces Core」ページを図7-5に示します。

    図7-5    コンポーネント・パレットの「ADF Faces Core」


    画像の説明

    ドロップすると、図7-6に示すように、Title 1というテキストとともに濃い青色の線が表示されます。

    図7-6    ADF Faces PanelPageコンポーネント


    画像の説明

  2. ページで、PanelPageコンポーネントをクリックし、プロパティ・インスペクタで「タイトル」フィールドの値をTitle 1からBrowse Employeesに変更して、[Enter]を押します。タイトルの変更がビジュアル・エディタのページに反映されます。

  3. この手順で、ページ・タイトルとして使用する別のADF Facesコンポーネントをページに追加します。PanelPageのbrandingセクションにコンポーネントをドラッグします。コンポーネント・パレットの「ADF Faces Core」ページから、OutputTextコンポーネントをドラッグし、brandingファセット(ページの左上にあるbrandingというタイトルが付いた点線の四角形)にドロップします。

  4. 新しいOutputTextがoutputText1というデフォルト値で表示されます。プロパティ・インスペクタでOutputTextの値を変更して、これをAnyCo Corporationに変更します。

  5. OutputTextのStyleClassプロパティを値AFHeaderLevelOneに変更して、テキストのルック・アンド・フィールを変更します。これは、ADF Facesによって定義されているスタイルです。

    変更すると、テキストはビジュアル・エディタで大きく青色で表示されます。図7-7に、これらの手順の後のビジュアル・エディタでのページを示します。

    図7-7    テキストが追加されたPanelPageコンポーネント


    画像の説明

JSPページでのマスター・データの表示

次の手順では、ページに項目を追加して、ユーザーが部門およびその従業員を表示できるようにします。これらの手順では、データ・コントロール・パレットを使用します。これは、デフォルトではJDeveloperの表示の右、コンポーネント・パレットの横にあります。データ・コントロール・パレットによって、ADFデータ・コントロールという名前のデータ・オブジェクトをページにドロップできます。

最初の段階は、部門、および別の部門とその関連従業員へのナビゲーション・ボタンを表示する読取り専用フォームを追加することです。このことを行うには、modelプロジェクトで作成したデータ・コントロールの1つをページにドラッグします。

  1. データ・コントロール・パレットを選択し、AnyCoAppModuleノードを開きます。図7-8に、AnyCoAppModuleが開かれたデータ・コントロール・パレットを示します。

    図7-8    データ・コントロール・パレット


    画像の説明

  2. データ・コントロール・パレットで、DepartmentsView1ノードを選択し、ページの中央のBrowse Employeesというテキストのすぐ下にドラッグします。

  3. ドロップすると、ポップアップ・メニューが表示されます。「作成」「フォーム」「ADF読取り専用フォーム」の順に選択します。

  4. 「フォーム・フィールドの編集」ダイアログ・ボックスで、「ナビゲーション・コントロールを含める」を選択し、「OK」をクリックします。これを図7-9に示します。

    図7-9    フォーム・フィールドの追加


    画像の説明

ナビゲーション・ボタンがページに表示された読取り専用フォームがビジュアル・エディタに表示されます。フォームが表示されない場合は、リフレッシュ・ボタンをクリックします。フォーム・フィールドの値は、#{...}などの式言語を使用して表示されます。これは、ページにレンダリングされるアプリケーション・データをJSFが識別する方法です。

図7-10に、これらの手順の後でページがビジュアル・エディタにどのように表示されるかを示します。

図7-10    ビジュアル・エディタでのフォーム・フィールド


画像の説明

マスター・レコードのディテール・データの表示

次の手順では、最初に水平のセパレータをページに追加して、部門データと従業員のディテール・データを分割します。次に、各マスター部門の従業員のディテール・データを表示するために、modelプロジェクトで作成したビジネス・コンポーネントから作成された別のデータ・コントロールを使用します。従業員データを特定のマスター部門にリンクするデータ・コントロールを選択します。従業員データはObjectSeparatorの下に表示します。

  1. ページにセパレータを追加するには、コンポーネント・パレットの「ADF Faces Core」ページからObjectSeparatorコンポーネントをドラッグし、ビジュアル・エディタのフォームの下に配置します。水平の点線がフォームの下に表示されます。

  2. データ・コントロール・パレットで、DepartmentsView1ノードを開きます。

    部門表のフィールド以外に、子のEmployeesView3ノードもあります。このノードは、部門表への外部キーによって制限された詳細な従業員または従業員セットを表します。

  3. EmployeesView3ノードをページの水平の点線(ObjectSeparator)の下にドラッグ・アンド・ドロップします。

    ドロップする前にマウスを移動すると、どこにドロップされるかがビジュアル・エディタおよび左下の「構造」ウィンドウに表示されます。図7-11に示すように、af:objectSeparatorの後になるように、ドロップされる位置を「構造」ウィンドウで調整します。

    図7-11    ドロップされる位置を示す「構造」ウィンドウ


    画像の説明

  4. ドロップすると、ショートカット・メニューが表示されます。「作成」「表」「ADF読取り専用表」の順に選択します。

  5. 「表の列の編集」ダイアログ・ボックスで、「選択の有効化」および「ソートの有効化」を選択します。

    「OK」をクリックする前に、3つの列DepartmentIdManagerIdおよびCommissionPctを削除します。これらの各行で順番に行を選択し、「削除」をクリックします。

    図7-12に、「表の列の編集」ダイアログ・ボックスを示します。

    図7-12    表の列の編集


    画像の説明

    「OK」をクリックして表を生成します。

  6. 作業内容を保存します。

図7-13に示すように、マスター・フォームとディテール表の両方がビジュアル・エディタに表示されます。

図7-13    ビジュアル・エディタでのマスター・ディテール表示


画像の説明

アプリケーションのテスト

部門と従業員をページに追加した後は、ここまでのアプリケーションをテストします。アプリケーションをテストするには、次の手順を実行します。

  1. アプリケーション・ナビゲータで、ページemployees.jspを右クリックし、「実行」を選択します。JDeveloperに埋め込まれているOC4Jサーバーを使用してアプリケーションがローカルで起動されます。アプリケーションが起動すると、従業員のマスター・ディテール・ページがブラウザに表示されます。

  2. マスターとディテールの連携をテストするには、部門フォームのナビゲーション・ボタン(「次へ」「前へ」「先頭へ」「最後へ」)をクリックします。ナビゲーション・ボタンをクリックすると、関連する従業員が下の表に表示されます。

    ブラウザに表示されるページは、図7-14のようになります。

    図7-14    ブラウザに表示された従業員データ


    画像の説明

  3. テストを終了するには、サーバーを停止します。これを行うには、JDeveloperで、「実行中: 埋込みOC4Jサーバー - ログ」というログ・ウィンドウを右クリックし、「終了」を選択します。

アプリケーション・ページ間のナビゲーション: JSFナビゲーション・ダイアグラム

JSFナビゲーション・ダイアグラムを使用して、アプリケーションを計画できます。このダイアグラムには、アプリケーション・ページおよびそれらの間のナビゲーション・ケースが表示されます。

ダイアグラムから新しいページを直接作成し、それらの間のナビゲーションを定義できます。コンポーネント・パレットからドロップした要素を使用します。

その後、ビジュアル・エディタなどのツールを使用してJSFページを編集したり、ダイアグラムからナビゲーション・ケースを直接編集することができます。

JSFナビゲーション・ダイアグラムを使用したページの作成

ユーザーが従業員データを編集できるようにするために、新しいページedit.jspを作成します。このページに、データ・コントロール・パレットからADF入力フォームをドロップします。

次の手順では、JSF JSPウィザードを使用して新しいページを直接作成するかわりに、JSFナビゲーション・ダイアグラムから新しいページを作成します。後の手順では、ページ間のナビゲーションもダイアグラムでビジュアルに定義します。

  1. アプリケーションのJSFナビゲーション・ダイアグラムを開くには、アプリケーション・ナビゲータで、viewプロジェクトを右クリックし、「JSFナビゲーションを開く」を選択します。

    空のナビゲーション・ダイアグラムが表示されます。

  2. ナビゲーション・ルールの定義を開始するには、既存のemployees.jspページをアプリケーション・ナビゲータから空のダイアグラムにドラッグします。

    employees.jspページを表すページ・アイコンがナビゲーション・ダイアグラムに表示されます。

  3. 新しいページを作成するには、JSFナビゲーション・ダイアグラムを編集ウィンドウに表示したまま、コンポーネント・パレットの「JSFナビゲーション・ダイアグラム」ページから、「JSFページ」をダイアグラムにドラッグします。

    新しいページ・アイコンがダイアグラムに表示されたら、テキストedit.jspを入力して名前/untitled1.jspを置き換え、[Enter]を押します。(名前の前にスラッシュを追加する必要はありません。自動的に追加されます。)

    この時点で新しいページがダイアグラムに追加されましたが、ページ・ファイル自体は存在しません。このことを示すために、ページ・アイコンには黄色の注意記号が付いています。

  4. edit.jspページを作成するには、ダイアグラムでページedit.jspのページ・アイコンをダブルクリックします。

  5. 「JSF JSPの作成」ウィザードで、「ようこそ」ページが表示されたら、「次へ」をクリックします。ページの名前はすでに入力されており、残りの手順は以前に作成したemployees.jspページと同じなので、「終了」をクリックします。

    ビジュアル・エディタに新しいページが表示され、ページを設計する準備が整いました。

ページ間のナビゲート

ユーザーによるJSFアプリケーションのナビゲーションは、ユーザーがリンクをクリックしたときに次に表示されるページを決定するナビゲーション・ルールを使用して定義されます。ページ上の様々なリンクなど、様々なケースがナビゲーション・ケースとして定義されます。

ダイアグラムを使用して、ページ間のフローを表すアプリケーションのページ間のナビゲーションを描くことができます。

JSFナビゲーション・ダイアグラムでナビゲーションを描くと、2つのことが起こります。必要な構成ファイルにナビゲーション・ケースが自動的に追加されます。また、ページをつなぐ矢印として、ナビゲーション・ケースがダイアグラムに表示されます。矢印の向きは、ユーザーのナビゲート元およびナビゲート先のページを示します。

1つのページからの異なるナビゲーション・ケースを区別するために、各ナビゲーション・ケースにラベルが関連付けられます。

ページ間のナビゲーションの定義

次の手順では、アプリケーションの2つのページ間のナビゲーションを可能にするために、アプリケーションにナビゲーションの詳細を追加します。

  1. JSFナビゲーション・ダイアグラムに戻り、2つのページ間のナビゲーションを定義します。これには、編集ウィンドウで開かれている項目の中から、faces-config.xmlのタブを選択します。ダイアグラムが開かれていない場合は、前に行ったように開きます。

  2. ダイアグラムでemployees.jspページ・アイコンをクリックして、このページにフォーカスします。

  3. コンポーネント・パレットの「JSFナビゲーション・ダイアグラム」ページで、「JSFナビゲーション・ケース」をクリックします(ドラッグではありません)。

  4. ダイアグラムで、employee.jspアイコンを再度クリックします。ページをクリックした後、マウスをページから移動し始めると、employees.jspページにつながる線が表示されます。edit.jspページをクリックして、この線を新しいページにつなぎます。

    2つのページが線でつながれました。これは、employees.jspページからedit.jspページにナビゲートするナビゲーション・ケースを表します。「成功」というデフォルト値のラベルが付いています。

  5. 値を変更するには、「成功」をクリックし、editと入力し、[Enter]キーを押します。editというテキストが、線のラベルとしてダイアグラムに表示されます。

  6. edit.jspページからemployees.jspページにナビゲートする別のナビゲーション・ケースを追加し、returnという名前を付けます。このナビゲーション・ケースは、edit.jspページからemployees.jspページへ戻るナビゲーションを表します。

  7. 作業内容を保存します。

ナビゲーション・ダイアグラムには、両方のナビゲーション・ケースが表示されます。1つは、ユーザーが従業員の詳細を編集できるようにemployees.jspページからedit.jspページへナビゲートするためのナビゲーション・ケースで、もう1つは、ユーザーがemployees.jspページに戻るためのナビゲーション・ケースです。図7-15に、employees.jspページおよびedit.jspページのナビゲーション・ダイアグラムを示します。

図7-15    ナビゲーション・ダイアグラム


画像の説明

データの編集

ユーザーが従業員データを編集できる編集ページを作成するには、ADF Facesコンポーネントを使用して、従業員ページとまったく同じ方法でページをレイアウトします。

従業員データには、データ・コントロールが使用されています。特定の部門の特定の従業員の正しい従業員データを表示するために、従業員ページで使用した部門データ・コントロールの子データ・コントロールとして従業員データを提供できるデータ・コントロールがあります。このデータ・コントロールによって、従業員データの正しいセットが提供されます。

ユーザーがデータを編集できるように、表ではなくADFフォームにデータを表示します。

編集フォームの作成

次の手順では、edit.jspページを作成します。

  1. ビジュアル・エディタでedit.jspページを開きます。

  2. edit.jspページで、コンポーネント・パレットの「ADF Faces Core」ページから、PanelPageコンポーネントをページに追加します。PanelPageのタイトルをEdit Employeeに変更します。

  3. また、OutputTextコンポーネントをページ上部のbrandingファセットに追加します。「値」プロパティをAnyCo Corporationに、「styleClass」プロパティをAFHeaderLevelOneに設定します。

  4. データ・コントロール・パレットで、DepartmentsView1ノードを開き(閉じられている場合)、その下にある同じEmployeesView3ノードを確認します。これは、次に示すように、DepartmentsView1の子です。

  5. EmployeesView3ノードをパネルの中央のEdit Employeeというタイトルの下にドラッグします。表示されるダイアログ・ボックスで、「作成」「フォーム」および「ADFフォーム」を選択します。


    注意:

    データ・コントロール・パレットから、親DepartmentsView1の下にある子EmployeesView3ノードを選択することが重要です。子EmployeesView3には、外部キー関係で指定されたように、特定の親Deparmentの従業員のディテール・レコードが表示されます。 


  6. 「フォーム・フィールドの編集」ダイアログ・ボックスで、「送信ボタンを含める」を選択し、「OK」をクリックします。

編集フォームはほぼ完成です。最後に、ユーザーがemployees.jspページに戻るためのボタンを追加します。これを行うには、次の手順を実行します。

  1. コンポーネント・パレットの「ADF Faces Core」ページから、CommandButtonをページにドラッグし、ページ下部にある「発行」ボタンの横に配置します。

  2. プロパティ・インスペクタを使用して、ボタンの「テキスト」プロパティをcommandButton 1からReturnに変更します。

  3. 再度プロパティ・インスペクタを使用して、CommandButtonの「アクション」プロパティをReturnに変更します。「アクション」フィールドの矢印を使用して、値returnを選択できます。この値は、edit.jspページからemployees.jspページにユーザーが戻るナビゲーション・ケースで入力した値です。

  4. ページを保存します。

編集ページが完成しました。図7-16に示すようなページになります。

図7-16    ビジュアル・エディタでの従業員の詳細フォームの編集


画像の説明

編集ページへのナビゲート

残りの処理は、従業員ページを表示したユーザーが編集ページにナビゲートして従業員の詳細を編集できるようにすることです。これを行うには、ナビゲーション・ダイアグラムで定義したeditという名前のナビゲーション・ケースを使用します。従業員ページの従業員表にはすでにボタンがあり、ユーザーが編集ページにナビゲートするために使用できます。

  1. ビジュアル・エディタでemployees.jspページを開きます。

  2. 「発行」ボタンを選択してフォーカスします。

  3. プロパティ・インスペクタで、「テキスト」プロパティをEditに変更します。「アクション」プロパティをeditに設定します。「アクション」フィールドの矢印を使用して、値editを選択します。この値は、employees.jspページからedit.jspページにユーザーがナビゲートするナビゲーション・ケースとしてナビゲーション・ダイアグラムで指定した値です。

これで、ユーザーがこのボタンをクリックすると、選択したレコードが表示された編集ページにナビゲートされます。

COMMITおよびROLLBACKの有効化

ユーザーが従業員の詳細に対して行った編集をコミットできるように、またはロールバックしてそれらを破棄できるように、コミットおよびロールバック機能を有効にするには、employees.jspページの下部に「コミット」ボタンおよび「ロールバック」ボタンを追加します。

この手順でもファセットを使用します。この場合、フッター・ファセットを表に追加し、「コミット」ボタンおよび「ロールバック」ボタンをこのフッター・ファセットに追加します。

次の手順でフッター・ファセットを追加するには、「構造」ウィンドウを使用します。

  1. ビジュアル・エディタにemployees.jspが表示されている状態で、「構造」ウィンドウで表コンポーネント(af:table)を開きます。構造内には、Table Facetsフォルダがあります。

  2. Table Facetsフォルダを開きます。ADF Faces表コンポーネントでサポートされる様々なファセット用の複数のサブフォルダがあります。

    図7-17に示すように、フッター・ファセットは現在空のため灰色です。

    図7-17    空のフッター・ファセット


    画像の説明

    「コミット」ボタンおよび「ロールバック」ボタンを保持できるように、フッター・ファセットをこのプレースホルダに挿入します。

  3. 「構造」ウィンドウで、フッター・ファセット・ノードを右クリックし、「ファセット-表」「フッター」の順に選択します。

    図7-18に示すように、フッター・ファセットがページの表の一番下に追加されます。

    図7-18    フッター・ファセットの挿入


    画像の説明

    これで、JSFコンポーネントをフッター・ファセットに配置できます。

必要な「コミット」ボタンおよび「ロールバック」ボタンは、データ・コントロール・パレットのOperationsノード内にあります。このノードは、親AnyCoAppModuleDataControlの直下の子です。

ページにボタンを追加するには、次の手順を実行します。

  1. データ・コントロール・パレットで、AnyCoAppModuleDataControlフォルダ、Operationsフォルダの順に開きます。Operationsフォルダ内に、「コミット」および「ロールバック」ノードがあります。

  2. 「コミット」および「ロールバック」ノードそれぞれを、表の一番下のフッター・ファセットにドラッグします。

    それぞれの処理をデータ・コントロール・パレットからフッター・ファセットにドロップすると、ダイアログ・ボックスが表示されます。「ADFコマンド・ボタンの作成」を選択します。

  3. 作業内容をすべて保存します。

これでアプリケーションが完成しました。最終的なemployees.jspページは、図7-19に示すようになります。

図7-19    ビジュアル・エディタでの最終的なマスター・ディテール・アプリケーション


画像の説明

アプリケーションの実行

次のようにアプリケーションを実行できます。

  1. アプリケーション・ナビゲータで、employees.jspを右クリックし、ショートカット・メニューで「実行」を選択します。

  2. アプリケーションを実行すると、異なる部門にナビゲートし、個々の従業員を選択して編集できるようになります。従業員の給与または入社日を更新してみます。

ブラウザに表示される従業員ページを図7-20に示します。

図7-20    ブラウザに表示されたマスター・ディテール・アプリケーション


画像の説明

ブラウザに表示される編集ページを図7-21に示します。

図7-21    マスター・ディテール・アプリケーションの内容の編集


画像の説明


戻る 次へ
Oracle
Copyright © 2007 Oracle Corporation.

All Rights Reserved.
目次
目次
索引
索引