O/Rマッピングで郵便番号検索Ajaxアプリ作成！：MyEclipseでAjax＋Javaをやさしく開発（3）（4/4 ページ）

» 2007年04月10日 00時00分公開

[水島和憲，エクリプス]

1行ごとに検索結果の色を変えるには？

　検索した結果を見やすくするために1行ごとに色を変えることにしましょう。

　DWRUtil.addRows()には、オプションとして第4番目の引数を指定できます。通常、addRows()がテーブルを生成するときは、各行については単純な<tr>……</tr>を生成し、各セルについては単純な<td>……</td>を生成しています。第4番目の引数にrowCreator関数、cellCreator関数を指定すれば、生成されるtrタグとtdタグをカスタマイズできます。

　例えば、デフォルトのtrとtdタグを生成する場合、次のようになります。

    DWRUtil.addRows( "results", lst , cellFuncs, {

                rowCreator:function(options) {

                    var tr = document.createElement("tr");

                    return tr;

                },

                cellCreator:function(options) {

                    var td = document.createElement("td");

                    return td;

                }

            });

　引数のoptionsは次の5つのフィールドを持っています。

rowData
1行分の値。第2引数lstの1要素。例えば、郵便番号検索の例では、options.rowData.zipcodeとすると、郵便番号を取り出せる
rowIndex
行のインデックス。第2引数がmapであればキー、配列であれば0を起点としたインデックス番号
rowNum
行番号（最初の行を0としてカウント）
data（cellCreatorのときのみ有効）
セルの値
cellNum（cellCreatorのときのみ有効）
セルの番号（最初のセルを0としてカウント）

　今回は、1行ごとに色を変えるので、奇数行のtrタグのclass属性にoddという値を設定するようにします。trタグだけをカスタマイズするので、rowCreatorだけを以下のように指定します。

    DWRUtil.addRows( "results", lst , cellFuncs, {

                rowCreator:function(options) {

                    var row = document.createElement("tr");

                    if (options.rowNum % 2 == 1) {

                        var klazz 

                            = document.createAttribute("class");

                        klazz.nodeValue = "odd";

                        row.setAttributeNode(klazz);

                    }

                    return row;

                }

            });

　以上で奇数行のclass属性には、oddという値が設定されることになります。

　次は、奇数行と偶数行とで行の背景色が異なるようにCSSを設定します。次の指定により、デフォルトの背景色は白色に、奇数行（trタグのクラスがoddのとき）の背景色はグレーになります。

    tr td {

                background-color: #ffffff;

            }

            tr.odd td {

                background-color: #f5f5f5;

            }

　この設定を加えたstyle.cssがこちらです。

Gmailのように「読み込み中...」メッセージを表示する

Ajaxで陥りやすい間違い

　Ajax Mistakes（日本語の要約：AJAXでやってしまう間違い）に、Ajaxアプリケーションを開発するときに陥りやすい間違いがリストアップされています。その中の1つに、「クリックしてもビジュアルな合図が何もない」というのがあります。

Gmailではどうしているのか？

　良い例としてGmailを例に挙げています。Gmailを利用されている方はご存じでしょうが、Gmailでは何らかの処理を行うと、右上角に赤く「読み込み中...」というボックスが表示されます。これは、裏で非同期にページの読み込みが実行されていることを通知してくれる機能です。このような機能を付けるべきだということですが、どのように実装すればよいのでしょうか。

図13　Gmailの「読み込み中...」

DWRではどう実現するか？

　DDWRならば、簡単に実装できます。Gmailと同様のことを実現する機能が、ユーティリティとして提供されています。DWRUtil.useLoadingMessage()を一度呼び出すだけです。引数に「読み込み中...」などの文字列を与えれば、日本語のメッセージを表示できます

　一度だけ呼び出せばよいので、bodyタグのonloadでinit()を呼び出すようにします。

<body onload="init();">

　init()の中で次のように DWRUtil.useLoadingMessage()を呼びます。

    function init() {

                DWRUtil.useLoadingMessage("読み込み中");

            }

　たったこれだけで、Gmailのような赤い読み込み中のボックスが表示されるようになります。

　以上で、すべての実装が終わりました。前回と同様に、MyEclipseからTomcatを起動し、動作確認してみてください。

次回はDWRのリバースAjax機能について

　MyEclipseとDWRを使用した郵便番号検索アプリケーションの開発方法について簡単に説明しました。

　このようにMyEclipseを使用すれば、面倒なHibernateの設定も少しの操作でできてしまいます。DWRを使用すればサーバ側のオブジェクトの非同期メソッド呼び出しも、JavaScriptとJavaの間のデータ変換も、面倒なことはほとんど引き受けてくれます。また、便利なユーティリティも用意されているので、凝ったJavaScriptを記述しなくても済みます。

　さて、次回は、DWRのリバースAjax機能について解説します。通常Ajaxアプリケーションでは、クライアントのJavaScriptからサーバ側のメソッドを呼び出しますが、リバースAjaxは名前のとおり、サーバ側のJavaからクライアント側のJavaScriptを実行する機能です。この機能を利用することにより、チャットのようなプッシュ型のアプリケーションを簡単に作成できます。