Dialog.jspxアイコンをダブルクリックして、ページから設計エディタを開き ます。

このページには、定義済みの入力テキスト・フィールドがあります。ここに2つのドロップダウン・リストを追加します。

コンポーネント・パレットからSelectOneChoiceコンポーネントをドラッ グして、Address入力テキスト・フィールドの下にドロップします。リスト・ソースに SelectOneChoiceプロパティとターゲット値プロパティをバインドするためのダイアログが表示されます。

「選択」タブで、「値」フィールドの隣にある「バ インド」ボタンを押して、dialogbeanマネージドBeanを検索します。このBeanで、stateSelectItemsを 選択したら、「」ボタ ンをクリックして式ペインに追加し、「OK」をクリックします。

式言語ビルダーを閉じると、次のバインド文字列を作成します。#{dialogbean.stateSelectItems}宣 言型エディタが必要ない場合は、値フィールドに直接文字列を入力することもできます。

「共通プロパティ」タブで、Label値にStateを、 Value値に#{userbean.state}を入力します。これによって、リストから選択された値がUser Beanに書き込まれたことを確認できます。User Beanとは、このプロジェクトのモデルを示すものです。

「Advanced Properties」タブを選択して、バイン ディング・プロパティを選んだら「」ボタンをクリックして、バインディング・ダイアログを 起ち上げます。このダイアログで、マネージドBeanの「dialogbean」エントリを選択します。
プロパティ・フィールドで、「selectOneChoice1」 を選択したら、「OK」をクリックして「Advanced Properties」タブ に戻ります。

さらに、「Advanced Properties」タブで次のプロパティを設定しま す。

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

注：Immediateプロパティを trueに設定すると、選択操作上必要がないことからJSFライフサイクルが無視されます。

他のSelectOneChoiceコンポーネントをドラッグして、Stateの 下にドロップします。

「選択」タブで#{dialogbean.citySelectItems}に 値を追加するか、式言語ビルダーを使用します。

「共通プロパティ」タブで、Label値にCity、 Value値に#{userbean.city}を 入力します。

「Advanced Properties」タブで「バインディング」 プロパティを選択します。「」ボタンをクリックします。

バインディング・ダイアログで、マネージドBeanの一覧から「dialogbean」 を選択します。プロパティ値で「selectOneChoice2」を選択し ます。

「OK」をクリックして、新規バインディングを作成します。

「PartialTriggers」プロパティを選択し、「」ボタンを クリックしてPartialTriggersダイアログを起ち上げます。

「新規」ボタンをクリックして、新規に作成された選択肢からドロップダウン・リストを 表示させます。ドロップダウン・リストから「selectOneChoice1」を選択します。

注：この設定を行うことで、State SelectOneChoiceが選択された値を変更するたびに、SelectOneChoiceはリフレッシュされます。依存関係リストボックスを作成 する場合は、ADF Facesで部分ページ・レンダリングを使用します。

SelectOneChoiceダイアログは、「OK」 をクリックして閉じます。

アプリケーション・ナビゲータでDialog.jspxを右クリックして、コンテキストから「実行」を選択 します。

ダイアログ・ページがデフォルトのブラウザにロードされ、追加した2つの空のドロップダウン・リストが表示されます。

州リストから1つ選択します。

次に、都市リストから１都市を選択します。

注：部分ページ・レンダリングは、都市の値を表示する際に使用されます。都市リスト は、選択する州に応じて変わります。

ブラウザ・ウィンドウを閉じます。

ナビゲーション・リンクをsuccessからdialog:openに変更します。接頭辞 の"dialog:"をナビゲーション・ケースに使用すると、ADF Facesはこのページをダイアログに表示するものと解釈します。

Dialog.jspxアイコンをダブルクリックして、ページの設計エディタを開きま す。

Oracle JDeveloperのコンポーネント・パレットで、2つ目のSelectOneChoice（都 市）の下にInputTextFieldを追加して、次のプロパティを設定します。

resetボタンとsubmitボタンを作成するには、コンポーネント・パレットのPanelGroupコ ンポーネントをPanelFormのfooter facetにドラッグします。

コンポーネント・パレットで「ResetButton」と「CommandButton」 コンポーネントをpanelGroupに追加します。プロパティ・インスペクタで、resetボタンのテ キスト・プロパティをResetに、送信ボタンのテキスト・プ ロパティをSubmitに設定します。

「Submit」ボタンを選択し、プロパティ・インスペクタのActionプ ロパティを選択します。「」ボタンをクリックして、マネージドBeanプロパティの値に「dialogbean」を選 択します。メソッド選択ボックスで「submitDialogAction」を選択します。

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

Main.jspxファイルを、アプリケーション・ナビゲータのファイル・エントリ か、もしくはfaces-config.xmlビジュアル・エディタでダブルクリックして開きます。

「Create Customer」ボタンを選択してプロパティ・インスペクタを開 き、次のプロパティを設定します。

「ReturnListener」プロパティを選択し、「」ボタンをクリックします。マ ネージドBeanリストで、「dialogbean」を選択し、メソッド・フィールドで「returnFromProcess」 を選択します。

「OK」をクリックして、ダイアログを閉じます。

構造ウィンドウで、af:panelPage要素を選択し、プロパティ・インスペクタ を開きます。

PartialTriggersプロパティを選択し、「」ボタンをクリックします。

注：既存のスキン・セレクタ・エントリは、ページのルック・アンド・フィールを動的に 変更するために予め定義された部分トリガーのことで、スキニングと呼ばれる機能を示します。スキニング機能は、Main.jspxページを実行することで 確認できます。

表示されているダイアログで「新規」ボタンをクリックします。新しいエントリを選択 し、ドロップダウン・リストから「createUserButton」を選択します。これによって、ボタンを押すとパ ネル・ページがリフレッシュされます。

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

faces-config.xmlダイアグラムに移動し、Main.jspxア イコンを選択します。

アイコンを右クリックし、「実行」を選択してアプリケーションをテストします。

メイン・ページがデフォルトのブラウザ上に開きます。

スキン・セレクタ項目の横にあるドロップダウン・リストをクリックし、「OOW Skin」 値を選択します。ページがリフレッシュされ、OOWスタイル・シートを反映させた新しいUIが表示されます。

注：oow.cssスタイル・シートは、Web コンテンツ → スキン・フォルダで定義されています。

スキン・セレクタを元のOracleスキン値に戻すことができます。

「Create Customer 」ボタンをクリックして、ダイアログを呼び出し ます。

ダイアログ・ウィンドウのフォームに適切な値を入力します。

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

メイン・ページにはダイアログ・ウィンドウで入力した値が反映され、ページの下には情報メッセージが表示されます。

ブラウザ・ウィンドウを閉じます。

コンポーネント・パレットから「表」コンポーネントを「単一行選択」 タブにドラッグします。

表バインディング・ウィザードで、「次へ」をクリックして初期画面をスキップします。 手順1では、値フィールドの隣にある「バインド」ボタンをクリックします。式言語 ビルダーで「singleselectionhandler」→「tableModel」と選択し、「」ボタンをクリックして式ペイ ンに追加します。

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

Varフィールドの値を「行」に設定します。

Data Type Hintフィールドの「Browse」 ボタンを押して、Customerと入力します。リストにあるパッケージのoracle.adffaces.handson.modelで、 「CustomerBean」クラスを選択します。

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

Data Type Hintフィールドに、oracle.adffaces.handson.model.CustomerBeanが 表示されます。このヒントは、ウィザードが次のページで表示する表の列を決定する上で必要な情報です。

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

表ウィザードの手順2では、Selectedという列を削除して、次の順番で表示され るように列を整理します。氏名、住所、電話番号、電 子メール、会社

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

手順3では、ソートできるよう列に印を付けます。 ソート機能は、ADF Faces表コンポーネントの統合機能です。各列を選択して、次の値を設定します。

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

手順4では、次の値を定義します。

表作成のダイアログを閉じます。

ビジュアル・エディタで表を選択して（構造ペインでも選択可能）、プロパティ・インス ペクタを開きます。バインディング・プロパティを選択して、「」ボタンをクリックします。

マネージドBeanフィールドで、「singleselectionhandler」 エントリを選択し、プロパティフィールドで「table1」を選択します。

「OK」をクリックして、ダイアログを閉じます。

構造ペインでaf:tableコンポーネントを選択します。表ノー ドを開いたら、Table facetsを開きます。

コンポーネント・パレットからPanelButtonBarコンポーネントをドラッグ して、Table facetsノード内のactionsファセットにドロップし ます。

コンポーネント・パレットからCommandButtonコンポーネントをドラッグし て、PanelButtonBarにドロップします。

「CommandButton 1」を選択して、プロパティ・インスペクタを開きま す。テキスト・プロパティを編集に設定し、PartialSubmitプ ロパティをtrueに設定します。

「ActionListener」プロパティを選択して、「」ボタンをクリックします。 ActionListenerダイアログで、ドロップダウン・リストから「tablebean」 をマネージドBeanとして選択します。メソッド・フィールドで「launchEditDialog」値を選択しま す。

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

プロパティ・インスペクタで、CommandButton用に「ReturnListener」 プロパティを選択して、「」ボタンをクリックします。マネージドBeanフィールドで「tablebean」エントリ を選択します。processReturnFromEditをメソッドとして選択します。

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

「バインディング」プロパティを選択して、「」ボタンをクリックします。マネージドBeanフィール ドで「tablebean」エントリを選択します。プロパティ・フィールドで「commandButton1」 を選択します。

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

「実行」アイコンをクリックして、ブラウザに表ページを起動します。

「Edit Customer」ページで顧客を選択し、「編集」をク リックします。

Edit SingleTable Rowページに、選択された顧客情報が表示されます。必要であれば、修正を行ってください。

「Submit」をクリックして表ページに戻ります。

「Multi Row Select」リンクをクリックして、顧客を1つ以上選択したら「編 集」をクリックします。

Selected Customersを1つ以上変更したら、「Commit」をク リックして変更を確認します。

更新した内容は、表ページに反映されます。

ブラウザのウィンドウを閉じます。