ADF Mobileによる、アプリケーションのモバイル・ブラウザへの拡張

Oracle JDeveloperのIDEを操作して、モバイル機器のブラウザを対象とするJSFアプリケーションを作成できます。

スキーマのインストール：Oracle Technology Network（OTN）からスキーマのzipファイルをダウンロードしてインストールします。 キュー・カードでは、Fusion Order Demo（FOD）スキーマの一部である表を使用します。

新規アプリケーションの作成：Create Applicationダイアログを使用して、ADFモバイル向けのアプリケーションを作成します。

データベース接続の作成：Create Database Connectionダイアログを使用して、スキーマへの接続を作成します。

Oracle ADF Business Componentオブジェクトの作成：Create Oracle ADF Business Componentsウィザードを使用し、データ・アクセスを提供してビジネス・ロジックを実装するビジネス・コンポーネントを作成します。

ビュー・オブジェクトの編集：ビュー・オブジェクトを変更してアプリケーションに必要なフィールドのみを含 めます。

検証ロジックの追加：エンティティ・オブジェクトに検証ルールを追加します。

Oracle ADF Business Componentテスターでのアプリケーション・ロジックのテスト：Oracle ADF Business Componentテスターを使用して、前の手順で作成したアプリケーション・ロジック・コンポーネントをテストします。

画面サイズの設定：Preferencesダイアログを使用して、対象のモバイル機器でデフォルトの画面サ イズを設定します。

ADFモバイル・プロジェクトの作成：ADFモバイル・アプリケーション向けに ViewControllerプロジェクトを作成し、適切なテクノロジー・スコープを選択します。

ページ・フローの作成：ADFモバイル・アプリケーションにページ・フローを作成します。

JSFページの作成：モバイル機器で注文を参照できるように、ページ・フロー・エディタでページをダブルク リックしてJSFページを作成します。

参照ページの作成：読取り専用のフォームと表を含むモバイル機器ブラウザで注文を参照するためのJSFを定 義します。

編集ページの作成：注文編集用のフォームを含むモバイル機器ブラウザで注文を参照するためのJSFを定義し ます。

静的ビュー・オブジェクトの作成：注文ステータスの値として静的オブジェクト・ビューを作成します。

静的LOVの作成：注文ステータスの記述がドロップダウン・リスト・ボックスに表示されるように、Edit Orderフォームの注文ステータスのフィールドに静的LOVを作成します。

検索ビュー・オブジェクトの作成：顧客のIDではなく、名前がEdit Orderビューに表示されるように、Customer IDフィールドに検索ビュー・オブジェクトを作成します。

動的LOVの作成：顧客名がドロップダウン・リスト・ボックスに表示されるように、Edit OrderフォームのCustomer IDフィールドに動的LOVを作成します。

LOVのテスト：Edit OrderビューにLOVを追加したあと、アプリケーションを実行します。

スキーマのインストール

1. OTNからスキーマのzipファイルをダウンロードします。 以前にスキーマを作成している場合は、次のキュー・カード に進んでください。
2. ファイルを適切な場所（ c:\tempなど）に解凍します。
3. File メニューから「 Open 」を選択します。 c:\temp\Infrastructure\infrastructure.jwsワー クスペースを開きます。
4. プロジェクトを移行するよう指示された場合は、「 Yes 」をクリッ クします。
5. アプリケーション・ナビゲータで、「 MasterBuildScript 」 プロジェクトを展開し、「 build.properties 」をダブルクリック してエディタで開きます。
6. build.propertiesファイルに適切な値を設定します（ jdeveloper.homeと、 jdbc.*お よび db.*のすべての設定）。 デフォルト値に設定されたほかのすべてのプロパティを保持します。 demoユーザーの名前を FODにする必要があります。
   関連する設定は、次のとおりです。
   jdeveloper.home             Oracle JDeveloperをインストールした場所（ c:/JDeveloper/11gなど）
   jdbc.urlBase                    データベースのベースURI（ jdbc:oracle:thin:@localhostなど）
   jdbc.port                         データベースのポート番号（ 1521など）
   jdbc.sid                           データベース・システム識別子（ XEまたは ORCLな ど）
   db.adminUser                  管理者権限をもつデータベース・ユーザー（ systemなど）
   db.adminUser.password   管理者権限をもつデータベース・ユーザーのパスワード（ managerな ど）
   db.demoUser.tablespace  FODユーザーがインストールされる表領域名（ USERSなど）
7. MasterBuildScriptプロジェクトで、「 build.xml 」ファイルを選択します。
8. Structureウィンドウで、「 refreshSchema 」 ターゲットを右クリックして、「 Run Target "refreshSchema" 」 を選択します。
   

    

   IDE内

   Antタスクの実行後、Oracle JDeveloper Logウィンドウで build successfulメッセージを確認できます。 [ 詳細はこちら]

    

新規アプリケーションの作成

1. File メニューから「 New 」 を選択します。
2. Categoriesペインの「 Applications」 を選択して、次に Itemsペインの「 Application」 を選択します。
   

    

   アプリケーション・テンプレート

   アプリケーション・テンプレートを使用すると、標準アプリケーション向けのプロジェクト構造を素早く作成できます。このプロジェクト構造に は、適切なテクノロジーの組合せが事前に指定されています。 テンプレートから作成された新しいアプリケーションがアプリケーション・ナビゲータに表示されます。関連するテクノロジー・スコープが設定され、プロジェ クト階層に分割されています。 選択したアプリケーション・テンプレートによって、初期のプロジェクト構造（アプリケーション内の名前つきプロジェクト・フォルダ）および追加されるアプ リケーション・ライブラリが決定されます。 プロジェクト・テンプレートは、関連するテクノロジーを定義します。 既存のテンプレートを変更したり、新しいテンプレートを作成したりすることができます。 使用しているテクノロジーに合わせて選択できるように、Oracle JDeveloperで実行する処理をフィルタできます。 [ 詳細はこちら]

    

3. 「 OK 」をクリックします。
4. アプリケーションの短縮名をすべて小文字で、 Application Nameフィールドに入力します（この例では、 adfmと入力）。
5. Application Package Prefixフィールドに oracle.fod.mobileと 入力します。
6. Application Templateフィールドで 「 Fusion Web Application (ADF)」テン プレートを選択して、「 OK」をクリックします。
7. アプリケーション・ナビゲータで「 Application Resources 」 パネルを開き、このアプリケーションのリソースの表示場所を確認します。

データベース接続の作成

1. Create Database Connectionダイアログを開きます（「 File」→「 New」→「 General」 →「 Connections」→「 Database Connection」）。
2. Create Connection Inオプションとして選択されていない 場合は、「 Application Resources 」を選択します。
3. 接続の名前を入力し、接続タイプを選択して、ユーザー名とパスワードを入力します。 この例では、接続名に FOD、 ユーザー名に fod、パスワードに fusionを使用します。
4. 「 Test Connection 」をクリックし て、接続可能であることを確認します。
5. 接続に成功したら、「 OK 」をクリックします。
6. アプリケーション・ナビゲータで、 Application Resourcesパ ネルの「 Connections 」および「 Database 」ノードを展開し、データベース・オブジェクトを表示します。
   

    

   IDE内

   データベース接続がアプリケーションのリソースとして設定されました。 [ 詳細はこちら]

    

Oracle ADF Business Componentsの作成

1. アプリケーション・ナビゲータで「 Model 」プロジェクトを選択 し、Create Business Components from Tablesウィザードを起動します（「 File」→「 New」 →「 Business Tier」→「 ADF Business Components」→「 Business Components from Tables」）。
2. Initialize Business Components Projectダイアログで、作成したデータベース接続（ FODなど）が現在選択されていることを確認して、「 OK 」 をクリックします。
3. Business Components from Tablesウィザードのステップ1のEntity Objectsで、「 Query 」をクリックして、 Available リ ストに移入します。
4. Availableリストから3つの表（ ORDERS、 ORDER_ITEMS、 PRODUCTS_BASE）を選択し、 Selectedリ ストに移動して、それらの表に基づきデフォルトのビジネス・コンポーネントを作成します。 「 Next 」 をクリックします。
5. ステップ2のUpdatable View Objectsで、 Availableリ ストからビジネス・コンポーネント「 Orders (FOD.ORDERS)」と「 OrderItems (FOD.ORDER_ITEMS)」を選択して、 Selected リストに移動します。 「 Next 」 をクリックします。
6. 「 Next 」をクリックして、不要なステップ3の Read-Only View Objectsをスキップします。
7. ステップ4のApplication Moduleで、アプリケーション・モジュール名を FODModuleに変 更します。 「 Finish 」をクリックします。
   

    

   Oracle ADF Business Components

   Create Oracle ADF Business Components from Tablesウィザードは、ユーザー・インタフェースを作成しません（アプリケーションの"view"によって制御されます）。また、制御フローなどのほ かのアプリケーション・ロジックも設定しません。 データの表示とアクセスを提供して、ビジネス・ロジックを実装します。 [ 詳細はこちら]

    

8. 「 」 Save allを クリックして作業内容を保存します。
   

    

   IDE内

   Create Oracle ADF Business Components from Tablesウィザードを実行すると、アプリケーション・ナビゲータの Modelプロジェクト は次のように表示されます。 [ 詳細はこちら]

    

ビュー・オブジェクトの編集

1. アプリケーション・ナビゲータで、 Modelプロジェクトの「 OrdersView 」をダブルクリックして、ビュー・オブジェクト・エディタで開きます。
2. 「 Attributes 」タブを選択して、 OrdersViewビュー・オブジェクトのすべての属性を表示します。
3. 属性表で、属性（ PaymentOptionId、 DiscountId、 CouponId、 CollectionWarehouseId、 CreatedBy、 CreationDate、 LastUpdatedBy、 LastUpdateDate、 ObjectVersionId） を選択します。 「 」 Deleteをクリックします。
   

    

   属性の削除

   OrdersViewビュー・オブジェクトから属性を削除して、ビュー・オブ ジェクトの問合せの列数を削減しました。 [ 詳細はこ ちら]

    

4. アプリケーション・ナビゲータで、 Modelプロジェクトの「 OrderItemsView 」をダブルクリックして、ビュー・オブジェクト・エディタで 開きます。
5. 「 Entity Objects 」タブを選択します。
6. Availableペインの「 ProductsBase 」 を選択して、 Selectedペインへ移動します。
   

    

   エンティティ・オブ ジェクト

   ビュー・オブジェクトは、1つ以上のエンティティ・オブジェクトに基づいています。複数の表のデータをクライアント・ページに表示する必要 がある場合にこれを実行します。 クライアント・ページの注文項目のリストで、 ProductsBaseエ ンティティ・オブジェクトの製品名とともに OrderItemsエンティティ・オブジェクトの 各項目のID、数量、および価格を表示します。 [ 詳 細はこちら]

    

7. 「 Attributes 」タブを選択します。 ProductsBase属性を OrderItemsViewオ ブジェクトに追加するには、「 Add from Entity 」をクリックしま す。
8. Attributesダイアログで、 Availableペインの ProductsBaseノードの属性（ CategoryId、 ProductName、 WarrantyPeriodMonths） を選択します。 属性を Selectedペインへ移動します。 「 OK 」をクリックします。
   

    

   IDE内

   OrdersViewビュー・オブジェクトには、 Ordersエンティティ・オブジェクトと ProductsBaseエ ンティティ・オブジェクトの両方の属性が含まれます。 OrderItemsViewには、 2つの ProductId属性（ OrderItemsエ ンティティ・オブジェクトの ProductIdと ProductsBaseエ ンティティ・オブジェクトの ProductId1）が含まれます。これには、2つのエンティ ティ・オブジェクトの結合を指定する必要があります。 [ 詳細はこちら]

    

検証ロジックの追加

1. アプリケーション・ナビゲータで、 Modelプロジェクトの「 Orders 」をダブルクリックして、エンティティ・オブジェクト・エディタで開きます。
2. 「 Validators 」タブを選択し て、 Validatorsリスト・ボックスの「 Entity 」フォルダを選択します。
3. タブ最上部の「 」 Addをクリックします。
4. 検証規則の追加ダイアログで、 Rule Typeドロップダウン・リストから「 Script Expression 」を選択します。
5. Rule Definitionタブ・ページの Expressionパネルに OrderShippedDate == null || OrderShippedDate >= OrderDateと入力します。 「 Test 」 をクリックして、式を検証します。式構文チェックのポップアップ画面を確認してから、「 OK 」 をクリックします。
6. 「 Failure Handling 」タブを選択します。 「 」 Addをクリックして、最初の表に1行追加します。
7. デフォルトの Message Idを Orders_10に 変更します。 デフォルトの Message Stringを {0} cannot be earlier than {1}に変更します。 [Enter]または[Tab]を押します。
8. 次の表のエラー・メッセージの式を入力します。 Message Token 0の Expressionには、 source.hints.OrderShippedDate.labelと 入力します。 Message Token 1には、 source.hints.OrderDate.labelと 入力します。 「 OK 」をクリックします。
9. 「 」 Save Allをクリックします。

    

   IDE内

   検証ルールのカスタム・エラー・メッセージが作成されました。 {0}と {1}は、 OrderShippedDateおよび OrderDate属 性のラベルとして定義するパラメータのプレースホルダです。 Oracle ADF Business Componentsを使用して、各属性のカスタム・ラベルを作成できます。これらのラベルは、異なるロケールに変換できるメッセージ・バンドルに格納さ れ、クライアント・ページの属性のラベルとして自動的に表示されます。 ここでは、カスタム・ラベルを定義していないので、ラベルはデフォルトの属性名になっています。 [ 詳細はこちら]

    

Oracle ADF Business Componentテスターでのアプリケーションのテスト

1. アプリケーション・ナビゲータで「 FODModule 」を右クリッ クし、「 Run 」を選択します。
2. Oracle Business Component Browser - Connectダイアログで、「 Connect 」をクリックします。
3. Oracle Business Component Browserで、「 OrdersView1 」 をダブルクリックします。
4. OrderShippedDateのない注文まで移動します。 注文日より前の新しい注文の出荷日を入力します。 たとえば、注文日が 14.01.07の場合、注文の出荷日に 13.01.07と 入力します。
5. 「 Next 」アイコンをクリックして、次のレコードへ移動しま す。 エラー・メッセージ（ OrderShippedDate cannot be earlier than OrderDate）を含むエラー・ダイアログが表示されたら、「 OK 」 をクリックします。
6. 注文の出荷日を変更して、注文日より先の日付にします。 たとえば、注文日が 14.01.07の場合、エラー・ダ イアログが表示されないように注文の出荷日に 15.01.07と入力します。
7. 「 」 Commitをクリックして、変更を保存 します。
8. Oracle Business Component Browserを閉じます。
   

    

   IDE内

   有効なデータを入力すると、データベースに保存したデータが表示されます。 [ 詳細はこちら]

    

画面サイズの設定

1. 「 Tools 」 「 Preferences 」 をクリックします。
2. 「 Mobile 」を選択して、デフォルトの画面サイズとして「 240 x 320 」を選択します。 Blackberryアプリケーションの場合、通常の画面サイズは 240 X 260です。 画面サイズのサポートについては、携帯電話のユーザー・ガイドを参照してください。
3. 「 OK 」をクリックします。
   

    

   IDE内

   Preferencesダイアログを使用すると、ビジュアル・エディタのデフォルト・サイズを設定して、モバイル機器の画面にコンポーネン トがどのように組み込まれるかを表示できます。 [ 詳 細はこちら]

    

ADFモバイル・プロジェクトの作成

1. File メニューから「 New 」 を選択します。
2. New Galleryで、 Categoriesペインの「 Project 」、 Itemsペ インの「 Empty Project 」を選択します。
3. 「 OK 」をクリックします。
4. プロジェクト名に mvcと入力します（ mvcは、"モバイル"ビュー・コントローラの 略）。次に「 Next 」をクリックします。
   

    

   モバイル・アプリ ケーションおよびプロジェクトのネーミング

   短い小文字の名前をADFモバイル・アプリケーションおよびプロジェクトに入力すると、短いURLが作成され、モバイル機器で簡単に入力で きます。 [ 詳細はこちら]

    

5. Application Navigatorペインで「 mvc 」プロジェクトをダブルクリックし、 Project Propertiesダイアログ・ボックスを開きます。
6. 左側の「 Technology Scope 」 を選択して、 Technology Scopeダイアログ・ボックス を開きます。
7. Available Technologiesペインの「 Mobile 」を Selected Technologiesペインに移動し、「 OK 」 をクリックします。
8. 「 」 Save Allをクリックします。

    

   IDE内

   Available Technologiesペインの「 Mobile 」を Selected Technologiesペインに移動すると、Java、JSF（JavaServer Faces）、JSP（JavaServer Pages）、サーブレットもそのペインに移動します。 Mobileテクノロジーを追加すると、Apache My Faces Trinidadライブラリが自動的に作業領域にロードされます。モバイルJSFページを作成すると、Trinidadコンポーネント・パレットがロード されます。 [ 詳細はこちら]

    

ページ・フローの作成

1. アプリケーション・ナビゲータで、mvcプロジェクトを開きます。
2. 「 faces-config.xml 」（WEB-INFフォルダ） をクリックします。
3. コンポーネント・パレットから「 JSF Diagram Objects 」 を選択します。
4. コンポーネント・パレットで「 」 JSF Pageを選択し、ビジュアル・ エディタのフォームにドロップします。
5. JSFページに /br-oという名前をつけます。 このページは、注文を参照するページであり、デフォルトのアクティビティを示すアプリケーションの最初のページです。
6. コンポーネント・パレットで「 」 JSF Pageを選択してから、ビジュ アル・エディタのフォームにドロップすることにより、注文編集ページを作成します。
7. ページに /ed-oという名前をつけます。
8. コンポーネント・パレットで「 」 JSF Navigation Caseを 選択することにより、ページ・フローを作成します。
9. ビジュアル・エディタで「 /br-o 」に続いて「 /ed-o 」 をクリックし、ページを接続します。
10. JSF Navigartion Caseの結果のラベルに goEditと入力します。
11. コンポーネント・パレットで「 」 JSF Navigation Caseを 選択します。
12. ビジュアル・エディタで「 /ed-o 」に続いて「 /br-o 」を選択し、ページを接続します。
13. JSF Navigartion Caseの結果のラベルに goBrowseと入力します。
14. 「 」 Save Allをクリックします。

     

    IDE内

    タスク・フローには2つのビュー・アクティビティが含まれます。 それらは、注文の参照と注文の編集で、/br-oおよび/ed-o JSFページによって表示されます。 これらのページはJSF Navigation Caseコンポーネントを使用して接続されます。 [ 詳細はこちら]

     

JSFページの作成

1. ビジュアル・エディタで「 /br-o 」をダブルクリックして、 Create JSF Pageダイアログを開きます。
2. ファイル名 /br-o.jspxを受け入れて、「 OK 」 をクリックします。（mvcはADF Mobileプロジェクトであるため、 Render in Mobile Deviceがデフォルトで選択されます）。
3. コンポーネント・パレットの Trinidadが選択されていることを確認しま す。
4. コンポーネント・パレットの「 」 Panel Group Layoutを 選択して、ビジュアル・エディタにドロップします。
5. Panel Group Layoutのプロパティ・インスペクタで、Layoutプロパティのドロップダウン・リストから「 vertical 」を選択して、レイアウトを変更します。
6. コンポーネント・パレットの「 」 Panel Group Headerを 選択して、/br-o.jspxのStructureビューでtrh:bodyの真下にドロップします。
   

    

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

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

    

7. Panel Group Headerのプロパティ・インスペクタで、テキスト・プロパティに Browse Orderと 入力します。
   
   

    

   IDE内

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

    

参照ページの作成

1. アプリケーション・ナビゲータで「 Data Controls 」パ ネルを開き、「 FODModuleDataControl 」ノードを開きます。
2. 「 OrdersView1 」ノードをStructureビューの PanelHeaderにドラッグします。
3. Createメニューから「 Forms 」 「 Trinidad Read-Only Form 」 を選択します。
   

    

   Data ControlパネルとUIコントロール

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

    

4. Edit Forms Fieldダイアログで、OrderId、OrderDate、OrderStatusCode、OrderTotal、およびCustomer ID以外のすべてのフィールドを選択して、「 」 Deleteをクリックします。
5. 必要に応じて、 Include Navigation Controlsチェッ ク・ボックスの選択を解除して、「 OK 」をクリックします。
6. Structureビューで「 panelFormLayout 」 を開きます。
7. 「 OrderId field 」を選択します（Panel- Label And Message - #{bindings.OrderId.hints.label}）。
8. プロパティ・インスペクタのLabelフィールドで、入力された値を読みやすくするために、コロン（:）を1つ、スペースを2つ追加します。
9. OrderDate、 OrderStatusCode、 OrderTotal、および CustomerIdの 各フィールドで、この手順を繰り返します。
10. 「 」 Save Allをクリックします。
11. まず、Data Controlsペインの「 Operations 」 フォルダを開き、次に「 First 」を選択することで、参照ページにFirst というボタンを作成します。
12. このボタンをドラッグして、Structureビューの h:formの真下にド ロップします。 このボタンはフォームの内部にありますが、Panel Group Layoutの外部です。
13. コンテキスト・メニューから「 Trinidad Button 」 を選択します。
14. この処理を繰り返して、 Previous、 Next、および Lastの各ボタンをフォー ムに追加します。
15. Trinidadコンポーネント・パレットで、「 」 Command Buttonを選択し て、フォームの Lastボタンの真下にドロップします。
16. Command Buttonのプロパティ・インスペクタで、Textプロパティとして Editと入力します。
17. Actionプロパティのドロップダウン・リストから「 goEdit 」を選択します。
18. Data Controlsパネルで、「 OrdersView1 」 ノードを開き、Structureビューのフォームの最下部にドロップします。
19. Createメニューから「 Tables 」 「 Trinidad Read-Only Table 」を選択します。
20. Edit Table Columnsダイアログで「 Sorting 」 を選択します。
21. LineItemId、 Quantity、 UnitPrice、および ProductName以 外のすべての列を削除して、「 OK 」をクリックします。
22. Structureビューで「 tr:table 」を開きます。
23. 「 LineItemId 」列を選択します（tr:column- #{bindings.OrderItems1View2.hintsLineItemId.label}）。
24. プロパティ・インスペクタのHeader Textプロパティに IDと入力します。
25. この処理を繰り返して、Quantity列の名前を Quan.に、UnitPrice列の名前を Priceに、 ProductNameを Nameに変更します。
26. Structureビューで「 tr:table 」を選択して、 Widthプロパティに 100%と入力します。
27. 「 」 Save Allをクリックします。
    

     

    IDE内

    ビジュアル・エディタは、ページを構成する読取り専用フォーム、表、およびボタンを表示します。Structureビューは、ページのコン ポーネントの階層を表示します。 Structureビューのコンポーネントをドラッグするか、ビジュアル・エディタまたはソース・エディタでコンポーネントを移動して、ページ構造を再編 成できます。 [ 詳細はこちら]

     

編集ページの作成

1. アプリケーション・ナビゲータで、「 faces-config.xml 」 （WEB-INFフォルダ）をクリックします。
2. ビジュアル・エディタで「 /ed-o 」をダブルクリックして、 Create JSF Pageダイアログを開きます。
3. ファイル名/ed-o.jspxを受け入れて、「 OK 」をクリッ クします（mvcはADF Mobileプロジェクトであるため、 Render in Mobile Deviceがデフォルトで選択されます）。
4. コンポーネント・パレットで「 Trinidad 」を選択します。
5. コンポーネント・パレットの「 」 PanelGroupHeaderを選択 して、/ed-o.jspxのStructureビューでtrh:bodyの真下にドロップします。
6. Panel Group Headerのプロパティ・インスペクタで、テキスト・プロパティに Edit Orderと 入力します。
7. アプリケーション・ナビゲータで「 Data Controls」パネルを開き、「 FODModuleDataControl 」 ノードを開きます。
8. 「 OrdersView1 」ノードをStructureビューの PanelGroupHeaderにドラッグします。
9. Createメニューから「 Forms 」 「 Trinidad Form 」 を選択します。
10. Edit Form Fieldsダイアログで「 OK 」をクリック します。
11. Data ControlsパネルでOperationsフォルダを開き、「 Commit 」 操作を選択します。
12. Commit操作をドラッグして、Structureビューの h:formの真下 にドロップします。
    

     

    Commit操作

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

     

13. Createメニューから「 Trinidad Button 」を 選択します。
14. プロパティ・インスペクタでTextプロパティに Saveと入力して、Disabledプロパティに「 Reset to Default 」を選択します。
15. コンポーネント・パレットから「 」 Command Buttonを選択し て、StructureビューのSaveボタンの真下にドロップします。
16. プロパティ・インスペクタでTextプロパティに Returnと入力して、Actionプロパティのドロップダウ ン・リストから「 goBrowse 」を選択します。
17. 「 」 Save Allをクリックします。
    

     

    IDE内

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

     

アプリケーションの実行

1. エディタ・ウィンドウで「 br-o.jspx」をクリックして前面に表示します。
2. フォームの内部で右クリックして、「 R un」を選択し ます。
3. 実行するアプリケーションで、ナビゲーション・ボタンを使用して現在の列を変更し、OrderItems表の詳細の変更を確認します。
4. 任意に選択したモバイル・プラットフォームのエミュレータを起動します。
   

    

   エミュレータの実行

   エミュレータを使用してADFモバイル・アプリケーションをテストするには、Oracle JDeveloperのIPアドレスではなく、コンピュータのIPアドレスをアプリケーションURLに入力します。 デバイス・エミュレータは、IPアドレスのみと通信できます。IPアドレスの代わりにlocalhostの値を使用できません。 IPアドレス以外では、アプリケーションURLの残りの部分は正確です。 たとえば、機器のブラウザに http://www.<IP Address>:<Port Number>/adfm-mvc-context-root/faces/br-o.jspxと 入力します。 [ 詳細はこちら]

    

5. エミュレータOracle JDeveloperを接続します。
   

    

   IDE内

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

    

レイアウトの最適化

1. ビジュアル・エディタで「 br-o.jspx」を開きます。
2. 表を選択します。
3. プロパティ・インスペクタで、Rowsプロパティに 2と入力します。
4. 「 」 Save Allをクリックします。
5. ビジュアル・エディタで「 ed-o.jspx」を開きます。
6. Structureビューで「 h:form」に続いて「 tr:panelFormLayout」を展開します。
7. 「 OrderId」、「 CustomerId」、 「 ShipToAddressId」、および「 ShippingOptionId inputText」の各フィールドを選択します。
8. プロパティ・インスペクタで、Columnsプロパティに 5と入力します。
9. Structureビューで、「 OrderDate」、「 OrderShippedDate」、「 OrderTotal」、 「 ShipToName」、「 ShiptoPhoneNumber」、 および「 GiftwrapMessage」の各inputTextフィールドを選択します。
10. プロパティ・インスペクタで、Columnsプロパティに 12と入力します。
    

     

    IDE内

    最初にbr-o.jspxを開くと、デフォルトで設定された数の行が含まれています。 [ 詳細はこちら]

     

静的ビュー・オブジェクトの作成

1. アプリケーション・ナビゲータで「 Model 」プロジェクトを選択 し、Create View Objectウィザードを起動します（「 File」→「 New」→「 Business Tier」→「 ADF Business Components」→「 View Object」）。
2. ビュー・オブジェクトの名前として StatusCodesと入力します。
3. 「 Rows populated at design time (Static List) 」を選択して、「 Next 」を クリックします。
4. ステップ2で、「 New 」をクリックします。 New View Object Attributeダイアログで、属性名として StatusCodesと入力し、「 OK」をクリックします。
5. 「 New 」を再度クリックします。 属性名として StatusDescと 入力し、「 OK」をクリックします。 「 Next 」 を2回クリックします。
6. ステップ4で、「 」 Addを7回クリックして、静的LOVを作成します。 StatusCodesお よび StatusDescに値と説明を入力します。例を以下に示します。

                                 PENDING  Order submitted                               
     SHIP     Order is being shipped                               
     PICK     Order is being picked                               
     COMPLETE Order complete                               
     CANCEL   Order cancelled                               
     STOCK    Waiting for stock                               
     CART     Order is in cart                             
                             

7. 「 Next 」を2回クリックして、Application Moduleページを表示します。 「 Application Module」チェック・ボッ クスを選択して、新しいビューを FODModuleアプリケーション・モジュールに追加しま す。 「 Finish 」をクリックします。
   

    

   静的LOVの定義

   ビュー・オブジェクトの静的リストを定義すると、Oracle JDeveloperにより、それらを格納する標準のメッセージ・バンドル・ファイルが作成されます。 ファイルは、関連するビュー・オブジェクト・コンポーネントに固有のものであり、適宜名前がつけられます。 Oracle ADF Business Componentsを使用して構築されたアプリケーションのモデル・レイヤーに関する国際化には、各コンポーネントのメッセージ・バンドル・ファイルの 翻訳バージョンの作成を必要とします。 たとえば、 ModelBundle.propertiesメッセージ・バンドルのイタ リア語版は、 ModelBundle_it.propertiesという名前のクラスになります。さらに、スイスで使用される イタリア語版は、 ModelBundle_it_ch.propertiesという名前になります。 [ 詳細はこちら]

    

8. エディタ・ウィンドウで、「 OrdersView.xml 」タブを クリックして、ページを前面に表示します。次に、「 View Accessors 」 タブを選択します。
9. StatusCodesビュー・オブジェクトを設定するには、「 」 Addをクリックします。 Available View Objects ペインの「 StatusCodes 」を 選択して、 View Accessorsペインへ移動します。 「 OK 」をクリックします。
10. 「 Attributes 」タブを選択して、「 OrderStatusCode 」属性を選択します。 List of Values項目の横の「 」 Addをクリックします。
11. List of Valuesダイアログで、「 OrdersView」→「 StatusCodes」ノードを完全に開いて、「 StatusCodes」 属性を選択します。 デフォルト名のままにします。
12. 「 Edit List UI Hints」をクリックします。 Available ペインの「 StatusDesc」 を選択して、 Selectedペインへ移動します。
13. " No Selection" Item ドロップダウン・リストか ら「 Selection Required」を選択します。
14. 「 OK」を再度クリックして、List of Valuesダイアログを閉じます。
15. 「 」 Save Allをクリックします。
    

     

    IDE内

    ビュー・アクセッサとしてビュー・オブジェクトを追加すると、次のように表示されます。 [ 詳細はこちら]

     

静的LOVの作成

1. エディタ・ウィンドウで、「 editOrders.jspx 」タブ をクリックして、ページを前面に表示します。
2. 「 OrderStatusCode 」inputTextフィールド を選択して削除します。
3. Data Controlsパネルで、「 FODModuleDataControl 」 →「 OrdersView1 」ノードを開きます。
4. 「 OrderStatusCode」属性を選択して、Structureビュー のOrderShippedDate inputTextフィールド（以前の場所）の真下にドロップします。
5. Createコンテキスト・メニューから「 Single Selection」 「 Trinidad Select One Choice」 を選択します。
   

    

   モデル駆動型リスト

   LOV UIの選択リストとして、ステータス・コードが表示されます。 選択リストとともに、ほかのオプションも使用できます。 LOVの複数の列（この例ではステータス・コード）を表示できます。選択を空白のままにすることもできます。 異なるLOV UI（コンボ・ボックスやラジオ・グループなど）も使用できます。 [ 詳細はこちら]

    

6. 「 」 Save allを クリックして作業内容を保存します。
   

    

   IDE内

   編集ページで、 OrderStatusCodeフィールドの横のLOVを使用 できます。 [ 詳細はこちら]

    

検索ビュー・オブジェクトの作成

1. アプリケーション・ナビゲータで「 Model 」プロジェクトを選択 し、Create View Objectウィザードを起動します（「 File」→「 New」→「 Business Tier」→「 ADF Business Components」→「 View Object」）。
2. ビュー・オブジェクトの名前として CustomerViewと入力します。
3. 「 Rea d-only access through SQL query 」 を選択します。 「 Next 」をクリックします。
4. ステップ2で、 Query Statementボックスに次の値を入力します。
   SELECT * from PERSONS Persons
WHERE Persons.PERSON_TYPE_CODE = 'CUST'
5. 「 Test 」をクリックして、問合せをテストします。 ステップ6の Attribute Settingsになるまで、「 Next 」をクリックします。
6. ステップ6で、「 PersonId 」属性を選択して、「 Key Attribute 」を選択します。 ステップ8の Application Moduleになるまで、「 Next 」 をクリックします。
7. ステップ8で、「 Application Module 」を選択し ます。 「 Finish 」をクリックします。
8. アプリケーション・ナビゲータで、 Modelプロジェクトの「 Orders 」をダブルクリックして、エディタで開きます。次に、「 View Accessors 」タブを選択します。
   

    

   検索ビュー・オブ ジェクト

   概要エディタの View Accessorsタブをクリックして、View Accessorsダイアログで新しいビュー・オブジェクトをビュー・アクセッサとして追加できます。 [ 詳細はこちら]

    

9. 「 」 Addをクリックして、View Accessorsダイアログを開きます。 Available View Objects パネルの「 CustomerView 」を選択して、 View Accessorsパネルへ移動します。 「 OK 」をクリックし ます。
10. 「 Attributes 」タブを選択して、「 CustomerId 」属性を選択します。 Validation Rules項目の横の「 」 Addをクリックします。
11. 検証規則の追加ダイアログで、 Rule Typeドロップダウン・リストから「 Key Exists Validator」を選択します。
12. Validation Target Typeドロップダウン・リストから「 View Accessor 」を選択します。
13. Available Entity Attributes パネルの 「 CustomerId」と Validation Target Attributesパネルの「 PersonId」（ CustomerViewの下）を選択します。 「 Add 」 をクリックします。
14. 「 OK 」をクリックします。
15. 「 OK 」をクリックして、エラー・メッセージを定義せずに続行しま す。
    

     

    IDE内

    ユーザー・インタフェースのLOVのプロバイダとして使用できるビュー・オブジェクトを作成しました。 このビュー・オブジェクトは、 CustomerIdフィールドを検証する有効な値のリストとしても使用できます。 [ 詳細はこちら]

     

動的LOVの作成

1. エディタ・ウィンドウで「 br-o.jspx」をクリックして前面に表示します。
2. 「 Attributes 」タブを選択します。
3. 「 CustomerId 」属性を選択し、 List of Values項目の横の「 」 Addをクリックして、この項目のLOVを作成します。
4. List of Valuesダイアログで、「 Orders.CustomerView 」 を開いて、「 PersonID 」を選択します。
5. 「 Edit List UI Hints」をクリックします。
6. Available ペインの次の属性を選択して、 Selectedペインへ移動します。「 FirstName」、 「 LastName」の順に移動します。
7. 「 OK」を2回クリックして、両方のダイアログを閉じます。
8. 「 editOrders.jspx」タブをクリックして、ページを前面に表示しま す。
9. CustomerIdの「 inputText」フィールドを選択し て削除します。
   

    

   動的LOV

   Data Controlsパネルを使用して、 CustomerIdのLOVを ページに追加できます。 CustomerIdの inputTextフィー ルドを削除したあとに置換されます。 [ 詳細はこち ら]

    

10. Data Controlsパネルで、「 FODModuleDataControl 」 →「 OrdersView1 」ノードを開きます。
11. 「 CustomerId」属性を選択して、Structureビューの OrderTotal inputTextフィールド（以前の場所）の真下にドロップします。
12. Createコンテキスト・メニューから「 Single Selections」 「 Trinidad Select One Choice」 を選択します。
13. Select One Choice for CustomerIdのプロパティ・インスペクタで、LabelプロパティのCustomerNameを入力します。
    

     

    IDE内

    selectOneChoiceコンポーネントを ed-o.jspxフォームに追加しました。 ボタンをクリックして、LOVをアクティブにします。わかりやすいインタフェースからフィールドの値を選択できます。 [ 詳細はこちら]