第2部：簡単なユーザー・インタフェースの作成

Oracle JDeveloperのIDEを操作して、アプリケーションのビューおよびナビゲーション部分を構成するページとタスク・フローを作成します。

ページ・フローの作成：Create ADF Task Flowダイアログを使用して、バウンド・タスク・フローとしてページ・フローを作成します。

JSPページの作成：Create JSF JSPページ・ダイアログを使用して、初期ページ構造のJSP XMLドキュメントを作成します。

参照ページの作成：Data Controlsパネルを使用して、読取り専用のフォームおよび表をページに追加します。

編集ページの作成：Data Controlsパネルを使用して、編集可能なフォームおよびコミット・ボタンをページに追加します。

アプリケーションの実行：参照ページからJSF JSPファイルのテストを実行して、ページの表示とブラウザでの編集を確認します。

ページ・フローの作成

1. アプリケーション・ナビゲータで、「 ViewController 」 プロジェクトを選択し、Create Task Flowダイアログを開きます（「 File」→「 New」→「 Web Tier」→「 JSF」→「 ADF Task Flow」）。
2. Create Task Flowダイアログで、ファイル名として orders-flow.xmlを入力します。
3. Create as Bounded Task Flowが選択されていることを 確認し、「 Create with Page Fragments 」の選択を解 除します。 「 OK 」をクリックします。
   

    

   ADFタスク・フ ローおよびページ・フロー

   タスク・フロー・ダイアグラムでは、アプリケーション内のページを計画し、ページ間をユーザーが移動できるようにナビゲーション・ルールを 定義できます。 [ 詳細はこちら]

4. コンポーネント・パレットのADF Task FlowページのComponentsパネルで、「」 Viewをクリックし、ダイアグラムをクリックしてアイコンを最初のアプリケーション・ページに表示しま す（デフォルトのアクティビティ）。 ページ名を browseOrdersに変更します。
5. 「」 Viewを再度クリックし、ダイアグラムをクリックして2つ目のページ・アイコンを追加します。 ページ名を editOrdersに変更します。
6. コンポーネント・パレットで「」 Control Flow Caseをクリックします。 次にダイアグラムで、「 browseOrders 」 ページ・アイコンをクリックしてから、「 editOrders 」ページ・アイコンをクリックします。 結果ラベルに goEditと入力します。
7. 「」 Control Flow Caseを再度クリックします。 次に「 editOrders 」 ページ・アイコンをクリックし、「 browseOrders 」ページ・アイコンをクリックします。 結果ラベルに goBrowseと入力します。
   

    

   IDE内

   タスク・フローには、2つのビュー・アクティビティ（ browseOrdersお よび editOrders）と、 browseOrdersか ら editOrdersへの制御フローとその逆方向の制御フローが含まれます。 緑色の円で示されているドロップした最初のアクティビティがデフォルトになります。 現在、タスク・フローは何も実行していません。 各ビュー・アクティビティの !アイコンは、ビュー・アクティビティがページにバインドされてい ないことを示します。 [ 詳細はこちら]

JSPページの作成

1. ダイアグラムで「 browseOrders 」ページ・アイコンをダブルクリックし、Create JSF Pageダイアログを開きます。
2. browseOrders.jspxファイル名を受け入れて、「 OK 」 をクリックします。
3. コンポーネント・パレットで「 ADF Faces 」ページを選択 し、「 Layout 」パネルを開きます。 「」 Panel Group Layoutをクリックして、ビジュアル・エディタのフォームにドロップしま す。
   

    

   ユーザー・インタ フェースの設計

   ユーザー・インタフェースを作成するには、ADF Facesコンポーネントをページに追加します。 [ 詳細はこちら]

4. プロパティ・インスペクタで「 Common 」タブを選択し、 Layoutドロップダウン・リストから「 vertical 」 を選択します。
5. 「 Style 」タブ、「 Box 」 タブの順に選択し、 Widthプロパティに 100と入力して、すべ てのデータを表示する十分な幅を表に挿入できるように、ドロップダウンから「 Percent 」 を選択します。
6. 「」 Save allを クリックして作業内容を保存します。
   

    

   IDE内

   browseOrders.jspxのビジュアル設計がビジュアル・エディタに表示されます。 Structureウィンドウはページの構造を表示します。 ビジュアル・エディタは、Panel Group Layoutを表す長方形を示します。コンポーネントをページに追加する場合、この長方形内にコンポーネントをドロップします。配置はレイアウト・マネー ジャで制御されます。 [ 詳細はこちら]

参照ページの作成

1. アプリケーション・ナビゲータで「 Data Controls」パネルを開き、「 FODModuleDataControl 」 ノードを開きます。
2. 「 OrdersView1 」ノードをビジュアル・エディタにドラッ グして、Panel Group Layout内にドロップします。
3. Createコンテキスト・メニューから「 Forms 」 「 ADF Read-only Form 」 を選択します。
4. Edit Form Fieldsダイアログで、 OrderId、OrderDate、 OrderStatusCode、 OrderTotal、 および CustomerId 以外のすべてのフィールドを選択します。 「」 Deleteをクリックします。
5. 「 Include Navigation Controls 」を選 択して、「 OK 」をクリックします。
   

    

   Data ControlパネルおよびUIコントロール

   Data Controlパネルは、使用可能なビジネス・オブジェクト、メソッド、およびデータ・コントロール操作を階層で表示します。 [ 詳細はこちら]

6. コンポーネント・パレットで、「 Common Components 」 パネルを開きます。 「」 Buttonをクリックして、 Lastボタンの右側のフォームにドロップします。
7. プロパティ・インスペクタで「 Common ｣タブを選択し、 Textプロパティとして Edit Orderと入力します。 Actionプロパティ・ドロップダウン・リストから「 goEdit 」 を選択します。
8. Data Controlsパネルで、「 OrdersView1 」 ノードを開きます。 「 OrderItemsView2 」ノードをフォームの下 部にドラッグします。
9. Createコンテキスト・メニューから「 Tables 」 「 ADF Read-only Table 」 を選択します。
10. Edit Table Columnsダイアログで、「 Row Selection 」 と「 Sorting 」を選択します。
11. LineItemId、 Quantity、 UnitPrice、および ProductName 以 外のすべての列を選択します。 「」 Deleteをクリックします。 「 OK 」 をクリックします。
12. 新しい表を選択した状態で、プロパティ・インスペクタで「 Style 」 タブを選択して、下の「 Box 」タブを選択します。次に、 Widthプロパティに 100と入力して、ドロップダウンから「 Percent 」を選択します。
13. 「」 Save allを クリックして作業内容を保存します。
    

     

    IDE 内

    参照ページを作成すると、ビジュアル・エディタでページが次のように表示されます。 [ 詳細はこちら]

編集ページの作成

1. エディタ・ウィンドウで、「 orders-flow.xml 」タブ をクリックして、ページを前面に表示します。
2. ダイアグラムで「 editOrders 」ページ・アイコンをダブルクリックし、Create JSF Pageダイアログを開きます。
3. editOrders.jspxファイル名を受け入れて、「 OK 」 をクリックします。
4. Data Controlsパネルから、「 OrdersView1 」 ノードをビジュアル・エディタにドラッグし、Form要素内にドロップします。
5. Createコンテキスト・メニューから「 Forms 」 「 ADF Form 」を選択 します。
6. デフォルト値のままにして、「 OK 」をクリックします。
7. Data Controlsパネルで、下部の「 Operations 」 ノードを開きます。 「 Commit 」ノードをフォームにドラッグして、入力 フォームの下にドロップします。
8. Createコンテキスト・メニューから「 Operations 」 「 ADF Button 」を 選択します。
   

    

   コミット操作

   データ・コントロール・パネルからコミット操作をページにドラッグして、トランザクションをコミットするボタンを作成しました。 次、前、作成、実行などの独自の操作セットが各データ・コレクションに含まれますが、コミットおよびロールバック操作はデータ・コントロールのすべての データに適用されます。 [ 詳細はこちら]

9. プロパティ・インスペクタの Commonタブの Textプロパティに Saveと入力します。
10. Behaviorタブで、 Disabledド ロップダウン・メニューから「 Reset to Default 」を選択しま す。
11. コンポーネント・パレットの Common Componentsパネルで、「」 Buttonをクリックして、 Saveボタンの横のページ最下部にドロップします。
12. プロパティ・インスペクタで「 Common ｣タブを選択し、 Textプロパティとして Returnと入力します。 Actionプロパティ・ドロップダウン・リストから「 goBrowse 」 を選択します。
13. 「」 Save allを クリックして作業内容を保存します。
    

     

    IDE内

    編集ページを作成すると、ビジュアル・エディタでページが次のように表示されます。 [ 詳細はこちら]

Createアクションの作成

1. エディタ・ウィンドウで、「 browseOrders.jspx 」 タブをクリックして、ページを前面に表示します。
2. Data Controlsパネルで、「 OrdersView1 」 ノードおよび「 Operations 」フォルダを開きます。 「 Create 」ノードをフォームにドラッグして、 Edit Orderボタンの横にドロップします。
3. Createコンテキスト・メニューから「 Operations 」 「 ADF Button 」を 選択します。
4. プロパティ・インスペクタの Commonタブの Textプロパティに New Orderと入力します。
5. プロパティ・インスペクタの Behaviorタブで、 Actionプロパティ・ドロップダウン・リストから「 goEdit 」 を選択します。 Disabledプロパティの横の下矢印をクリックして、「 Reset to Default 」を選択します。
6. アプリケーション・ナビゲータで、 Modelプロジェクトの「 Orders 」をダブルクリックして、エンティティ・オブジェクト・エディタで開きます。次に、 「 Attributes 」タブを選択します。
7. 「 OrderTotal 」属性を選択します。 プロパティ・インスペクタの Valueタブで、 Literal Default Valueフィールドに 0を入力して、[Enter]を押します。
   

    

   デフォルト値

   Attribute EditorのEntity Attributeページを使用して、必要なフィールドのデフォルト値を設定できます。 これによって、新しい行を作成する際に覚える必要がある手順を減らすことができます。 リテラル値（ '1'、 'Yes'、 '31-JUL-1995'な ど）を入力するか、高度なデフォルト設定にGroovy式を使用できます。 [ 詳細はこちら]

8. 次の属性に以前の手順を繰り返して、以下のデフォルト値を入力します。 クリック時に[Ctrl]キーを使用して、複数選択を実行できます。
   ShippingOptionId     1
   FreeShippingFlag    N
   CustomerCollectFlag  N
   GiftwrapFlag        N
   CreatedBy         <自分の 名前>
   LastUpdatedBy     <自分の名前>
9. 「 Creation Date 」属性を選択します。 プロパティ・インスペクタの Databaseタブで、 History Columnドロップダウンから「 created on 」を選択します。
   

    

   履歴オプションとリ フレッシュ・オプション

   Oracle ADF Business Componentsを使用して、一般的な監査情報を追跡できます。この情報には行が作成または編集されたタイムスタンプおよびそのアクションを実行した 認証ユーザーが含まれ、変更するたびにバージョン番号が増えます。 Attribute EditorのEntity Attributeページを使用して、Oracle ADF Business Componentsが移入するこれらの固有の値に表の既存のデータベース列をマップできます。 [ 詳細はこちら]

10. 次の属性に以前の手順を繰り返して、以下の履歴列の値を入力します。
    LastUpdatedDate        modified on
    ObjectVersionID          version number
11. 「 OrderDate 」属性をダブルクリックします。 Edit Attribute: OrderDateダイアログで Value Typeを「 Expression 」に設定し、 Valueフィー ルドに adf.currentDateと入力します。
12. 属性表で、「 OrderId 」属性をダブルクリックします。 Typeドロップダウンから「 DBSequence 」 を選択し、「 OK 」をクリックします。
    

     

    IDE内

    ボタンを参照ページに追加すると、ビジュアル・エディタでページが次のように表示されます。 [ 詳細はこちら]

アプリケーションの実行

1. エディタ・ウィンドウで、「 orders-flow.xml 」タブ をクリックして、ページを前面に表示します。
2. タスク・フロー・ダイアグラムで「 browseOrders 」ペー ジ・アイコンを右クリックし、「 Run 」を選択します。
   

    

   JSPページの実行 とテスト

   Oracle JDeveloperには、IDEからWebアプリケーションを実行およびテストできるOracle Containers for J2EE（OC4J）サーバーが組み込まれています。 特別な接続設定は必要ありません。 アプリケーション全体または個別のJSPページを実行します。 [ 詳細はこちら]

3. 実行アプリケーションで、ナビゲーション・ボタンを使用して現在の行を変更し、OrderItems表の詳細の変更を確認します。
4. 「 Edit Order 」をクリックして、編集ページへ移動しま す。
5. 編集ページでデータを変更し、「 Save 」をクリックします。 「 Return 」をクリックします。
6. 「 New Order 」ボタンをクリックして、デフォルト値だけが 移入された空の行とともに編集ページが再表示されることを確認します。
7. 詳細（たとえば、 OrderStatusCodeに PENDING、 CustomerIdに 108、 ShipToAddressIdに 5） を入力します。 「 Save 」をクリックします。
8. Logウィンドウの「 」 Terminateを クリックして、アプリケーションを終了します。
   

    

   IDE内

   browseOrders.jspxページを実行すると、ブラウザ内に次のようなページが表示されます。 [ 詳細はこちら]

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