Articles
JDeveloper 11g によるリッチクライアント開発第4章 テーブルを使用したアプリケーションの作成日本オラクル株式会社 セールスコンサルティング統括本部
Fusion Middleware SC本部 Fusion Middleware レディネス部 智野 潤子 (ちの じゅんこ) Part1 ｜ Part2 Part1に引き続き、ファイルの情報をテーブル形式で表示する簡単なアプリケーションを作成します。Part2の今回は、Part1で作成したアプリケーションにソートやデータの選択、ポップアップ・メニューなどの機能を追加します。
目次Part1 Part2 ソート機能の追加af:tableおよびaf:columnタグによって実装されたテーブルは、簡単な設定だけでデータのソートが可能です。ソート機能を使用するには、af:columnタグのsortable属性の値をtrueに設定し、sortProperty属性にソートの基準となるプロパティの名前を指定します。
同様に他の3つの列も、プロパティ・インスペクタを使用して[Sortable]の値を「true」に変更し、[SortProperty]の値を表11のように指定します。
すべての列の[Sortable]および[SortProperty]の値を変更したら、index.jspxを実行してデータのソートができることを確認してみましょう。 行の選択この項では、テーブルの行データを選択可能にします。またユーザーが選択したデータをManaged Beanで取得できるようにします。 行の選択の有効化テーブルのデータを選択可能にするには、af:tableタグのrowSelection属性の値を次のいずれかに設定します。
プロパティ・インスペクタで[RowSelection]の値を変更するには、構造ウィンドウで「af:table」を選択して、af:tableタグのプロパティ・インスペクタを開き、[Behavior]カテゴリの[RowSelection]ドロップダウン・リストから「single」を選択します。
これにより、ユーザーがテーブルの行を選択すると、アプリケーション・サーバーに選択されたデータの情報が送信されます。 イベント・リスナーの実装ユーザー選択した行データがアプリケーション・サーバーに送信されると、SelectionEventが発生します。Managed Beanでユーザーが選択したデータを取得するには、Selection Eventに対応したリスナーを実装し、af:tableタグのSelectionListener属性にJSF EL式で指定します。Selection Eventのリスナーを実装するには、[SelectionListener]フィールドの右にある[▼]アイコンをクリックし、メニューから[編集]を選択します。
メニューから[編集]を選択すると、[プロパティの編集]ダイアログが表示されされるので、[マネージドBean]ドロップダウン・リストから「file_service」を選択します。
次に、[プロパティの編集]ダイアログの[メソッド]ドロップダウン・リストの右にある[新規]ボタンをクリックします。これにより、[メソッドの作成]ダイアログが表示されます。[メソッド]に「selectRow」と入力したら、[OK]ボタンをクリックします。
[プロパティの編集]ダイアログで[OK]ボタンをクリックすると、FileService.javaにselectRowメソッドのひな型が生成されています。 コード3 FileService.javaに追加されたselectRowメソッドのひな型
public void selectRow(SelectionEvent selectionEvent) {
// Add event code here...
}
追加されたselectRowメソッドをコード4のように実装します。 コード4 selectRowメソッド
public void selectRow(SelectionEvent selectionEvent) {
// selectionEventからイベントが発生したテーブルのインスタンスを取得
RichTable table = (RichTable) selectionEvent.getComponent();
// tableのインスタンスから選択した行データを取得
FileItem item = (FileItem) table.getSelectedRowData();
System.out.println(item.getName());
setSelectedItem(item);
}
※ oracle.adf.view.rich.component.rich.data.RichTable のインポートが必要です index.jspxを実行し、テーブルの任意のファイル情報（行）をクリックすると、ログ・ウィンドウに選択したファイルの名前が表示されることを確認してください。 ポップアップ・メニューの追加と実装この項では、テーブルに表示されたファイル情報（行）を右クリックした際にポップアップ・メニューを表示し、選択したファイルを削除できるように変更します。 ポップアップ・メニューの追加ADF Faces Rich Clientでは、ポップアップで表示されるメニューやダイアログ、ウィンドウをaf:popupタグ内に記述します。ポップアップ・メニューはaf:menuタグで記述し、それぞれのメニュー項目をaf:commandMenuItemで記述します。 af:popupタグの追加最初に、index.jspxにaf:popupタグを追加します。構造ウィンドウで[af:table]→[Tableファセット]→[contextMenu]を右クリックし、[contextMenuの中に挿入]→[Popup]を選択します。
これによりindex.jspxにaf:popupタグが追加され、エディタ・ウィンドウと構造ウィンドウはそれぞれ図59、図60のように表示されます。
af:menuタグの追加次にaf:popupタグの内部にaf:menuタグを追加します。構造ウィンドウで[af:popup]を右クリックし、コンテキスト・メニューから[Insert inside af:popup]→[Menu]を選択します。
これにより、af:popupタグの中にaf:menuタグが追加されます。 af:commandMenuItemタグの追加最後にaf:menuタグの中にaf:commandMenuItemタグを追加します。構造ウィンドウで追加された[af:menu – menu 1]を右クリックし、コンテキスト・メニューから[af:menu – menu1の中に挿入]→[メニュー・アイテム]を選択します。
これにより、af:commandMenuItemタグがaf:menuタグの中に追加され、プロパティ・インスペクタでは、追加されたaf:commandMenuItemタグの属性が編集できるようになっています。プロパティ・インスペクタの[Common]カテゴリを開き、[Id]および[Text]の値を表12のように編集します。
プロパティ・インスペクタで指定した[Id]の値は、後述する部分ページ・レンダリングの設定の際に使用します。 イベント・リスナーの実装ユーザーがポップアップ・メニューから[削除]を選択すると、その情報がアプリケーション・サーバーに送信されてAction Eventが発生します。ファイルをリストから削除する処理はAction Listenerとして実装し、実装したメソッドをaf:commandMenuItemタグのactionListener属性にJSF EL式で指定します。
「 行の選択」でSelectionEventのリスナーを実装した時と同様に、[プロパティの編集]ダイアログが表示されるので、Managed Bean「file_service」に「deleteFileItem」メソッドを追加します。 コード5 FileService.javaに追加されたdeleteFileItemメソッドのひな型
public void deleteFileItem(ActionEvent actionEvent) {
// Add event code here...
}
追加されたdeletFileItemメソッドをコード6のように実装します。 コード6 deletFileItemメソッド
public void deleteFileItem(ActionEvent actionEvent) {
// 選択されたFileItemオブジェクトを取得
FileItem item = getSelectedItem();
if (item != null) {
// 選択されたオブジェクトをリストから削除
getFileItems().remove(item);
}
}
部分ページ・レンダリングの設定最後に部分ページ・レンダリングの設定をし、ユーザーがポップアップ・メニューの[削除]を選択したら、テーブルに表示されるデータがリフレッシュされるように変更します。
これにより、[プロパティの編集]ダイアログが起動されるので、[使用可能]ツリーから[commandMenuItem – deleteMenuItem]を選択した状態でダイアログ中央の[>]ボタンをクリックします。
[プロパティの編集]ダイアログの[OK]ボタンをクリックしたら部分ページ・レンダリングの設定は完了です。この状態でindex.jspxを実行すると、テーブルのデータを削除できるようになります。 Excelファイルへのエクスポートこのチュートリアルの最後に、テーブルに表示されたデータをエクスポートしたExcelファイルをダウンロードするためのボタンを追加します。 af:tableタグの設定テーブルで表示しているデータをExcelファイルにエクスポートするには、af:tableタグのid属性を指定する必要があります。構造ウィンドウで[af:table]を選択した状態でプロパティ・インスペクタを開き、[Common]カテゴリの[Id]に「fileItemTable」と入力します。
ツールバーの追加この項では、Excelファイルをダウンロードするためのボタンを配置するためのツールバーを追加します。 af:toolbarタグの追加構造ウィンドウで[パネル・コレクション facets]内に表示されている[toolbar]を右クリックし、コンテキスト・メニューから[toolbarの中に挿入]→[ツールバー]を選択します。
これにより、af:panelCollectionタグのtoolbarファセット内にaf:toolbarタグが追加されます。
NOTE af:commandToolbarButtonの追加次に、追加したaf:toolbarタグにaf:commandToolbarButtonタグを追加します。構造ウィンドウで、[af:toolbar]を右クリックし、コンテキスト・メニューから[af:toolbarの中に挿入]→[ツールバー・ボタン]を選択します。
af:exportCollectionActionListenerタグの追加構造ウィンドウまたはエディタ・ウィンドウで、追加したaf: commandToolbarButtonを右クリックし、コンテキスト・メニューから[af: commandToolbarButton - Excelの 中に挿入]→[ADF Faces]→[Export Collection Action Listener]を選択します。
これにより、[Export Collection Action Listenerの挿入]ダイアログが表示されるので、[ExportedId]フィールドの右にある[▼]ボタンをクリックします。
[編集]メニューをクリックすると[プロパティの編集]ダイアログが起動されるので、[使用可能]ツリーから[table – fileItemTable]を選択し、[OK]ボタンをクリックします。
次に[Export Collection Action Listenerの挿入]ダイアログの[Type]ドロップダウン・リストから[excelHTML]を選択し、[OK]ボタンをクリックします。
[Insert Export Collection Action Listener]ウィザードで[終了]ボタンをクリックすると、af:commandToolbarButtonタグの中にaf:exportCollectionActionListenerタグが追加されます。 NOTE
ADF Faces Rich Clientのためのweb.xmlの事前構成ADF Faces Rich Clientを使用したWebアプリケーションを実行するには、ServletやServlet Filterの構成が必要ですが、それらはJDeveloperにより自動的に設定されます。
まとめこの章では、ADF Faces Rich Clientを使用したJSFアプリケーションの開発手順をチュートリアル形式で説明しました。
次の章では、ADF Faces Rich ClientとADF Modelを組み合わせたアプリケーション開発手法を紹介します。 Part1 ｜ Part2
|
Printer View