Flex」(以降、Flex)を用いたRIA開発の基礎を解説します。4」に名称変更しています。期間限定の無料版をダウンロードして使えますいっそのことデータはサーバから1回で全部ダウンロード今回は、いままでのWebアプリケーションでは比較的難しかった「大量データ表示アプリケーション」をFlex+Javaで作成したいと思います。いままでのWebアプリケーションではデータベースを検索した結果が何十件もある場合は「次の10件」などの機能を画面に付加し一度に画面に表示されるデータ量を制限していました。そのため、データの閲覧のために何度もサーバアクセスが発生し、その度に画面がリフレッシュされ非常にパフォーマンスが悪かったり、サーバパフォーマンスの向上にコストを掛ける必要がありました。今回作成するアプリケーションは、「いっそのことデータはサーバから1回で全部ダウンロードしてしまおう」というコンセプトのアプリケーションです。必要なデータをすべてクライアント側で保持し、検索や絞り込みなどの業務をサーバアクセスなしに行えるようにします。データ量が少なくては意味がありませんので、1万件データを表示するユーザー管理アプリケーションを作成します。作成するアプリケーションの完成イメージ今回作成するユーザー管理アプリケーションのイメージは以下のようになります。ユーザー管理アプリケーションこのアプリケーションはサーバから1万件のデータを取得し、その後クライアント側で(通信を行わずに)データの絞り込みを行うアプリケーションです。コンボボックスやテキスト入力によるデータの絞り込み、列ヘッダによるソート、行選択時の詳細情報の表示は瞬時に行われます。データの絞り込みこのサンプルアプリケーションに編集機能部分を実装すれば、あっという間に「マスターメンテンナンスアプリケーション」になります。ちなみに今回用意した1万件データは「なんちゃって個人情報」でデータを作成しています。アプリケーションの全体像と処理の流れアプリケーションは、前回記事「オブジェクトで通信するAMFとS2JDBCによるDB接続」のアプリケーションをコピーして、今回新規に作成する「jp.co.atmarkit.user」パッケージ以下のクラスをFlex側、Java側双方で追加しています。設定ファイル的には「src/main/resources/convention.dicon」に上記パッケージを追加しているだけです。kwoutアプリケーションの全体像は前回の図と同じ感じです。「Quiz」と書いてあるものが「User」に変わっていると思ってください。1万件データ取得アプリケーションを作成する準備まず、クイズアプリケーションをこちらからダウンロードしてください。このクイズアプリケーションは前回までに利用していた開発環境で動作します。このアプリケーションには連載第2回「「S2BlazeDSを用いたFlex+Javaアプリの【いろは】」で取り上げた「HelloWorld!」アプリケーション+前回第4回のクイズアプリケーションもそのまま入れてあります。次に、上記ZIPファイルをインポートします。Builderの[ファイル]メニューから[インポート]→[Flexプロジェクト]を選択し、ZIPファイルをインポートします。この段階では、アプリケーションはTomcatにデプロイされていないので、「AtmarkitTenThousand」プロジェクトを右クリックし、[Tomcatプロジェクト]→[コンテキスト定義を更新]をクリックします。次に筆者の環境依存の設定を修正します。jdbc.diconファイルの書き換えjdbc.diconでのデータベースのパスを、以下のように書き換えてください。ファイルはsrc/main/resourecsにあり、その40行目に書き換える設定があります。Vistaでのパスの書き方なので、ほかのOSの環境の方は適宜書き換えてください。Flexサーバのルートフォルダの書き換えAtmarkitTenThousandプロジェクトを右クリックし、Flexサーバの設定画面を開いて、ルートフォルダの場所を修正してください。このプロジェクトはFlexプロジェクトとJavaプロジェクトが一体化しているので、「AtmarkitQuizAppBlazeDS」プロジェクトの場所を指定します。Builder上部の猫マークでTomcatを起動してから、[実行]→[AtmarkitUserAppのデバッグ]をクリックし、ユーザー管理アプリケーションを実行してください。高機能なデータグリッドを使うUserForm.mxml画面を担当するMXMLですが、以下の構成になっています。RemoteObjectの設定ロジッククラスへの参照データ取得ボタンデータフィルター用ComboBoxとTextInput(*1)データ表示用AdvancedDataGrid(*2)ユーザー詳細表示用フォーム(*3)編集内容送信ボタン(処理は未実装です)データバインド式で実装*1と*3で「データバインド式」(中括弧)を用いて値を参照しています。*3ではデータグリッド上の選択行が変化したごとにユーザー詳細表示を更新する機能をデータバインド式のみで実装しています。3から新登場したAdvancedDataGridを用いています。3ヘルプより)がある高機能DataGridです。Standardでは、グリッド部に透かしが入ります)。今回のアプリケーションでも複数列によるソートができますので、実際にアプリケーションを実行してソートしてみてください。AdvancedDataGridへのデータの表示は、AdvancedDataGridタグでdataProviderにサーバから取得したUserエンティティのコレクションを指定し、各列を指定するタグ(AdvancedDataGridColumnタグ)でUserエンティティのどの要素を表示するかをdataField属性で指定しています。次ページでは、データ文字列を加工してフィルタ処理も行うActionScriptやJava側での処理などについて解説します。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。