EJB、JPA、およびJavaServer Facesを使用したOracle JDeveloper 11gによるWebアプリケーションの構築
目的
このチュートリアルでは、Oracle JDeveloper 11g Version 11.1.1.2.0を使用してWebアプリケーションを構築します。 データ・モデルを構築するため、EJBダイアグラマを使用して、EJB 3.0とJava Persistence API（JPA）を活用します。 Webクライアントの場合、JavaServer Faces（JSF）が使用されます。 ユーザー・インタフェースにはマスター/ディテール・ページと問合せ/編集ページが含まれます。
1時間半
このチュートリアルでは、以下のトピックについて説明します。
 |
概要 |
|
シナリオ |
|
前提条件 |
|
データベース接続の作成 |
|
|
|
|
|
|
|
|
|
|
|
|
|
JSFページの実行 |
|
まとめ |
スクリーンショットの表示
このアイコンの上にカーソルを置くと、すべてのスクリーンショットがロード
し、表示されます。 （警告：
すべてのスクリーンショットが同時にロードされるため、ご使用のインターネット接続によってはレスポンス・タイムが遅くなる場合があります。）
注： 各手順に関連したスクリーンショットのみを表示する場合は、それぞれの手順にあるアイコ ンの上にカーソルを置いてください。 スクリーンショットをクリックすると、非表示になります。
このアプリケーションにはModel-View-Controller（MVC）アーキテクチャが反映されてい ます。 モデルはEJBコンポーネントによって、また、ビューとコントローラはJavaServer Facesによって、それぞれ提供されます。ここでは、JSFと互換性のあるコンポーネントのADF Facesセットを使用して、使いやすいWebインタフェースを構築します。
最初に、アプリケーションのデータ・モデル部分を構築します。 Java Persistence API（JPA）は、オブジェクト・リレーショナル・マッピングのPOJO永続化モデルを提供します。 Java Persistence APIは、JSR 220の一部としてEJB 3.0ソフトウェア・エキスパート・グループによって開発されました。ただし、その使用は、EJBソフトウェア・コンポーネントに制限されません。 Webアプリケーションやアプリケーション・クライアント、さらにJava SEアプリケーションなどのJava EEプラットフォーム外部でも直接使用できます。
Enterprise JavaBeans（EJB）テクノロジーは、ビジネス・ロジックをカプセル化するJava Platform Enterprise Edition（Java EE）のサーバー側コンポーネント・アーキテクチャです。 EJBテクノロジーによって、Javaテクノロジーに基づくセキュアで移植可能な分散トランザクション・アプリケーションを迅速かつ容易に開発できます。
Java Persistence APIは、永続性とオブジェクト/リレーショナル・マッピングの管理に使用される標準的なAPIです。 Javaドメイン・モデルを使用するアプリケーション開発者がリレーショナル・データベースを管理するためのオブジェクト/リレーショナル・マッピング機 能を提供します。 Java Persistence APIはJava EEプラットフォームに含まれますが、 Java SE環境でも使用できます。
このチュートリアルでは、Session BeanおよびEntity Beanを開発し、また永続化モデルを実装します。 これらのBeanは、モデルの永続性にEJB 3.0アノテーションおよびJPAを使用します。
- EJB 3.0エンティティは、顧客表の行や従業員表の従業員レコードのようなデータベースからの永続データを表します。 また、エンティティは、複数のクライアントを共有できます。 永続化モデルは、Entity Manager APIを使用して作成、更新、削除、問合せを行います。
- Session Beanは、顧客のクレジット履歴を確認するといった個別のタスクを実行します。
次に、部門と従業員の情報を参照するためにマスター/ディテール・フォームを作成します。 この基本的なマスター/ディテール・ページを作成した後で、特定の従業員を検索する問合せページを作成し、従業員レコードを編集します。 また、特定の部門を検索するためのページも作成します。
アプリケーションの開発とテストを実行する際、JDeveloperの組込みJava EEアプリケーション・サーバーを使用します。
シナリオ
ここでは、DEPARTMENTS表およびEMPLOYEES表の永続化オブジェクトを作成しま す。 永続化オブジェクトは、Entity Beanとして実装されます。 デフォルトのgetterメソッドとsetterメソッドは、部門データと従業員データに対して作成されます。 これらのメソッドは、Session Beanの一部として実装されます。 次に、部門と従業員の関係に基づいてマスター/ディテール型のJSFページを作成し、従業員データを検索および更新するための問合せ/編集JSFページを 作成し、特定の部門を検索するために検索条件を入力できる検索ページを作成します。
| 1. |
Oracle 10gまたは11gに付属のOracle Sample Schemaにアクセスできるか、またはインストール済みであること。
|
| 2. |
「スタート」→「すべてのプログラム」 →「Oracle Fusion Middleware」→「JDeveloper Studio 11.1.1.2.0」の順に選択して、Oracle JDeveloperを起動します。
|
| 3. |
Migrate User Settingsダイアログ・ボックスが開いたら、「No」 をクリックします。 ユーザー・ロールを設定するよう尋ねられたら、「Default Role」 を選択します。
Tip of the Dayウィンドウを閉じます。
|
| 4. |
JDeveloper IDEが表示されます。
|
Java Database Connectivity（JDBC）は、Javaアプリケーションをリレーショナル・データベースに接続するために使用される標準的なAPIです。 JDeveloperは、接続ナビゲータを使用して、アプリケーションの接続情報を保持します。 接続ナビゲータによって、データベース接続の作成、管理、テストが容易になります。
データベースに接続していない場合は、以下の手順で接続します。
|
1. |
アプリケーション・ナビゲータの「Database Navigator」 タブをクリックします。 Database Navigatorタブが表示されていない場合は、JDeveloperのメイン・メニューから「View」 →「Database」→「Database Navigator」を選択してください。
|
||||||||||||||||||||
|
2. |
「IDE Connections」ノードを右クリックし、コンテキスト・メニューから「New Connection」を選択します。
|
||||||||||||||||||||
| 3. |
Create Database Connectionダイアログの最初のセクションで、次の値を入力します。
注： パスワードは暗号化されるので、安全にデプロイされます。 Oracle (JDBC) Settingsセクションで、次の値を入力します。
次のいずれかを設定して、環境に合ったソリューションを選択します。
|
||||||||||||||||||||
| 4. |
「Test Connection」をクリックします。 データベースが使用可能で接続の詳細が正しい場合、ステータスにはSuccess!と 表示されます。 エラーが発生した場合、接続設定を確認します。必要な変更を行い、接続を再試行してください。 接続に成功した後、「OK」をクリックして接続を完了します。
|
||||||||||||||||||||
| 5. |
データベース・ナビゲータは、次のように表示されます。
|
||||||||||||||||||||
|
これで、このチュートリアルで構築するアプリケーションに、データを供給するデータベースへの接続が完成しました。 次の項で、この接続を使用します。 |
データ・モデルは、アプリケーションにデータ・アクセスおよび検証を提供します。 クライアントの実装に関係なく、データは常にモデルによって検証されます。 これによって、検証とビジネス・ルールをユーザー・インタフェースから明確に隔離することができます。
次に、JDeveloperでアプリケーションを作成し、さらにアプリケーション用のデータ・モデルを作成しま す。
|
新規アプリケーションとプロジェクト の作成 |
|
永続化モデルの作成 |
|
データ・モデルの作成とテスト |
|
|
|
新規アプリケーションとプロジェクトの作成
JDeveloperでは、常にアプリケーションに含まれるプ ロジェクトを使用して作業を行います。 アプリケーションは、制御構造の最上位にあります。
JDeveloperプロジェクトは、関連するファイルを論理的に分類するために使用される編成構造です。ソー ス・コードの体系化、アクセス、変更、再使用を容易にするために、多数のプロジェクトをアプリケーションに加えることができます。 アプリケーション・ナビゲータでは、プロジェクトは階層内の2番目のレベルとして、アプリケーションの下に表示されます。
表示用に記述されたコードからモデル・コードを分離するには、プロジェクトを使用することがベスト・プラクティ スであると考えられています。 このチュートリアルでは、EJBコンポーネント・モデル用に1つのプロジェクトを作成し、後でJSFビュー用にもう1つのプロジェクトを作成します。
コンポーネントを作成する前に、まず、アプリケーションとプロジェクトを作成する必要があります。 それには、以下の手順を実行します。
| 1. |
「Application」タブをクリックして、アプリケーション・ナビゲータに戻ります。 「New Application」アイコンをクリックします。
|
| 2. |
Create Applicationダイアログ・ボックスにアプリケーション名としてHR_EJB_JPA_Appと入力します。 アプリケーション名を入力すると、ディレクトリ名が自動的に変更されることを確認してください。 アプリケーション・パッケージの接頭辞としてoracleと 入力します。 Application Templateリストから「Generic Application」 を選択します。 これにより、アプリケーションと1つの未構成プロジェクトが作成されます。
「Next」をクリックします。 |
| 3. |
Create Projectダイアログで、Project NameにEJBModelと 入力し、「Finish」をクリックします。
|
| 4. |
Navigatorペインで「Database Navigator」タブをクリックします。
|
| 5. |
IDE接続リストで「HRConn」接続を選択し、HR_EJB_JPA_Appノー ドにドラッグ・アンド・ドロップして、アプリケーションに対しその接続を有効化します。
|
| 6. |
「Application Navigator」タブをクリックします。 先ほど作成したアプリケーションとプロジェクトが表示されます。
|
永続化モデルの作成
ここでは、Oracle Application Server EJB 3.0 Entity Beanを使用して、部門および従業員の永続化モデルを作成します。
EJB 3.0 Entity Beanを作成するには、以下の手順を実行します。
| 1. |
アプリケーション・ナビゲータで「EJBModel」ノードを右クリックし、コンテキスト・メ ニューから「New」を選択します。
|
| 2. |
New Galleryで、カテゴリの「All Technologies」→「Business Tier」→「EJB」を選択し、「Entities from Tables」 項目をダブルクリックします。
|
| 3. |
Select EJB Versionで、「EJB 3.0 -- JPA Entities」を EJBバージョンとして選択し、「Next」をクリックします。
|
| 4. |
「Next」をクリックして、永続性ユニットの定義をスキップします。
|
| 5. |
Type of Connectionページで「Online Database Connection」 オプションを選択します。 「Next」をクリックします。
|
| 6. |
Database Connection Detailsページで、使用する接続として「HRConn」 を選択します。
「Next」をクリックします。
|
| 7. |
「Query」をクリックし、HRスキーマに使用可能なオブジェクトを取得します。 次に、「DEPARTMENTS」
と「EMPLOYEES」を選択し、右矢印ボタン
「Next」をクリックします。
|
| 8. |
このステップでは、パッケージ名がoracleであることを確認します。
「Next」に続き、「Finish」をクリックします。
|
| 9. |
アプリケーション・ナビゲータには、DepartmentsとEmployeesに 1つずつjavaファイルが作成されています。
|
| 10. |
Save Allアイコン「
|
| 11. |
アプリケーション・ナビゲータで「EJBModel」ノードを右クリックし、「New」 を選択します。
|
| 12. |
New Galleryで、カテゴリとして「Business Tier」→「EJB」 を選択し、「EJB Diagram (JPA/EJB 3.0)」項目をダブルクリックします。
|
| 13. |
Create EJB Diagramダイアログで、ダイアグラム（EJB Diagram1）用のデフォルト名をEJB3に 変更し、パッケージ名がoracleで あることを確認します。
「OK」をクリックします。 Associate Diagram With Persistence Unitダイアグラムで「OK」 をクリックし、提示されたPersistence Unit EJBModel （EJBModel.jpr）を受け入れます。
|
| 14. |
ダイアグラム・エディタで新しい空のダイアグラムが開きます。
|
| 15. |
アプリケーション・ナビゲータから「Departments」エンティティと「Employees」 エンティティを選択し、ダイアグラムにドラッグ・アンド・ドロップします。
|
| 16. |
先ほど部門表と従業員表から作成したEJBコンポーネントがダイアグラムに表示されます。 ダイアグラムのレイアウトを変更し、エンティティが水平に整列するようにします。 エンティティ間の関係を選択し、コンテキスト・メニューからStraighten linesオプションを使用すると、ダイアグラムを整理して表示することができます。
|
| 17. |
Save Allアイコン「 |
を使用してSelectedペインに移動し
ます。データ・モデルの作成とテスト
セッション・ファサードは、基礎となるEJB（Enterprise
JavaBeans）との統一されたインタフェースをクライアント・オブジェクトに提供します。
クライアントは、サーバーに存在し、適切なEJBメソッドを呼び出すファサードのみとやりとりをします。
その結果、クライアントとEJBの間での依存関係と通信が減少します。
セッション・ファサードなしでリモート・アクセスを実行している場合、クライアントがネットワーク経由でEJB 3.0
Entityに直接アクセスするには、多数のリモート呼出しが必要になります。
そのため、大量のネットワーク通信が発生して、パフォーマンスが低下します。
さらに、ファサードがない場合、クライアントはビジネス・オブジェクトの実装に直接依存するので、EJBのインタフェースが変更されると、クライアント・
オブジェクトも変更する必要が発生します。
ここでは、従業員レコードおよび部門レコードを検索するメソッドを実装したSession Beanを作成します。
| 1. |
コンポーネント・パレットで、「EJB Components」ライブラリを選択し、「EJB Nodes」を開きます。
|
||||||||||||||||
| 2. |
Session Beanコンポーネント「
Create Session Beanウィザードが開きます。 必要に応じて、Welcomeステップで「Next」 をクリックします。
|
||||||||||||||||
| 3. |
EJB Name and Optionsステップで、EJB NameをHRFacadeに設定 し、次の値が適切に設定されていることを確認します。
「Next」をクリックします。
|
||||||||||||||||
| 4. |
Session Facadeステップで、このプロジェクトのエンティティは、ツリー・
コントロールのノードとして表示されます。
すべてのエンティティ・メソッドを含むチェック・ボックスを選択することも、各ノードを開いてメソッドのサブセットを選択することもできます。
|
||||||||||||||||
| 5. |
Class Definitionステップで、Beanクラスのフルネームがoracle.HRFacadeBeanで あることを確認してから、「Next」をクリックします。
|
||||||||||||||||
| 6. |
次のステップでは、リモート・インタフェースとローカル・イン タフェースの実装が選択されていることを確認します。 リモート・インタフェースは、Javaクライアン トなどの個別の仮想マシンで実行されるクライアント・アプリケーションで使用されます。一方ローカル・インタフェースは、Webクライアントなどの同じ仮 想マシンで実行されるクライアント・アプリケーションで使用されます。
「Next」をクリックして、作成したクラスの内容を確認します。次に、「Finish」 をクリックします。
|
||||||||||||||||
| 7. |
アプリケーション・ナビゲータは、次のようになります。
Session Beanは、3つのファイルで構成されています。 Session Beanコードを含むHRFacadeBean、 リモート・クライアントのBean機能を表すHRFacade、およびローカル・クライアントの機能を表すHRFacadeLocalで す。
|
||||||||||||||||
| 8. |
ダイアグラムの「Employees」Entity Beanをダブルクリックして、クラスのソース・コードを開きます。
|
||||||||||||||||
| 9. |
名前付き問合せを使用すると、設計時に問合せを定義し、実行時に使用できます。 ウィザードにより、NamedQueryメタデータ文がEmployeeエンティティ内に1つ作成されました。 この問合せは、従業員表からすべての行を取得します。 @NamedQueries({ 注： @で 始まるJavaコードの記号は、アノテーションと呼ばれます。 アノテーションを使用すると、メタデータをオブジェクトに追加できます。 アノテーションの例は、以下のとおりです。
|
||||||||||||||||
| 10. |
最後の@NamedQuery文の最後にカンマを追加します。次に、名前から従業員を取得する問合せをクラスに追加します。 以下のコードを追加します。 コードは次のようになります。 @Entity
必要に応じて、[Alt]キーと[Enter]キーを押して、javax.persistence.NamedQueriesラ イブラリをインポートします。 注： これらのオブジェクトがその他のJava ファイルと異なる点は、EJBエンティティとしてオブジェクトを識別するアノテーションがあることです。 EJB 3.0およびJPAのおもな特長は、古いバージョンのデプロイメント・ディスクリプタの代わりにメタデータ・アノテーションを使用して、オブジェクト・リ レーショナル・マッピングを含むエンティティを作成できることです。
|
||||||||||||||||
| 11. |
Makeアイコン「
Message - Logウィンドウでエラーが表示されていないか確認します。
|
||||||||||||||||
| 12. |
以下の手順を実行して、新しいメソッドをSession Beanに追加します。 アプリケーション・ナビゲータで「HRFacadeBean」ノードを右クリックし、コンテキス ト・メニューから「Edit Session Facade」を選択します。
|
||||||||||||||||
| 13. |
ダイアログの「Employees」ノードを展開します。 新しい名前付き問合せのgetEmployeesFindByNameが 公開可能なメソッドとして表示されていることを確認します。 これを選択し、「OK」をクリックします。
|
||||||||||||||||
| 14. |
JDeveloperは、サンプル・クライアントを作成して、EJBをテストします。 実行するには、「HRFacadeBean」 を右クリックし、コンテキスト・メニューから「New Sample Java Client」を選択します。
|
||||||||||||||||
| 15. |
Application Server Connectionとして「IntegratedWebLogicServer」 を選択します。
「OK」をクリックします。
|
||||||||||||||||
| 16. |
HRFacadeClientクラスのコードを確認し、以下のように値パラメータとして"P%"を 追加することで、getEmployeesFindByName()メ ソッドで報告されているエラーを修正します。
Save Allアイコン「
|
||||||||||||||||
| 17. |
アプリケーション・ナビゲータで「HRFacadeBean」を右クリックします。次に、コンテキ スト・メニューから「Run」を選択して、WebLogic Server内のファサードBeanを起動します。
WebLogic Serverが開始するまで待機します。
|
||||||||||||||||
| 18. |
「HRFacadeClient」を右クリックし、コンテキスト・メニューから「Run」 を選択します。
|
||||||||||||||||
| 19. |
ログ・ウィンドウは、クライアントが格納する3つのメソッドに基づくデータベース・データを返します。
|
||||||||||||||||
| 20. |
findByNameメソッドの結 果の表示を改善するには、HRFacadeClient javaクラスで、getEmployeesFindAll()メ ソッドに対応するforルー プとgetDepartmentsFindAll()メ ソッドに対応するforルー プをコメント・アウトします。 コードは次のようになります。
|
||||||||||||||||
| 21. |
Makeボタン「
|
||||||||||||||||
| 22. |
「HRFacadeClient」クラスを右クリックし、コンテキスト・メニューから「Run」 を選択します。
|
||||||||||||||||
| 23. |
ログ・ウィンドウには、'P%'句によって返される行が表示されます。
|
」を選択し、ダイアグラムにドラッグ・アン
ド・ドロップします。 
」をクリックして、
Employees.javaクラスをコンパイルします。Java EEコンテナ外部でのJavaサービスの実行
永続性ユニットは、コンテナの内部または外部で実行するように構成できます。 EJB 3.0では、アプリケーション・サーバーを使用することなく、Pure Java SE環境のエンティティを実行できます。 これを実行する理由は、単純なJava SEテストベッドを作成して（JUnitを使用）、アプリケーション・サーバーでの配置/実行のオーバーヘッドがない状態でエンティティの動作をテストす るためです。 他には、Swingアプリケーションをローカルで実行する場合があるためです。
ここでは、従業員レコードおよび部門レコードを検索するメソッドを実装したSession Beanを作成します。
| 1. |
新しい永続性ユニットを作成して、Java EEコンテナの外部でJavaサービスを実行します。 META-INFの「persistence.xml」を右ク リックし、コンテキスト・メニューから「New Java Service Facade」を選択します。
|
| 2. |
Java Service Classパネルでは、新しい永続性ユニットを作成するか（次のパネル）、既存のユニットを使用するかを選択できます。 「Choose a Persistence Unit or Create one in the next Panel」を選択し、「Generate a main() method」チェック・ボックスにチェックを入れます。
「Next」をクリックします。
|
| 3. |
永続性ユニットにoutsideという名前をつけます。 「JDBC Connection」を選択します。JDBC接続がHRConnに設定されていることを確認して ください。
「Next」をクリックします。
|
| 4. |
すべてのメソッドがデフォルトで選択されています。 次に示すとおり、いくつかのメソッドの選択を解除します。
「Next」→「Finish」をクリックします。
|
| 5. |
ソース・エディタ・ウィンドウのJavaServiceFacadeクラスに対して、// TODOコメントの後に新しい行を追加し、次の文を入力し ます。 Employees a = javaServiceFacade.getEmployeesFindByName("P%").get(0); 構文の入力を支援するコード・コーチを使用できます（[Ctrl]+[Space]バー）。 sopとタイプし、[CTRL]キーと [Enter]キーを押してSystem.out.println()文を挿入します。 次のようにa.getLastName()を丸括弧内に追加します。 // TODO
|
| 6. |
Makeボタン「
|
| 7. |
アプリケーション・ナビゲータで「JavaServiceFacade」ノードを右クリックし、コ ンテキスト・メニューから「Run」を選択します。
|
| 8. |
ログ・ウィンドウは、Java EEコンテナの外部で実行されるクラスの実行結果を表示し、取得した最初のレコード（Payam Kaufling）のlastNameを返します。
|
| 9. |
META-INFの「persistence.xml」ノード をダブルクリックして、ファイルの内容を表示します。
|
| 10. |
両方の永続性ユニットが表示されます。 Java EE内部のデフォルトの永続性ユニットとJava EE外部の新しい永続性ユニットが実行されます。 「Source」タブをクリックして、詳細を確認します。
|
EJB Session BeanからのADFデータ・コントロールの作成
Oracle ADFフレームワークのデータ・コントロールとしてEJBを公開します。
これによって、ユーザー・インタフェースをEJBにバインドする方法が簡素化されます。
ADFフレームワークの詳細は、下記のWebサイトを参照してください。
http://oracle.com/technetwork/products/adf
EJB Session BeanからADFデータ・コントロールを作成するには、次のステップを実行します。
| 1. |
アプリケーション・ナビゲータで「HRFacadeBean」ノードを右クリックし、コンテキス ト・メニューから「Create Data Control」を選択します。
|
| 2. |
Choose EJB Interfaceダイアログで、「Local」を選択し、「OK」 をクリックします。
Save Allアイコン「
|
| 3. |
アプリケーション・ナビゲータは、次のように表示されます。
|
| 4. | EJBModelプロジェクト・ノードを閉じます。 |
」をクリックして作業内容を保存します。表示用に記述されたコードからモデル・コードを分離するには、プロジェクトを使用することがベスト・プラクティ スであると考えられています。 ここではEJBコンポーネント・モデル用に1つのプロジェクトを作成したため、次にJSFビュー用に2番目のプロジェクトを作成します。
以下の手順を実行します。
| 1. |
アプリケーション名バーで、「Application Menu」アイコンをクリックします。
コンテキスト・メニューから「New Project」を選択します。
|
| 2. |
New Galleryで、「Generic Project」項目を選択します。
「OK」をクリックします。 |
| 3. |
Create Projectダイアログで、Project NameをUserInterfaceに 設定して、「Finish」をクリックします。
|
| 4. |
アプリケーション・ナビゲータで「UserInterface」ノードを右クリックし、コンテキス ト・メニューから「Project Properties」を選択します。
|
| 5. |
Project Propertiesダイアログで、「JSP Tag Libraries」ノー ドを選択します。 「Distributed libraries」を選択し、「Add」 ボタンをクリックします。
|
| 6. |
Tag Librariesリストで、「ADF Faces Components 11」を選択 します。
「OK」をクリックします。
ライブラリがプロジェクトに追加されます。
|
| 7. |
Project Propertiesダイアログで、「Technology Scope」ノード
を選択します。 Project TechnologiesタブでAvailableペ
インから「JSF」を選択し、右矢印ボタン
「OK」をクリックします。 Save Allアイコン「
|
| 8. |
アプリケーション・ナビゲータは、次のように表示されます。
|
JDeveloperのJSFナビゲーション・モデラーを使用して、ダイアグラムからアプリケーション・ページ およびページ間ナビゲーションの計画と作成を行います。
| 1. |
アプリケーション・ナビゲータで「UserInterface」→「Web Content」→「WEB_INF」→「faces-config.xml」 ノードをダブルクリックして、ページ・フロー・ダイアグラムを開きます。
|
| 2. |
空のダイアグラムが開きます。 ダイアグラム・エディタの右側にコンポーネント・パレットが表示さ れます。 これを使用して、JSFナビゲーション・モデルのコンポーネントを作成します。
|
| 3. |
コンポーネント・パレットのJSFナビゲーション・ダイアグラム・ページでJSF Page「
|
| 4. |
コンポーネント・パレットから「JSF Page」をドラッグし、前のアイコンの横にドロップしま す。 ページの名前をqueryに 変更します。
|
| 5. |
コンポーネント・パレットから、もう1つの「JSF Page」をドラッグし、最初のJSFページ の下にドロップします。 ページの名前をsearchに 変更します。
|
| 6. |
コンポーネント・パレットでJSF Navigation Case「
|
| 7. |
デフォルトのラベルである「success」をクリックして、queryと上書きします。 Navigation Caseの上に警告アイコンが表示されることに注意してください。 これは、JSFページがまだ作成されていないため、Navigation Caseが存在しないページを探す結果となることを意味しています。 この警告は対応するページが作成されると表示されなくなります。
|
| 8. |
JDeveloperは、faces-config.xmlファイルの3つのビューを提供します。 ここではダイアグラム・ビューが使用されていますが、ソースへの直接アクセスや宣言的ダイアログを通じても同じ情報にアクセスできます。 画面の下部にある「Overview」タブをクリックします。 左側の表の「Navigation Rules」をクリックし、既存のNavigation Ruleを表示します。
画面の下部にある「Source」タブをクリックします。 <from-view-id>タ グはソース・ページを識別し、<to-view-id>タグはリンク先ページを識別します。
|
| 9. |
「Diagram」タブをクリックしてダイアグラム・ビューに切り替え、コンポーネント・パレットの「JSF Navigation Case」を選択します。 ソースJSFページのアイコン（「query」）をクリックし、ナビゲーション 用のリンク先JSFページのアイコン（「browse」） をクリックします。
|
| 10. |
デフォルトのラベルである「success」を選択して、browseと上書きします。
|
| 11. |
同様に、browse
JSFページとsearch
JSFページの間にNavigation Caseを追加します。 searchページに向かうNavigation Caseにはsearchと
いう名前を、逆方向のNavigation Caseにはbrowseという名前を付けます。
|
| 12. | Save Allアイコン「 」をクリックしてダイアグラムを保存しま
す。 |
」を選択し、ダイアグラムでページを表示す
る場所をクリックします。 ページの名前をbrowseに
変更します。
」を選択します。
ソースJSFページのアイコン（「browse」）
をクリックし、ナビゲーション用のリンク先JSFページのアイコン（「query」）をクリックします。 次に、ADF Facesコンポーネントを使用して、Departments Employees Master DetailページのJavaServer Faces Pageを作成します。
| 1. |
Page Flowダイアグラムで、「browse」アイコンをダブルクリックし、 Create JSF JSPウィザードを起動します。
|
| 2. |
ファイル名がbrowse.jspxに なっていることを確認します。 Create as XML Documentチェック・ボックスを確認し、 Initial Page Layout and Contentセクションで「Quick Start Layout」 ラジオ・ボタンをクリックします。 ベスト・プラクティスとしてクイック・スタート・レイアウトを使用すると、表示の問題の発生を防止できます。 「Browse」 をクリックしてレイアウトを選択します。
|
| 3. |
Component GalleryでデフォルトのOne Columnレイアウト・カテゴリを選択したままにし、Optionsペインで「Apply Themes」をクリッ クします。 テーマを使用すると、クイック・スタート・レイアウトで使用されているコンポーネントの一部にカラー・スタイリングが追加され、ページの外観が向上しま す。
「OK」をクリックして、レイアウト選択を保存します。 Create JSF Pageダイアログで、「OK」をクリックしてページを作成します。 これで、空のbrowse.jspxペー ジが作成されました。 次の手順に従って、データ・バインドされたADF Facesコンポーネントをページに追加します。 このコンポーネントは、部門とその部門に属する従業員を表示します。
|
| 4. |
コンポーネント・パレットから、ADF Facesライブラリの「Layout」セクションを選択 し、「Panel Stretch Layout」コンポーネントをページにドラッグします。
|
| 5. |
コンポーネント・パレットから、ページの中央に「Panel Splitter」コンポーネントを ドラッグします（カーソルはcenterタグの左側に置きます）。
|
| 6. |
「Data Controls」アコーディオンを開き、「HRFacadeLocal」 ノードを展開します。次に、最初のファセット内の「DepartmentsFindAll」ノードをドラッグ・アン ド・ドロップします。
ポップアップ・メニューから「Form」→「ADF Read-only Form」を選択します。
|
| 7. |
Edit Form Fieldsで、「Include Navigation Controls」
オプションを選択し、以下を除くすべての列を削除します。
「OK」をクリックします。
|
| 8. |
コンポーネント・パレットのLayoutグループで「Panel Collection」を選択し、2番目のファセットにドラッグ・アンド・ドロップします。
|
| 9. |
Data Controlsで、「departmentsFindAll」ノードを展開し、「employeesList」 ノードを選択して、2番目のファセットにドロップします。
ポップアップ・メニューから「Table」→「ADF Read-only Table」を選択します。
|
| 10. |
Edit Table Columnsダイアグラムで以下を除くすべての列を削除します。
「OK」をクリックします。 この時点で、ページは次のように表示されます。
|
| 11. |
プロパティ・インスペクタで、表のColumn Selectionプロパティをsingleに設 定します。
|
| 12. |
Structureペインで、「af:panelSplitter」ペインを選択し、プロパティ・ インスペクタでOrientationをverticalに設定します。
|
| 13. |
「af:panelStretchLayout」タグを選択し、プロパティ・インスペクタで「Style and Theme」タブ→「Box」タブを選択します。Widthを600ピ クセル、Heightを400ピクセルに設定します。
|
| 14. |
Departmentブロックの高さを低くします。
|
| 15. |
ユーザーが部門間を移動した場合にemployeesセクションが更新されるようにします。 ユーザーがこれらのボタンをクリックした場合に、Partial Page Rendereingトリガーが作動するように設定します。 Employees表を選択します。 プロパティ・インスペクタで、「Behavior」→「PartialTriggers」 プロパティから「Edit」をクリックします （Editボタンはフィールドの右端にあります）。
|
| 16. |
Edit Propertyダイアログで「facet (first)」→「panelFormLayout」 →「facet (footer)」→「panelGroupLayout」の順 に開き、ナビゲーション・ボタンを表示します。 「shuttle」ボタンを使用して、4つのボタンをSelectedリストに追加しま す。
|
| 17. |
コンポーネント・パレットのCommon Componentsで「Panel Menu Bar」 コンポーネントを選択し、ページのDesignビューFacet Topタグにドロップします。
|
| 18. |
「Menu」コンポーネントをクリックし、Menu Bar内 にドラッグ・アンド・ドロップします。
|
| 19. |
プロパティ・インスペクタのTextをmenu 1からOptionsに 変更します。
|
| 20. |
「Behavior」タブをクリックして、Detachableフィー ルドをtrueに設定します。
|
| 21. |
Structureペインで、「af:menu」タグを右クリックし、コンテキスト・メニューから 「Insert Inside af:menu」→「Menu Item」を選択 します。
|
| 22. |
プロパティ・インスペクタのCommonタブで、TextをQueryに 変更し、Actionのドロップ・ダウン・リストから「query」を選択しま す。
|
| 23. |
ステップ21を繰り返して、もう1つの項目を追加します。 プロパティ・インスペクタを使用して、このメニュー項目のテキストをSearchに 変更し、Actionのドロップ・ダウン・リストから「search」を選択します。
|
| 24. | Save Allアイコン「」をクリックして作業内容を保存します。 |
次に、ADF Facesを使用して、従業員を編集する問合せページを構築します。
| 1. |
Page Flowダイアグラムに切り替え（「faces-config.xml」 タブをクリック）、「query」アイコンをダブルクリックして、ページ・ウィザードを起動します。
|
| 2. |
ファイル名がquery.jspxに なっていることを確認します。 Create as XML Documentチェック・ボックスを確認し、 Initial Page Layout and Contentセクションで「Quick Start Layout」 ラジオ・ボタンをクリックします。 「Browse」をクリックしてレイアウトを選択します。
|
| 3. |
Component GalleryでOne Columnカテゴリを選択したままにし、Optionsペインで「Apply Themes」チェック・ボックスを選択します。
「OK」をクリックして、レイアウト選択を保存します。 Create JSF Pageダイアログで、「OK」をクリックしてページを作成します。 これで、空のquery.jspxペー ジが作成されました。
|
| 4. |
Data ControlsのHRFacadeLocalノードで、「getEmployeesFindByName(Object)」 ノードを選択して、ページにドロップします。
ポップアップ・メニューから、「Parameters」→「ADF Parameter Form」を選択します。
|
| 5. |
Edit Form Fieldsで「OK」をクリックし、提案されたフィールドを受け入れます。
|
| 6. |
ページ・デザインは次のように表示されます。
. |
| 7. |
Data Controlsで「getEmployeesFindByName」ノードを開き、「Employees」 ノードを選択します。 次に、Parameter Formの下のページにドロップします。
ポップアップ・メニューから、「Form」→「ADF Form」 を選択します。
|
| 8. |
Edit Form Fieldsで両方のチェック・ボックス（「Include Navigation
Controls」、「Include Submit Button」）を選択し、以下を除くすべ
ての列を削除します。
「OK」をクリックします。
|
| 9. |
問合せページのデザインは次のように表示されます。
|
| 10. |
このページは更新可能に設定する必要があります。そのため、Data Controlsペインで「mergeEmployees(Employees)」 メソッドを選択して、Submitボ タンにドロップします。
Edit Action BindingダイアログのParametersセクションで、Valueフィー ルドの下向き矢印をクリックし、「Show El Expression Builder」を選択します。
|
| 11. |
Variablesダイアログで、「ADF Bindings」→「Bindings」 →「getEmployeesFindByNameIterator」→「currentRow」 を開き、「dataProvider」を選択します。 各ノードを選択すると、エディタによってウィンドウの上部にある式にそのノードが追加されます。
「OK」をクリックし、もう一度「OK」をクリックします。
|
| 12. |
Confirm Component Rebindingダイアログで「OK」をクリックします。
|
| 13. |
問合せページのデザイン･ビューに戻って、「mergeEmployees」ボタンを選択します。
|
| 14. |
プロパティ・インスペクタのCommonタブで、Text値をSaveに 設定します。次に、Button ActionセクションでActionをドロップ・ダウン・リストからbrowseに 設定します。
|
| 15. |
Save Allアイコン「
|
| 16. |
ページは次のように表示されます。
|
ここではADF Facesを使用して、新しいADF問合せ機能を利用した検索ページを作成します。
| 1. |
ページ・フロー・ダイアグラムに切り替え（「faces-config.xml」タ ブをクリック）、「search」アイコンをダブルクリックして、ページ・ウィザードを起動します。
|
| 2. |
ファイル名がsearch.jspxに なっていることを確認します。 Create as XML Documentチェック・ボックスを確認し、 Initial Page Layout and Contentセクションで「Quick Start Layout」 ラジオ・ボタンをクリックします。 「Browse」をクリックしてレイアウトを選択します。
|
| 3. |
Component GalleryでOne Columnカテゴリを選択したままにし、Optionsペインで「Apply Themes」をクリックします。
「OK」をクリックして、レイアウト選択を保存します。 Create JSF Pageダイアログで、「OK」をクリックしてページを作成します。 これで、空のsearch.jspxペー ジが作成されました。
|
| 4. |
Data ControlsのHRFacadeLocalノードで、「departmentsFindAll」 →「Named Criteria」の順にノードを開きます。 「All Queriable Attributes」を選択してページ上にドラッグ・アンド・ドロップします。
ポップアップ・メニューから、「Query」→「ADF Query Panel with Table」を選択します。
|
| 5. |
Edit Form Fieldsダイアグラムで以下を除くすべての列を削除します。
|
| 6. |
検索ページのデザインは次のように表示されます。
. |
ここまでにアプリケーションの構築が完了したので、次にテストを実行します。 JDeveloperでは、組込みのアプリケーション・サーバーを使用して簡単にJSFページをテストできます。 JDeveloperの内部でページをテストすると、このサーバーは自動的に起動されます。
次に、テストのプロセスを段階的に説明します。
| 1. |
ページをテストするため、ページ・フロー・ダイアグラムに戻ります。 「browse」ページ・ア イコンを右クリックし、コンテキスト・メニューから「Run」を選択します。
|
| 2. |
ページがデフォルトのブラウザにロードされ、次のように表示されます。
|
| 3. |
「Next」ボタンをクリックして、リストから複数の従業員が存在する部門を検索します（例：部門 30）。 次に、firstName列 の上/下矢印アイコンを使用して、名前の昇順/降順のソートを実行してみます。
|
| 4. |
右方向にスクロールしてlastName列 のヘッダーを選択し、左側に移動して firstName列 の右隣に配置します。
|
| 5. |
列のヘッダーを選択し、次の順番で並べ替えます。 employeeId、firstName、lastName、email、jobId、salary、 hireDate、commissionPct....
|
| 6. |
ページの左上の「Options」→「Query」をクリック して、メニューをページの別の位置へ移動します。 次に、「Query」ボタンをクリックします。
|
| 7. |
ブラウザで問合せページが開きます。 queryEmployeesFindByName_p_nameフィー ルドで、 名前または名前の一部（A%など）を入力し、「getEmployeesFindByName」 ボタンをクリックします。
|
| 8. |
問合せで1つ以上のレコードが取得される場合、ナビゲーション・ボタンを試してみます。
|
| 9. |
「hireDate」フィールドをクリックすると、使用する日付形式を説明したHelpテキストが 表示されます。
|
| 10. |
Alexanderのsalaryフィールドを10000に変更し、「Save」ボタンをクリック すると、変更がコミットされ参照ページに戻ります。
|
| 11. |
参照ページで再度「Options」 メニューをクリックし、今回は「Search」を選択して検索ページへナビゲートします。
|
| 12. |
検索条件エリアのMatchフィールドで「Any」ラジオ・ボタンをクリックし、部門名フィールドにITと入 力します。 「Search」をクリックします。
|
| 13. |
検索の結果、部門名にITを含む4つの部門が返されます。
ADF問合せ機能には、この他にも高度な検索や検索の保存などの機能が含まれていることが分かります。
|
| 14. |
これでOBEは完了です。 ブラウザ・ウィンドウを閉じます。 |
このチュートリアルでは、Oracle JDeveloper、EJB 3.0、JPA、およびJSFページを使用して、エンド・ツー・エンドのアプリケーションを作成しました。 このチュートリアルで学習した内容は、以下のとおりです。
|
データベース接続の作成 |
|
EJB 3.0およびEJBダイアグラムを使用したデータ・モデルの構築 |
|
ページ・フローの作成 |
|
マスター/ディテールJSFページの作成 |
|
問合せ/編集ページの作成 |
|
検索ページの作成 |
|
JSFページの実行 |
このアイコンの上にカーソルを置くと、すべてのスクリーンショットが非表示になります。