Articles
JDeveloper 11g によるリッチクライアント開発第4章 テーブルを使用したアプリケーションの作成日本オラクル株式会社 セールスコンサルティング統括本部
Fusion Middleware SC本部 Fusion Middleware レディネス部 智野 潤子 (ちの じゅんこ) Part1 ｜ Part2 この章では、ファイルの情報をテーブル形式で表示する簡単なアプリケーションをとおして、ADF Faces Rich Clientによるアプリケーション開発をチュートリアル形式で説明します。
なお、このチュートリアルでは、開発環境としてOracle JDeveloper 11g（以下JDeveloper）を使用します。JDeveloperのインストールおよびチュートリアルを実行するために必要な設定は、 第3章「Oracle JDeveloperのインストール」を参照してください。 目次Part1 Part2
アプリケーションとプロジェクトの作成JDeveloperでアプリケーションを開発するには、最初に「アプリケーション」と「プロジェクト」を作成します。それぞれの役割は次のとおりです。
プロジェクトは開発するアプリケーションの要件に応じて柔軟に構成することができますが、関連するモジュールごとにプロジェクトを作成することが推奨されます。例えば、データベースにアクセスするJSFベースのアプリケーションを構成する場合は、データベース・アクセスのためのソースを管理するプロジェクトとJSFを構成するJSPやManaged Beanのソースを管理するプロジェクトの2つを作成することで、開発に必要なリソースが階層的に分類されるので、作業効率が向上します。 アプリケーションの作成アプリケーションを作成するには、JDeveloperの画面左上に表示されているアプリケーション・ナビゲータで[新規アプリケーション]を選択します（図2、図3）。
アプリケーションを作成するための[アプリケーションの作成]ダイアログが表示されたら、表1のように入力します。
[アプリケーションの作成]ダイアログで[OK]ボタンをクリックすると、アプリケーションTutorialApp1が生成されます。 JDeveloperのIDEJDeveloperのIDE（統合開発環境）は、多数のウィンドウで構成されます。アプリケーションが作成された直後のJDeveloperは5つのウィンドウで構成されています。それぞれのウィンドウは、表2のような機能を提供します。
作成されたプロジェクトアプリケーションTutorialApp1が作成されると、アプリケーション・ナビゲータは図6のように表示されます。TutorialApp1は、テンプレート「Fusion Webアプリケーション（ADF）」に基づいて作成されたため、ModelとViewContorollerという2つのプロジェクトが作成されています。
ModelプロジェクトADF Business Componentsを使用したデータベース・アクセス・コンポーネントを作成するためのプロジェクトです。このチュートリアルでは、[アプリケーションの作成]ダイアログの[アプリケーション・パッケージの接頭辞]で「tutorial」を指定したので、Modelプロジェクトに作成されるJavaクラスのパッケージ名のデフォルト値は「tutorial.model」に設定されています。 ViewControllerJSFによるWebモジュールを構成するJSPファイルやCSS（カスケーディング・スタイル・シート）、Managed Beanなどを作成するためのプロジェクトです。作成されるJavaクラスのパッケージ名のデフォルト値は「tutorial.view」に設定されています。また、ViewControllerプロジェクトには、表3の4つのファイルが生成されています。
Javaクラスの作成とManaged Beanの登録この節では、個々のファイルの情報（名前やサイズなど）を表すFileItemクラスと、Managed Beanとして動作するFileServiceクラスの2つのJavaクラスをViewControllerプロジェクトに作成します。 FileItemクラスの作成最初にFileItemクラスを作成し、実装します。JDeveloperでJavaクラスを作成するには、アプリケーション・ナビゲータで「ViewController」を右クリックし、コンテキスト・メニューから[新規]を選択して[新規ギャラリ]ウィンドウを起動します。
[新規ギャラリ]ウィンドウが起動されたら、画面左の[カテゴリ]ツリーから[一般]を選択し、画面右の[アイテム]リストから[Javaクラス]を選択します。
[新規ギャラリ]ウィンドウで[OK]ボタンをクリックすると、[Javaクラスの作成]ダイアログが起動されるので、表4のように入力します。
[Javaクラスの作成]ダイアログで[OK]ボタンをクリックすると、ViewControllerプロジェクトにFileItem.javaが追加され、アプリケーション・ナビゲータは図10のような状態になります。
メンバー変数の追加FileItem.javaが生成されると、エディタ・ウィンドウにソースが表示されるので、表5の4つのメンバー変数を追加します。
メンバー変数を追加するとFileItem.javaのエディタ・ウィンドウは図11のような状態になります。
NOTE アクセッサ・メソッドの追加メンバー変数を追加したら、アクセッサ・メソッド（getXXXメソッドとsetXXXメソッド）を追加します。
エディタ・ウィンドウ上部のツールバーの[アクセッサの生成]ボタンをクリックすると、[アクセッサの生成]ダイアログが起動されます。画面右側の[すべて選択]ボタンをクリックし、 [メソッド]ツリーのすべてのメソッドがチェックされていることを確認したら、[OK]ボタンをクリックします。
[アクセッサの生成]ダイアログで、[OK]ボタンをクリックすると、FileItem.javaにsetNameやgetNameなど8つのメソッドが追加されます。 Javaソースの保存とコンパイルFileItemクラスにメンバー変数とそれぞれのアクセッサ・メソッドを追加したら、FileItem.javaを保存するためにツールバーの[すべて保存]ボタンをクリックします。
次に、FileItem.javaをコンパイルするために、ツールバーの[メイク]ボタンをクリックします。
NOTE FileServiceクラスの作成次に、JSFのManaged Beanとして動作するFileServiceクラスを作成し、実装します。 Managed Beanの登録とJavaクラスの生成JSFのManaged Beanは、JSF構成ファイルに登録する必要があります。JDeveloperでは、Managed Beanの登録と同時に、その実装クラスのソースを生成することができます。
[概要]タブをクリックすると、faces-config.xmlが概要モードで表示されます。概要モードは、Managed Beanや開発者が作成したバリデータ、コンバータの登録など、JSF構成ファイルを宣言的に編集するためのインタフェースを提供します。Managed Beanを登録するには、画面左の[Managed Beans]タブを選択してから、画面右上の[+]ボタンをクリックします。
[+]ボタンをクリックすると、Managed Beanの情報を入力するための[マネージドBeanの作成]ダイアログが起動されるので、表6のように入力します。
[マネージドBeanの作成]ダイアログで[OK]ボタンをクリックすると、FileService.javaのソースが生成され、faces-config.xmlにはManaged Beanが登録されています。 メンバー変数とアクセッサ・メソッドの追加生成されたFileServiceクラスには、2つのメンバー変数を追加します。エディタ・ウィンドウで[FileService.java]タブをクリックし、表7の2つを登録してください。
メンバー変数を追加したら、FileItemクラスと同様に[アクセッサの生成]ボタンをクリックしてアクセッサ・メソッドを生成します。 コンストラクタの実装FileServiceクラスのコンストラクタでは、テーブルに表示するファイルのリスト（メンバー変数fileItems）を初期化します。このチュートリアルでは、プログラムで擬似的なファイルのリストを作成することにします。java.util.ArrayListおよびjava.util.Dateをインポートし、コンストラクタをコード1のように実装してください。 コード1 FileServiceクラスのコンストラクタ
public FileService() {
fileItems = new ArrayList<FileItem>(100);
selectedItem = null;
for (int i = 0; i < 100; i++) {
FileItem item = new FileItem();
switch (i % 4) {
case 1: {
item.setName("File" + i + ".html");
item.setType("HTMLファイル");
break;
}
case 2: {
item.setName("File" + i + ".xsl");
item.setType("XSLファイル");
break;
}
case 3: {
item.setName("File" + i + ".pdf");
item.setType("PDFファイル");
break;
}
default: {
item.setName("File" + i + ".doc");
item.setType("ドキュメント・ファイル");
break;
}
}
item.setLastModified(new Date());
item.setSize((i + 1) * 10);
fileItems.add(item);
}
}
FileService.javaの編集が終わったら、保存しプロジェクトをメイクしてください。 JSFページの作成この項では、ADF Faces Rich Clientのタグを記述するJSFページ（index.jspx）を作成し、タブ区切りパネルを追加します。 JSFページの作成JSFページは、「 Javaクラスの作成とManaged Beanの登録」の「FileItemクラスの作成」でFileItemクラスを作成した時と同様に、[新規ギャラリ]ウィンドウを使用して作成することもできますが、このチュートリアルではダイアグラムを使用して作成する手順を紹介します。
エディタ・ウィンドウに[JSF Page]をドロップすると、ダイアグラムに[untitled1.jsp]が追加されます。[untitled1.jsp]をダブルクリックすると、[JSFページの作成]ダイアログが表示されるので、表8のように入力します。
[JSFページの作成]ダイアログの[OK]ボタンをクリックするとViewControllerプロジェクトにindex.jspxが生成され、エディタ・ウィンドウで設計モード（エディタ・ウィンドウ下部の[設計]タブが選択された状態）で表示されます。コンポーネント・パレットにはJSFタグがアコーディオン・パネルによってカテゴリごとに表示されており、ドラッグ&ドロップでJSFページに追加できるようになります。
NOTE ページ・タイトルの設定index.jspxが生成されると、構造ウィンドウには図24のようにindex.jspxに記述されているタグの階層がツリー形式で表示されるので、[af:document]をクリックします。
NOTE 構造ウィンドウで[af:document]を選択すると、プロパティ・インスペクタでaf:documentタグの属性を編集できるようになります。ページ・タイトルを指定するために、[Common]カテゴリの[Title]に「チュートリアル」と入力します。
JSFページのエンコーディングの設定この項では、JSFページのエンコーディングをUTF-8に変更します。ADF Faces Rich Clientは、JavaScriptのXmlHttpRequestによる非同期通信を使用して部分ページ・レンダリングを実現しています。UTF-8以外のエンコーディングを使用した場合、使用するWebブラウザによってはマルチバイト文字が文字化けすることがあるため、ADF Faces Rich Clientを使用したJSFページではUTF-8の使用が推奨されます。 コード2 index.jspxのソースの編集
<?xml version='1.0' encoding='
UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=
UFF-8"/>
<!-- 以下省略 -->
変更を保存すると、JDeveloperによってJSFページのエンコーディングが適切に変換されます。 タブ区切りパネルの追加この項では、作成したindex.jspxにタブ区切りパネルを追加します。まず、index.jspxを再びデザイン・モードで表示します。コンポーネント・パレット上部のドロップダウン・リストで[ADF Faces]を選択し、[Layout]パネルから[パネル・タブ]をエディタ・ウィンドウにドラッグ&ドロップします。
[パネル・タブ]をエディタ・ウィンドウにドロップすると、index.jspxにはaf:panelTabbedタグが追加され、エディタ・ウィンドウは図27のように表示されます。
このチュートリアルでは追加されたaf:panelTabbedタグに対して、次の設定をします。
幅と高さの指定追加したタブ区切りパネルの幅と高さはaf:panelTabbedタグのinlineStyle属性にCSSの形式で指定します。
これによりプロパティ・インスペクタの[Style]タブ・ページの「InlineStyle」には、「width:100%; height:500px;」と表示されます（図28）。
タブのテキストを変更[パネル・タブ]をエディタ・ウィンドウにドロップすると、af:panelTabbedタグの中には自動的にaf:showDetailItemタグが追加されています。af:showDetailItemタグの中には、各タブ・ページのコンテンツを記述します。
テーブルの追加とテスト実行この節では、「 Javaクラスの作成とManaged Beanの登録」で作成したFileServiceクラスのgetFileItemsメソッドで取得した値を表示するテーブルをindex.jspxに追加します。また、JDeveloperでJSFページを実行する方法についても説明します。 この節の手順を実行すると、JSFページは次のように表示されます。
テーブルの追加コンポーネント・パレットの[ADF Faces]ページの[Common Components]パネルから、[Table]をエディタ・ウィンドウのタブ区切りパネル内部にドラッグ&ドロップします。
エディタ・ウィンドウに[Table]がドロップされると、Managed Beanからテーブルに表示するデータを選択するための[ADF Faces Tableの作成]ダイアログが表示されるので、[データを今すぐバインド]をチェックします。
[表データ・コレクション]フィールドの右の[参照]ボタンをクリックすると、[表データ・コレクションの選択]ダイアログが表示されます。画面左下のツリーから[JSF Managed Beans]→[file_service]→[fileItem]を選択してから[式に挿入]ボタンをクリックします。これにより、画面上部の[式]フィールドに「#{file_service.fileItem}」と表示されます。
[表データ・コレクションの選択]ダイアログで[OK]ボタンをクリックすると、[ADF Faces Tableの作成]ダイアログの[要素タイプ]の値に「tutorial.view.FileItem」が設定され、[列]にはFileItemクラスで定義したメンバー変数に基づいて4つの列が自動的に設定されたことを確認し、[OK]ボタンをクリックします。
[ADF Faces Tableの作成]ダイアログで[OK]ボタンをクリックすると、エディタ・ウィンドウは図35のように表示されます。
アプリケーションのテスト実行JDeveloperにはWebLogic Serverが統合されているので、作成したWebアプリケーションをその場で実行することができます。ここでは、作成したJSFページindex.jspxを実行してみましょう。
[プロジェクトの実行]ボタンをクリックすると自動的にWebLogic Serverが起動し、作成したアプリケーションをEARにパッケージングしてデプロイします。WebLogic ServerのステータスおよびJSFページのURLはログ・ウィンドウに表示されます。
アプリケーションのデプロイが完了するとと、自動的にWebブラウザにindex.jspxが表示されます。列の幅の変更や並べ替えができることを確認してみてください。
アプリケーション/WebLogic Serverの停止作成したindex.jspxの動作確認が終わったらアプリケーションまたはWebLogic Serverを停止します。ツールバーの[終了]ボタン（赤い四角のボタン）をクリックすると[Default Server]と[TutorialApp1]の2つのメニューが表示されます。
af:panelCollectionタグの追加af:panelCollectionタグは、テーブルおよびツリー、ツリー・テーブルを配置するためのパネルです。第3章で紹介したADF Faces Rich Clientのデモ・アプリケーションのFile Explorerデモでは、テーブルの列を操作する[ビュー]メニューや[連結解除]ボタンが提供されていましたが、それらはaf:panelCollectionタグによって提供された機能です。
これにより、[囲む]ダイアログが表示されるので、画面上部のドロップダウン・リストで[ADF Faces]を選択し、[パネル・コレクション]を選択します。
[囲む]ダイアログで[OK]ボタンをクリックすると、af:tableタグの外側にaf:panelCollectionタグが追加されます。埋込みOC4Jサーバーでindex.jspxを実行すると、[ビュー]メニューや[連結解除]ボタンが使用可能になっています。
列の書式のカスタマイズこの節では、次のような各列の書式をカスタマイズする方法を説明します。
この節の手順を実行すると、JSFページは次のように表示されます。
列ヘッダー・テキストの変更列ヘッダーに表示されるテキストは、columnタグのheaderText属性で指定します。エディタ・ウィンドウで[Name]列を選択した状態でプロパティ・インスペクタの[Common]カテゴリの[HeaderText]を「Name」から「名前」に変更します。
同様に、他の3つの列も表9のように変更します。
列の幅の初期サイズの変更列の幅の初期サイズはaf:columnタグのwidth属性で指定し、デフォルトの値は100pxに設定されています。この項では、[名前]列の幅を150pxに変更します。エディタ・ウィンドウで[名前]列を選択した状態で、プロパティ・インスペクタの[Appearance]カテゴリの[Width]を「150」に変更します。
NOTE 行揃えの指定各列の行揃えの設定は、af:columnタグのalign属性で指定します。align属性には次の値を指定できます。
このチュートリアルでは、サイズ列を右揃え（align属性の値を「right」）に設定します。エディタ・ウィンドウで[サイズ]列を選択した状態で、プロパティ・インスペクタの[Common]カテゴリの[Align]ドロップダウン・リストから「right」を選択します。
数値データのフォーマットの変更数値データのフォーマットを明示的に指定する場合は、コンバータを使用します。構造ウィンドウで[af:column - サイズ]の下の[af:outputText - #{row.size}]を右クリックし、コンテキスト・メニューから[af:outputText - #{row.size}の中に挿入]→[ADF Faces]→[Convert Number]を選択します。
これにより、サイズ列を表示するaf:utputTextタグの中に af:convertNumberタグが追加されます。プロパティ・インスペクタには、追加されたaf:convertNumberタグの属性が表示されているので、[Pattern]に「#,### KB」と入力します。
日付データのフォーマットの変更日付データのフォーマットを指定する場合も、コンバータを使用します。構造ウィンドウで[af:column - 更新日時]の下の[af:outputText - #{row.lastModified}]を右クリックし、コンテキスト・メニューから[af:outputText - #{row.lastModified}の中に挿入]→[ADF Faces]→[Convert Date Time]を選択します。
これにより、更新日時を表示するaf:outputTextタグの中にaf:convertDateTimeタグが追加されます。プロパティ・インスペクタには、追加されたaf:convertDateTimeタグの属性が表示されているので、[Pattern]に「yyyy/MM/dd HH:mm:ss」と入力します。
ここまでの変更を確認するために実行すると、Webブラウザには図51のように表示されます。
まとめ今回は、ADF Faces Rich Clientを使用したJSFアプリケーションの開発手順をチュートリアル形式で説明しました。
引き続き、Part2では今回作成したテーブルにソートやポップアップ・メニューなど機能を追加します。 Part1 ｜ Part2
|
Printer View