注文を表示するページの作成

新しいプロジェクトを作成して、アプリケーションのユーザー・インタフェース部分を収容します。

アプリケーション・ナビゲータで、「 FusionOrderApp」ワークスペースを右クリックして、「 New Project...」を選択します。

New Galleryで、「 Generic Project」を選択して、「 OK」をクリックします。

Create Projectダイアログで、プロジェクト名に ADF_UIと入力します。

「 Project Technologies」ノードを選択し、Availableリストから「 ADF Faces」および「 ADF Page Flow」を選択します。 「 Add」ボタンをクリックして、Oracle ADF Faces（および付随するテクノロジー）をプロジェクトに追加します。 これによって、Oracle ADF ControllerおよびOracle ADF Facesコンポーネントを使用してユーザー・インタフェースを開発するプロジェクトが構成されます。

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

4.

Oracle ADF Faces 11は、ページ・テンプレートを含むJSFの拡張機能を提供します。ページ・テンプレートは、ページの表示の標準化に非常に役立ちますが、JSF仕様では提供されません。 ここでは、ページ・テンプレートを作成します。

アプリケーション・ナビゲータで、「 ADF_UI」プロジェクトを右クリックして、「 New...」を選択します。

Web Tierカテゴリで「 JSF」を選択し、Itemsリストで「 JSF Page Template」を選択します。

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

5.

ordersTemplate.jspxファイルに名前をつけて、Facet Definitionsタブの「 Add」をクリックして新しい定義を作成します。 ファセットの名前を mainAreaとし、Descriptionに Main editable facetと入力します。 これは、このテンプレートを使用する開発者が編集できるページの唯一の部分です。

「 OK」をクリックしてページを作成し、ビジュアル・エディタで開きます。

ページのレイアウトを作成します。 コンポーネント・パレットが表示され、ドロップダウン・リストで ADF Facesコレクションが選択されていることを確認します。 「 Layout」アコーディオンを開き、「 Panel Stretch Layout」コンポーネントをJSFビジュアル・エディタにドラッグします。

これによって、ページに空のレイアウト・コンポーネントが追加されます。このコンポーネントには、定義されたいくつかの領域（ファセット）が含まれ、ページのレイアウトに使用できます。

JDeveloperの下部にあるプロパティ・インスペクタを開きます。 表示されていない場合、ツールバーの「 View」→「 Property Inspector」を選択します。 プロパティ・インスペクタは、タブ内で現在選択されているコンポーネントの名前を表示します。 レイアウト・コンポーネント（いくつかは非表示）を操作しているので、編集するコンポーネントを選択するには、ページ上のすべてのコンポーネントの階層リストを表示するStructureウィンドウが役に立ちます。

Structureウィンドウで、「 af:panelStretchLayout」を選択します。 プロパティ・インスペクタで、「 Style and Theme」カテゴリをクリックして、このコンポーネントのスタイル・プロパティを表示します。 「 Background」サブタブを選択し、 Colorリストでページの背景色を選択します。 これによって、コンポーネントのInlineStyleプロパティも自動的に更新されます。

次に、レイアウト・コンポーネントのサイズを定義します。 プロパティ・インスペクタで、Style and Themeカテゴリの「 Box」サブタブをクリックします。 Widthプロパティを 100 Percent、 Heightプロパティを 600 Pixelに設定します。

次に、中央部の周囲に領域を追加します。 Structureウィンドウで「 Panel Stretch Layout facets」ノードを開きます。 コンポーネント・パレットで、「 Spacer」コンポーネントを bottomファセットにドラッグします。 startおよび endファセットにもドラッグします。

ページ・ヘッダーの内容を定義します。 Structureウィンドウで、「 top」ファセットを選択します。 コンポーネント・パレットからファセットに「 Panel Group Layout」をドラッグします。 Structureウィンドウで「 Spacer」コンポーネントをpanelGroupLayoutにドラッグします。 別のコンポーネント内のコンポーネントをドラッグする場合、Structureウィンドウにボックスが表示され、コンポーネントが配置される場所が示されます。

最初のpanelGroupLayoutコンポーネントは、子コンポーネントを縦にグループ化します。 Structureウィンドウの spacerコンポーネントの下に別の「 Panel Group Layout」コンポーネントを追加します。 黒色の矢印は、コンポーネントが配置される場所を示します。

Commonタブで、プロパティ・インスペクタを使用して、このpanelGroupLayoutコンポーネントの Layoutプロパティに horizontalを設定します。 Layoutプロパティは、 Appearanceカテゴリに配置されます。 Boxの Widthプロパティ（ Styleカテゴリ内）を 100 Percentに設定します。

イメージをヘッダーに追加します。 コンポーネント・パレットで、「 Common Components」アコーディオンを開きます。 Structureウィンドウで「 Image」コンポーネントを panelGroupLayout - horizontalコンポーネントにドラッグします。

結果ダイアログで、Sourceの横の矢印をクリックして、「 Edit」を選択します。 Infrastructure.zipファイルを抽出した場所（たとえば、 c:\oracleFusion\tutorial\Infrastructure）へ移動し、「 oracle.gif」を選択します。 「 OK」をクリックします。

イメージをDocumentルートにコピーするよう要求された場合は「 Yes」をクリックし、「 Save」をクリックしてpublic_htmlディレクトリにイメージを保存します。

次に、テキストをヘッダーに追加します。 imageコンポーネントの下に「 Panel Group Layout」コンポーネントを追加します。 Halignプロパティに centerを設定します。

panelGroupLayout内のコンポーネント・パレットのCommon Componentsアコーディオンから「 Output Text」コンポーネントを追加します。 valueプロパティに Welcome to Fusion Order Entryを設定します。 プロパティ・インスペクタの Styleカテゴリで、「 Text」サブタブをクリックします。 Color、 Size、および Boldプロパティを任意に設定します。 プロパティを変更すると、ビジュアル・エディタが自動的に更新されます。このため、変更によるテンプレートへの影響を確認できます。

編集可能なcenterファセットのプロパティを定義します。 Structureウィンドウで centerファセットを選択します。 「 Panel Stretch Layout」コンポーネントをcenterファセットにドロップします。 Background Colorプロパティに Whiteを設定します。

コンポーネント・パレットのCommon Componentsカテゴリから、2番目の panelStretchLayoutコンポーネントのcenterファセット内にネストされている centerファセットに「 Facet Ref」をドロップします。 Insert Facet Refダイアログから「 mainArea」を選択して、「 OK」をクリックします。 これによって、このテンプレートに基づくページを作成する場合にpanelStretchLayoutコンポーネントのcenterファセットを編集できます。

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

ここでは、共有リソース・ライブラリを作成し、ADF_UIプロジェクトに追加します。

アプリケーション・ナビゲータで、FusionOrderAppワークスペースの横のドロップダウンを選択して、「 Infrastructure」を選択します。

UIResourcesプロジェクトには、FusionOrderAppアプリケーションのJSFページにイメージを表示するために使用されるサーブレットが含まれます。 このサーブレットをADF_UIプロジェクトにコピーできますが、ここでは共有リソース（ヘルパー・クラス、イメージ、作成したテンプレートなど）を作成する方法を説明するためにOracle ADFライブラリを作成します。

アプリケーション・ナビゲータで「 UIResources」を右クリックし、「 New...」を選択します。

Generalカテゴリで「 Deployment Profiles」を選択します。 「 ADF Library JAR File」を選択します。

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

プロファイルの名前を UIResourcesと入力し、「 OK」をクリックします。

「 OK」をクリックしてプロファイルのデフォルトを受け入れ、再度「 OK」をクリックしてProject Propertiesダイアログを終了します。

JARファイルをデプロイします。 「 UIResources」プロジェクトを右クリックして、「 Deploy」→「 UIResources」→「 to ADF Library JAR」を選択します。

Deployment - Logは、UIResourcesプロジェクト内のデプロイ・ディレクトリにJARファイルがデプロイされていることを示します（たとえば、 c:\oracleFusion\tutorial\Infrastructure\UIResources\deploy\UIResources.jar）。

アプリケーション・ナビゲータで、Infrastructureワークスペースの横のドロップダウンを選択して、「 FusionOrderApp」を選択します。

「 View」メニューから「 Resource Palette」を選択します。

リソース・パレットで、フォルダ・アイコンをクリックして、新しいリソースを作成します。 「 New Connection」→「 File System」を選択します。

Connection Nameとして UIResourcesと入力します。 「 Browse」をクリックして、デプロイしたUIResources.jarファイルを含むディレクトリ（ c:\oracleFusion\tutorial\Infrastructure\UIResources\deploy）を参照します。 「 Test Connection」をクリックします。

Success!メッセージが表示された場合、「 OK」をクリックします。

ライブラリをプロジェクトに追加します。 アプリケーション・ナビゲータで、「 ADF_UI」プロジェクトをクリックして選択します。 リソース・パレットで、「 File System」および「 UIResources」を開きます。 「 UIResources.jar」を右クリックして、「 Add to Project」を選択します。

ライブラリをプロジェクトに追加するよう要求された場合は、「 Add Library」をクリックします。

アプリケーションのページを使用して、ナビゲーションを定義します。 アプリケーション・ナビゲータで、「 adfc-config.xml」をダブルクリックして、エディタで構成ファイルを開きます。 このファイルのデフォルト・ビューはビジュアル・ ダイアグラムですが、宣言的なOverviewビューやSourceビュー（エディタの下部のタブ）を使用してJSFアプリケーションの構成を定義することもできます。 ここでは、ダイアグラムを使用します。

コンポーネント・パレットがJDeveloperに表示されていることを確認します（表示されていない場合は、ツールバーから「 View」→「 Component Palette」を選択します）。 Component Paletteのドロップダウン・リストで ADF Task Flowが選択されていることを確認します。 これらのADF Task Flowコンポーネントは、ビュー間のナビゲーションとともに一連のJSFページ（ビュー）のメソッド・コールおよび定義されたトランザクション・スコープを作成できるJSF仕様の拡張機能です。 ここでは、アプリケーション・ロジックが各ビュー内に含まれるので、ナビゲーションだけを構築します。

コンポーネント・パレットからビジュアル・エディタに「 View」をドラッグします。

「 view1」タイトルをクリックして、 loginと入力します。 これによって、ファイルの参照名が変更されます。 ファイルを実際に作成するのではなく、この構成からのファイルの参照を作成します。 この構成は、ビュー間のナビゲーションがページにハードコードされるのではなく、メタデータに格納される"C"（MVCの一部であるController）を定義します。

同様に、さらに2つのビュー参照（ viewOrdersおよび editLineItems）をエディタに追加します。

ページ間のフローを定義します。 コンポーネント・パレットから「 Control Flow Case」を選択します。 「 login」イメージをクリックし、「 viewOrders」をクリックします。 矢印は、結果の"*"によって識別される簡単なナビゲーション・ケースを表します。

次に、コントロール・フロー・ケースを識別する結果の名前を変更します。

ビジュアル・エディタで、「 *」ラベルをクリックし、青色のハイライトが表示されるまで待機します。 loginテキストを入力します。 ユーザーは、このコントロール・フロー・ケースを使用して、ログイン・ページのアクションが"login"ケースを示す場合にログイン・ページから注文ページに移動できます。

コントロール・フロー・ケースが直線で描画されていることを確認します。 曲線でナビゲーション・ケースを描画するには、ビジュアル・エディタのツールバーの polylineから2番目の緑色の線アイコンをクリックします。

ダイアグラムの任意の場所をクリックして線の結合点を作成できるので、ダイアグラムが見やすくなります。 線の結合点の作成を忘れた場合は、 [Shift]を押しながら線をクリックして、結合点を作成できます。

手順4および手順5を使用して、次のナビゲーション・ルールを作成します。

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

1.

ここでは、作成したテンプレートを使用して、アプリケーションのログイン・ページを作成します。 adfc-config.xmlダイアグラムから「 login」をダブルクリックしてページを作成します。

Create JSF Pageダイアログで、名前が login.jspxであることを確認し、デフォルトのディレクトリ場所を受け入れます。 Use Page Templateのドロップダウン・リストで、「 ordersTemplate」を選択します。

「 OK」をクリックしてページを作成し、ビジュアル・エディタを開きます。

2.

ビジュアル・エディタは、編集できないグレーアウトされている領域と編集できるmainAreaファセットを表示します。 データと密接に結合したコンポーネントとデータと密接に結合していないコンポーネントの両方をページに追加できます。 ここでは、ユーザーが顧客IDでログインできるようにログイン・フォームのタイプを作成します。 フォームを配置するには、「 Panel Group Layout」コンポーネントをJSFビジュアル・エディタにドラッグします。

Structureウィンドウで「 Panel Group Layout」を選択し、プロパティ・インスペクタで「 Common」タブを選択します。 Halignプロパティを center、 Layoutプロパティを verticalに設定します。

次に、データと密接に結合したコンポーネントを追加します。

このログイン・ページで、ユーザーはIDを入力します。このIDは、前の実習で作成したcustIdバインド変数の値を移入するために使用されます。 Oracle ADFを使用しているので、バインド値の問合せおよびメソッドの実行をおこなうすべてのインフラストラクチャが作成されます。データ・コントロール・パレットからドラッグ・アンド・ドロップしてUIコンポーネントを作成し、アプリケーション・モジュールのデータ・モデルにバインドします。

アプリケーション・ナビゲータで、プロジェクト・リストの下の「 Data Controls」を展開します。 FusionOrderAppデータ・モデルを変更した前の実習で確認したデータ・モデルと完全に同じであることを確認します。

「 OrdersView1」を開き、ビュー・リンクで関連づけられ、下にネストされているOrderItemsView2インスタンスを確認します。 「 OrderItemsView2」を開き、前の実習で作成したOrderItemProductDetailビュー・オブジェクト・インスタンスを確認します。 各ビュー・オブジェクト・インスタンスのルート・レベルにはOperationsおよびNamed Criteriaも存在します。これらは、さまざまなインスタンスから行を作成、検索、および削除するOracle ADFフレームワークによって自動的に作成されるメソッドおよび名前付き問合せです。

階層の同じレベルで、「 OrdersView1」および「 Operations」フォルダを開きます。 「 ExecuteWithParams」、「 Parameters」、「 custId」を開きます。 これは、OrdersView問合せ定義で作成したバインド変数の参照です。

ビジュアル・エディタのPanel Group Layoutコンポーネント内に「 ExecuteWithParams」をドラッグします。 Panel Group Layout内にコンポーネントをドロップしているかを確認するには、マウス・ボタンを離す前にStructureウィンドウでpanelGroupLayoutコンポーネントがハイライトされていることを確認します。

ポップアップが表示されるので、このデータ・コントロールをバインドするUI要素のタイプを定義できます。 「 Parameters」→「 ADF Parameter Form...」を選択します。

Edit Form Fieldsダイアログで、ラベル値を Enter Customer Id:に設定して、「 OK」をクリックします。

次に、Execute With Paramsボタンを変更します。 ボタンを選択して、プロパティ・インスペクタで「 Common」タブを開きます。 Textプロパティに Loginを設定します。

ActionListenerプロパティが設定されてbindings要素からExecuteWithParamsメソッドが実行されることを確認します。 bindings要素は、ページのメタデータに定義されます。 このメタデータには、データ・コントロール・サービスの場所のポインタが含まれます。

このフォームで、custIdバインド変数値を使用した問合せを実行します。また、フローの次のページに移動します。 実行するには、Actionプロパティの横にあるドロップダウンの矢印を選択し、Oracle ADF構成ファイルで定義した「 login」ナビゲーション・ケースを選択します。

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

エディタの上部の「 adfc-config.xml」タブをクリックします。 表示されていない場合、エディタの右上の下矢印をクリックして、「 adfc-config.xml」を選択します。 別のページに切り替えているので、エディタで開いている一部のタブを閉じる必要があります。 「 adfc-config.xml」タブを右クリックして、「 Close Others」を選択します。

ADFフロー・ダイアグラムで、「 viewOrders」をダブルクリックしてページを作成します。

Create JSF Pageダイアログで、名前が viewOrders.jspxで ordersTemplateが選択されていることを確認します。

「 OK」をクリックしてページを作成し、エディタで開きます。

このページでは、フォーム・レイアウトでページの上部に注文の単一のレコードを表示します。その下に、表レイアウトで注文ごとの明細項目の表を表示します。 最初に、Panel Splitterコンポーネントを作成して、上下のコンポーネントを格納します。

ADF Faces Layoutコンポーネントからビジュアル・エディタのmainAreaファセットに「 Panel Splitter」コンポーネントをドラッグします。

Orientationプロパティを vertical、Boxの Widthプロパティを 100 Percentに設定します。

4.

このページに注文および注文項目を表示するには、「 OrdersView1」インスタンスを開き、データ・コントロール・パレットで「 OrderItemsView2」ノードを選択します。

1回のドラッグ・アンド・ドロップ操作でデータ・コントロール・パレットからマスター・フォームおよびディテール表を作成できますが、一般的にこの一括操作の設定よりも詳細な制御が必要になります。 ここでは実習として、ビジュアル・エディタのpanelSplitterコンポーネントの最初のファセット内に OrderItemsView2ノードをドラッグします。

コンテキスト・メニューから、「 Master-Details」→「 ADF Master Form」→「 Detail Table」を選択します。 これによって、OrdersおよびOrder Itemsビューのフォームおよび表がそれぞれ作成されます。すべての属性が含まれます。

5.

Structureウィンドウを使用して、使用しない属性を削除できます。 このアクションは実習用なので、変更を取り消します。 ビジュアル・エディタの任意の場所をクリックし、 [Ctrl]と [Z]を押してコンポーネントの追加を取り消します。

「 Yes」をクリックして、取消しアクションを確定します。

ここでは、ビジュアル・エディタのpanelSplitterの最初のファセット内に「 OrdersView1」インスタンスだけをドラッグします。 コンテキスト・メニューから「 Forms」→「 ADF Read-only Form...」を選択します。

Edit Form Fieldsダイアログで、 [Shift]を押しながらクリックして選択し、次のコンポーネントを除いて削除アイコンをクリックします。

OrderId
OrderDate
OrderShippedDate
OrderStatusCode
OrderTotal
CustomerId

「 Include Navigation Controls」を選択して、「 OK」をクリックします。

スプリッタのbottomファセットは、注文の明細項目の詳細を示す表および明細項目を追加または編集するいくつかのボタンを表示します。 データ・コントロール・パレットからビジュアル・エディタの2つ目のpanelSplitterファセット内に「 OrderItemsView2」をドラッグします。 コンテキスト・メニューから「 Tables」→「 ADF Read-only Table...」を選択します。

Edit Table Columnsダイアログで、以下を除くすべての属性を削除します。

OrderId
LineItemId
ProductId
Quantity
UnitPrice
LineItemTotal

「 Row Selection」および「 Sorting」を選択します。 Oracle ADFは、コレクション・コンポーネント（Order Itemデータのこの行セットなど）のこれらの機能を自動的に実装します。

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

表コンポーネントが選択されていることを確認し、プロパティ・インスペクタで「 Style」カテゴリをクリックします。 「 Box」サブタブをクリックして、Widthを 100 Percentに設定します。

「 Common」カテゴリをクリックし、 ColumnSelectionプロパティを singleに設定します。 Idプロパティに orderitemsを設定します。

ビューの書式設定を追加します。 Structureウィンドウで、最初のPanel Splitterファセット内の「 panelFormLayout」コンポーネントを右クリックして、「 Surround With...」を選択します。

Surround Withダイアログで、ADF Facesコンポーネントのリストから「 Panel Group Layout」を選択します。

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

プロパティ・インスペクタで、 Halignプロパティを center、 Layoutプロパティを horizontalに設定します。

2つ目のPanel Splitterファセット内の tableコンポーネントに手順12～14を繰り返します。 構造は次のようになります。

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

これまで構築したアプリケーションをテストします。

アプリケーション・ナビゲータで「 login.jspx」を右クリックし、「 Run」を選択します。 JDeveloperでJava EEサーバーが提供されるので、テスト用にアプリケーションをデプロイする必要はありません。 この埋込みOC4Jサーバーが最初に起動するとき、多くのファイルが抽出されます。このため、IDEのEmbedded OC4J Server - Logタブに警告が表示される場合があります。 しばらく待機すると、デフォルトのブラウザにページが表示されます。 Mozilla Firefox 2.0またはInternet Explorer 7以降を使用していない場合、エラー・メッセージが表示されます。つまり、これらの対応ブラウザのいずれかをインストールする必要があります。

ログイン・ページがブラウザに表示された場合、完全なテンプレートが使用されていることを確認します。また、custId属性で作成したラベル・テキストがUIで使用されます。 顧客IDに 108と入力し、「 Login」をクリックします。

ログイン・ボタンを使用してcustId引数を渡すOrdersビュー・オブジェクトの問合せを実行することを忘れないでください。 viewOrdersページが表示されます。ビュー・リンクを使用したOrdersおよびOrderItemsビュー・オブジェクトの調整によって、注文レコードのスクロールで注文項目の表も更新されます。

ナビゲーション・ボタンをクリックして、レコードをスクロールします。 表の列のデータをソートできます（列ヘッダーにマウスを合わせて、ソート・アイコンを有効にします）。 列ヘッダーをドラッグして、表の列の順序の変更も実行できます。 また、前の実習で作成した明細項目合計属性が、入力したGroovy式に基づいて値を評価していることを確認します。

終了したら、ブラウザを閉じます。

Web Logic Serverプロセスの実行を停止して、メモリを節約します。 JDeveloper IDEで、「 Run」→「 Terminate」→「 Default Server」を選択します。

クロムをOrder Items表に追加します。 Structureウィンドウで、「 table - orderitems」を右クリックして、「 Surround With...」を選択します。

Surround Withダイアログで、ADF Facesコンポーネントのリストから「 Panel Collection」を選択します。 Panel Collectionコンポーネントは、実行時に表コンポーネントのレイアウトを変更する追加機能とともにメニューおよびツールバー・ファセットを提供します。

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

Structureウィンドウで、「 panelCollection」および「 Panel Collection facets」を開きます。
「 toolbar」を右クリックして、「 Insert Inside toolbar」→「 Toolbar」を選択します。 フィルタリングされた適切な追加コンポーネントのリストがコンテキスト・メニューに表示されるので、コンポーネント・パレットから直接コンポーネントを追加するよりも'Insert inside'コンテキスト・メニューからコンポーネントを追加するこの方法が一般的に推奨されています。

Structureウィンドウで、「 af:toolbar」を右クリックし、「 Insert Inside af:toolbar」→「 Toolbar Button」を選択します。

Oracle ADF Facesには、.xls形式で表データをエクスポートする組込みのサポートが備わっています。 次に、Order Items表のこの機能を実装します。
プロパティ・インスペクタで、ツールバー・ボタンの Textプロパティを Export To Excelに変更します。

コンポーネント・パレットで、OperationsアコーディオンからExport to Excelツールバー・ボタンに「 Export Collection Action Listener」をドラッグします。

Insert Export Collection Action Listenerダイアログで、 ExportedIdプロパティを orderitemsに設定します（これは、以前の手順で表に指定したIDです）。
Typeプロパティに excelHTMLを設定します。

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

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

新しい機能をテストします。

アプリケーション・ナビゲータで「 login.jspx」を右クリックし、「 Run」を選択します。
ログイン・ページがブラウザに表示された場合、顧客IDに 108と入力して、「 Login」をクリックします。
ViewOrdersページで、選択した列をフリーズしたり注文項目表を分離したりするための追加のメニュー項目を確認します。 「 Export to Excel」ボタンをクリックして、Excelに対応する.xls形式でデータをエクスポートします。

ブラウザを閉じて、終了したらRunning WLSプロセスを停止します。

次に、注文項目を作成および更新するページを作成します。 エディタで「 adfc-config.xml」を開きます。 「 editLineItems」をダブルクリックします。 名前がeditLineItems.jspxで ordersTemplateが選択されていることを確認します。

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

このページには、画面に収まらない大量のデータが含まれる場合があります。 ページの中央のスクロールを有効にするには、mainAreaファセット内の「 Panel Group Layout」コンポーネントをドラッグします。 Layoutプロパティに scrollを設定します。

次に、注文項目を編集するフォームを追加します。 データ・コントロール・パレットから、ビジュアル・エディタのpanelGroupLayoutコンポーネント内に「 OrderItemsView2」をドラッグします。 コンテキスト・メニューから「 Forms」→「 ADF Form...」を選択します。

Edit Form Fieldsダイアログで、以下を除くすべての属性を削除します。

OrderId
LineItemId
ProductId
Quantity
UnitPrice
LineItemTotal

「 Include Submit Button」を選択します。

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

ユーザーが明細項目情報を編集しやすいように、このフォームにいくつか変更をおこないます。 最初に、注文ID、明細項目ID、および明細項目合計フィールドを無効にして編集不可にします。このデータが計算されるか現在選択されている注文に依存するためです。 これにはいくつかの方法があります。 1つはデータ・モデル・レイヤーの属性のプロパティを変更する方法です。 これによって、データ・モデルを利用するすべてのUI実装の更新できないプロパティが適用されます。

実行するには、アプリケーション・ナビゲータで「 ADFBC_Model」プロジェクトを開いて、「 adfbc_model.queries」ノードを開きます。 「 OrderItemsView」をダブルクリックして、ビュー・オブジェクト・エディタを開きます。 「 Attributes」ノードをクリックし、「 LineItemId」をダブルクリックして属性エディタを開きます。

Edit Attributeダイアログで、「 View Attribute」ノードをクリックして、Updatableプロパティを Neverに変更します。

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

フィールドを無効にする別の方法は、データ・モデルから適用する代わりにこのページだけに変更をおこなうことです。

editLineItems.jspxページで、ビジュアル・エディタまたはStructureウィンドウの「 OrderId」コンポーネントを選択します。 プロパティ・インスペクタの Behaviorタブで、ReadOnlyプロパティを trueに設定します。

属性がページに表示される方法を変更する別の方法は、異なるタイプのコンポーネントを使用することです。 ここでは、inputTextコンポーネントをoutputTextコンポーネントに変換します。 Structureウィンドウで、LineItemTotalのaf:inputTextコンポーネント（「 af:inputText - #bindings.LineItemTotal...」）を右クリックして、「 Convert」を選択します。

Convertダイアログで、ドロップダウン・リストから「 ADF Faces」を選択して、「 Output Text」を選択します。

「 OK」をクリックしてコンポーネントを変換し、再度「 OK」をクリックしてプロパティの削除を確定します。

フォームの作成時に表示されたEdit Form Fieldsダイアログで、この属性に使用する異なるタイプのコンポーネントも選択できます。 いずれにしても、属性を変更する最適な方法は、再利用性のレベル（データ・コントロール、コンポーネント、またはコンポーネントが存在するページの再利用性）に依存します。

ouputTextコンポーネントでf:validatorおよびaf:convertNumberコンポーネントが無効なので、エディタにエラーが表示されます。 Structureウィンドウで [Ctrl]を押しながらクリックして、LineItemTotal outputText内の「 f:validator」および「 af:convertNumber」を選択します。 右クリックして「 Delete」を選択し、不要なコンポーネントを削除します。

フォームへの次の改善として、ProductIdコンポーネントのドロップダウン・リストを有効にします。 この変更はいくつかの方法で実行できます。 ここでは、データ・モデルを変更して、ProductId属性の値リストを有効にします。 アプリケーション・ナビゲータで、「 OrderItemsView」ビュー・オブジェクトをダブルクリックして、エディタを開きます。

「 View Accessors」ノードをクリックし、右上隅の緑色のプラス記号をクリックします。

View Accessorsダイアログで、「 adfbc_model.queries」を開き、「 ProductsBaseView」を右側に移動します。 これによって、ProductsBaseViewにアクセスするProductIdのリストから値リストの詳細な属性を提供できます。

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

OrderItemsViewに戻って「 Attributes」タブを選択し、「 ProductId」属性を選択します。

属性リストの下の List of Values:ProductIdセクションを確認して、緑色のプラス記号を押してProduct Idのリストを追加します。

List Data Sourceを ProductBaseView1（新しいView Accessor）、List Attrributeを ProductIdに設定します。

List Return Valuesペインで、緑色のプラス記号をクリックして、別の戻り値を追加します。 View Attributeリストの「 UnitPrice」を選択し、List Attributeリストで「 ListPrice」を選択します。 これによって、製品のListPriceがOrderItemsView UnitPrice属性に戻ります。

「 UI Hints」タブをクリックします。

Default List Typeに「 Combo Box」を選択します。 リストに表示される属性を定義するには、左側の使用可能リストの「 ProductName」を選択し、Selected領域へ移動します。

Choice List Optionsで、「 Include "No Selection" Item:」チェック・ボックスを選択します。

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

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

editLineItems.jspxページに戻ります。 Structureウィンドウまたはビジュアル・エディタのいずれかで「 ProductId」属性を選択して削除します。 データ・コントロール・パレットで、「 OrdersView1」および「 OrderItemsView2」コントロールを開き、ページのLineItemIdコンポーネントの下に「 ProductId」をドラッグします。 コンポーネントをドロップする前にStructureウィンドウを参照して、コンポーネントが正しい場所に追加されていることを確認します。

コンテキスト・メニューから「 Single Selections」→「 ADF Select One Choice」を選択します。

ご覧のとおり、コンポーネントのラベルは、属性またはエンティティのコントロール・ヒントから読み出されるバインディング・レイヤーによって提供されます。 また、ページまたはバインディングの特定の使用方法に固有のラベルを作成できます。 ここでは、メッセージ文字列を含むUIプロジェクトのリソース・バンドルを作成できます。 ただし、ラベル・プロパティをオーバーライドできることを説明するには、「 ProductId」リスト・コンポーネントを選択し、プロパティ・インスペクタでLabelプロパティを「 Product」に変更します。

次に、コンポーネントを追加して、製品のイメージを表示します。 コンポーネント・パレットで、ADF Facesリストの「 Common Components」アコーディオンを開きます。 「 Show Detail」コンポーネントをビジュアル・エディタのProductIdドロップダウンの下にドラッグします。

showDetailコンポーネントのDisclosedTextプロパティを Product Detailsに設定します。

showDetailコンポーネント内の「 Panel Group Layout」コンポーネントをドラッグして、Layoutプロパティを horizontalに設定します。

「 Image」コンポーネントをビジュアル・エディタのpanelGroupLayoutコンポーネント内にドラッグします。

Common Propertiesダイアログで、ShortDescプロパティに Product Imageと入力し、Sourceに以下を入力します。

/imageservlet?detail=#{bindings.ProductId}

このURLは、このプロジェクトで前に追加したUIResources ADFライブラリに含まれるサーブレットにアクセスします。 サーブレットは、提供されたProduct Idのイメージを表示します。 ProductIdリスト・コンポーネントを作成したときにProductIdバインディングが作成されました。

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

サーブレット・マッピングをWebアプリケーションに追加します。
アプリケーション・ナビゲータで、「 ADF_UI」、「 Web Content」、「 WEB-INF」を開きます。
「 web.xml」を右クリックして、「 Properties...」を選択します。

Web Application Deployment Descriptorダイアログで、「 Servlets/JSPs」ノードを選択し、「 New...
」をクリックします。Servlet Nameに ImageServlet、Servlet Classに uiresources.ImageServletと入力します。

「 OK」をクリックして、Servlet Mappingダイアログを終了します。再度「 OK」をクリックして、Web Application Deployment Descriptorダイアログを終了します。

Web Application Deployment Descriptorダイアログで、「 Servlet Mappings」ノードを選択し、「 Add...
」をクリックします。URL Patternに /imageservlet（手順16で参照したパターン）、Servlet Nameに ImageServletと入力します。

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

次に、イメージの横に製品の詳細を追加します。 データ・コントロール・パレットで、「 OrdersView1」、「 OrderItemsView2」、および「 OrderItemProductDetail」を開きます。 （OrderItemProductDetailノードが表示されていない場合、データ・コントロール・パレット内を右クリックして、「 Refresh」を選択します）。 ビジュアル・エディタのpanelGroupLayout内のイメージの前に「 ProductStatus」をドラッグします。 コンテキスト・メニューの「 Texts」→「 ADF Output Text w/Label」を選択します。

コンポーネント・パレットのLayoutアコーディオンからビジュアル・エディタの ProductStatusと Imageコンポーネントの間に「 Spacer」コンポーネントをドラッグします。

spacerのWidthプロパティを 50に変更します。

viewOrdersページを有効にして、editLineItemsページを呼び出します。 ビジュアル・エディタで「 viewOrders.jspx」を開きます。 Export To Excelツールバー・ボタンをクリックして、Structureウィンドウで表示します。 Structureウィンドウで、「 af:toolbar」を右クリックし、「 Insert Inside af:toolbar」→「 Toolbar Button」を選択します。

ボタンのTextプロパティを「 Edit」、Actionプロパティを「 edit」という定義されたナビゲーション・ケースに変更します。

編集フォーム・ボタンに機能を追加して、変更をコミットし、viewOrdersページに戻ります。 フレームワークがこのアクションのメソッド・バインディングを自動的に提供します。

ビジュアル・エディタで「 editLineItems.jspx」を開きます。

データ・コントロール・パレットで、階層の最上位レベルで「 Operations」ノードを開きます。 「 Commit」操作をフォームの下部の Submitボタンにドラッグします。

「 OK」をクリックして、プロパティの変更を受け入れます。

Application ModuleレベルでCommit操作が実行されます。トランザクションが変更された場合にのみデフォルトで有効です。 編集機能が呼び出されても、属性の値は変更されません。 ユーザーがeditLineItemsページの変更をおこなう場合に操作を有効にするには、Commitボタンのプロパティ・インスペクタで「 Behavior」タブを開きます。

Disabledプロパティの内容を削除して、無効なプロパティのデフォルト値をfalseに設定します。

Commitボタンの Actionプロパティを定義されたナビゲーション・ケース（「 return」）に変更します。

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

アプリケーションを実行して、作業をテストします。 アプリケーション・ナビゲータで「 login.jspx」を右クリックし、「 Run」を選択します。 顧客の 108としてログインし、注文項目表の行をクリックして選択します。 「 Edit」をクリックして、明細項目を編集します。製品イメージが表示されます。 ドロップダウン・リストで製品を変更してもイメージまたはほかの製品の詳細が更新されないことを確認します。 次の一連の手順でこれを実装します。

Quantityフィールドに 20と入力し、「 Commit」をクリックします。 前の実習で作成したエラー・メッセージが表示されます。 有効な数量を入力し、単価を更新して、再度「 Commit」をクリックします。 これによって、ProductId、Quantity、UnitPrice、およびLineItemTotalの更新を適宜確認できるビュー・ページに戻ります。

テストを終了したら、ブラウザを閉じてOC4Jの実行プロセスを停止します。

editLineItemsページのインタラクティビティのレベルを増加させるには、ドロップダウン・リストから新しい製品が選択されるとページを更新する機能を追加します。

最初に、製品のドロップダウン・リストのIDを定義します。 editLineItems.jspxビジュアル・エディタの「 Product」ドロップダウン・リストを選択して、プロパティ・インスペクタでIdに prodListと入力します。

Behaviorタブで、 AutoSubmitプロパティを trueに設定します。 これで、ドロップダウン・リストで製品が変更されるとエンクロージング・フォームが送信されます。

部分トリガーと呼ばれるOracle ADF Faces機能を使用して、ページのほかのコンポーネントでこの変更の"リスニング"を指定します。

ビジュアル・エディタで ProductStatusの「 Panel Label and Message」コンポーネントを選択します。プロパティ・インスペクタで「 Behavior」タブをクリックします。 PartialTriggersプロパティに prodListを設定します。

3.

Imageおよび Unit Priceコンポーネントに手順2を繰り返します。

4.

数量フィールドおよび単価フィールドが変更されるとLineItemTotalが更新されることを確認します。

Quantity inputTextコンポーネントのidプロパティを quant、Behavior - AutoSubmitプロパティを trueに設定します。

UnitPrice inputTextコンポーネントのidプロパティを price、Behavior AutoSubmitプロパティを trueに設定します。

LineItemTotal outputTextコンポーネントのPartialTriggersプロパティにこれらの両方のIDをスペースで区切って設定します（ price quant ）。

アプリケーション・ナビゲータで「 editLineItems.jspx」を右クリックし、「 Rebuild」を選択します。

アプリケーションを実行して、新しい機能をテストします。 アプリケーション・ナビゲータで「 login.jspx」を右クリックし、「 Run」を選択します。 顧客の 108としてログインし、表の行をクリックして選択します。 「 Edit」をクリックして、明細項目を編集します。 ドロップダウン・リストで製品が変更されるとイメージが更新されることを確認します。数量または単価が変更されると明細項目合計が更新されることも確認します。

テストを終了したら、ブラウザを閉じてDefault WLS実行プロセスを停止します。

ページが表示される前に作成操作が呼び出される場合、editLineItems.jspxで作成した編集フォームを挿入フォームとして再利用できます。 Oracle ADFフレームワークは、作成操作を提供します。

ビジュアル・エディタで「 viewOrders.jspx」を開きます。

データ・コントロール・パレットで、「 OrdersView1」、「 OrderItemsView2」、および「 Operations」を開きます。 viewOrders.jspxページのEditボタンの前に「 Create」をドラッグします。

コンテキスト・メニューから「 Operations」→「 ADF Toolbar Button」を選択します。

ボタンのActionプロパティを createに設定して、その名前でナビゲーション・ケースを呼び出します。

ユーザーが新しい明細項目を簡単に作成するには、デフォルト値を必要な属性に適用します。ユーザー・データは必要ありません。 アプリケーション・ナビゲータで、ADFBC_Modelプロジェクトの「 adfbc_model.entities」を展開し、「 OrderItems」をダブルクリックしてエンティティ・エディタで開きます。

「 Attributes」タブをクリックして、「 CreatedBy」をダブルクリックして属性エディタを開きます。 Entity Attributeノードで、「 History Column」を選択して、使用される履歴列のタイプとして「 created by」を選択します。 これによって、列の値がセキュリティ実装のユーザー値に設定されます。存在しない場合は匿名ユーザーに設定されます。

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

3.

次の属性に手順2を繰り返して、指定されたとおりにHistory Column値を提供します。

4.

UnitPrice属性を変更して、デフォルト値をリテラル値の 0に設定します。

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

LineItemId属性のデータ型を「 DBSequence」に変更します。 これで、スキーマの既存のデータベース・トリガーによってID番号が新しい明細項目に割り当てられます。

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

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

アプリケーションを実行して、新しい機能をテストします。 アプリケーション・ナビゲータで「 login.jspx」を右クリックし、「 Run」を選択します。 顧客の 108としてログインします。「 Create」をクリックして、新しい明細項目を作成します。 データベース・シーケンスを使用するフレームワークの実装によって、LineItemIdフィールドが負数になります。レコードがコミットされるまで負数が使用され、シーケンスの次の値がコミット前に移入されます。 有効な数量を入力して、「 Commit」をクリックします。

データベースの変更を確認するには、JDeveloperのツールバーから「 View」→「 Database Navigator」を選択します。 「 FusionOrderApp」、「 FOD」、「 Tables」を開きます。 「 ORDER_ITEMS」をダブルクリックして、JDeveloperのデータベース・ビューアを開きます。

エディタの下部の「 Data」タブをクリックして、新しいレコードが見つかるまで下方向にスクロールします。