EJB、JPA、JSFによるWebアプリケーションの構築 - パート2：ユーザー・インタフェースの作成

Oracle JDeveloperのIDEを操作して、アプリケーションのビューおよびナビゲーション部分を構成するページとページ・フローを作成します。

プロジェクトへのタグ・ライブラリの追加：Project Propertiesダイアログを使用して、ユーザー・インタフェース・プロジェクトにタグ・ライブラリを追加します。

ページ・フローの作成：ビジュアル・エディタとコンポーネント・パレットを使用して、ページ・フロー・ダ イアグラムにページとナビゲーションを追加します。

参照ページの作成：Create JSF Pageダイアログを使用してページを追加し、次にコンポーネント・パレットとData Controlsパネルからコンポーネントを追加します。

ページへのメニューの追加：コンポーネント・パレットとプロパティ・インスペクタを使用して、メニューを 作成します。

問合せページの作成：Create JSF Pageダイアログを使用して2番目のページを追加し、次にData Controlsパネルを使用してコンポーネントを追加します。

問合せページを更新可能に設定：Edit Action Bindingダイアログを使用して、「 Submit」 ボタンをリバインドします。

アプリケーションの実行：ブラウザで参照ページを実行し、問合せページに移動します。

 

プロジェクトへのタグ・ライブラリの追加

1. アプリケーション・ナビゲータで「 UserInterface 」プ ロジェクトを選択して、Project PropertiesダイアログのJSP Tag Librariesページを開きます（「 Tools」 →「 Project Properties」→「 JSP Tag Libraries」）。
2. 「 Distributed Libraries 」フォルダを選択し て、「 Add 」をクリックします。
3. Choose Tag Librariesダイアログで「 ADF Faces Components 11 」を選択し、「 OK 」をクリックします。
   

   テクノロジー・スコープ

   Project Propertiesダイアログでは、プロジェクトにテクノロジーを追加することも可能です。通常は、テンプレートを使用しないでアプリケーションを作成 した場合に、この追加をおこないます。 このアプリケーションを作成するときに選択したJava EE Web Applicationテンプレートによって、プロジェクトにはJSF、HTML、Java、およびJSP/Servletsテクノロジーが追加されてい ます。 [ 詳細はこちら]

4. 「 OK 」をクリックして、Project Propertiesダイアログを閉じます。
5. 「 」 Save Allを クリックして作業内容を保存します。
   

   IDE内

   タグ・ライブラリを追加する場合、すべてのノードが展開されてもアプリケーション・ナビゲータの表示は変わらず、次のようになります。 [ 詳細はこちら]

 

ページ・フローの作成

1. アプリケーション・ナビゲータで 「 UserInterface」→「 Web Content」→「 Page Flows」→「 faces-config.xml」 ノードをダブル クリックして、ページ・フロー・ダイアグラムを開きます。
2. コンポーネント・パレットのJSF Diagram Objectsページで「 」 JSF Pageをクリックし、続いてダイアグラムにドラッグ・アンド・ドロップして最初のページを表す アイコンを追加します。 ページ名を browse.jspxに変更します。
3. コンポーネント・パレットで「 」 JSF Pageを再度クリックし、続いてダイアグラムにドラッグ・アンド・ドロップして2番目のペー ジ・アイコンを追加します。 ページ名を query.jspxに変更します。
   

   JSFページ・フ ロー

   ユーザーがJSFアプリケーション内を移動するためのナビゲーションは、ナビゲーション・ルールで定義されます。これは、ユーザーがリンク をクリックした際に、どのページを表示するかを規定するものです。 通常、特定のページからの複数の異なるリンクは、1つのナビゲーション・ルールで定義されます。 ページ内に異なるリンクがあるような別のケースでは、そのルールのナビゲーション・ケースで定義されます。 [ 詳細はこちら]

4. コンポーネント・パレットで「 」 JSF Navigation Caseをクリックします。 次にダイアグラムで、リンク元のJSFページ（ browse.jspx）のアイコンをクリック し、続いてリンク先のJSFページ（ query.jspx）のアイコンをクリックします。
5. デフォルト・ラベル「 success 」をクリックして、 queryに 変更します。
6. 「 」 Control Flow Caseを再度クリックします。 ダイアグラムで、リンク先のJSFページ（ query.jspx）に続いて、リンク元のJSFページ（ browse.jspx） のアイコンをクリックします。
7. デフォルト・ラベル「 success 」をクリックして、 browseに 変更します。
8. 「 」 Save Allを クリックして作業内容を保存します。
   

   IDE内

   ダイアグラムにナビゲーション・ケースを描画すると、必要なナビゲーション・ルールと各ルールの異なるナビゲーション・ケースが自動で JSF構成ファイルに追加されます。 これにより、JSFナビゲーション・ダイアグラムには定義したばかりの2つのナビゲーション・ケース browseと queryが、アプリケーショ ン内のページを接続する矢印として表示されます。 [ 詳細はこちら]

 

参照ページの作成

1. ダイアグラムで「 browse.jspx 」ページ・アイコンをダブルクリックし、Create JSF Pageダイアログを開きます。
2. ファイル名 browse.jspxを受け入れ、「 Create as XML Document (*.jspx) 」が選択されていることを確認します。 「 OK 」をクリックします。
3. コンポーネント・パレットの ADF Facesページの Layoutパネルで、「 」 Panel Stretch Layoutをドラッグしてビジュアル・エディタのページにドロップします。
   

   レイアウトの定義

   ページ・レイアウトの定義を開始するには、コンポーネント・パレットからADFレイアウト・コンポーネントを使用できます。 [ 詳細はこちら]

4. 「 」 Panel Splitterを、追加したばかりのパネル拡張レイアウトの centerファ セットにドラッグ・アンド・ドロップします。
5. 「 」 Panel Group Layoutコンポーネントを、追加したばかりのパネル・スプリッタの firstファ セットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタで、 Layoutド ロップダウン・リストから「 scroll 」を選択します。
6. アプリケーション・ナビゲータで「 Data Controls」パネルを展開し、次に 「 FODFacadeLocal」→「 queryOrdersFindAll」 ノー ドを展開します。 「 Orders 」ノードをビジュアル・エディタにドラッグし て、追加したパネル・グループ・レイアウトにドロップします。
   

   読取り専用のフォー ムと表の作成

   次のステップでは、データバインドADF Facesコンポーネントを追加して、ページ上に読取り専用フォームと表を作成します。 このコンポーネントによって、フォームに注文の詳細情報および表に注文項目が表示され、 参照ペー ジにはマスター/ディテール機能が提供されます。 参照ページの役割は、ユーザーがデータ・ オブジェクトを1つずつ参照および検索できるようにすることです。 データを検索する場合、読取り専用フォームにナビゲーション・ボタンを挿入できます。 別のボタンは、 問合せペー ジに移動するためのものです。 [ 詳細はこちら]

7. Create コンテキスト・メニューから 「 Forms」 「 ADF Read-Only Form」 の 順に選択します。
8. Edit Form Fieldsダイアログで、「 I nclude Navigation Controls 」を選択して「 OK 」 をクリックします。
9. Data Controlsパネルで、「 Orders 」ノードを 展開します。 「 orderItemsList 」ノードを、ページ上の second ファセットにドラッグ・アンド・ドロップします。
10. Create コンテキスト・メニューから 「 Tables」 「 ADF Read-Only Table」 の 順に選択します。
11. Edit Table Columnsダイアログで、「 Row Selection 」 と「 S orting 」の両方を選択します。 「 OK 」をクリックします。
12. browse.jspxのStructureウィンドウで、「 af:panelSplitter 」コンポーネントを選択します。 プロパティ・インスペクタで、 Orientationドロップダウン・リストから「 vertical 」を選択します。

    コンポーネントの選 択

    Structureウィンドウのタグを選択すると、ビジュアル・エディタにハイライトされたコンポーネントが表示されます。また、プロパ ティ・インスペクタにはプロパティが表示されます。 [ 詳細はこちら]

13. ビジュアル・エディタで、スプリッタ・バーを上方向にドラッグしてOrdersフォームの高さを縮小します。
    

    IDE内

    browse.jspxのビジュアル設計がビジュアル・エディタに表示されます。また、Structureウィ ンドウには、ページの構造が表示されます。 ビジュアル・エディタでは、Panel Stretch Layoutコンポーネントの外枠を表す矩形が表示されます。 読取り専用Ordersフォームと読取り専用OrderItems表は、Panel Splitterの内枠を表す矩形の内側だけに表示されます。 [ 詳細はこちら]

 

ページへのメニューの追加

1. コンポーネント・パレットの ADF Facesページにある Common Componentsパネルで、「 」 Panel Menu Barを、ビジュアル・エディタ内のページにある topファセットに ドラッグ・アンド・ドロップします。
2. 「 」 Menuをページ 内のメニュー・バー領域にドラッグ・アンド・ドロップします。
3. プロパティ・インスペクタの Commonセクションで、 Textフィールドに Options と入力して、メニューに表 示される内容を変更します。
4. Behaviorセクションを展開して、 Detachableドロップダウン・リストから true を 選択します。
   

   メニュー・プロパ ティの設定

   メニューとサブメニューは、ブラウザから分離してフロート・メニューにすることが可能です。 これを実行した場合、ユーザーは分離可能なメニューをブラウザ内の任意の場所にドラッグできます。 プロパティ・インスペクタでは、 Detachableプロパティを true に 設定して、分離可能なメニューを作成します。 [ 詳細はこちら]

5. Structureウィンドウで「 af:menu 」コンポーネント を右クリックして、 「 Insert Inside af:menu - Options」→「 Menu Item 」 の順に選択します。
6. プロパティ・インスペクタで、 Commonセクションの Textフィールドに Query と入力します。
7. Actionドロップダウン・リストから「 query 」を選択します。
8. 「 」 Save Allを クリックして作業内容を保存します。
   

   IDE内

   パネル・メニュー・バーを作成してそれにMenuとMenu Itemコンポーネントを追加すると、ビジュアル・エディタに表示されるページの上部は次の図のようになります。 [ 詳細はこちら]

 

問合せページの作成

1. エディタ・ウィンドウで、「 faces-config.xml 」タ ブをクリックして構成ファイルを前面に表示します。
2. ダイアグラムで「 query.jspx 」ページ・アイコンをダブルクリックし、Create JSF Pageダイアログを開きます。
3. ファイル名 query.jspxを受け入れ、「 Create as XML Document (*.jspx) 」が選択されていることを確認します。 「 OK 」をクリックします。
4. Data Controlsパネルで、「 FODFacadeLocal 」 ノードの下にある「 queryOrderItemsFindByQuantity 」 ノードをページ上にドロップします。
5. Create コンテキスト・メニューから 「 Parameters」 「 ADF Parameter Form」 の 順に選択します。
6. Edit Form Fieldsダイアログで、デフォルトの設定を受け入れて「 OK 」 をクリックします。
7. Edit Action Bindingダイアログで、デフォルトの設定を受け入れて「 OK 」 をクリックします。

   アクション・バイン ディングの編集

   フォームを作成する場合、最初にEdit Form Fieldsダイアログが表示されます。 このダイアログを使用すると、フォームの設定（フォームのラベルとフィールドのバインディングを含む）や、値の収集と表示に使用されるUIコンポーネント の設定が可能です。 フォームの作成にData Controlsパネルを使用しているので、フォーム上の各フィールドは、ページ上にドラッグ・アンド・ドロップしたオブジェクトの属性に自動的にバイン ドされます。 [ 詳細はこちら]

8. コンポーネント・パレットの ADF Facesページで、「 Operations 」パネルを展開します。 Convert Number をドラッグして、パラメータ・フォームの入力フィールドにド ロップします。 プロパティ・インスペクタで、 Typeドロップダウン・リストから「 number 」を選択します。
9. Data Controlsパネルで、「 queryOrderItemsFindByQuantity 」 ノードを展開します。 「 OrderItems 」ノードをページ上にドラッグし て、以前に追加したパラメータ・フォームの下にドロップします。
10. Create コンテキスト・メニューから 「 Forms」 「 ADF Form」 の順に選択し ます。
11. Edit Form Fieldsダイアログで、「 I nclude Navigation Controls 」と「 Include Submit Button 」の両方を選択します。 「 OK 」をクリッ クします。
    

    IDE内

    query.jspxのビジュアル設計がビジュアル・エディタに表示されます。また、Structureウィン ドウには、ページの構造が表示されます。 [ 詳細はこ ちら]

 

問合せページを更新可能に設定

1. Data Controlsパネルで、「 mergeEntity(Object) 」 メソッドをドラッグして、 query.jspxページにある「 Submit 」 ボタンの上にドロップします。
2. Edit Action Bindingダイアログで、 Valueドロップダウ ン・リストから「 Show El Expression Builder 」を選 択します。
   

   コンポーネント・バ インディングの変更

   プレースホルダ・データ制御を使用している場合、またはこの例のようにデータ・バインディングを変更する場合には、データ制御のリバインド が可能です。 コンポーネント・バインディングを変更するには、Structureウィンドウでコンポーネントを選択し、コンテキスト・メニューを使用して関連するバイ ンディング・ダイアログを表示します。 コンポーネントが最初にプレースホルダ・データ制御または標準データ制御のどちらにバインドされていても、リバインドの手順は同じです。 [ 詳細はこちら]

3. Variablesダイアログで、 「 ADF Bindings」→「 bindings」 →「 queryOrderItemsFindByQuantityIterator」→「 currentRow」 を 展開し、「 dataProvider 」を選択します。
4. 「 OK 」をクリックして、Variablesダイアログを閉じま す。
5. もう一度「 OK 」をクリックして、Edit Action Bindingダイアログを閉じます。
6. Confirm Component Rebindingダイアログで「 OK 」 をクリックします。
7. query.jspxページのビジュアル・エディタで、ラベルが mergeEntityに なったボタンを選択します。
8. プロパティ・インスペクタで、 Commonセクションの Textフィールドに Save と入力します。
9. その下の Button Actionセクションで、 Actionドロップダウン・リストから「 browse 」 を選択します。
10. 「 」 Save Allを クリックして作業内容を保存します。
    

    IDE内

    「 Submit 」ボタン・コンポーネントをリバインドしてラベル を変更すると、ビジュアル・エディタに query.jspxページが表示され、「 Submit 」 ボタンが「 Save 」ボタンになります。 [ 詳細はこちら]

 

アプリケーションの実行

1. エディタ・ウィンドウで、「 faces-config.xml 」タ ブをクリックして構成ファイルを前面に表示します。
2. ページ・フロー・ダイアグラムで、「 browse 」ページ・アイコ ンを右クリックして、「 R un 」を選択します。
3. 実行中のアプリケーションのブラウザで、スクロール・バーを使用するかまたはスプリッタ・バーを下方向にドラッグして、フォーム全体とナビ ゲーション・ボタンを表示します。
4. ナビゲーション・ボタンを使用して注文フォームの現在の行を変更し、注文項目表の詳細の変更を記録します。 複数の注文項目がある注文に移動します。 次に、表のさまざまな列ヘッダーをクリックし、 の上下の矢印を使用してソートを試します。
   

   ページ操作

   一部のADF Facesコンポーネントには、エンドユーザーがコンポーネントを操作または実行時の表示方法を変更できるようにする機能が組み込まれています。 たとえば、表コンポーネント内にある列のソートと順序変更、および分離可能なメニュー・コンポーネントのフロート化が可能です。 [ 詳細はこちら]

5. 列のヘッダーを選択して、列を表内の別の場所にドラッグします。 この操作を繰り返して、列の順序を変更します。
6. ページの左上にある「 Options 」メニューをクリックし、「 Query 」メニュー項目をページ上の別の場所へドラッグ・アンド・ドロップします。 次に、「 Query 」をクリックして、 queryペー ジに移動します。
7. queryOrderItemsFindByQuantity_p_quantityフィー ルドに数字（たとえば 3 ）を入力して、「 queryOrderItemsFindByQuantity 」 ボタンをクリックします。
8. 問合せで1つ以上のレコードが取得される場合、ナビゲーション・ボタンを試してみます。
9. lastUpdateDateフィールドの右側にあるカレンダー・アイコンをク リックして、ポップアップから新しい日付を選択します。
10. queryページで「 Save 」をク リックし、変更をデータベースにコミットして browseページに戻ります。
    

    IDE内

    browseページで「 Query 」 メニュー項目をクリックすると、アプリケーションは query.jspxページに移動します。 queryペー ジで、 3 と入力して「 queryOrderItemsFindByQuantity 」 ボタンをクリックすると、取得したレコードがボタンの下にあるフォームに表示されます。 問合せで1つ以上のレコードが返される場合は、ナビゲーション・ボタンを使用してレコードを参照できます。 [ 詳細はこちら]

 

Copyright © 1997, 2008, Oracle. All rights reserved.