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

新井　庸介

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

システム開発においてユーザー・インターフェースの作成は常にやっかいなものです。筆者はこれまで、Perl、Cに始まり、Servlet/JSP、XSLT、Swing、Flashと様々な言語、技術を用いてUIを作成してきましたが、ADF Faces（とJSF）にはこれまでに無い可能性を感じています。本特集を機会にぜひADF Facesに触れてみてください。

第4回：JSFコンポーネントによるユーザー・インタフェース開発 - 1


今回から、JSFコンポーネントを用いてWebアプリケーションのユーザー・インタフェース部分を開発する方法を紹介していきます。
オラクルでは、JSFの拡張コンポーネントとしてOracle ADF Faces（以下、ADF Faces）を提供しています。本連載の第3回 「JSF/EJB3.0 サンプル・アプリケーション開発 - 2」で使用した表などのJSFコンポーネントは、ADF Facesによって提供されているものです。ADF Facesは、もちろんADFアプリケーションのユーザー・インタフェースとして利用できますが、ADFによるデータバインドを使用していない場合にも利用することができます。

Oracle ADF Facesとは  

Oracle ADF Facesは、JSFに100%準拠したコンポーネント・ライブラリであり、JSFアプリケーション開発において一連の広範な拡張UIコンポーネントを提供します。これらのコンポーネントを利用することで、HTMLやJavaScriptを記述することなく、高機能なWebページのユーザー・インタフェースを簡単に構築できます。
ADF Facesは100種にのぼるコンポーネントで構成されています。以下に、カテゴリ別におもなものを説明します。

■ 画面レイアウト用コンポーネント  

ボタンやリンク、テキストなど他のUIコンポーネントを配置する枠組みを提供するUIコンポーネントです。ヘッダやメニュー・バーなど、画面をレイアウトする際に利用します。

図 1：完成画面
図 1：PanelPageコンポーネント

■ 入力フォーム・コンポーネント  

テキストエリアやプルダウン・リストなど、データの編集や検索フォームなどを作成する際に使用するコンポーネントです。ソート可能なリスト・ボックスなど、カレンダーによる日付入力支援コンポーネント、JSFの標準コンポーネントに比べて高い付加機能を備えています。

図 2：SelectManyShuttleコンポーネント
図 2：SelectManyShuttleコンポーネント

またUIコンポーネントに加え、入力のコンバータや入力された値をチェックするためのバリデータも提供しています。入力した日付が指定した範囲内にあるかどうかのチェック（validateDateTimeRangeコンポーネント）、バイト長による文字長チェック（validateByteLength）など、JSF標準にはない付加機能を備えています。

■ ロジック系コンポーネント  

マネージドBean内のイベントのポーリング(poll)や、マネージドBeanのプロパティ値によって表示するファセットを切り替える(switcher)など、画面にロジックを提供するコンポーネントです。

図 3：ProgressIndicatorコンポーネント
図 3：ProgressIndicatorコンポーネント

■ その他  

その他多数のコンポーネントを用意しています。ADF Facesコンポーネントの一覧および詳細については、次のページを参照してください。

http://www.oracle.com/technology/products/jdev/htdocs/
partners/addins/exchange/jsf/doc/tagdoc/core/imageIndex.html

インデックスに戻る

今回のサンプル・アプリケーション開発について  

今回は、ADF Facesのレイアウト用コンポーネントを使用した画面開発を実際におこなってみます。具体的には、次のADF Facesコンポーネントを使用して画面開発をおこないます。

▼レイアウト・コンポーネント

  • PanelPage（ページ全体をレイアウトするコンポーネント）
  • MenuBar（メニュー・バー）
  • MenuList（サイド・メニュー等に利用するメニュー・リスト）
  • ShowDetail（開閉可能テキストエリア）
  • ShowOnePanel（開閉可能パネル）

■ アプリケーション作成の準備  

実際の画面作成をおこなう準備として、JDeveloperに開発用のプロジェクトを作成します。JDeveloperのアプリケーション ナビゲータの「アプリケーション」を右クリックして、「新規アプリケーション」を選択します。「アプリケーションの作成」ウィンドウで、表1のように入力して「OK」ボタンをクリックします。

 表 1「アプリケーションの作成」ダイアログに設定する値

設定項目 設定する値
アプリケーション名 ADFFacesSample
ディレクトリ名 デフォルト
アプリケーション・パッケージの接頭語 com.oracle.adffsample
アプリケーション・テンプレート テンプレートなし[すべてのテクノロジ]
図 4：アプリケーションの作成ダイアログ
図 4：アプリケーションの作成ダイアログ

次に「プロジェクトの作成」ダイアログが表示されます。表2のように入力して「OK」ボタンをクリックします。

 表 2：「プロジェクトの作成」ダイアログで設定する値

設定項目 設定する値
プロジェクト名 ADFFacesSample
ディレクトリ名 デフォルト
図 5：プロジェクトの作成ダイアログ
図 5：プロジェクトの作成ダイアログ

JSFアプリケーションを作成する際に必要なライブラリをプロジェクトに設定します。作成したADFFacesSampleプロジェクトをアプリケーション ナビゲータで右クリックし、「プロジェクト・プロパティ」を選択します。

図 6：プロジェクト・プロパティの設定
図 6：プロジェクト・プロパティの設定

起動された「プロジェクト・プロパティ」ダイアログから「テクノロジ・スコープ」を選択し、「使用可能なテクノロジ」から「JSF」を選択してください。これにより、「JSF」およびその依存テクノロジ（「Java」「JSPおよびサーブレット」）が「選択済のテクノロジ」に設定されます。

図 7：テクノロジ・スコープの設定
図 7：テクノロジ・スコープの設定

これで、ADF Facesを使用するJSFプロジェクトの作成が完了しました。次の手順からは、ADF Facesのレイアウト・コンポーネントを使用した画面開発をおこなっていきます。

インデックスに戻る

PanelPageコンポーネント  

Webアプリケーションの画面は一般に、ヘッダ、メニュー、メイン・コンテンツ（本文）、フッタに大別できます。ADF FacesのPanelPageコンポーネント（af:panelPageタグ）は、Webページの基本レイアウトパターンを提供します。af:panelPageタグを使用することで、アプリケーション全体で画面レイアウトを統一することができます。

図 8：PanelPage利用画面
図 8：PanelPage利用画面

ここでは次の手順で、af:panelPageタグを使用したJSF JSPページを作成します。

  1. JSF JSPの作成
  2. af:panelPageタグの追加
  3. 作成したページのテスト

■ JSF JSPの作成  

まず、JSF JSPページの雛形を生成します。

  1. アプリケーション ナビゲータでADFFacesSampleプロジェクトを右クリックし、コンテキスト・メニューから「JSFナビゲーションを開く」を選択するか、「Webコンテンツ」→「WEB-INF」→「faces-config.xml」をダブルクリックします。
  2. コンポーネント・パレット上部のドロップダウン・リストから「JSF Navigation Diagram」を選択し、「JSF Page」をダイアグラムにドラッグ&ドロップします。
  3. ダイアグラム上に「JSF Page」のアイコンが表示されます。ファイル名を「/untitled1.jsp」から「/panelPage.jsp」に変更します。
  4. 「/panelPage.jsp」をダブルクリックすると起動される「JSF JSPの作成」ウィザードを使用して、これから作成するJSPの設定をおこないます。ウィザードのステップ2で「新規マネージドBeanでのUIコンポーネントの自動公開」を選択し、マネージドBeanの名前を「backing_panelPage」とします。この設定により、panelPage.jspに追加されたUIコンポーネントが、マネージドBeanのプロパティとして自動的に定義されます。
    図 9：JSF JSPの作成ウィザード - ステップ2
    図 9：JSF JSPの作成ウィザード － ステップ2
  5. 「JSF JSPの作成」ウィザードのステップ3で、選択済のライブラリに「ADF Faces Components」と「ADF Faces HTML」を追加します。
    図 10：JSF JSPの作成ウィザード － ステップ3
    図 10：JSF JSPの作成ウィザード － ステップ3

ウィザードの「終了」ボタンをクリックするとpanelPage.jspが生成され、ビジュアル・エディタで表示されます。

■ af:panelPageタグの追加  

次に、af:panelPageタグをJSPページ上に配置します。panelPage.jspをビジュアル・エディタで開き、コンポーネント・パレット上部のドロップダウン・リストから「ADF Faces Core」を選択してから、「PanelPage」をビジュアル・エディタの赤い破線内にドラッグ&ドロップします。

図 11：ビジュアル・エディタにPanelPageをドラッグ&ドロップ
図 11：ビジュアル・エディタにPanelPageをドラッグ&ドロップ

af:panelPageタグが追加されると、ビジュアル・エディタでは図 12のように表示されます。

図 12：af:panelPageタグが追加された状態
図 12：af:panelPageタグが追加された状態

■ 作成したページのテスト  

panelPage.jspをビジュアル・エディタで開き、右クリックしてコンテキスト・メニューから「実行」を選択します（図 13）。これにより、埋込みOC4Jサーバー（JDeveloperのテスト用J2EEコンテナ）が起動し、Webブラウザに作成したページが表示されます。また、ログ・ウィンドウにはページのURLが表示されています（図 14）。

図 13：JSFページの実行
図 13：JSFページの実行
図 14：埋込みOC4Jサーバー起動時のログ・ウィンドウ
図 14：埋込みOC4Jサーバー起動時のログ・ウィンドウ

ここまでの手順で、af:panelPageタグがページに追加されました。以降で、このページにさまざまなUIコンポーネントを配置していきます。

■ af:panelPageタグのファセット  

JSFのUIコンポーネントの多くは、ファセット（f:facetタグ）が定義されています。それぞれのファセットには名前がつけられており、ファセット内に記述されたコンポーネントは事前に定義された位置にレンダリングされます。af:panelPageタグが追加されたJSPをJDeveloperのビジュアル・エディタで開くと、「branding」、「brandingApp」などグレーの破線で囲まれている領域が表示されます（図 15）。これらのグレーの破線は、ファセットに追加されたUIコンポーネントが表示される位置を表しています。

図 15：af:panelPageタグのファセット
図 15：af:panelPageタグのファセット

af:panelPageタグは、コンポーネントやテキストを配置するための多くのファセットをもっています。表 3は、af:panelPageタグの主要なファセットと、その内部で使用が推奨される子コンポーネントです。

 表 3：af:panelPageタグの主要なファセット

ファセット名 説明
branding af:objectImageタグを使用して、企業または組織のロゴを表示するための領域で、ページの左上隅にレンダリングされます
brandingApp af:objectImageタグを使用して、アプリケーションのロゴまたは製品のブランドを表示するための領域です。デフォルトの設定では、brandingイメージの右にレンダリングされます
menuGlobal af:menuButtonsタグを使用して、ヘルプやアプリケーションの設定など、各ページから常時使用できるボタンまたはリンクを表示するための領域です。ページの右上にレンダリングされます
menu1 af:menuTabsタグを使用して、メイン・メニューをタブとして右寄せでレンダリングします
menu2 af:menuBarタグを使用して、メニュー項目をメニュー・タブ（menu1）の直下の水平バーの中にレンダリングします
menu3 af:menuListタグを使用して、ページの左側、メニュー・バー（menu2）の直下のカラーでオフセットされた領域内にメニュー項目を表示します
appCopyright 著作権のテキストを表示するための領域です。ページの左下にレンダリングされます
appPrivacy アプリケーションのプライバシ・ポリシーについてのページへのリンクを表示します。ページの左下にレンダリングされます
appAbout アプリケーションのバージョン情報のページへのリンクを表示するための領域です。ページの左下にレンダリングされます

menu2とmenu3以外は、af:panelPageタグをJSPページに配置した時点でJDeveloperのビジュアル・エディタに表示されます。menu2、menu3など、デフォルトではビジュアル・エディタに表示されないファセットにコンポーネントを追加する方法は、以下の「MenuBarコンポーネント」および「MenuListコンポーネント」の項で説明します。
またaf:panelPageは、表 3で紹介した以外のファセットも定義しています。その他のファセットに関する詳細は、「Oracle Application Development Framework開発者ガイド」の「4.4.4 PanelPageコンポーネントの使用方法」を参照してください。

インデックスに戻る

MenuBarコンポーネント  

MenuBarコンポーネント（af:menuBarタグ）は、画面にメニュー・バーを表示するためのコンポーネントです。af:panelPageタグを使用している場合は、menu2ファセットに追加します。af:menuBarタグの子コンポーネントは、バーの中で左寄せにされ、縦線で区切られます。

図 16：af:menuBarタグの使用例
図 16：af:menuBarタグの使用例

ここでは次の手順で、「PanelPageコンポーネント」で作成したpanelPage.jspにaf:menuBarタグを追加します。

  1. 遷移先画面と画面遷移の設定
  2. af:menuBarタグの追加
  3. af:menuBarタグにメニュー項目を追加

■ 遷移先画面と画面遷移の設定  

まず、追加するメニュー項目をクリックしたときの遷移先となる画面の作成と、画面遷移の設定をおこないます。

  1. 画面遷移先のJSPファイルを作成します。ファイル名は「/target.jsp」とし、その他の設定は「/panelPage.jsp」と同じです。
  2. 作成されたtarget.jspに、画面を識別できるテキストを追加します。図 17では「target.jsp」と入力しています。
    図 17：target.jspの作成
    図 17：target.jspの作成
  3. faces-config.xmlを開いて、コンポーネント・パレットから「JSF Navigation Case」を選択します。「/panelPage.jsp」から「/target.jsp」へドラック＆ドロップして線で結びます。
    図 18：JSF Navigation Caseの設定
    図 18：JSF Navigation Caseの設定

■ af:menuBarタグの追加  

panelPage.jspに追加したaf:panelPageタグのmenu2ファセットに、af:menuBarタグを配置します。

  1. af:menuBarを追加するaf:panelPageタグのmenu2ファセットは、JDeveloperのビジュアル・エディタにデフォルトでは表示されていません。panelPage.jspをビジュアル・エディタで開き、構造ウィンドウで「PanelPage facets」を選択します。
    図 19：構造ウィンドウ
    図 19：構造ウィンドウ
  2. 構造ウィンドウで「PanelPage facets」を右クリックして、「ファセット」→「Menu2」をチェックします。
    図 20：構造ウィンドウからMenu2ファセットをアクティブに設定
    図 20：構造ウィンドウからMenu2ファセットをアクティブに設定
    これにより、panelPage.jspのビジュアル・エディタにmenu2ファセットが表示されます。
    図 21：ビジュアル・エディタに表示されたmenu2ファセット
    図 21：ビジュアル・エディタに表示されたmenu2ファセット
  3. コンポーネント・パレットで「ADF Faces Core」ページを開き、「MenuBar」をビジュアル・エディタの「menu2」にドラッグ&ドロップします。これにより、ビジュアル・エディタは図 22のように表示されます。
    図 22：af:menuBarタグが追加された状態
    図 22：af:menuBarタグが追加された状態

■ af:menuBarタグにメニュー項目を追加  

追加したaf:menuBarにメニュー項目を追加します。

  1. 構造ウィンドウで「af:menuBar」を右クリックして「af:menuBarの中に挿入」を右クリックし、コンテキスト・メニューから「CommandMenuItem」を選択します（図 23）。これを繰り返すことで、af:menuBarタグに他のメニュー項目を追加できます。
    図 23：af:menuBarにタグを追加
    図 23：af:menuBarにタグを追加
    <note>
    コンテキスト・メニューでは、「CommandMenuItem」のほかに「GoMenuItem」を選択することもできます。「CommandMenuItem」がJSFページへのリンクであるのに対し、「GoMenuItem」は他のHTMLページなどへのリンクをメニューに表示するコンポーネントです。また、その下に表示されるタグ・ライブラリ名を選択して、他のUIコンポーネントを追加することも可能です。
    </note>
  2. メニューとして画面に表示されるテキストと、リンクを設定します。ビジュアル・エディタまたは構造ウィンドウで、先ほど挿入した「af:commandMenuItem」を選択し、プロパティ・インスペクタで表 4の設定値を入力します。

 表 4：af:commandMenuItemの設定

プロパティ名 設定する値
Text target.jspへのリンク
Action success（プルダウンから選択）
※ここにリストされる値は、faces-config.xml内の、当該ページの<from-outcome>定義値です
図 24：プロパティ・インスペクタ
図 24：プロパティ・インスペクタ

変更したpanelPage.jspのテストをおこなうと、図 25のように表示されます。画面のメニュー上の「target.jspへのリンク」をクリックするとtarget.jspに遷移することを確認してください。

図 25：実行結果
図 25：実行結果

インデックスに戻る

MenuListコンポーネント  

MenuListコンポーネント（af:menuListタグ）は、おもにサイド・メニューとして利用できるメニュー・リストを表示するためのコンポーネントです。子コンポーネントとして追加されたメニュー・アイテムを箇条書きリスト形式でレンダリングします。

図 26：af:menuListタグの使用例
図 26：af:menuListタグの使用例

ここでは次の手順で、作成済みのpanelPage.jspにaf:menuListタグを配置します。

  1. af:menuListタグの追加
  2. af:menuListタグにメニュー項目を追加

■ af:menuListタグの追加  

次のように、panelPage.jspにaf:menuListタグを追加します。

  1. panelPage.jspをビジュアル・エディタで開き、構造ウィンドウから「PanelPage facets」を右クリックし、「ファセット」→「Menu3」をチェックします。
  2. コンポーネント・パレットから「MenuList」を選択し、ビジュアル・エディタの「menu3」にドラッグ＆ドロップします。

■ af:menuListタグにメニュー項目を追加  

af:menuListタグにメニュー項目を追加する方法は、af:menuBarにメニュー項目を設定する手順と同じなので、ここでは説明を省略します。メニュー項目を追加すると、ビジュアル・エディタは図 27の画面のように表示されます。

図 27：リンクの追加
図 27：リンクの追加

panelPage.jspを実行すると図 28のように表示されます。本項で追加した画面のサイド・メニュー上の「target.jspへのリンク」をクリックすると、target.jspに遷移することを確認してください。

図 28：実行結果
図 28：実行結果

インデックスに戻る

ShowDetailコンポーネント  

ShowDetailコンポーネント（af:showDetailタグ）は、文書の「表示」と「非表示」を切り替える機能を提供するコンポーネントです。ここでは、作成済みのpanelPage.jspにaf:showDetailタグを配置します。

■ af:ShowDetailタグの追加  

  1. panelPage.jspをビジュアル・エディタで開き、コンポーネント・パレットのプルダウン・リストから「ADF Faces Core」を選択します。ビジュアル・エディタの「Titile 1」の右に「ShowDetail」をドラッグ&ドロップします。
    図 29：af:showDetailタグの追加
    図 29：af:showDetailタグの追加
  2. 追加されたaf:showDetailタグの本文にあたるコンテンツを設定します。構造ウィンドウで「af:showDetail」を右クリックし、コンテキスト・メニューから「af:showDetailの中に挿入」→「JSF HTML」を選択します。
    図 30：af:showDetailタグの中にコンポーネントを追加
    図 30：af:showDetailタグの中にコンポーネントを追加
  3. 「JSF HTML項目の挿入」ダイアログが表示されます。「Output Text」を選択してOKをクリックします。
    図 31：JSF HTML項目の挿入ダイアログ
    図 31：JSF HTML項目の挿入ダイアログ
  4. 構造ウィンドウで「h:outputText」を選択し（図 32）、プロパティ・インスペクタで、Valueプロパティの値として適当なテキストを入力します。図 33では、「showDetailコンポーネント」を指定しています。
    図 32：構造ウィンドウでh:outputTextタグを選択
    図 32：構造ウィンドウでh:outputTextタグを選択
    図 33：プロパティ・インスペクタ
    図 33：プロパティ・インスペクタ
    これでaf:showDetailタグの追加と設定が終了しました。今回は、本文としてテキストを設定しましたが、フォーム要素やテーブル等を設定することも可能です。
    panelPage.jspを実行すると、図 34のように表示されます。
    図 34：実行結果
    図 34：実行結果

その他の詳細設定

af:showDetailタグは、プロパティによってさまざまな設定を変更することが可能です。プロパティは構造ウィンドウでaf:showDetailを選択し、プロパティ・インスペクタから設定できます。表 5は、af:showDetailタグのおもなプロパティを示しています。

 表 5：af:showDetailタグのプロパティ

  プロパティ名 設定する値
開閉時の表示 DisclosedText Open時の表示
UndisclosedText Close時の表示
初期表示時の開閉 disclosed True＝初期表示はOpen
False＝初期表示はClose

インデックスに戻る

ShowOnePanelコンポーネント  

ShowOnePanelコンポーネント（af:showOnePanelタグ）は、複数のパネルをグループ化し、表示/非表示を切り替える機能を提供するコンポーネントです。複数のパネルの中から、ユーザーが選択したパネルのコンテンツのみが表示され、他のパネルはヘッダ・テキストのみが表示されます。

図 35：af:showOnePanelタグの利用例
図 35：af:showOnePanelタグの利用例

この項では以下のステップで、作成済みのpanelPage.jspにaf:showOnePanelタグを追加します。

  1. af:showOnePanelタグの追加
  2. パネルのヘッダを設定
  3. パネルのコンテンツを設定

■ af:showOnePanelタグの追加  

panelPage.jspをビジュアル・エディタで開き、コンポーネント・パレットのプルダウン・リストから「ADF Faces Core」を選択します。ビジュアル・エディタのShowDetailコンポーネントの右に、コンポーネント・パレットから「ShowOnePanel」をドラッグ&ドロップします。

図 36：af:showOnePanelタグの追加
図 36：af:showOnePanelタグの追加

■ パネルのヘッダを設定  

ここではaf:showOnePanelタグにパネルを追加し、ヘッダとして表示されるテキストを設定します。

  1. 構造ウィンドウで「af:showOnePanel」を右クリックし、コンテキスト・メニューから「af:showOnePanel - showOnePanel1の中に挿入」→「ShowDetailItem」を選択します。
    図 37：af:showOnePanelタグ内にaf:showDetailタグを追加
    図 37：af:showOnePanelタグ内にaf:showDetailタグを追加
  2. ヘッダとして表示されるテキストを設定するために、構造ウィンドウで「af:showDetailItem」を選択します（図 38）。プロパティ・インスペクタでTextプロパティに「メニュー1」と入力します（図 39）。1、2を繰り返すことでヘッダを追加できます。
    図 38：構造ウィンドウでaf:showDetailItemを選択
    図 38：構造ウィンドウでaf:showDetailItemを選択
    図 39：プロパティ・インスペクタでaf:showDetailのプロパティを編集
    図 39：プロパティ・インスペクタでaf:showDetailのプロパティを編集

■ パネルのコンテンツを設定  

ここでは、パネルが選択されたときに表示されるコンテンツを設定します。

  1. 構造ウィンドウで「af:showDetailItem」を右クリックし、コンテキスト・メニューから「af:showDetailItem - メニュー1の中に挿入」を選択します。さまざまなコンポーネントの設定が可能ですが、今回は「HTML」を選択します。
    図 40：af:showDetailItemタグの中にHTMLタグを追加
    図 40：af:showDetailItemタグの中にHTMLタグを追加
  2. 「HTML項目の挿入」ダイアログが表示されたら、「Hyper Link」を選択します。
  3. 「ハイパーリンクの挿入」ダイアログが表示されたら、表 6のように値を設定します。1～3を繰り返すことでメニューの中身を追加できます。

 表 6：「ハイパーリンクの挿入」ダイアログの設定

設定項目 設定する値
テキスト オラクル
ハイパーリンク http://www.oracle.com/lang/jp/
図 41：ハイパーリンクの挿入ダイアログ
図 41：ハイパーリンクの挿入ダイアログ

上記の「パネルのヘッダを設定」および「パネルのコンテンツを設定」の手順をもう1度繰り返して、もう１つのパネルを追加してください。ヘッダのテキストとして「メニュー2」を設定し、パネルのコンテンツは任意のものを設定してください。
これにより、ビジュアル・エディタは図 42のように表示されます。

図 42：ビジュアル・エディタ
図 42：ビジュアル・エディタ

panelPage.jspの実行時には図 43のように表示されます。ヘッダをクリックすると、パネルの表示/非表示が切り替わることを確認してください。

図 43：実行結果
図 43：実行結果

インデックスに戻る

まとめ  

今回は、ADF Facesのレイアウト用コンポーネントを使用したユーザー・インタフェース開発について説明しました。本来であれば、煩雑なコーディングによる実装が必要となるWebのユーザー・インタフェースを、コンポーネント・ベースのきわめて容易な方法で開発できることが確認いただけたのではないかと思います。
次回は、ADF Facesのtableコンポーネントを使用して、データを表形式で表示する方法を紹介します。

インデックスに戻る