EJB、JPA、JavaServer Facesを使用したOracle JDeveloper 11gによるWebアプリケーションの構築

目的

このチュートリアルでは、Oracle JDeveloper 11gを使用してWebアプリケーションを構築します。データ・モデルを構築するため、EJBダイアグラマを使用して、EJB 3.0とJava Persistence API（JPA）を活用します。Webクライアントの場合、JavaServer Faces（JSF）が使用されます。マスター/ディテール・ページと編集ページはユーザー・インタフェースに含まれています。

所要時間

1時間

トピック

このチュートリアルでは、以下のトピックについて説明します。

	概要
	シナリオ
	前提条件
	データベース接続の作成
	EJB 3.0を使用したデータ・モデルの構築
	ユーザー・インタフェース用の新規プロジェクトの作成
	ページ・フローの作成
	マスター/ディテールJSFページの作成
	問合せページの作成
	JSFページの実行
	まとめ

スクリーンショットの表示

このアイコンの上にカーソルを置くと、すべてのスクリーンショットがロード し、表示されます。（警告：この操作によって、同時にすべてのスクリーンショットがロードされるため、ご使用のインターネット接続によっては応答時間が遅 くなる場合があります。）

注：各手順に関連したスクリーンショットのみを表示する場合は、それぞれの手順にあるアイコンの 上にカーソルを置いてください。スクリーンショットをクリックすると、非表示になります。

トピック・リストに戻る

概要

このアプリケーションにはModel-View-Controller（MVC）アーキテクチャが反映されてい ます。モデルはEJB Componentsによって、また、ビューとコントローラは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アプリケーション・サーバーを使用します。

トピック・リスト に戻る

シナリオ

Department表およびEmployee表の永続化オブジェクトを作成する必要があります。 永続化オブジェクトは、Entity Beanとして実装されます。デフォルトのゲッター・メソッドとセッター・メソッドは、部門データと従業員データに対して作成されます。これらのメソッド は、Session Beanの一部として実装されます。続いてDepartmentと関連するEmployeesに基づいたマスター・ディテールJSFページおよび従業員 データを更新できるJSFの編集ページを作成します。

トピック・リストに戻る

前提条件

トピック・リストに戻る

データベース接続の作成

Java Database Connectivity（JDBC）は、Javaアプリケーションをリレーショナル・データベースに接続するために使用される標準的なAPIです。 JDeveloperは、接続ナビゲータを使用して、アプリケーションの接続情報を保持します。接続ナビゲータによって、データベース接続の作成、管理、 テストが容易になります。

データベースに接続していない場合は、以下の手順で接続します。

トピック・リストに戻る

EJBダイアグラマを使用したEJB 3.0によるデータ・モデルの構築

データ・モデルは、アプリケーションにデータ・アクセスおよび検証を提供します。クライアントの実装に関係な く、データは常にモデルによって検証されます。これによって、検証とビジネス・ルールをユーザー・インタフェースから明確に隔離することができるのです。

次に、JDeveloperでアプリケーションを作成し、さらにアプリケーション用のデータ・モデルを作成しま す。

	新規アプリケーションおよびプロジェ クトの作成
	永続化モデルの作成
	データ・モデルの作成とテスト
	Java EEコンテナ外部でのデータ・モデルの実行
	EJB Session BeanからのADFデータ・コントロールの作成

トピック・リストに戻る

新規アプリケーションとプロジェクトの作成

JDeveloperでは、常にアプリケーションに含まれるプ ロジェクトを使用して作業をおこないます。アプリケーションは、制御構造の最上位にあります。

JDeveloperプロジェクトは、関連するファイルを論理的に分類するために使用される組織構造です。ソー ス・コードの体系化、アクセス、変更、再使用を容易にするために、多数のプロジェクトをアプリケーションに加えることができます。アプリケーション・ナビ ゲータでは、プロジェクトは階層内の二番目のレベルとして、アプリケーションの下に表示されます。

表示用に記述されたコードからモデル・コードを分離するには、プロジェクトを使用することがベスト・プラクティ スであると考えられています。このチュートリアルでは、EJB Componentsモデル用に1つのプロジェクトを作成し、あとでJSFビュー用にもう1つのプロジェクトを作成します。

コンポーネントを作成する前に、まず、アプリケーションとプロジェクトを作成する必要があります。それには、以 下の手順を実行します。

1.	「 Application」タブをクリックして、アプリケーション・ナビゲータに戻ります。 「 New Application」アイコンをクリックします。
2.	Create Applicationダイアログ・ボックスにアプリケーション名を HR_EJB_JPA_App と入力します。アプ リケーション名を入力すると、ディレクトリ名が自動的に変更されることを確認してください。 アプリケーション・パッケージの接頭辞として oracle と 入力します。 Application Templateリストから「 Generic Application」 を選択します。これにより、アプリケーションと単一の未構成プロジェクトが作成されます。 「 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を作成するには、以下の手順を実行します。

トピックに戻る

トピック・リストに戻る

データ・モデルの作成とテスト

セッション・ファサードは、基礎となるEJB（Enterprise JavaBeans）との統一されたインタフェースをクライアント・オブジェクトに提供します。クライアントは、サーバーに存在し、適切なEJBメソッド を呼び出すファサードのみとやりとりをします。その結果、クライアントとEJBの間での依存関係と通信が減少します。
セッション・ファサードなしでリモート・アクセスを実行している場合、クライアントがネットワーク経由でEJB 3.0 Entityに直接アクセスするには、多数のリモート呼出しが必要になります。そのため、大量のネットワーク通信が発生して、パフォーマンスが低下しま す。さらに、ファサードがない場合、クライアントはビジネス・オブジェクトの実装に直接依存するので、EJBのインタフェースが変化すると、クライアン ト・オブジェクトも変更しなくてはなりません。

ここでは、従業員レコードおよび部門レコードを検索するメソッドを実装したSession Beanを作成します。

トピックに戻る

トピック・リストに戻る

Java EEコンテナ外部でのJavaサービスの実行

永続性ユニットは、コンテナの内部または外部で実行するように構成することができます。EJB 3.0では、アプリケーション・サーバーを使用することなく、Pure Java SE環境のエンティティを実行できます。これを実行する理由は、単純なJava SEテストベッドを作成して（JUnitを使用）、アプリケーション・サーバーでの配置/実行のオーバーヘッドがない状態でエンティティの動作をテストす るためです。ほかには、Swingアプリケーションをローカルで実行する場合があるためです。

ここでは、従業員レコードおよび部門レコードを検索するメソッドを実装したSession Beanを作成します。

トピックに戻る

トピック・リストに戻る

EJB Session BeanからのADFデータ・コントロールの作成

EJB Session BeanからADFデータ・コントロールを作成するには、次のステップを実行します。

トピックに戻る

トピック・リストに戻る

ユーザー・インタフェース用の新規プロ ジェクトの作成

表示用に記述されたコードからモデル・コードを分離するにはプロジェクトを使用することがベスト・プラクティス であると考えられています。このために、EJB Componentsモデルのプロジェクトを作成しました。ここでは、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」ノード を選択します。Available Technologiesリストで、「 JSF」を選択し、右矢印ボタン を使用して項目を Selected Technologiesウィ ンドウに移動します。JSFを選択すると必要な関連テクノロジー（Java - JSPおよびサーブレット）が自動的に伝播するので注意してください。 「 OK」をクリックします。 Save Allアイコン「 」をクリックして作業内容を保存します。
8.	アプリケーション・ナビゲータは、次のように表示されます。

トピック・リストに戻る

ページ・フローの作成

Oracle JDeveloperのJSFナビゲーション・モデラーを使用して、アプリケーションのページの計画と作成をダイアグラムでおこなうとともに、相互のナビ ゲーションをおこないます。

1.	アプリケーション・ナビゲータで「 UserInterface」→「 Web Content」→「 WEB_INF」→「 faces-config.xml」 ノードをダブルクリックして、ページ・フロー・ダイアグラムを開きます。
2.	空のダイアグラムが開きます。ダイアグラム・エディタの右側に コンポーネント・パレットがありま す。これを使用して、JSFナビゲーション・モデルのコンポーネントを作成します。
3.	コンポーネント・パレットのJSFナビゲーション・ダイアグラム・ページで JSF Page「 」を選択し、ダイアグラムでページを表示したい場所をクリックします。ページの名前を browseに 変更します。
4.	コンポーネント・パレットから「 JSF Page」をドラッグし、前のアイコンの横にドロップしま す。ページの名前を queryに変更します。
5.	コンポーネント・パレットで JSF Navigation Case「 」を選択します。ソースJSFページのアイコン（ browse） をクリックし、ナビゲーション用のリンク先JSFページのアイコン（ query）をクリックします。
6.	デフォルトのラベルである「 success」をクリックして、 query と上書きします。 Navigation Caseの上に警告アイコンがあることに注意してください。これは、JSFページが作成されていないために発生します。つまり、Navigation Caseは存在していないページを探しているということです。この警告は対応するページが作成されるとなくなります。
7.	JDeveloperは、 faces-config.xmlファイルの3つのビューを提供します。 ここではダイアグラム・ビューが使用されていますが、直接的なソースへのアクセスと同じように宣言ダイアログを通じて同じ情報にアクセスできます。 画面の下部にある「 Overview」タブをクリックします。左側の表の「 Navigation Rules」をクリックし、既存のNavigation Ruleを表示します。 画面の下部にある「 Source」タブをクリックします。 <from-view-id>タ グはソース・ページを識別し、 <to-view-id>タグはリンク先ページを識別します。
8.	「 Diagram」タブをクリックしてダイアグラム・ビューに切り替え、コンポーネント・パレットの「 JSF Navigation Case」を選択します。ソースJSFページのアイコン（ query）をク リックし、ナビゲーション用のリンク先JSFページのアイコン（ browse）をクリックします。
9.	デフォルトのラベルである「 success」を選択して、 browse と上書きします。
10.	これで、ダイアグラムは次のように表示されます。
11.	Save Allアイコン「 」をクリックしてダイアグラムを保存します。

トピック・リストに戻る

マス ター/ディテールJavaServer Facesページの作成

次に、ADF Facesコンポーネントを使用して、Department Employees Master DetailページのJavaServer Faces Pageを作成します。

1.	Page Flowダイアグラムで、「 browse」アイコンをダブルクリックし、Create JSF JSPウィザードを起動します。
2.	ファイル名が browse.jspxに設定されます。「 Create as XML Document」オプションを選択します。 「 OK」をクリックします。 これで、空のbrowse.jspxページができました。次の手順に従って、データ・ バインドされたADF Facesコンポーネントをページに追加します。このコンポーネントは、部門に属する従業員と部門を表示します。
3.	コンポーネント・パレットから、ADF Facesライブラリの「 Layout」セクションを選択 し、「 Panel Stretch Layout」コンポーネントをページにドラッグします。
4.	コンポーネント・パレットから、ページの中央に「 Panel Splitter」コンポーネントを ドラッグします（カーソルはcenterタグの左側にあります）。
5.	「 Data Controls」コンポーネントを開き、 HRFacadeLocalノー ドを展開します。次に、最初のファセット内の「 DepartmentsFindAll」ノードをドラッグ・アンド・ド ロップします。 ポップアップ・メニューから「 Forms」→「 ADF Read-only Form」を選択します。
6.	Edit Form Fieldsで、「 Include Navigation Controls」 オプションを選択します。 「 OK」をクリックします。
7.	Data Controlsで、「 departmentsFindAll」ノードを展開し、「 employeesList」 ノードを選択して、2番目のファセットにドロップします。 ポップアップ・メニューから「 Tables」→「 ADF Read-only Table」を選択します。
8.	Edit Table Columnsダイアグラムで以下を除くすべての列を削除します。 commissionPct email employeeId firstName hiredate jobId lastName phoneNumber salary 次に「 RowSelection」オプションと「 Sorting」オプションを選 択します。 「 OK」をクリックします。 この時点で、ページは次のように表示されます。
9.	Structureペインで、「 af:panelSplitter」ペインを選択し、プロパティ・ インスペクタでOrientationを verticalに設定します。
10.	「 af:panelStretchLayout」タグを選択し、プロパティ・インスペクタを使用し て、「 Style and Theme」タブ→「 Box」タブを選択します。 Employees表がレイアウト・エディタに表示されるように、Widthを 600ピクセル、Heightを 400ピ クセルに設定します。
11.	Departmentブロックの高さを低くします。
12.	StructureペインのEmployees 表で右クリックし、コンテキストから「 Surround With」を選択します。 Surround Withダイアログで、「 Panel Collection」を選択します。 「 OK」をクリックします。
13.	ユーザーが部門間を移動した場合にemployeesセクションがリフレッシュされるようにします。ユーザーがこれらのボタンをクリッ クした場合に、Partial Page Rendereingトリガーが作動するように設定します。 employees表を選択します。 プロパティ・インスペクタで、「 Behavior」→「 PartialTriggers」 プロパティから「 Edit」をクリックします（Editボタンはフィールドの右端にあります）。
14.	Edit Propertyダイアログで「 facet (first)」→「 panelFormLayout - Departments」→「 facet (footer)」→「 panelGroupLayout」 のように展開し、ナビゲーション・ボタンを表示させます。
15.	「 shuttle」ボタンを使用して、4つのボタンをSelectedリストに追加します。 「 OK」をクリックします。これで、ユーザーがこれらの4つ のボタンをクリックした場合、表示された部門内でemployeesリストがリフレッシュされ、従業員が表示されるようになりました。
16.	コンポーネント・パレットのCommon Componentsで「 Panel Menu Bar」 コンポーネントを選択し、ページの Facet Topタグにドロップします。
17.	「 Menu」コンポーネントをクリックし、 Menu Bar内 にドラッグ・アンド・ドロップします。
18.	プロパティ・インスペクタの Textをmenu 1から Optionsに 変更します。
19.	「 Behavior」タブをクリックして、 Detachableフィー ルドを trueに設定します。
20.	Structureペインで、「 af:menu」タグを右クリックし、コンテキスト・メニューから 「 Insert Inside af:menu」→「 Menu Item」を選択 します。
21.	プロパティ・インスペクタの Commonタブで、 Textを Queryに 変更し、 Actionのドロップ・ダウン・リストから「 query」を選択しま す。
22.	Save Allアイコン「 」をクリックして作業内容を保存します。

トピック・リストに戻る

問合せ および編集ページの作成

次に、ADF Facesを使用して、Employeesを編集する問合せページを構築します。

1.	Page Flowダイアグラム（faces-config.xmlタブをクリック）に切り替え、 「 query」アイコンをダブルクリックして、ページ・ウィザードを起動します。
2.	ファイル名を query.jspxに設定し、「 Create as XML Document」を選択します。 「 OK」をクリックします。
3.	新しいDesignページが開きます。 Data Controlsの HRFacadeLocalノー ドで、「 getEmployeesFindByName(String)」ノードを選択して、ページにドロップしま す。 ポップアップ・メニューから、「 Parameters」→「 ADF Parameter Form」を選択します。
4.	Edit Form Fieldsで「 OK」をクリックし、提案されたフィールドを受け入れます。
5.	Edit Action Bindingダイアログの「 OK」をクリックします。ページ・デザイン は次のように表示されます。 .
6.	Data Controlsで「 getEmployeesFindByName」ノードを展開し、 「 Employees」ノードを選択します。 次に、 Parameter Formの 下のページにドロップします。 ポップアップ・メニューから、「 Forms」→「 ADF Form」 を選択します。
7.	Edit Form Fieldsで、両方のチェック・ボックス（ Include Navigation Controlsと Include Submit Button）を選択します。 「 OK」をクリックします。
8.	問合せページのデザインは次のように表示されます。
9.	このページは更新可能に設定する必要があります。そのため、Data Controlsペインで「 mergeEmployees(Employees)」 メソッドを選択して、 Submitボタンにドロップします。 Edit Action Bindingダイアログの Parametersセクションで、 Valueフィー ルドの下向き矢印をクリックし、「 Show EL Expression Builder」を選択します。
10.	Variablesダイアログで、「 ADF Bindings」→「 Bindings」 →「 queryEmployeesFindByNameIterator」→「 currentRow」 を展開し、「 dataProvider」を選択します。それぞれのノードを選択すると、エディタがウィンドウの上部に ある式にそれらを追加します。 「 OK」をクリックし、もう一度「 OK」をクリックします。
11.	Confirm Component Rebindingダイアログで「 OK」をクリックします。
12.	問合せページのデザインに戻って、「 mergeEmployees」ボタンを選択します。
13.	プロパティ・インスペクタのCommonタブで、 Text値を Saveに 設定します。次に、Button Actionセクションで Actionをドロップ・ダウン・リストから browseに 設定します。
14.	Save Allアイコン「 」をクリックして作業内容を保存します。
15.	ページは次のようになります。

トピック・リストに戻る

JSF ページの実行

アプリケーションを構築したので、次にテストをおこないます。組込みのアプリケーション・サーバー を介して、JDeveloperでJSFを簡単にテストできます。JDeveloperの内部でページをテストすると、このサーバーが自動的に起動しま す。

次に、テストのプロセスを段階的に説明します。

1.	ページをテストするため、ページ・フロー・ダイアグラムに戻ります。「 browse」ページ・アイ コンを右クリックし、コンテキスト・メニューから「 Run」を選択します。
2.	ページがデフォルトのブラウザにロードされ、次のように表示されます。
3.	「 Next」ボタンをクリックして、リストから複数の従業員が存在する部門を検索します。次に、 firstName列 をクリックし、「 up/down」矢印アイコンを使用して、この条件の昇順/降順のソートを実行します。
4.	lastName列のヘッダーを選択し、 firstName列 の右隣に移動させます。
5.	列のヘッダーを選択し、次の順番で並べ替えます。 firstName、 lastName、 email、 salary、 hireDate、 employeeId、 commissionPct
6.	ページの左上の「 Options」→「 Query」をクリック して、メニューをページの別の位置へ移動します。次に、「 Query」ボタンをクリックします。
7.	ブラウザで問合せページが開きます。 queryEmployeesFindByName_p_nameで、 名前または名前の一部（ A%など）を入力し、「 Query」ボタンをクリックしま す。
8.	問合せで1つ以上のレコードが取得される場合、ナビゲーション・ボタンを試してみます。
9.	hireDateフィールドの右側にある「 Calendar」 アイコンをクリックして、カレンダー・ポップアップ・ウィンドウから新しい入社日を選択します。
10.	「 Save」ボタンをクリックすると、データベースの変更がコミットされ、ブラウザ・ページに戻り ます。
11.	これでOBEは完了です。ブラウザ・ウィンドウを閉じます。

トピック・リストに戻る

まとめ

このチュートリアルでは、Oracle JDeveloper、EJB 3.0、JPA、およびJSFページを使用して、エンド・ツー・エンドのアプリケーションを作成しました。 こ のチュートリアルで学習した内容は、以下のとおりです。

	データベース接続の作成
	EJB 3.0およびEJBダイアグラムを使用したデータ・モデルの構築
	ページ・フローの作成
	マスター/ディテールJSFページの作成
	問合せおよび編集ページの作成
	JSFページの実行

トピック・リストに戻る

このアイコンの上にカーソルを置くと、すべてのスクリーンショットが非表示になります。