エンティティ・オブジェクトに対するコントロール・ヒントを含むUIX参照フォームおよび編集フォームの作成

このトピックでは、次の操作が可能なデータ・バインドされたStrutsアプリケーションのモデル・レイヤー、コントローラ・レイヤーおよびビュー・レイヤーの作成に必要な手順を説明します。

このトピックでは、次の項目について説明します。

概要

アプリケーションが完成したら、ページ・フロー・ダイアグラムから実行します。次のような参照用のWebページが最初に表示されます。

Browse page showing employee data

編集用のWebページは次のようになります。

Edit web page

次の図に、このページ・フローを作成するためにモデル・レイヤー、コントローラ・レイヤーおよびビュー・レイヤーで実行する必要のある手順を簡単に示します。

Scenario steps in Model, View, and Controller layers

次に、このページ・フローを作成するためにモデル・レイヤー、コントローラ・レイヤーおよびビュー・レイヤーで実行する必要のある主要な手順を詳しく説明します。

モデル・レイヤー

コントローラ・レイヤー(設計時)

ビュー・レイヤー

コントローラ・レイヤー(実行時)

注意: ビュー・レイヤーにUIXページを作成する前にページ・フロー・ダイアグラムにコントローラ・レイヤー全体を作成することもできますが、多くの場合、データ・ページと関連するWebページを作成してから残りのページ・フロー・ダイアグラムを作成します。後続の項の順序はこの開発方法に対応しています。

エンティティ・オブジェクトのコントロール・ヒントの作成

この例では、Employeesオブジェクト・エンティティのコントロール・ヒントを設定して、アプリケーション全体におけるこのオブジェクト・エンティティのSalary属性とHireDate属性の表示方法を決定します。

Employeesエンティティ・オブジェクトのコントロール・ヒントを作成するには、次のようにします。

  1. ナビゲータで、モデル・プロジェクトの「Employees」エンティティ・ノードをダブルクリックし、エンティティ・オブジェクト・エディタを表示します。
  2. 属性ノードを開いて、「HireDate」属性を選択します。
  3. 「コントロール・ヒント」タブをクリックし、属性のヒント・オプションを表示します。次のように属性を設定します。

    Entity Object Editor with Control Hint Pane

    「適用」をクリックして、エディタ・ウィンドウを閉じずに変更内容を保存します。

  4. 「Salary」ノードを選択して、「コントロール・ヒント」タブをクリックします。次のように属性を設定します。

    「OK」をクリックし、変更を保存してエンティティ・オブジェクト・エディタを閉じます。

コントロール・ヒントの詳細は、「ビジネス・コンポーネント・クライアントのコントロール・ヒントについて」を参照してください。

参照ページ機能の作成

この項では、このページ・フローの参照ページ機能の表示に使用されるデータ・ページとWebページの作成方法を説明します。

参照データ・ページと関連するUIXページを作成するには、次のようにします。

  1. Strutsページ・フロー・ダイアグラムを開きます

  2. コンポーネント・パレットで、データ・ページ要素をクリックしてページ・フロー・ダイアグラムにドラッグします。データ・ページに/browsePageという名前を付けます。

    この手順を実行すると、次のエントリがstruts-config.xmlファイルに作成されます。

      <action-mappings>
        <action path="/browsePage"
          className="oracle.adf.controller.struts.actions.DataActionMapping"
          type="oracle.adf.controller.struts.actions.DataForwardAction" name="DataForm"
          parameter="unknown">
       </action>        

    データ・ページを追加すると、アクションのclassName属性とtype属性にOracle ADFサブクラスが使用されます。Oracle ADFアクション・サブクラスを使用したアクション・マッピングの詳細は、「データ・バインドされたStrutsアプリケーションでのページ・フローについて」を参照してください。

  3. /browsePageのデータ・ページ・アイコンをダブルクリックします。「ページの選択または作成」ダイアログ・ボックスの「ページ名」ドロップダウン・リストでページ名「browsePage.uix」を選択します。このとき、「このページをすぐに編集」チェック・ボックスを選択したまま、「OK」をクリックします。

    browsePage.uixファイルが作成され、ページがUIXビジュアル・エディタに表示されます。このとき、次の2つの構成ファイルがナビゲータの「ViewController」ノードに追加されます。

  4. コンポーネント・パレットのすべてのUIXコンポーネントのリストからpageLayout要素をドラッグしてbrowsePage.uixのボックスにドロップします。

    Described in text

    pageLayout要素は、ページ全体のテンプレートの役割を果たす高度なレイアウト要素です。ページ作成のためのいくつかのナビゲーション領域およびコンテンツ領域をサポートします。このページに追加した要素は、すべてこの要素に含まれます。

    pageLayoutまたはその他のUIX要素の詳細を確認するには、コンポーネント・パレットで要素を右クリックし、コンテキスト・メニューの「ヘルプ」を選択します。

  5. データ・コントロール・パレットで「EmployeesView1」を選択します。「ドラッグ・アンド・ドロップの形式」リストから読取り専用の表を選択し、「EmployeesView1」をbrowsePage.uixにドラッグします。

    データ・コントロール・パレットには、そのページで使用可能なビジネス・サービスが表示されます。この手順では、EmployeesView1というデータ・コレクションを使用してHRデータベースのEmployees表のデータを表示する読取り専用表を追加します。ソース・ビューでは、次のようにtableタグのデータ・コレクションを参照するEL式${bindings.EmployeesView1}の使用方法を確認できます。

    <table model="${bindings.EmployeesView1}" id="EmployeesView14">

    データ・バインドされた最初のフォームをWebページに追加すると、DataBindings.cpxbrowsePageModelUI.xmlという2つのOracle ADFプロジェクト・ファイルが「ビュー」フォルダに作成されます。DataBindings.cpxは、アプリケーション全体のバインディング・コンテナを定義します。browsePageModelUI.xmlは、個々のWebページが使用するバインディングを定義するモデル参照です。ナビゲーション・ボタンや表示用の表をページに追加すると、バインディング・オブジェクトのプロパティの指定にEL式を使用するこれらのバインディング・オブジェクトへの参照によって自動的にデータ・バインドされます。

    この時点で、struts-config.xmlファイルが更新されます。次のように<set-property>要素がアクション・マッピングに追加され、関連付けられている<action>要素にモデル参照が定義されます。

    <set-property property="modelReference" value="browsePageUIModel"/>

    Oracle ADFプロジェクト・ファイルの詳細は、「ADF固有のプロジェクト・ファイルについて」を参照してください。データ・コントロール・パレットの詳細は、「データ・コントロール・パレットを使用したUIコンポーネントの挿入」を参照してください。

  6. コンポーネント・パレットで、「pageButtonBar」を選択してページ内のpageButtonsスロットまでドラッグします。

  7. データ・コントロール・パレットで、一番上の「Operations」ノードの「Commit」を選択してpageButtonバーまでドラッグします。

  8. データ・コントロール・パレットで、一番上の「Operations」ノードの「Rollback」を選択してpageButtonバーまでドラッグします。

    次の図は、この時点でUIXビジュアル・エディタに表示されているページの一部です。

    Readonly table with buttons

    「Commit」ボタンや「Rollback」ボタンを1つのpageButtonBarスロットにドラッグしましたが、UIXビジュアル・エディタではそれらが両方のスロットに表示されます。UIXページは、ユーザー・インタフェース・ノードの階層ツリーで構成されます。コンポーネントをUIX XMLページに挿入する際は、物理的な絶対位置に挿入するのではなく、論理的な階層内の位置に挿入します。UIXによって、ビジュアル・エディタでも対象のブラウザでも物理的に正しい位置にレンダリングされます。UIXページのpageButtonBar部分のソースは次のようになります。

     <pageButtonBar>
      <contents>
       <submitButton text="Commit" model="${bindings.Commit}" id="Commit1"      event="action"/>
       <submitButton text="Rollback" model="${bindings.Rollback}" id="Rollback2"
        event="action"/>
      </contents>
     </pageButtonBar>

    コミット操作とロールバック操作は、モデル・バインディングによって可能な操作です。モデル・レイヤーで使用可能な操作の詳細は、「Oracle ADFでサポートされているデータ・コレクション操作について」を参照してください。

  9. 次に、すべてのUIXコンポーネント・パレットのsubmitButton要素を表の一番上の行にドラッグして、ユーザーが編集ページに進むためのリンクを作成します。

  10. 送信ボタンをダブルクリックして属性エディタを開き、次の属性値を割り当てます。

    「OK」をクリックし、変更を保存して属性エディタを終了します。ドロップした送信ボタンが次のように表示されます。

    Edit Record button in read-only table

    次のコードはフォームのこの部分のソース・コードです。

    <tableSelection>
     <singleSelection model="${bindings.EmpView1Iterator}" text="Select and ">
       <primaryClientAction>
        <firePartialAction targets="EmpView10" source="EmpView10" event="select"/>
       </primaryClientAction>
      <contents>
       submitButton text="Edit Record" event="edit"/>
      </contents>
     </singleSelection>
    </tableSelection>

    <contents>タグのevent属性の値であるeditは、「アクションに対するフォワードの作成」の項でbrowsePageデータ・フォワード・アクション・クラスに対して定義するフォワードの名前に対応しています。実行時に、データ・フォワード・アクション・クラスにより、イベント名と同じname属性を持つ<forward>要素がアクション・マッピングに含まれるかどうかが確認され、含まれる場合は正しい宛先へフォワードされます。

    注意: データ・アクションまたはデータ・フォワード・アクション(データ・ページ)で処理されるイベントを除き、すべてのイベントにUIXページでイベント・ハンドラを定義する必要があります。データ・バインドされたStrutsアプリケーションでUIXページを使用するときのイベント処理の詳細は、「Oracle ADF、UIXおよびStrutsを使用するアプリケーションでのイベント処理について」を参照してください。

編集ページ機能の作成

この項では、このページ・フローの編集機能の表示に使用されるデータ・ページとUIXページの作成方法を説明します。

編集フォーム・ページを作成するには、次のようにします。

  1. コンポーネント・パレットで、データ・ページ要素をクリックしてページ・フロー・ダイアグラムにドラッグします。データ・ページに/editPageという名前を付けます。

    このデータ・ページを追加すると、struts-config.xmlファイルの<action-mappings>セクションに/browsePageの場合と同様のエントリが作成されます。

  2. /editPageのデータ・ページ・アイコンをダブルクリックし、「ページの選択または作成」ダイアログ・ボックスで「OK」をクリックし、editPage.uixという名前のUIXページを作成します。このとき、「このページをすぐに編集」チェック・ボックスを選択したままにします。

    editPage.uixファイルが作成され、ページがUIXビジュアル・エディタに表示されます。

  3. コンポーネント・パレットのすべてのUIXコンポーネントのリストからpageLayout要素をドラッグしてbrowsePage.uixのボックスにドロップします。

  4. データ・コントロール・パレットで「EmployeesView1」ノードを選択します。「ドラッグ・アンド・ドロップの形式」リストのナビゲーション付きの入力フォームを選択し、「EmployeesView1」を空のUIXページにドラッグします。次のスクリーン・キャプチャのようになります。

    Read-Only Form with Navigation

    ほとんどのフィールドは<messageTextInput>要素によってソース・ビューに表示されます(データ・フィールドは<messageDateInput>要素で表されます)。また、これらの要素の中には<onSubmitValidater>要素も含まれます。これらは、ブラウザで実行されるクライアント側のValidatorです。

    <messageTextInput model="${bindings.EmployeeId}" columns="10">
     <onSubmitValidater>
      <decimal/>
     </onSubmitValidater>
    </messageTextInput>

    「給与」フィールドにはValidatorはないことに注意してください。

    <messageTextInput model="${bindings.Salary}" columns="10"/>

    フォームに表示されるラベルは、エンティティ・オブジェクトに定義したすべてのコントロール・ヒントを含むコントロール・バインディングに基づきます。通貨フォーマットなど特定のデータ・フォーマットには、クライアント側のValidatorがありません。

  5. 「Submit」ボタンを選択し、属性をプロパティ・インスペクタで表示して次のように属性値を割り当てます。

  6. コンポーネント・パレットのすべてのUIXコンポーネントのリストからButton要素をドラッグして「変更を送信」ボタンの右側に配置します。

    この新しいボタンをクリックし、属性をプロパティ・インスペクタで表示して次のように2つのプロパティを設定します。

    この時点でフォームのボタン・バーは次のように表示されます。

    Return to browse button in page layout

  7. オプションで、データ・コントロール・パレットで、一番上の「Operations」ノードの「Commit」を選択してボタンの行までドラッグします(このボタンを追加すると、ユーザーにはこのページで変更をコミットするオプションが与えられます。参照ページには、「Commit」ボタンが含まれています)。

    この例では、「Commit」ボタンをクリックするとユーザーは参照ページに戻ります。この動作を追加するには、イベント・ハンドラ定義にナビゲーションを追加する必要があります。このためには、UIXビジュアル・エディタで「Commit」ボタンを選択し、ボタンのプロパティをプロパティ・インスペクタに表示します。プロパティ・インスペクタの「イベント・ハンドラ・リンクに移動」をクリックすると、そのボタンのイベント定義が構造ウィンドウでハイライトされます。

    ハイライトされたノードを再び右クリックして、「eventの中に挿入 - action」->「UIXサーブレット」->「go」を選択し、もう1つイベント・ハンドラを追加します。goの挿入のダイアログが開いたら、「name」フィールドに「back」を入力します。

    <go>タグのname属性の値であるbackは、「アクションに対するフォワードの作成」の項でeditPageデータ・フォワード・アクション・クラスに対して定義するフォワードの名前に対応しています。
  8. UIXページのイベント・ハンドラのソース・ビューは次のようになります。

    <event name="action" source="Commit12">
     <compound>
      <invoke method="doIt" javaType="oracle.jbo.uicli.binding.JUCtrlActionBinding"    instance="${bindings.Commit}"/>
      <go name="back"/>
     </compound>
    </event>

    「Commit」ボタンのイベント・ハンドラに<go>タグを追加すると、UIX設計時ツールにより、必要な<compound>タグが自動的にイベント・ハンドラの定義に追加されます。複合イベント・ハンドラを作成すると、新しいイベント・ハンドラは既存のイベント・ハンドラ要素の後に追加されます。

    注意: <invoke>タグのコードは変更しないでください。

アクションに対するフォワードの作成

この項では、ページ・フローで必要なフォワード遷移をページ・フロー・ダイアグラムを使用して作成する方法について説明します。

フォワード遷移を作成するには、次のようにします。

  1. データ・コントロール・パレットでフォワード・アイコンをクリックし、/browsePageから/editPageへのフォワード遷移を作成します。この遷移にはeditという名前を付けます。

    このフォワードの名前は、ユーザーが表の「Edit」リンクをクリックしたときにアプリケーションが実行するイベントであるeditに対応します。このリンクは、この使用例の参照ページを作成した際に作成されています。フォワードを追加すると、最初のデータ・ページのアクション・マッピングに<forward>要素が次のように追加されます。

    <forward name="edit" path="/editPage.do"/>

    また、<set-property>要素もアクション・マッピングに追加されます。これにより、フォワードのモデル参照が設定されます。

    <set-property property="modelReference" value="editPageUIModel"/>

    操作とフォワードの関連付けの詳細は、「アクション・フォワードを定義するためのイベントの使用」を参照してください。

  2. /editPageから/browsePageへのフォワード遷移を作成します。この遷移にはbackという名前を付けます。

    このフォワードを追加すると、2番目のデータ・ページのアクション・マッピングに<forward>要素が追加されます。

アプリケーションの実行

Strutsページ・フロー・ダイアグラムで作成したデータ・ページから、データ・バインドされた参照ページおよび編集ページを実行します。

アプリケーションを実行するには、次のようにします。

  1. ビジュアル・エディタの上部の「struts-config.xml」タブをクリックして、ページ・フロー・ダイアグラムに戻ります。

    Completed page flow

  2. 「browsePage」アイコンを右クリックし、「実行」を選択します。

    編集ページがブラウザに表示されたら、任意の行にデータを入力できます。更新データの入力が終了したら、次の2つのオプションのどちらかを実行できます。

    「変更内容を送信」をクリックすると、編集ページの「Commit」をクリックして変更内容を保存し、参照ページに戻ることができます。または、「参照に戻る」をクリックして参照ページに戻ることができます。参照ページでは、変更内容をコミットまたはロールバックし、編集する他のレコードを選択できます。

    注意: データの更新に失敗すると、エラー・メッセージが表示されます。

  3. レコードを編集してから参照ページに戻ると、「Commit」ボタンがアクティブになります。ボタンをクリックして更新トランザクションをコミットできます。

データ・バインドされたStrutsアプリケーションでのページ・フローについて
Strutsアプリケーションのページ・フローについて
Oracle ADFのバインディングについて
ADFバインディングのプロパティについて
Oracle ADFデータ・コントロールについて
ADF UIXページの使用

 

Copyright © 1997, 2004, Oracle. All rights reserved.