Oracle JDeveloper 10g JSF/EJB3.0アプリケーション開発

橋本 亨

日本オラクル株式会社
システム製品統括本部　Fusion Middleware技術部　SOA/Javaグループ
エンジニア　橋本 亨

2001年に社会人になってから、Javaアプリケーション開発、.NETアプリケーション開発 を通じて様々なフレームワークやIDEを経験しました。
単調な開発プロジェクトから脱却したい貴方。 Oracle JDeveloper上でエキサイティングなADFアプリケーションを開発してみ ませんか？

第3回：JSF/EJB3.0 サンプル・アプリケーション開発 - 2


前回は、JDeveloperを使用してJSF/EJB3.0によるサンプル・アプリケーションを作成しました。今回は、前回作成したアプリケーションと同様のものを、ADFコンポーネント（ADF Faces、データ・バインディング、データ・コントロール）を使ってJDeveloperで宣言的に作成する手順をご紹介し、JSFアプリケーション開発で煩雑となるView層とModel層の連携部分がADFの使用で簡素化されることを説明します。

Oracle ADFによるアプリケーション開発  

では、前回作成したアプリケーションと同様のものを、ADFコンポーネントを使って作成していきましょう。作成するアプリケーションの実行イメージは次のようになります。

図 1：完成画面
図 1：完成画面

ビジネス・ロジック用のクラスは、前回作成したEJBをそのまま利用します。アプリケーション全体の作成手順は次のようになります。

  • ADF用JSPの雛形作成
  • データ・コントロールの作成
  • JSPの編集、バインディング設定

■ ADF用JSPの雛形作成  

　［エディタ］ウィンドウでfaces-config.xmlのダイアグラムを開き、コンポーネント・パレットから［JSF Page］をドラッグ＆ドロップして、名前を「/jsf/emplist_adf.jsp」とします。

図 2：emplist_adf.jspの作成
図 2：emplist_adf.jspの作成

　前回、JSFのサンプル・アプリケーションを作成したときと同様に、faces-config.xml上で［/jsf/emplist_adf.jsp］をダブルクリックして、［JSF JSPの作成］ダイアログでJSPの設定を行います。［JSPの作成］ウィザードでは次のように設定を行います（以下の項目以外はデフォルト設定のままでかまいません）。

◆［JSPの作成］ウィザードの設定

ステップ2/4: コンポーネント・バインディング
マネージドBeanでUIコンポーネントを自動公開しない 選択する
ステップ3/4: タグ・ライブラリ
　選択済 のライブラリ 　デフォルトで選択済 の［JSF Core］［JSF HTML］に加えて、［ADF Faces Components］と［ADF Faces HTML］を選択

インデックスに戻る

図 3：［ステップ3/4：タグ・ライブラリ］ダイアログ
図 3：［ステップ3/4：タグ・ライブラリ］ダイアログ

　これで、View層でADFコンポーネントが利用できるようになります。ここではManaged Beanの編集を行わないので、［マネージドBeanでUIコンポーネントを自動公開しない］を選択します。

■ データ・コントロールの作成  

　画面の雛形ができたら、次にデータ・コントロールを作成します。 　ADFアプリケーションでは、Model層のデータ操作と画面のバインディングを宣言的に設定するうえで、データ・コントロールは重要な役割を果たしています。作成したデータ・コントロールはModel層のデータ操作に必要なメタ情報を含んでおり、このメタ情報をあとで作成するページ定義ファイルに設定することで、画面のアクションとModel層のデータ操作が紐付けられます。
［アプリケーション ナビゲータ］ウィンドウでセッション・ファサード（SessionEJBBean）を右クリックし、［データ・コントロールの作成］を選択します。表示される［EJBインタフェースの選択］ダイアログでは、［ローカル］にチェックが入っていることを確認して［OK］ボタンをクリックします。

図 4：［EJBインタフェースの選択］ダイアログ
図 4：［EJBインタフェースの選択］ダイアログ

データ・コントロールの作成が終了すると、［アプリケーション ナビゲータ］ウィンドウで、データ・コントロール用のファイル（DataControls.dcx、SessionEJBLocal.xmlなど）が生成されていることを確認することができます。

図 5：データ・コントロール用ファイル
図 5：データ・コントロール用ファイル

　生成されたファイルの役割は次のとおりです。

  • Emp.xml
    Emp.javaのプロパティに関するメタデータファイル
  • SessionEJBLocal.xml
    セッション・ファサードのpublicインタフェースに関するメタデータファイル。メソッドの引数、返り値、コレクション型の返り値に対する操作メソッド、コンストラクタに関する情報を含みます（［データ・コントロール・パレット］に表示されます）。
  • UpdateableCollection.xml
    コレクションに対する組み込みの操作情報（「前へ」「次へ」「先頭へ」「最後へ」など）です。
  • DataControls.dcx
    データ・コントロールに関する設定情報です。

■ JSP編集、バインディング設定  

　次に、作成したADFのデータ・コントロール定義と画面とのバインディング機能を使用して、JSPの画面上に［EMP表を表示］ボタンとデータ・テーブルを配置していきます。実際の作業を始める前にADFを使用した場合と使用しない場合の手順を比較するため、先ほどのJSFアプリケーション作成の手順を示します。

  1. 画面上にボタンを配置
  2. 手順1で配置したボタンに対するアクションメソッドを作成。セッション・ファサードから公開されているqueryEmpFindAllメソッドを実行し、戻り値（Empリスト）をManaged Beanのメンバ変数にセットするように実装
  3. データ・テーブルを画面に配置
  4. Empリストに対するバインディング設定

　ここでは、上記2の手順で実装した機能、すなわちボタンのクリックによりサービスを実行し、結果をデータ・テーブルにバインドするための機能を、ADFの機能を使って実装します。ADFのデータ・コントロールとバインディングを使用することで、そのような機能をコーディングすることなくXMLファイルによる宣言的な定義が可能になり、さらにそれらの定義ファイルはJDeveloperの画面操作により自動的に作成されます。

　それでは、実際にADFを使用して画面を作成していきましょう。

　先ほど作成したemplist_adf.jspをエディタで開き、JDeveloper画面の右上部に表示される［データ・コントロール・パレット］ウィンドウを選択します。［データ・コントロール・パレット］ウィンドウに表示される［SessionEJBLocal］以下の［queryEmpFindAll()］を、［エディタ］ウィンドウにドラッグ＆ドロップします。ドロップ時に作成形式を選択するメニューが表示されますので、一覧から［ADFコマンド・ボタン］を選択します。

　先ほどのJSFの例と同様に、作成されたボタンを選択し、［プロパティ・インスペクタ］ウィンドウからボタンのテキストを「EMP表を表示」に変更しておきます。

図 6：コマンド・ボタン配置
図 6：コマンド・ボタン配置

　この操作により作成されたコマンド・ボタンのActionListenerには、ADFのバインディング機能を介してサービスを実行するためのEL式である#{bindings.queryEmpFindAll.execute}がセットされており、実行時にこのボタンをクリックすることでセッション・ファサードのqueryEmpFindAllメソッドの実行と結果取得が行われます。

　［アプリケーション ナビゲータ］ウィンドウでページ定義情報ファイル（jsf_emplist_adfPageDef.xml）を開いて、下記のバインディング設定部分を確認することができます（JSPを開いているエディタ内で右クリックして［ページ定義に移動］を選択しても、ページ定義情報ファイルを開くことができます）。

<bindings>
 <methodActionid="queryEmpFindAll"
  InstanceName="SessionEJBLocal.dataProvider"
  DataControl="SessionEJBLocal"MethodName="queryEmpFindAll"
  RequiresUpdateModel="true"Action="999"
  IsViewObjectMethod="false"

  ReturnName="SessionEJBLocal.methodResults.
  SessionEJBLocal_dataProvider_queryEmpFindAll_result"/>
</bindings>

　コマンド・ボタンのActionListenerに設定されたEL式は、実際にはここで定義されたmethodActionと呼ばれるエントリを指しており、さらにこのファイルではmethodActionと実際に実行されるデータ・コントロールで定義されたメソッドが対応づけされています。これらのバインディング設定情報とデータ・コントロール作成時に生成されたメタデータをもとにして、実行時にADFのランタイムがボタンクリックのアクションに対して適切なメソッドをコールしてくれるようになります。また、このメタデータはバックエンドのサービスを抽象化しているので、サービスの利用者はサービスがPOJOで実装されているのか、EJBで実装されているのかを意識する必要がありません。

　次に、emplist_adf.jspにデータ表示用テーブルを追加します。
［コンポーネント・パレット］ウィンドウから［ADF Faces Core］を選択し、［Table］をドラッグ＆ドロップしてテーブルを追加することもできますが、ここでは［構造］ウィンドウからテーブルを追加する方法を示します。複雑なUIコンポーネント構造をもつページにUIコンポーネントを追加する場合には、ドラッグ＆ドロップよりもここで紹介する［構造］ウィンドウによる方法のほうがより正確に挿入位置を指定することができます。
まずemplist_adf.jspをエディタで開いた状態で［構造］ウィンドウを表示し、先ほど作成したコマンド・ボタン（［f:view］→［afh:html］→［afh:body］→［h:form］→［af:commandButton］）を右クリックします。コンテキストメニューから［af:commandButton - EMP表を表示の後ろに挿入］ →［ADF Faces Core］を選択します。

図 7：［構造］ウィンドウからUIコンポーネントを追加
図 7：［構造］ウィンドウからUIコンポーネントを追加

　［ADF Faces Core項目の挿入］ダイアログでは、［Table］を選択して［OK］ボタンをクリックします。

図 8：ADF Faces Coreコンポーネントの選択
図 8：ADF Faces Coreコンポーネントの選択

　ADF Faces Tableの作成ウィザードのステップ1/4では［今すぐバインド］を選択し、値項目の［バインド］ボタンをクリックします。今回テーブルにバインドするのは、ページ定義情報ファイルに指定されたqueryEmpFindAllの戻り値です。［Expression Builder］ダイアログの［Filter By］を［すべてのタイプ］にセットして［ADFバインディング］を展開し、図9に示すように［ADFバインディング］→［bindings］→［queryEmpFindAll］と展開して表示される［result］を選択し、［＞］ボタンをクリックしてEL式を完成させます。

図 9：［Expression Builder］ダイアログ
図 9：［Expression Builder］ダイアログ

　最終的にステップ1/4では、以下のように入力して次へ進みます。

◆［Tableの挿入］ダイアログの設定

値 #{bindings.queryEmpFindAll.result}
Var row
データ型のヒント com.oracle.jsfsample.model.Emp
図 10：バインディングの設定
図 10：バインディングの設定

　ステップ2/4では、EMP表のカラムが一覧に表示されていることを確認して［次へ］ボタンをクリックします。ADF Facesで実装しているテーブルはADFのバインディング機能が利用できるため、dataTableに比べて高機能（ソート機能や指定行数表示機能がノンコーディングで利用可能）となっており、ステップ3/4と4/4でそれらの設定を行うことができます。

　ここではステップ3/4で、Empnoの値によるソート機能を設定しておきます。［列］のリストから［Empno］を選択した状態で［ソート可能］のチェックボックスにチェックを入れ、［ソート・プロパティ］に「empno」と入力します。

図 11：列プロパティの設定
図 11：列プロパティの設定

　続くステップ4/4では［範囲ナビゲーションを含める］にチェックを入れ、［行］に適当な数値を入力します。ここで入力した数が表のデフォルト表示行数となります。表に追加される［次の○行］リンクにより、表データを指定行ずつ参照することができるようになります。

図 12：オプション設定
図 12：オプション設定

以上で画面の作成は終了です。先ほどと同様にemplist_adf.jspを実行して、データの表示と［Empno］列に設定したソート機能を確認します。

図 13：実行結果
図 13：実行結果

ADFによるデータ更新アプリケーションの作成  

　ここではサンプル・アプリケーション作成の最終段階として、ADFを使った更新アプリケーションを作成します。作成するサンプル・アプリケーションは、SCOTTスキーマのDEPT表にレコードを作成する単純なアプリケーションです。

図 14：完成イメージ
図 14：完成イメージ

　前節で作成したエンティティ、セッション・ファサードを利用します。作成手順は次のようになります。

  • 既存のセッション・ファサードへのメソッド追加、データ・コントロールの作成
  • JSP編集、バインディングの設定

■ 既存のセッション・ファサードへのメソッド追加、データ・コントロールの作成  

　まず、初めにDEPT表のエンティティを作成します。作成手順は、EMP表のエンティティを作成したときと同じです。

　［アプリケーション ナビゲータ］ウィンドウで［Model］を右クリックして、［新規］を選択します。［新規ギャラリ］ダイアログで［EJB］、［表ベースのエンティティ（JPA/EJB 3.0）］を選択し、あとはウィザードに従ってDeptエンティティを作成します。先ほどのサンプル・アプリケーションではエンティティを作成したあと、セッション・ファサードを新規作成しました。ここでは既存のセッション・ファサードにDeptエンティティアクセス用メソッドを追加する手順を示します。

　［アプリケーション ナビゲータ］ウィンドウですでに作成されているセッション・ファサード（SessionEJBBean）を右クリックします。表示される一覧メニューの中の［セッション・ファサードの編集］を選択します。［セッション・ファサード・オプションの指定］ダイアログで、Deptエンティティのすべてのメソッドにチェックが入っていることを確認して［OK］ボタンをクリックします。

図 15：セッション・ファサードの編集
図 15：セッション・ファサードの編集

セッション・ファサードの編集が終わったら、SessionEJBBeanをエディタで開いてメソッドが追加されていることを確認します。セッション・ファサードを編集したあとはデータ・コントロールも再作成する必要があります。再作成するには［アプリケーション ナビゲータ］ウィンドウで、「SessionEJBBean」を右クリックして［データ・コントロールの作成］を選択します。［データ・コントロール・パレット］にメソッドが追加されていることを確認します。

図 16：［データ・コントロール・パレット］
図 16：［データ・コントロール・パレット］

■ JSP編集、バインディングの設定  

　次に、DEPT表を編集する画面JSPを作成していきます。faces-config.xmlのダイアグラムを開いて、［コンポーネント・パレット］から［JSF Page］をドラッグ＆ドロップします。ここではJSPファイル名を「/jsf/deptedit.jsp」とし、ダイアグラム上で［/jsf/deptedit.jsp］をダブルクリックしてJSPファイルを作成します。［JSF JSPの作成］ウィザードでの設定項目は、emplist_adf.jspを作成した場合と同様にします。

　JSPファイルの作成が終了したら、次は画面UIを追加していきます。

　今回作成する画面は、DEPT表のカラムに対応した入力フィールドと登録ボタンです。［データ・コントロール・パレット］から下記のようにコンストラクタDept()を選択して、deptedit.jspにドラッグ＆ドロップします。

図 17：［データ・コントロール・パレット］
図 17：［データ・コントロール・パレット］

　ドラッグ＆ドロップ後に［フォーム・フィールドの編集］画面が表示されるので、［送信ボタンを含める］にチェックを入れてから［OK］ボタンをクリックします。

図 18：［フォーム・フィールドの編集］ダイアログ
図 18：［フォーム・フィールドの編集］ダイアログ

　これでDeptエンティティにマッピングされる入力フィールドが自動生成されました。入力フィールド情報を保持したDeptインスタンスは、ADFが内部的に生成します。

　次に、このDeptの参照をセッション・ファサードのpublicメソッド「persistEntity」に引き渡すアクションを画面の［Submit］ボタンにバインドします。データ・コントロールから［persistEntity］を選択して［Submit］ボタン上にドラッグ＆ドロップし、メニュー一覧から［既存のCommandButtonのバインド］を選択します。

図 19：コマンド・ボタンのバインディング設定
図 19：コマンド・ボタンのバインディング設定

次の図のような［アクション・バインディング・エディタ］が起動されたら、ここでpersistEntityメソッドの引数設定を行います。パラメータの［値］を入力する箇所でクリックすると［編集］ボタンが表示されるので、このボタンをクリックします。

図 20：パラメータ設定
図 20：パラメータ設定

　ここでpersistEntityの引数に渡したいのは、ADFが内部的に保持しているDeptインスタンスです。 ［ADFバインディング］→［bindings］→［Dept］と展開して表示される［result］をダブルクリックしてEL式を作成し、［OK］ボタンをクリックします。

図 21：EL式の編集
図 21：EL式の編集

　これで画面の作成は完了です。deptedit.jspを実行して適当な値を入力し、［persistEntity］ボタンをクリックすれば新規データが作成されます。

図 22：実行結果
図 22：実行結果

　このDEPT更新アプリケーションの作成では、ADFを使用したアプリケーションの作成手順を示しました。このように、ADFのバインディング機能とデータ・コントロール定義を使うと、従来は必要であった以下の作業が不要となります。

  1. Deptエンティティのプロパティを意識した、UIコンポーネントのバインディング設定
  2. サービス層のメソッドを呼び出すためのEJBクライアントの実装

まとめ  

　前回から２回にわたり、単純なアプリケーションを題材にADFの基本的な使い方を説明しました。ADFにより、JSFで作成した画面とEJB3.0によるビジネス・ロジックの連携を容易に定義できることが確認いただけたかと思います。

　次回は、ADF Facesを使用した画面開発について説明します。

インデックスに戻る