DWRでリッチなWebページを作る！(2) - Webページからサーバのオブジェクトを呼び出す

前回はDWRの紹介、インストール手順などを紹介しました。2回目の今回は、Webページからサーバ側のJavaオブジェクトを呼び出す簡単なサンプルを作ってみます。

今回作成するサンプルは、テキストボックスは入力された名前の文字列の前に「Hello!」を付加して表示するというものです。

ではまず、サーバ側のJavaクラスのサンプルをみてみます。

「Hello.java」

package myajax;

public class Hello {

      public String hello(String name)
      {
            return "Hello!" + name;
      }
}

このように引数の文字列に「Hello!」を付加して返却するという単純なメソッドを持つだけのサンプルなコードです。DWRでサーバ側のオブジェクトとして作成するクラスには、メソッドのアクセス修飾子をpublicにすること以外は特別なことをする必要ありません。次に「dwr.xml」にこのクラスを記述してDWRのサーバ側のクラスとして登録します。

「dwr.xml」

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

<dwr>
  <allow>

    <create creator="new" javascript="Hello">
      <param name="class" value="myajax.Hello"/>
    </create>

  </allow>
</dwr>

createタグのjavascript属性にはJavaScriptからオブジェクトを呼び出す際に変数名として使用する値を指定します。そしてparamタグでサーバ側オブジェクトのクラスを指定しています。ここまででサーバ側の作業は完了です。ブラウザに前回でも参照した
「http://localhost:8080/<コンテキストルート>/dwr/index.html」
を入力するとHelloというリンクが表示されます。そしてリンクをクリックするとhello()をコールできるデバック用のWebページが表示されます。これでサーバ側の準備は完了です。次にクライアント側のhtmlを作成します。

「hello.html」

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='dwr/engine.js'> </script>
<script type='text/javascript' src='dwr/util.js'> </script>
<script type='text/javascript' src='dwr/interface/Hello.js'> </script>
<script type="text/javascript"></script>
<title>DWRでリッチなWebページを作る！(2) - Webページからサーバのオブジェクトを呼び出す</title>
</head>
<body>
      名前 <input type="text" id="username"/>
      <input type="button" value="送信" onClick="update()">
      <p>
      <span id="reply" style="background-color: #FFFF66;"></span>
</body>
</html>

クライアント側のhtmlでは、「engine.js」、「util.js」、「Hello.js」という3つのJavaScriptファイルをインクルードしています。これらのJSファイルはDWPServletが出力しているもので、実際ファイルを探しても見つかりません。「engine.js」ファイルは、DWRが動作する上で必須のファイルです。「util.js」はHTMLの要素から値を取得したりできる便利な関数をもっています。「Hello.js」には、サーバ側のJavaオブジェクト「Hello」を呼び出すために直接的に使用する関数が定義されています。

それでは送信ボタンがクリックされた時に呼ばれるupdate()関数の中身をみてみます。(1)の処理でutil.jsの関数「dwr.util.getValue()」を使用してテキストボックスに入力された値を取得しています。
そして(2)の処理で、サーバ側のJavaオブジェクト「Hello」のhello()メソッドをコールしています。1つ目の引数はhello()に渡す引数です。2つ目の引数はサーバから結果が返された時に、呼ばれるコールバック関数を指定しています。
コールバック関数の中ではutil.jsの関数「dwr.util.setValue()」を使用して、<span>タグに結果を設定しています。((3)の処理)

さて次回は、サーバ側のJavaオブジェクトから取得する戻り値とページから渡す引数の型について、DWRの動作を検証します。

(2007年11月25日)

ちょっと一休み. Javaキーワード並び替えゲーム