DWRでAjaxプログラムをかんたん作成!

2008年9月17日(水)
清野 克行

デバッグ画面での動作確認とAjaxクライアントの作成

以上の準備が終わったら、Tomcatコンテナの再起動を行います。再起動により配置済みJavaBeansがクライアントからアクセスできるようになりますが、その前にDWRのデバッグ画面でJavaBeans単独の動作確認を行います。

図3はDWRのデバッグ画面ですが、この画面はweb.xmlの指定で自動生成され、アプリケーションディレクトリ/dwrからのアクセスで表示されます。図3では、このサンプルでアクセスするrevGridメソッドの動作確認をしています。

revGridはクライアントからテーブル名が送られ、対応するグリッドデータをクライアントにリプライ送信するメソッドですが、図ではテーブル名「jinko」を入力し「Execute」ボタンをクリックして、グリッドデータが表示された状態を表しています。

DWRデバッグ画面でサーバー側メソッドの動作確認をしてから、Ajaxクライアントのプログラムを作成します。

順番としては、クライアント側から開発しても問題はないのですが、サーバー側の動作を確認してから、Ajaxクライアントを開発する方が効率的です。クライアントサーバー型の開発では、処理が正常に行われない場合、クライアントとサーバーのどちらに問題があるのかを突き止めるのに苦労することがありますが、DWRでサーバー側の動作が保証されていれば、Ajaxクライアント側でのプログラミングに専念することができます。それではここから、DWRを使用したAjaxクライアントのプログラムを見ていくことにします。

DWRを使用する場合は、必ずAjaxライブラリをインポートする必要があります。リスト4(13624.zip/1.04 KB)の8行目のengine.jsはDWRクライアントとサーバー間の通信で使用されるライブラリで必須の指定項目です。

9行目のutil.jsは、受信データの表示などで使用されるユーティリティーライブラリで、必須の指定項目ではありませんが、指定しておいた方が良いでしょう。もっともこのライブラリに含まれる関数にはほかのライブラリ、例えばPrototype.jsなどでサポートされる機能と共通のものも多く、必ず必要というものではありません。

spread.jsは、リモートオブジェクトのSpreadシートにアクセスするためのものでDWRが動的に作成しています。ここではActiveWidgets(aw.js)と筆者自作のライブラリ(funcs.js)も使用されるので記述に追加しています(6~7行)。

サーバーアクセスとグリッド表示

以上のライブラリをインポートすれば、DWRでサーバーアクセスができるようになります。

このプログラムでは表示するテーブル名を入力後、「参照」ボタンをクリックすることでrevGrid関数が実行されます。revGridでは最初に入力されたテーブル名を取得していますが、ここで使用されているのがutil.jsライブラリ関数のdwr.util.getValueです。

リスト4の14行目では、以下の用にdwr.util.getValueは引数にID値を取り、ID値で指定された入力フィールドの値(テーブル名)を返します。

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }var table_name = dwr.util.getValue("table_name");{/syntaxhighlighter}

ところで、この関数はPrototype.jsの$F関数とまったく同じ機能で右辺に$Fを使えば$F("table_name");となります。むしろこの方がシンプルな記述ですが、ここではDWRの紹介ということでutil.jsライブラリの方を使用しています。

テーブル名を変数table_nameにセットした後、次の行で実行しているのが、DWRを使用したリモート呼び出しです。

リスト4の15行目のようにDWRを使用することによって、クラス名.メソッド名の書式で、Javaクラスのメソッド呼び出しに類似した形式でリモート呼び出しが可能になります。

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }spread.revGrid(table_name, revGridExe);{/syntaxhighlighter}

このDWRでのリモート呼び出し構文は、以下のような形式となり、クラス名ではdwr.xmlのjavascript属性で指定した名前を使用し、メソッド名にはBeansクラス内のアクセスするメソッド名をそのまま指定します。引数はBeansのメソッドで定義された内容に対応して指定し、その後にコールバック関数名を指定します。上の例では2番目の引数revGridExeがコールバック関数名になっています。

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }クラス名.メソッド名(引数、…,コールバック関数);{/syntaxhighlighter}

第2引数ではコールバック関数名指定に変えて、匿名関数での処理記述を直接行うようにすることもできますが、リスト4のようにレスポンス受信後の処理記述が長くなる場合は関数名指定の方が処理内容を明確にでき、良いでしょう。

revGridのリモート呼び出しに対してサーバーからのレスポンスが返ってくると、コールバック関数revGridExeが自動的に呼び出され実行されます。revGridExeの引数にはレスポンスデータのrespがセットされており、このrespを使って関数内処理が行われます。

revGridExeでは最初にサーバーから受信したテーブルヘッダー情報からグリッドの行数と列数を取り出します。JavaBeansのrevGridメソッドでは、レコードアイテムごとに「」、レコード単位で「」を区切り文字として使っており、.split関数で受信データを配列にセットしながら処理をしています。

リスト4の20~21行では、先頭の受信レコードにあるグリッドの行数と列数を取り出し、それぞれ変数rowsとcolsにセットしています。

次の22~32行ではrows行とcols列の要素数からなる配列に対して、各行と列に対応するデータを受信データからセットしています。この部分はtable_dtlテーブルのデータが使用されますが、最初のレコードアイテムは行、2番目が列、最後のアイテムがその行列の表示データになっています。

以上の処理で表示データが配列cdatにセットされた後は、「第1回:ActiveWidgetsでAjax!」で紹介したActiveWidgetsでのデータ表示手順と同じです。

37~38行で表示するグリッドのサイズを指定した後、コメントにある各パラメータを指定してグリッドを表示します。ただし「第1回:ActiveWidgetsでAjax!」のグリッド表示では、グリッドオブジェクトのrefresh()メソッドで行っていましたが、今回の表示では47行目のように.innerHTMLを使用して表示しています。グリッドのような比較的重いコントロールを表示する場合、refresh()メソッドでは表示されないケースがありこのようにします。

今回はDWRを使用し、サーバーから受信したデータでグリッドを表示する手順を紹介しました。次回はコンボボックスで指定されたグリッドを表示し、入力されたデータをDBに登録、更新する手順を解説します。また行と列の合計計算機能なども紹介していきます。

有限会社サイバースペース
慶應義塾大学工学部電気科卒。日本IBM、日本HPなどにおいて、製造装置業を中心とした業務系/基幹業務系システムのSE/マーケティングや、3階層C/Sアーキテクチャによる社内業務システム開発などに携わる。現在は、Ajax/Web 2.0関連のセミナー講師/コンサルティング、書籍執筆などを行っている。情報処理学会会員。http://www.at21.net/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています