アプリケーション・ナビゲータで、ViewControllerプロジェクトを右ク リックし、コンテキスト・メニューから「JSFナビゲーションを開く」を選択します。これによって、Webコンテンツ のWeb INFノードにあるfaces-config.xmlファイルが開きます。

エディタ上にページ・フロー・ダイアグラムが開きます。

ビジュアル・ページ・フロー・エディタの右にあるコンポーネント・パレットで、上部のドロップダウン・リストから「JSF Navigation Diagram」が選択されていることを確認します。コンポーネント・パレットが表示されていない場合は、「表 示」→「コンポーネント・パレット」を選択してください。

「JSF Page」をクリックして、「Diagram」 をクリックします。新規ページの名前をbrowseCustomersと入力します。入力する のは、browseCustomersのみです。"/" および拡張子の.jspは追加されています。

関連するページが構築されていないため、/browseCustomersのページ・アイコンに黄色いアラートが表示され ることを確認してください。

ダイアグラムに/editCustomersおよび/browseCustomerOrdersの 2つのページを追加作成します。

各ページのファイル拡張子が.jspであることを確認します。

次に、ページ間のJSF Navigation Casesを作成します。この重要性は、後に判明します。現時点では、アプリケーション・フローのビジュアル・インジケータとして理解してください。

ナビゲーションを追加するには、コンポーネント・パレットの「JSF Navigation Case」 をクリックして、ソースであるbrowseCustomers、保存先、browseCustomerOrdersの 順にクリックします。また、線を曲げる場合は中間ポイントをクリックします。

ナビゲーションのプロパティを修正するには、作成したばかりの「JSF Navigation Case」 を選択して、プロパティ・パレットからFrom OutcomeプロパティをcustomerOrdersに 変更します。これで、ダイアグラム上のナビゲーション・フロー名がcustomerOrdersに変更されたことを確認してください。

browseCustomerOrdersからbrowseCustomersに 戻るナビゲーション・ケースを作成します。ここでも、ナビゲーション・フローの名前を変更します。今回は、フロー名を選択して直接ダイ アグラム上で変更を行います。ナビゲーション・ケースのbrowseCustomersを呼び出します。

次に、browseCustomersとeditCustomersのページ間に、3つのJSF Navigation Casesを作成します。まずbrowseCustomersからeditCustomersに 対して作成するため、From OutcomeプロパティをeditCustomersに設定します。

editCustomersからbrowseCustomersに 戻る場合は、From Outcomeプロパティをそれぞれcancelおよびcommitに 設定します。

プロパティの設定には、フローをダブルクリックしてダイアグラムを立ち上げ、From Outcomeプロパティを編集する方法もあります。

「すべて保存」をクリックするか、「ファ イル」→「すべて保存」を選択して作業を保存します。

ページ・フロー・ダイアグラムで、/browseCustomersデータ・ページを ダブルクリックします（このページは、まだ存在していません）。

JSF JSPの作成ウィザードが開くので、ようこそという画面が表示されたら、「次へ」 をクリックします。

ウィザードのJSP Fileページで、提案されたページ名browseCustomers.jspを 承認します。ページ内のその他のオプションもデフォルトのままにし、「次へ」をクリックします。

ウィザードのComponent Bindingページで、デフォルト状態のまま「次へ」 をクリックします。

ウィザードのタグ・ライブラリ・ページで、Selected LibrariesリストにOracle ADF Facesライブラリがあることを確認します。Selected LibrariesリストにOracle ADFライブラリがない場合は、Available Librariesリストから選択し、「追加」をクリックして Selected Librariesリストに追加します。

「次へ」をクリックします。

HTML Optionsページの設定もデフォルトのままにし、「次へ」をクリックし ます。

「終了」をクリックしてページを作成し、ビジュアル・エディタに空のJSPを立ち上げ ます。

Oracle JDeveloperおよびOracle ADFでは、データアウェア・コンポーネントを簡単にページへ追加できます。空白ページの右に、2つのタブが表示されます。「Components」 タブは非データ・バインド・コンポーネントすべてを表示し、「Data Control」タブはデータ・バインドされ たOracle ADFコンポーネントすべてを表示します。

「Data Control」タブに切り替えます。（コンポーネント・パレットが表示 されていない場合は、メイン・メニューから「表示」→「コンポーネント・パレット」 を選択してください。）

アプリケーション・モジュールがデータ・コントロール・パレットに表示されます。CustomerOrdersBusinessServicesDataControlを 開きます。CustomersView1ノードを開きます。選択されたアイテムは、ビュー・オブジェクトを構築する際 に選択したものです。

CustomersView1を選択して、ページにドラッグします。選択メニューが表 示されます。「表」→「ADF読取り専用表」を選択します。

表の列の編集ダイアログで、「Enable Selection」と「Enable Sorting」にチェックを入れます。（エディタはまだ閉じないでください。）

参照ページと検索ページを作成しているため、ページ上のビュー・オブジェクトにある列をすべて表示する必要はありません が、編集ページではすべての列が必要です。

[Shift]を押しながら（または[Ctrl]で個々の列を選択して）、CustomerId、 CustFirstName、CustLastName、CustEmail以外のすべての列を選択し、「削除」 をクリックします。

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

構築したページをテストするには、アプリケーション・ナビゲータから実行するか、ページ自身から実行してください。ここで は、ページ・フロー・ダイアグラムに戻ります。/browseCustomersデータ・ページにインコンプリート （感嘆符）アイコンが表示されていないことを確認します。

ページ・フロー・ダイアグラムで/browseCustomersページを右クリック し、コンテキスト・メニューから「実行」を選択してページを実行する内部サーバーを起動します。

読取り専用Webページがブラウザ上で実行され、カスタマ表に問い合わせます。ラベルは前のチュートリアルで指定したエン ティティ・オブジェクトとビュー・オブジェクトで、ソートの順番はそのチュートリアルのビュー・オブジェクトで指定したORDER BY句に基づいたものです。

レコードの順番は、列ラベルをクリックして変更できます。順番や昇降順を指示する列がどれかを示すアイコンが表示されま す。レコードの最後まで移動し、戻れることを確認してください。終了したら、ブラウザを閉じます。

ページを作成した際は注意してください。Oracle JDeveloperに戻り、アプリケーション・ナビゲータから、ViewController → Application Sourcesを開きます。多くのパッケージが用意されています。

view.pageDefsを開き、browseCustomersPageDef.xmlを 選択します。

下の構造ウィンドウで、executablesのCustomersView1Iteratorを 選択します。行イテレータは現在の行を個々のコントロール・バインドに送信し、現在のデータを表示します。イテレータ・バインドは、Webページに表示す る行の数を指定できます。CustomersView1Iteratorを選択してからプロパティ・ インスペクタを見ると、RangeSizeの値セットの返したレコード数が表示さ れています。

次に、バインディング → CustomersView1を 開きます。ここでは、作成したビュー・オブジェクトの列の属性名をすべて閲覧できます。データ・コントロール・パレットからアイテムをドラッグすると、 データ・バインドがここに追加されます。

browseCustomersページのビジュアル・エディタに戻ります。データ・コ ントロール・パレットのCustomersView1ノードを開きます。OrderView2のすぐ下にある、Operationsを 開きます。

削除操作を探し、それをsubmitボタンの横にあるページへドラッグします。表示さ れたコンテキスト・メニューから「ADFコマンド・ボタン」を選択します。

データ・コントロール・パレットでCustomersView1ノードを閉じます。CustomersView1と 同じレベルにOperationsノードがあります。このノードを開き、Commit操作およびRollback操作 を開きます。各操作をページのDeleteボタンの横にドラッグして、各ケースで「ADFコマンド・ボタン」を選択し ます。

前回同様、ページを実行して変更をテストします。

レコードを「選択」して削除します。変更をロールバックします。

次のチュートリアルでは、新規レコードを作成します。

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

ページ・フロー・ダイアグラムのeditCustomersアイコンと連携するJSP を作成します。

これは、browseCustomersページと同じ手順です。

ページ・フロー・ダイアグラム（faces-config.xml）で、/editCustomersア イコンをダブルクリックします。

editCustomer.jspをページ名として承認します。

ウィザードにあるその他すべてのデフォルトを承認します。

データ・コントロール・パレットをクリックします。

CustomerOrdersBusinessServicesDataControlを 開き、CustomersView1を選択して、ページにドラッグします。コンテキスト・メニューから「フォー ム」→「ADFフォーム」を選択します。

「Include Submit Button」にチェックを入れて、「OK」 をクリックし、フォーム・フィールドすべてを承認します。

このページのレイアウトが、以前作成したものと異なっている点に注目します。同じデータ・コントロールをさまざまな方法で 表示できます。

次のセクションでは、ナビゲーションを追加してページのUIを強化し、ページのテストを行います。最初にページを実行し、 正常に作動するか確認します。

ページを実行するには、browseCustomersページをテストした手順と同様に、editCustomersペー ジを選択および右クリックし、コンテキスト・メニューから「実行」を選択します。

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

ページ・フロー・ダイアグラムにbrowseCustomerOrdersアイコンと対応するJSPを作成します。

これは、browseCustomersページと同じ手順です。

ページ・フロー・ダイアグラム（faces-config.xml）で/browseCustomerOrdersア イコンをダブルクリックします。

/browseCustomerOrders.jspをページ名として承認します。

ウィザードにあるその他すべてのデフォルトを承認します。

データ・コントロール・パレットで、CustomerOrdersBusinessServicesDataControl、CustomersView1、 およびOrdersView2を開きます。

OrderItemsView1を選択して、ページにドラッグします。コンテキスト・ メニューから、「Master-Details」→「ADF Master Form」 →「Detail Table」を選択します。

ここでは、各セクションのタイトルをOrdersおよびOrder Itemsに変更します。

プロパティ・インスペクタを使用して、テキスト・プロパティのOrdersView2を 選択したら、Ordersのテキストに置き換えます。詳細レコードのタイトルである、OrderItemsView1をOrder Itemsに変更します。ビジュアル・エディタのテキストが更新されたことを確認してください。

注：テキスト・プロパティのプロパティ・インスペクタを簡単に選択できない場合は、構 造ウィンドウに移動して各ヘッダーの af:panelHeaderを選択します。その後、プロパティ・インスペクタ のテキスト・プロパティを選択して変更することができます。

マスター、Orders、セクションにおいて、すべての列を表示させる必要はありません。

SalesRepIdを削除します。

ページからラベルとデータを削除したことを確認してください。SalesRepId列を選択したら、構造ウィンドウのリン クでaf:inputTextを選択したことを確認します。エディタからアイテムを削除するか、構造ウィンドウから削 除するか、任意の方法で実行してください。

ページの詳細項目で、表示する必要のない列がいくつかあります。ただし、列はJoin構文で必要なので、削除しないでくだ さい。

Order Items詳細項目でOrderId列を選択し、プロパティ・インスペク タからRenderedプロパティをFalseに設定します。

チュートリアルの初期段階で、列のヘッダーだけでなく、必ず列すべてを選択してください。これは、構造ウィンドウの選択で 確認できます。

この手順を、Orders ItemsのProductIdの両インスタンスで実行し、「Rendered」 プロパティを各ケースで「False」に設定します。これで、ページは次の画面のようになります。

ProductName列をLineItemIdの 横に移動させます。

ProductName列を選択します。これによって、構造ウィンドウの列が強調表示 されます。構造ウィンドウを使用し、ProductName列を上部のLineItemId列までドラッグします。

ページのテストを実行するには、その他のページでテストを実行した際と同様に、browseCustomerOrdersペー ジを右クリックして、コンテキスト・メニューから「実行」を選択します。

ラベルのみが表示されるのは、順番のないカスタマを表示しているためです。もしそのように表示される場 合は、特定のCustomerIdのページを実行できます。実行するには、OrderEntry → Modelプ ロジェクトのCustomersViewに戻ります。model.queriesパッケージのCustomersViewを ダブルクリックして、Propertiesダイアログを起動します。Customers.CUSTOMER_ID = 102をSQL文のWhere句に追加します。これは、次のチュートリアルにおける、 browseCustomersページからのbrowseCustomerOrdersの呼び出しでは必要ありません。Webページのテストが終了した ら、必ず制限を解除してください。

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

ビジュアル・エディタでbrowseCustomersを開き、「Submit」ボタ ンを選択します。

プロパティ・インスペクタで、Textプロパティの値としてEdit Customersを 入力します。Actionプロパティを選択して、ドロップダウン・リストから「editCustomers」を選択し ます。

注：フィールドにActionプロパティ値を入力するだけでも構いませんが、Actionプロパティのテキストは必ず faces-config.xmlファイルのナビゲーション・ケースに対するFrom Outcomeプロパティのテ キストと一致していなければなりません。

Webページをテストするには、browseCustomersを選択して右クリック し、コンテキスト・メニューから「実行」を選択します。

ブラウザでラジオ・グループからカスタマを選択し、「Edit Customers」 をクリックします。

新規ページがbrowseCustomersページで選択したCustomerIdを返すことを確認してください。

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

ビジュアル・エディタでbrowseCustomersページが開かれていることを確認してください。「コ ンポーネント・パレット」タブに切り替えて、ドロップダウン・リストから「ADF Faces Core」 を選択します（コンポーネント・パレットが表示されていない場合は、「表示」→「コンポーネント・パ レット」を選択してください）。

「CommandButton」を選択して、「Delete」 ボタンの隣へドラッグします。

作成したボタンを選択します。

プロパティ・インスペクタで、TextプロパティをShow Ordersに設定しま す。Actionプロパティを選択して、ドロップダウン・リストから「customerOrders」を選択します。 前回と同様に、Actionプロパティのテキストは、ページ・フロー・ダイアグラムのナビゲーション・コントロールで入力したものと一致している必要があ ります。

「すべて保存」をクリックするか、「ファ イル」→「すべて保存」を選択して作業を保存します。

browseCustomersページを実行して、変更をテストします。

CustomerId 101を探して選択します（CustomerIdは列ヘッ ダーをクリックすることで順序を変更できます）。

「Show Orders」をクリックします。

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

ビジュアル・エディタでeditCustomersページを開きます。

ビジュアル・エディタでGenderフィールドを選択します。右クリックして、「削除」 を選択します。

これによって、Genderのテキスト・フィールドは削除されます。

ビジュアル・ページ・エディタで選択した各アイテムは、構造ウィンドウでも選択されることに注意してください。ビジュア ル・ページ・エディタでDateOfBirthを選択します。これによって、構造ウィンドウで強調表示されます。

データ・コントロール・パレットに戻り、CustomersView1を開きます。

Genderを選択し、構造ウィンドウにドラッグして、DateOfBirthの下に ドロップします。プロンプトが表示されたら、コンテキスト・メニューで「Single Selections」→「ADF Select One Radio」を選択します。

リスト・バインド・エディタが開きます。「固定リスト」オプションを選択します。

基本データソース属性で、「Gender」を選択します。

MおよびFを、Set of Valuesの下の行にそれぞれ入力します。"No Selection"項目ドロップリストから、「Selection Required」を選択します。

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

editCustomersページに、ラジオ・アイコンが1つ含まれました。

ページをテストするには、editCustomersページを実行します。Genderは、ラジオ・ボタン・グループとし て表示されます。

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

ビジュアル・エディタのeditCustomersページに戻ります。他の2つの フィールドと同様に、ビジュアル・エディタでIncomeLevelフィールドを選択します。

データ・コントロール・パレットから CustomersView1を選択して開き、IncomeLevelを 選択して、構造ウィンドウにドラッグします。MaritalStatusの直下にドロップして、プロンプトが表示されたら「Single Selections」→「ADF Select One Choice」を選択します。

リスト・バインド・エディタが開きます。「固定リスト」を選択します。

基本データソース属性で、「IncomeLevel」を選択します。

"No Selection" Itemドロップリストから「Selection Required」 を選択します。

Set of Valuesには、以下の値をそれぞれ別の行に入力します。

A: Below 30,000
B: 30,000 - 49,999
C: 50,000 - 69,999
D: 70,000 - 89,999
E: 90,000 - 109,999
F: 110,000 - 129,999
G: 130,000 - 149,999
H: 150,000 - 169,999
I: 170,000 - 189,999
J: 190,000 - 249,999
K: 250,000 - 299,999
L: 300,000 and above

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

注：この作業をオンライン上で実施している場合、「コピー」および「貼 り付け」機能を利用して上記のリストを活用できます。

アプリケーションをテストするには、editCustomersページを実行します。「IncomeLevel」 は、ドロップダウン・リストとして表示されます。

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

ビジュアル・エディタのeditCustomersページに戻ります。

データ・コントロール・パレットでCustomersView1を選択し、開きます。 CustomerView1の子ノードであるOperationsノードを開きます。Create操作を選択します。

Create操作を、ページのSubmitボタンの前にドラッグします。プロンプトが表示されたら、コンテキスト・メ ニューから「ADFコマンド・ボタン」を選択します。

データ・コントロール・パレットに戻り、CustomersView1を閉じてから、CustomersView1と 同じレベルにあるOperationsを開きます。

Commit操作を選択してページにドラッグし、Submitボタンの隣にドロップし ます。プロンプトが表示されたら、コンテキスト・メニューから「ADFコマンド・ボタン」を選択します。

Rollbackボタンについても同様の作業を行い、Commitボタンの隣にドロップします。

「すべて保存」をクリックして、作業をすべて保存 します。

ユーザーが"Submit"ではなく"Apply Changes"を希望し、Submitボタンのテキストを変更する場合、「Submit」ボタンを選択し、プロパ ティ・インスペクタのTextプロパティをApply Changesに変更します。

アプリケーションをテストするには、editCustomersページを実行します。

従業員の名前を変更して、変更を取り消すために「Rollback」をクリックしま す。

新規カスタマを作成し、「Apply Changes」をクリックしてデータベースに 変更を送信します。 「Commit」をクリックして、データベースのレコードを更新します。

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

このチュートリアルの前半で、ボタンのActionプロパティ値は、ページ・フロー・ダイアグラムのナビゲーション・ケー スにおけるテキストと一致しなければならないと説明しました。

faces-config.xmlファイルからページ・フロー・ダイアグラムを開きます（ViewControllerを 右クリックして、コンテキスト・メニューから「Open JSF Navigation」を選択します）。

browseCustomersページのeditCustomerページでcancelお よびcommitのナビゲーション・フローがあることを確認します。

ビジュアル・エディタのeditCustomersページに戻ります。コンポーネン ト・パレットのドロップダウン・リストで、「ADF Faces Core」が選択されていることを確認します。

「CommandButton」を選択して、「Rollback」 ボタンのすぐ隣へドラッグします。

新規ボタンが選択されていることを確認します。プロパティ・インスペクタで、Textプロパティの値としてCancelを 入力します。

Actonプロパティを選択し、ドロップダウン・リストから「cancel」を選択し ます。

ビジュアル・エディタで「Commit」（Apply Changes）ボタンを選択して、プロパティ・インスペクタのActionプロパティ値とナビゲーション・フローの値が一致していることを確認します。 ドロップダウン・リストの値は、ナビゲーション・フローの値です。データを送信してbrowseCustomersページに戻るには、フロー値を選択する 必要があります。

アプリケーションをテストするには、browseCustomersページをページ・フロー・ダイアグラムから実行しま す。

カスタマを選択し、「Edit Customers」をクリックします。従業員の名前 を変更して、「Cancel」をクリックします。カスタマ・ページに戻り、変更が加えられていないことを確認します。

再度カスタマを変更し、今度は「Apply Changes」をクリックしてから「Commit」 をクリックします。データは送信され、カスタマ・ページに戻ります。

作業中のOrderEntryアプリケーションで、Modelプロジェクトを開き、エ ンティティ・オブジェクトを表示します。

Customersダイアログのエンティティ・オブジェクトをダブルクリックし、エン ティティ・オブジェクト・エディタを開きます。

属性ツリーを開き、CustomerIdを選択します。

Updatableフィールドで「While New」に設定し、「OK」 をクリックします。

「すべて保存」をクリックするか、「ファ イル」→「すべて保存」を選択して作業を保存します。

アプリケーションをテストするには、browseCustomersページを実行します。

カスタマを選択し、「Edit Customers」をクリックします。

editCustomersページで、CustomerIDフィールドの編集ができないことを確認します。

「作成」をクリックして、新しいカスタマ・レコードを追加します。新規レコードの CustomerIDフィールドが編集可能であることを確認します。

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