DWRでリッチなWebページを作る！(6) - リモートクラスから配列を取得しリストに表示する

DWRシリーズ6回目の今回は、リモートクラスから配列を戻り値として受け取りそれを「セレクトボックス」や「リスト」に表示するサンプルを紹介します。

以下が今回作成するWebアプリケーションの画面です。

今回のアプリケーションはIDと名前から構成されるユーザ情報を扱います。画面上①のリストはユーザのIDのリストで、リモートオブジェクトからStringの配列として取得したものでリストを生成しています。②のセレクトボックスはvalueにユーザのID、テキストにユーザの名前を持っています。これはIDと名前を持つUserBeanクラスの配列から生成しています。③には②のセレクトボックスで選択された項目のvalue(すなわち、ユーザのID)を表示しています。では、UserBeanのソースからみていきます。

「UserBean.java」

package myajax.arrayconvert;

public class UserBean {

      private String id = null;
      private String name = null;

      public UserBean(){}

      public UserBean(String id,String name)
      {
            this.id = id;
            this.name = name;
      }

      //IDのゲッター
      public String getId()
      {
            return id;
      }

      //IDのセッター
      public void setId(String id)
      {
            this.id =id;
      }

      //名前のゲッター
      public String getName()
      {
            return name;
      }
      //名前のセッター
      public void setName(String name)
      {
            this.name = name;
      }
}

IDと名前をプロパティとして持つJavaBeanのクラスです。次に処理を行うリモートクラスのソースです。

「UserList.java」

package myajax.arrayconvert;

import java.util.HashMap;
import java.util.Map;

public class UserList {

      //ユーザ情報を保持するMap
      private Map userMap = null;

      public UserList()
      {
            userMap = new HashMap();

            //ユーザ情報を保持するUserBeanクラスのインスタンス
            //を生成し、IDをキーにしてMapに格納する
            userMap.put("ichiro",new UserBean("ichiro","Java一郎"));
            userMap.put("jiro",new UserBean("jiro","Java二郎"));
            userMap.put("saburo",new UserBean("saburo","Java三郎"));

      }
      //MapのキーをStringの配列として返す
      public String[] getIds()
      {
            String[] ids = new String[userMap.size()];
            userMap.keySet().toArray(ids);

            return ids;
      }
      //MapのバリューをUserBeanの配列として返す
      public UserBean[] getUserList()
      {
            UserBean[] users = new UserBean[userMap.size()];
            userMap.values().toArray(users);

            return users;
      }
}

コンストラクタでそれぞれIDと名前に「ichiro,Java一郎」、「jiro,Java二郎」、「saburo,Java三郎」という値を持つ3つのUserBeanのインスタンスを、IDをキーにしてMapに登録しています。そして、そのMapからキーのコレクションを取得してStringの配列として返却する「getIds()」と、バリューのコレクションを取得してUserBeanの配列として返却する「getUserList()」を定義しています。そして、「dwr.xml」に以下を追加します。

「dwr.xml」

配列の要素としてJavaBeanを使用する場合も、convertタグの記述が必要です。最後にHTMLのソースです。

「userlist.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/UserList.js'> </script>
<script type="text/javascript"></script>
<title>DWRでリッチなWebページを作る！(6) - リモートクラスから配列を取得しリストに表示する</title>
</head>
<body>

<script type="text/javascript"></script>

<ul id="id_list"></ul> ・・・(2)
<p>

<script type="text/javascript"></script>

<select id="user_list" onChange='updateText()'> ・・・(4)
      <option value="">---
</select>

<p>

選択された項目のID：<span id="selectedText"></span>

</body>
</html>

(1)では、リモートクラスのgetIds()から取得したIDの配列を、dwr.utilのaddOptions()関数を使用して(2)のulタグに設定しています。(3)では、UserBeanの配列を(4)のセレクトボックスに設定しています。セレクトボックスの場合は、addOptions()の第2引数にJavaBeanの配列、第3引数にoptionタグのvalueに設定するJavaBeanのプロパティ、第4引数にはoptionタグのテキストに設定するJavaBeanのプロパティを指定します。ここでは、valueにはUserBeanのidプロパティを、テキストにはnameプロパティを設定しています。

今回のサンプルで紹介しましたように、DWRでは配列を簡単に扱うための便利な仕組みが提供されています。Javaの配列とJavaScriptの配列の変換はArrayConverterというクラスにより行われており、DWRで変換可能な型については、全て変換が可能になっています。

(2007年11月29日)

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