0) { obj.className = "imgborder_on"; } } } function hideImage(obj) { if (obj.className.substr(0, 10) == "imgborder_") { obj.src = eyeglass.src; obj.className = "imgborder_off"; } } function showAllImages() { imgs = document.images; for (i=0; i < imgs.length; i++) { showImage(imgs[i]); } } function hideAllImages() { imgs = document.images; for (i=0; i < imgs.length; i++) { hideImage(imgs[i]); } } //-->
Oracle ADF FacesによるJSFユーザー・インタフェースの開発
目的
このチュートリアルでは、ページ・フロー・ダイアグラムを作成し、構築済みアプリケーション用に作 成したビジネス・コンポーネントを表示するWebページを作成します。ビジネス・コンポーネントの作成方法については、
Oracle ADFビジネス・コンポーネントによるビジネス・サービスの開発のOBE（Oracle By Example）を参照してください。
また、このチュートリアルでは、ページ・ナビゲー ションを完成するためのページのリンク方法や、ユーザー・インタフェースの強化についても解説します。
所要時間
約45分
トピック
このチュートリアルでは、以下のトピックについて説明します。
スクリーンショットの表示
![]()
このアイコンの上にカーソルを置くと、すべてのスクリーンショット がロードし、表示されます。（警告：すべてのスクリーンショットが同時にロードされるため、ご使用のインターネット接続によってはレスポンス・タイムが遅 くなる場合があります。）
注：各手順に関連したスクリーンショットのみを表示する場合は、それぞ れの手順にある各アイコンの上にカーソルを置いてください。
概要
ADF ビジネス・コンポーネントによるビジネス・サービスの開発のチュートリアルで構築したビジネス・コンポーネント・モデル、および実装した検証ルー ルとビジネス・ルールに基づき、アプリケーションのページ・フローを構築します。ページの構築を進める中で、一部について調整する必要がでてくる可能性が あります。ここでは、ページの作成から、それぞれのページを個別に実行してテストする方法までを説明します。
ページ・フローを定義したら、特定のページ からアクセス可能なページを指定するためのナビゲーション・ケースを定義します。ページ・フローは、
ページ・フローのナビゲーション・ケースと同じ名前を持つページにア クションを追加することで実装します。ナビゲーション・ケースは、その名前のイベントがページ内で発生したとき、どこにナビゲートするかをアプリケーショ ンに伝えるものです。このほか、カスタマを作成および編集する機能や、カスタマ・データをコミットまたはロールバックする機能を追加します。また、いくつ かのチェック・ボックス、ラジオ・ボタン、ドロップダウン・リストのテキスト入力フィールドに変更を加えて、ユーザー・インタフェースを強化します。
トピック・リストに戻る
シナリオ
ページの手書きダイアグラムから、アプリケーションのページ・フローを構築します。顧 客が何ページか確認することを想定し、カスタマの表の検索やカスタマ･ディテールの編集、カスタマの順序の問合せなどができるWebページを構築すること にします。
基本機能をページ内に配置した後は、利 便性の高いインタフェースの開発に専念することにします。まず、データのコミットやロールバックなどの特別な機能を追加します。また、データ入力作業を簡 単にするため、いくつかGUI制御を追加することにしました。さらに、新規カスタマが追加されない限り、CustomerIDフィールドを
編集不可にします。これは、CustomerIDがカスタマ・データ の重要な鍵であり、既存カスタマのために変更されてはならないからです。
トピック・リストに戻る
前提条件
このチュートリアルを始める前に、次のことを確認してください。
| 1.
|
Oracle JDeveloper（10.1.3.1.0）にアクセスできるか、またはインストール済みであること。この製品は、
Oracle Technology Networkからダウンロードできます。
| | 2.
|
ここをクリッ クして、構築済みOrderEntryアプリケーションをzipファイル形式でシステムにダウンロードします。
| | 3.
|
OrderEntry.zipファイルを（
<jdev_home>/jdev/mywork/
） ディレクトリに解凍します。
| | 4.
|
Oracle Database 10gを含むOracle Sample Schemasにアクセスできるか、またはインストール済みであること。
このチュートリアルでは、OEスキーマを使用します。特に、Webページは EMPLOYEES表と連動します。
OEスキーマのインストールおよびOracle JDeveloper 10g内における接続の作成手順は、次のURLを参照してください。
http://www.oracle.com/technology/obe/obe1013jdev/common/OBEConnection.htm
| | 5.
|
Oracle JDeveloperを起動します。解凍先のルート・ディレクトリ（
<jdev_home>
） にあるOracle JDeveloperの実行可能ファイル（
jdeveloper.exe
） をダブルクリックします。
![]()
「
ユーザー設定の移行」ダイアログ･ボックスが開 いたら、「
いいえ」をクリックします。
「
今日のヒント」ウィンドウを閉じます。
| | 6.
|
Oracle JDeveloper IDEが表示されます。
![]()
| | 7.
|
Oracle JDeveloperで「
ファイル」 →「
開く」を選択します。「
開く」ダイアログで、
<jdev_home>/jdev/mywork/OrderEntry
ディ レクトリ内の
OrderEntry.jwsファイルを選択して、「
開く」をクリッ クします。
![]()
|
トピック・リストに戻る
ビジュアル・ページ・フローの作成
たとえば、アプリケーションの開発に伴い、ユーザーの参照する画面や移動方法を以下のようなラフ・ スケッチにまとめたと仮定します。
.
![]()
Oracle JDeveloperは、アプリケーションのページ・フローをダイアグラム化するためのビジュアル・ツールです。ビジュアル・ツールはダイアグラムを作成 する機能だけでなく、それ以上の機能を提供しますが、今回は構築予定のアプリケーションの概要を捉える目的で使用します。
構築予定のアプリケーションのページ・フロー・ダイアグラムを作成するには、次の手順 に従ってください。
| 1.
|
アプリケーション・ナビゲータで、
ViewControllerプロジェクトを右ク リックし、コンテキスト・メニューから「
JSFナビゲーションを開く」を選択します。これによって、Webコンテンツ のWeb INFノードにあるfaces-config.xmlファイルが開きます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
エディタ上にページ・フロー・ダイアグラムが開きます。
| | 2.
|
ビジュアル・ページ・フロー・エディタの右にあるコンポーネント・パレットで、上部のドロップダウン・リストから「
JSF Navigation Diagram」が選択されていることを確認します。コンポーネント・パレットが表示されていない場合は、「
表 示」→「
コンポーネント・パレット」を選択してください。
「
JSF Page」をクリックして、「
Diagram」 をクリックします。新規ページの名前を
browseCustomersと入力します。入力する のは、
browseCustomersのみです。"
/" および拡張子の
.jspは追加されています。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
関連するページが構築されていないため、/browseCustomersのページ・アイコンに黄色いアラートが表示され ることを確認してください。
| | 3.
|
ダイアグラムに
/editCustomersおよび
/browseCustomerOrdersの 2つのページを追加作成します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
各ページのファイル拡張子が
.jspであることを確認します。
| | 4.
|
次に、ページ間のJSF Navigation Casesを作成します。この重要性は、後に判明します。現時点では、アプリケーション・フローのビジュアル・インジケータとして理解してください。
ナビゲーションを追加するには、コンポーネント・パレットの「
JSF Navigation Case」 をクリックして、ソースである
browseCustomers、保存先、
browseCustomerOrdersの 順にクリックします。また、線を曲げる場合は中間ポイントをクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 5.
|
ナビゲーションのプロパティを修正するには、作成したばかりの「
JSF Navigation Case」 を選択して、プロパティ・パレットからFrom Outcomeプロパティを
customerOrdersに 変更します。これで、ダイアグラム上のナビゲーション・フロー名がcustomerOrdersに変更されたことを確認してください。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 6.
|
browseCustomerOrdersから
browseCustomersに 戻るナビゲーション・ケースを作成します。ここでも、ナビゲーション・フローの名前を変更します。今回は、フロー名を選択して
直接ダイ アグラム上で変更を行います。ナビゲーション・ケースの
browseCustomersを呼び出します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 7.
|
次に、browseCustomersとeditCustomersのページ間に、3つのJSF Navigation Casesを作成します。まず
browseCustomersから
editCustomersに 対して作成するため、From Outcomeプロパティを
editCustomersに設定します。
editCustomersから
browseCustomersに 戻る場合は、From Outcomeプロパティをそれぞれ
cancelおよび
commitに 設定します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
プロパティの設定には、フローをダブルクリックしてダイアグラムを立ち上げ、From Outcomeプロパティを編集する方法もあります。
| | 8.
|
「
すべて保存」
![すべて保存]() をクリックするか、「
ファ イル」→「
すべて保存」を選択して作業を保存します。
|
トピック・リストに戻る
参照するためのデータ・バインドされたWebページの構築
このセクションでは、さまざまなページを定義し、それらをデータとバインドします。
始めに、データベース表からデータを検索するためのWebページを構築します。参照す るためのデータ・バインドされたWebページを構築するには、以下の手順を実行します。
| 1.
|
ページ・フロー・ダイアグラムで、
/browseCustomersデータ・ページを ダブルクリックします（このページは、まだ存在していません）。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
JSF JSPの作成ウィザードが開くので、ようこそという画面が表示されたら、「
次へ」 をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
ウィザードのJSP Fileページで、提案されたページ名
browseCustomers.jspを 承認します。ページ内のその他のオプションもデフォルトのままにし、「
次へ」をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
ウィザードのComponent Bindingページで、デフォルト状態のまま「
次へ」 をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 5.
|
ウィザードのタグ・ライブラリ・ページで、Selected LibrariesリストにOracle ADF Facesライブラリがあることを確認します。Selected LibrariesリストにOracle ADFライブラリがない場合は、Available Librariesリストから選択し、「
追加」
![]() をクリックして Selected Librariesリストに追加します。
「
次へ」をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 6.
|
HTML Optionsページの設定もデフォルトのままにし、「
次へ」をクリックし ます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 7.
|
「
終了」をクリックしてページを作成し、ビジュアル・エディタに空のJSPを立ち上げ ます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 8.
|
Oracle JDeveloperおよびOracle ADFでは、データアウェア・コンポーネントを簡単にページへ追加できます。空白ページの右に、2つのタブが表示されます。「
Components」 タブは非データ・バインド・コンポーネントすべてを表示し、「
Data Control」タブはデータ・バインドされ たOracle ADFコンポーネントすべてを表示します。
「
Data Control」タブに切り替えます。（コンポーネント・パレットが表示 されていない場合は、メイン・メニューから「
表示」→「
コンポーネント・パレット」 を選択してください。）
アプリケーション・モジュールがデータ・コントロール・パレットに表示されます。
CustomerOrdersBusinessServicesDataControlを 開きます。
CustomersView1ノードを開きます。選択されたアイテムは、ビュー・オブジェクトを構築する際 に選択したものです。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 9.
|
CustomersView1を選択して、ページにドラッグします。選択メニューが表 示されます。「
表」→「
ADF読取り専用表」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 10.
|
表の列の編集ダイアログで、「
Enable Selection」と「
Enable Sorting」にチェックを入れます。（エディタはまだ閉じないでください。）
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 11.
|
参照ページと検索ページを作成しているため、ページ上のビュー・オブジェクトにある列をすべて表示する必要はありません が、編集ページではすべての列が必要です。
[Shift]を押しながら（または[Ctrl]で個々の列を選択して）、
CustomerId、 CustFirstName、CustLastName、CustEmail以外のすべての列を選択し、「
削除」 をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
「
OK」をクリックします。
| | 12.
|
構築したページをテストするには、アプリケーション・ナビゲータから実行するか、ページ自身から実行してください。ここで は、ページ・フロー・ダイアグラムに戻ります。
/browseCustomersデータ・ページにインコンプリート （感嘆符）アイコンが表示されていないことを確認します。
ページ・フロー・ダイアグラムで
/browseCustomersページを右クリック し、コンテキスト・メニューから「
実行」を選択してページを実行する内部サーバーを起動します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 13.
|
読取り専用Webページがブラウザ上で実行され、カスタマ表に問い合わせます。ラベルは前のチュートリアルで指定したエン ティティ・オブジェクトとビュー・オブジェクトで、ソートの順番はそのチュートリアルのビュー・オブジェクトで指定したORDER BY句に基づいたものです。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 14.
|
レコードの順番は、列ラベルをクリックして変更できます。順番や昇降順を指示する列がどれかを示すアイコンが表示されま す。レコードの最後まで移動し、戻れることを確認してください。終了したら、ブラウザを閉じます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 15.
|
ページを作成した際は注意してください。Oracle JDeveloperに戻り、アプリケーション・ナビゲータから、
ViewController →
Application Sourcesを開きます。多くのパッケージが用意されています。
view.pageDefsを開き、
browseCustomersPageDef.xmlを 選択します。
下の構造ウィンドウで、
executablesの
CustomersView1Iteratorを 選択します。行イテレータは現在の行を個々のコントロール・バインドに送信し、現在のデータを表示します。イテレータ・バインドは、Webページに表示す る行の数を指定できます。
CustomersView1Iteratorを選択してから
プロパティ・ インスペクタを見ると、
RangeSize
の値セットの返したレコード数が表示さ れています。
次に、
バインディング →
CustomersView1を 開きます。ここでは、作成したビュー・オブジェクトの列の属性名をすべて閲覧できます。データ・コントロール・パレットからアイテムをドラッグすると、 データ・バインドがここに追加されます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
|
トピック・リストに戻る
WebページへのDeleteボタン、Commitボタン、Rollbackボタンの追加
多くのアプリケーションでは、行が完全に削除される前に、ユーザーが削除アクションを確認できるよ うにしています。このチュートリアルでは、個別のページを作成する時間がありません。ここでは、ページへのDeleteボタン、Commitボタン、 Rollbackボタンを追加します。
操作ボタンをページに追加するには、次の手順に従ってください。
| 1.
|
browseCustomersページのビジュアル・エディタに戻ります。データ・コ ントロール・パレットの
CustomersView1ノードを開きます。OrderView2のすぐ下にある、
Operationsを 開きます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
削除操作を探し、それをsubmitボタンの横にあるページへドラッグします。表示さ れたコンテキスト・メニューから「
ADFコマンド・ボタン」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
データ・コントロール・パレットで
CustomersView1ノードを閉じます。
CustomersView1と 同じレベルに
Operationsノードがあります。このノードを開き、Commit操作およびRollback操作 を開きます。各操作をページのDeleteボタンの横にドラッグして、各ケースで「
ADFコマンド・ボタン」を選択し ます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
前回同様、ページを実行して変更をテストします。
レコードを「
選択」して削除します。変更をロールバックします。
次のチュートリアルでは、新規レコードを作成します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
終了したら、ブラウザを閉じます。
| | 5.
| 「
![すべて保存]() 」をクリックして、作業をすべて保 存します。
|
トピック・リストに戻る
デー タ編集のためのデータ・バインドされたWebページの構築
さきほど構築したページでは、カスタマのブラウズと削除のみが実行可能です。このセク ションでは、新規レコードの作成および既存レコードの更新が可能なWebページを作成します。
カスタマの更新ができるWebページを構築するには、次の手順に従ってください。
| 1.
|
ページ・フロー・ダイアグラムの
editCustomersアイコンと連携するJSP を作成します。
これは、browseCustomersページと同じ手順です。
ページ・フロー・ダイアグラム（faces-config.xml）で、
/editCustomersア イコンをダブルクリックします。
editCustomer.jspをページ名として承認します。
ウィザードにあるその他すべてのデフォルトを承認します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
データ・コントロール・パレットをクリックします。
CustomerOrdersBusinessServicesDataControlを 開き、
CustomersView1を選択して、ページにドラッグします。コンテキスト・メニューから「
フォー ム」→「
ADFフォーム」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
「
Include Submit Button」にチェックを入れて、「
OK」 をクリックし、フォーム・フィールドすべてを承認します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
このページのレイアウトが、以前作成したものと異なっている点に注目します。同じデータ・コントロールをさまざまな方法で 表示できます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 5.
|
次のセクションでは、ナビゲーションを追加してページのUIを強化し、ページのテストを行います。最初にページを実行し、 正常に作動するか確認します。
ページを実行するには、browseCustomersページをテストした手順と同様に、
editCustomersペー ジを選択および右クリックし、コンテキスト・メニューから「
実行」を選択します。
終了したら、ブラウザを閉じます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
|
トピック・リストに戻る
マスター/ディテールWebページの構築
ビジネス・モデルの構築方法によって、アプリケーション・モジュールはマスター/ディ テール関係を処理します。
以前ビュー・オブジェクトを作成するためにウィザードを使用した際、ビュー・オブジェ クト間のビュー・リンクとなる外部キー関連を取り込みました。また、アプリケーション・モジュールを構築した際に、各ビュー・オブジェクトを前のビュー・ オブジェクトの子として、ビュー・リンク経由でデータ・モデルに移動させました。つまり、アプリケーション・モジュールのOrdersビュー・オブジェク トはCustomersの子ということです。そのため、選択されたカスタマの順番のみが表示されることになります。同様に、アプリケーション・モジュール のOrderItemsビュー・オブジェクトはOrdersの子に当たるため、選択された順番のOrderアイテムのみが表示されるというわけです。
アプリケーション・モジュールがマスター/ディテール関係をとることから、マスター/ ディテールWebページを構築する際に実行するべきことは特にありません。関連する順序でカスタマを表示するWebページを構築するためには、次の手順に 従ってください。
| 1.
|
ページ・フロー・ダイアグラムにbrowseCustomerOrdersアイコンと対応するJSPを作成します。
これは、browseCustomersページと同じ手順です。
ページ・フロー・ダイアグラム（faces-config.xml）で
/browseCustomerOrdersア イコンをダブルクリックします。
/browseCustomerOrders.jspをページ名として承認します。
ウィザードにあるその他すべてのデフォルトを承認します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
データ・コントロール・パレットで、
CustomerOrdersBusinessServicesDataControl、
CustomersView1、 および
OrdersView2を開きます。
OrderItemsView1を選択して、ページにドラッグします。コンテキスト・ メニューから、「
Master-Details」→「
ADF Master Form」 →「
Detail Table」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
ここでは、各セクションのタイトルをOrdersおよびOrder Itemsに変更します。
プロパティ・インスペクタを使用して、テキスト・プロパティの
OrdersView2を 選択したら、
Ordersのテキストに置き換えます。詳細レコードのタイトルである、
OrderItemsView1を
Order Itemsに変更します。ビジュアル・エディタのテキストが更新されたことを確認してください。
注：テキスト・プロパティのプロパティ・インスペクタを簡単に選択できない場合は、構 造ウィンドウに移動して各ヘッダーの
af:panelHeaderを選択します。その後、プロパティ・インスペクタ のテキスト・プロパティを選択して変更することができます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
マスター、Orders、セクションにおいて、すべての列を表示させる必要はありません。
SalesRepIdを削除します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
ページからラベルとデータを削除したことを確認してください。SalesRepId列を選択したら、構造ウィンドウのリン クで
af:inputTextを選択したことを確認します。エディタからアイテムを削除するか、構造ウィンドウから削 除するか、任意の方法で実行してください。
| | 5.
|
ページの詳細項目で、表示する必要のない列がいくつかあります。ただし、列はJoin構文で必要なので、削除しないでくだ さい。
Order Items詳細項目で
OrderId列を選択し、プロパティ・インスペク タから
Renderedプロパティを
Falseに設定します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
チュートリアルの初期段階で、列のヘッダーだけでなく、必ず列すべてを選択してください。これは、構造ウィンドウの選択で 確認できます。
| | 6.
|
この手順を、Orders ItemsのProductIdの両インスタンスで実行し、「
Rendered」 プロパティを各ケースで「
False」に設定します。これで、ページは次の画面のようになります。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 7.
|
ProductName列を
LineItemIdの 横に移動させます。
ProductName列を選択します。これによって、構造ウィンドウの列が強調表示 されます。構造ウィンドウを使用し、ProductName列を上部のLineItemId列までドラッグします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 8.
|
ページのテストを実行するには、その他のページでテストを実行した際と同様に、
browseCustomerOrdersペー ジを右クリックして、コンテキスト・メニューから「
実行」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
ラベルのみが表示されるのは、順番のないカスタマを表示しているためです。
もしそのように表示される場 合は、特定のCustomerIdのページを実行できます。実行するには、
OrderEntry →
Modelプ ロジェクトの
CustomersViewに戻ります。model.queriesパッケージの
CustomersViewを ダブルクリックして、
Propertiesダイアログを起動します。
Customers.CUSTOMER_ID = 102
をSQL文のWhere句に追加します。これは、次のチュートリアルにおける、 browseCustomersページからのbrowseCustomerOrdersの呼び出しでは必要ありません。Webページのテストが終了した ら、必ず制限を解除してください。
終了したら、ブラウザを閉じます。
| | 9.
| 「
![すべて保存]() 」をクリックして、作業をすべて保 存します。
|
トピック・リストに戻る
ページ・フローの実装
このアプリケーションにおいて、browseCustomersページはユーザーの開 始ポイントの役割を果たし、ページからは編集する行を選択できます。editCustomersページでは、行の編集と挿入の両方が行えます。
このチュートリアルのセクションでは、ページ・フロー・ダイアグラムで既に作成した、 ナビゲーション・ケース対応のイベントを起動するボタンを、browseCustomersページに追加します。
新規ページを起動するための編集アクションを 追加する
「
Edit」ボタンに編集アクションを追加するには、次の手順 に従ってください。
| 1.
|
ビジュアル・エディタでbrowseCustomersを開き、「
Submit」ボタ ンを選択します。
プロパティ・インスペクタで、Textプロパティの値として
Edit Customersを 入力します。Actionプロパティを選択して、ドロップダウン・リストから「
editCustomers」を選択し ます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
注：フィールドにActionプロパティ値を入力するだけでも構いませんが、Actionプロパティのテキストは必ず faces-config.xmlファイルのナビゲーション・ケースに対する
From Outcomeプロパティのテ キストと一致していなければなりません。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
Webページをテストするには、
browseCustomersを選択して右クリック し、コンテキスト・メニューから「
実行」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
ブラウザでラジオ・グループからカスタマを選択し、「
Edit Customers」 をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
新規ページがbrowseCustomersページで選択したCustomerIdを返すことを確認してください。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
終了したら、ブラウザを閉じます。
|
トピックに戻る
マスター/ディテール・ ページを起動するShow Ordersボタンを追加する
ページにShow Ordersボタンを追加して、選択したカスタマの順番を表示するために、browseCustomerOrdersページを呼び出します。ナビゲーショ ン・プロパティに対応するボタンを追加するには、次の手順に従ってください。
| 1.
|
ビジュアル・エディタでbrowseCustomersページが開かれていることを確認してください。「
コ ンポーネント・パレット」タブに切り替えて、ドロップダウン・リストから「
ADF Faces Core」 を選択します（コンポーネント・パレットが表示されていない場合は、「
表示」→「
コンポーネント・パ レット」を選択してください）。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
「
CommandButton」を選択して、「
Delete」 ボタンの隣へドラッグします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
作成したボタンを選択します。
プロパティ・インスペクタで、Textプロパティを
Show Ordersに設定しま す。Actionプロパティを選択して、ドロップダウン・リストから「
customerOrders」を選択します。 前回と同様に、Actionプロパティのテキストは、ページ・フロー・ダイアグラムのナビゲーション・コントロールで入力したものと一致している必要があ ります。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
「
すべて保存」
![すべて保存]() をクリックするか、「
ファ イル」→「
すべて保存」を選択して作業を保存します。
| | 4.
|
browseCustomersページを実行して、変更をテストします。
CustomerId
101を探して選択します（CustomerIdは列ヘッ ダーをクリックすることで順序を変更できます）。
「
Show Orders」をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
終了したら、ブラウザを閉じます。
|
トピックに戻る
トピック・リストに戻る
ラ ジオ・グループの追加
ラジオ・グループはフィールドに入力できる有限値のセットを制限することで、データ・ エラーを防ぎます。editCustomersページのGenderフィールドはM値およびF値のみを受け付けるので、ラジオ・ボタン・グループへ変換す るのに最適です。
Genderフィールドをラジオ・ボタン・グループに変更するには、次の手順を実行し てください。
| 1.
|
ビジュアル・エディタで
editCustomersページを開きます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
ビジュアル・エディタでGenderフィールドを選択します。右クリックして、「
削除」 を選択します。
これによって、Genderのテキスト・フィールドは削除されます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
ビジュアル・ページ・エディタで選択した各アイテムは、構造ウィンドウでも選択されることに注意してください。ビジュア ル・ページ・エディタで
DateOfBirthを選択します。これによって、構造ウィンドウで強調表示されます。
データ・コントロール・パレットに戻り、
CustomersView1を開きます。
Genderを選択し、構造ウィンドウにドラッグして、DateOfBirthの下に ドロップします。プロンプトが表示されたら、コンテキスト・メニューで「
Single Selections」→「
ADF Select One Radio」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
リスト・バインド・エディタが開きます。「
固定リスト」オプションを選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 5.
|
基本データソース属性で、「
Gender」を選択します。
Mおよび
Fを、Set of Valuesの下の行にそれぞれ入力します。"No Selection"項目ドロップリストから、「
Selection Required」を選択します。
「
OK」をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 6.
|
editCustomersページに、ラジオ・アイコンが1つ含まれました。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 7.
|
ページをテストするには、editCustomersページを実行します。Genderは、ラジオ・ボタン・グループとし て表示されます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
終了したら、ブラウザを閉じます。
|
トピック・リストに戻る
チェック・ボックスの追加
チェック・ボックスは、簡単なブールを選択するようユーザーを制限します。 editCustomersページのMaritalStatusフィールドは、既婚または未婚（シングル）のブール値を示すもので、チェック・ボックスへ 変換するのに最適です。
MaritalStatusフィールドをチェック・ボックスへ変更するには、次の手順 に従ってください。
| 1.
|
ビジュアル・エディタの
editCustomersページに戻ります。
ビジュアル・エディタで
MaritalStatusフィールドを選択します。右クリッ クして、「
削除」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
データ・コントロール・パレットで
CustomersView1を開きます。
MaritalStatusを 選択し、構造ウィンドウにドラッグして、Genderラジオ・アイテムの下にドロップします。プロンプトが表示されたら、コンテキスト・メニューで「
Single Selections」→「
ADF Select Boolean Checkbox」を選択しま す。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
ブール・バインド・エディタが開きます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
データ・コレクションで
CustomersView1が、属性で
MaritalStatusが、 それぞれ選択されていることを確認してください。
State ValueおよびUnselected State Valueで、
marriedお よび
singleをそれぞれ追加し、「
OK」をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
「
すべて保存」
![すべて保存]() をクリックするか、「
ファ イル」→「
すべて保存」を選択して作業を保存します。
| | 5.
|
ページをテストするには、editCustomersページを実行し、選択したカスタマのMarital Statusを確認します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
終了したら、ブラウザを閉じます。
|
トピック・リストに戻る
ドロップダウン・リストの追加
ドロップダウン・リストは、選択可能な値のリストをユーザーに与える便利な機能です。 IncomeLevelの場合、可能な値の定義セットが用意されています。値の入力は面倒な作業であるため、ドロップダウン・リストから値を選択したり更 新したりできることが理想的です。この場合、ハードコード値に基づいてリストを作成します。
IncomeLevelフィールドをドロップダウン・リストに変更するには、次の手順 を実行してください。
| 1.
|
ビジュアル・エディタの
editCustomersページに戻ります。他の2つの フィールドと同様に、ビジュアル・エディタでIncomeLevelフィールドを選択します。
データ・コントロール・パレットから
CustomersView1を選択して開き、
IncomeLevelを 選択して、構造ウィンドウにドラッグします。MaritalStatusの直下にドロップして、プロンプトが表示されたら「
Single Selections」→「
ADF Select One Choice」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
リスト・バインド・エディタが開きます。「
固定リスト」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
基本データソース属性で、「
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」をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
注：この作業をオンライン上で実施している場合、「
コピー」および「
貼 り付け」機能を利用して上記のリストを活用できます。
| | 4.
|
アプリケーションをテストするには、editCustomersページを実行します。「
IncomeLevel」 は、ドロップダウン・リストとして表示されます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
終了したら、ブラウザを閉じます。
|
トピック・リストに戻る
Createボタン、Commitボタン、Rollbackボタンの追加
editCustomersページの作成時は、デフォルトのボタン作成は行いませんで したが、ここでは、Createボタンなどのデフォルト・ボタンを追加して、ページの機能を拡張する方法を学習します。最終的には、前のセクションと同様 にCommitボタンとRollbackボタンを追加します。
Createボタンをページに追加するには、次の手順を実行してください。
| 1.
|
ビジュアル・エディタの
editCustomersページに戻ります。
データ・コントロール・パレットで
CustomersView1を選択し、開きます。 CustomerView1の子ノードである
Operationsノードを開きます。Create操作を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
Create操作を、ページのSubmitボタンの前にドラッグします。プロンプトが表示されたら、コンテキスト・メ ニューから「
ADFコマンド・ボタン」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
データ・コントロール・パレットに戻り、
CustomersView1を閉じてから、
CustomersView1と 同じレベルにある
Operationsを開きます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
Commit操作を選択してページにドラッグし、Submitボタンの隣にドロップし ます。プロンプトが表示されたら、コンテキスト・メニューから「
ADFコマンド・ボタン」を選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 5.
|
Rollbackボタンについても同様の作業を行い、Commitボタンの隣にドロップします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
「
すべて保存」
![すべて保存]() をクリックして、作業をすべて保存 します。
| | 6.
|
ユーザーが"Submit"ではなく"Apply Changes"を希望し、Submitボタンのテキストを変更する場合、「
Submit」ボタンを選択し、プロパ ティ・インスペクタのTextプロパティを
Apply Changesに変更します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 7.
|
アプリケーションをテストするには、editCustomersページを実行します。
従業員の名前を変更して、変更を取り消すために「
Rollback」をクリックしま す。
新規カスタマを作成し、「
Apply Changes」をクリックしてデータベースに 変更を送信します。 「
Commit」をクリックして、データベースのレコードを更新します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
終了したら、ブラウザを閉じます。
|
トピック・リストに戻る
リターン・ナビゲーションの有効化
ここまでで、新しい制御やボタンの追加による、editCustomersページの強 化が終了しました。次は、この画面の使用を終了したユーザーが、browseCustomersページへ戻れるように設定します。これは、Commitボ タンへのCancelボタンおよびナビゲーション・アクションの追加によって、送信した後で戻るよう設定することができます。
browseCustomersページに戻るためのナビゲーションを有効にするには、 次の手順に従ってください。
| 1.
|
このチュートリアルの前半で、ボタンのActionプロパティ値は、ページ・フロー・ダイアグラムのナビゲーション・ケー スにおけるテキストと一致しなければならないと説明しました。
faces-config.xmlファイルからページ・フロー・ダイアグラムを開きます（
ViewControllerを 右クリックして、コンテキスト・メニューから「
Open JSF Navigation」を選択します）。
browseCustomersページのeditCustomerページで
cancelお よび
commitのナビゲーション・フローがあることを確認します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
ビジュアル・エディタの
editCustomersページに戻ります。コンポーネン ト・パレットのドロップダウン・リストで、「
ADF Faces Core」が選択されていることを確認します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
「
CommandButton」を選択して、「
Rollback」 ボタンのすぐ隣へドラッグします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
新規ボタンが選択されていることを確認します。プロパティ・インスペクタで、Textプロパティの値として
Cancelを 入力します。
Actonプロパティを選択し、ドロップダウン・リストから「
cancel」を選択し ます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 5.
|
ビジュアル・エディタで「
Commit」（Apply Changes）ボタンを選択して、プロパティ・インスペクタのActionプロパティ値とナビゲーション・フローの値が一致していることを確認します。 ドロップダウン・リストの値は、ナビゲーション・フローの値です。データを送信してbrowseCustomersページに戻るには、フロー値を選択する 必要があります。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 6.
|
アプリケーションをテストするには、browseCustomersページをページ・フロー・ダイアグラムから実行しま す。
カスタマを選択し、「
Edit Customers」をクリックします。従業員の名前 を変更して、「
Cancel」をクリックします。カスタマ・ページに戻り、変更が加えられていないことを確認します。
再度カスタマを変更し、今度は「
Apply Changes」をクリックしてから「
Commit」 をクリックします。データは送信され、カスタマ・ページに戻ります。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
|
|
トピック・リストに戻る
編集不可能なフィールドの作成（オプション）
カスタマを編集する際、CustomerIDも編集できます。一般的に、このフィール ドは新規レコードに対してのみ編集可能です。これはアプリケーションのモデル内に設定でき、ユーザー・インタフェースに自動的に反映されます。
新規レコードでのみCustomerIDを編集可能にするには、次の手順を実行してく ださい。
| 1.
|
作業中のOrderEntryアプリケーションで、
Modelプロジェクトを開き、エ ンティティ・オブジェクトを表示します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 2.
|
Customersダイアログのエンティティ・オブジェクトをダブルクリックし、エン ティティ・オブジェクト・エディタを開きます。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 3.
|
属性ツリーを開き、
CustomerIdを選択します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 4.
|
Updatableフィールドで「
While New」に設定し、「
OK」 をクリックします。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
「
すべて保存」
![すべて保存]() をクリックするか、「
ファ イル」→「
すべて保存」を選択して作業を保存します。
| | 5.
|
アプリケーションをテストするには、browseCustomersページを実行します。
カスタマを選択し、「
Edit Customers」をクリックします。
editCustomersページで、CustomerIDフィールドの編集ができないことを確認します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
| | 6.
|
「
作成」をクリックして、新しいカスタマ・レコードを追加します。新規レコードの CustomerIDフィールドが編集可能であることを確認します。
![このアイコンの上にカーソルを置くと、イメージが表示されます。]()
終了したら、ブラウザを閉じます。
|
ト ピック・リストに戻る
まとめ
このチュートリアルでは、アプリケーション内でいくつかのWebページを構築し、データアウェア・ コンポーネントを追加しました。前回のチュートリアルで構築したビジネス・モデルによって、簡単にマスター/ディテールWebページを構築できましたが、 その時点ではページの機能が制限されていました。
次に、ユーザー・インタフェースを強化しました。チェック・ボックス、ラジオ・グループ、ドロップ ダウン・リストなどの制御機能を使用してユーザー・インタフェースを強化する方法以外にも、アクションをナビゲーション・イベントとリンクさせる方法を学 習しました。
また、データベースの編集、更新、変更の送信を実行する小さなWebアプリケーションの構築を完了 しました。このほか、ページ間の簡単な移動、および選択した特定のレコードのパラメータの受け渡しも可能になりました。
トピック・リストに戻る
![]()
このアイコンの上にカーソルを置くと、 すべてのスクリーンショットが非表示になります。
| 
おすすめコンテンツ
Printer View