表形式での複数のモデルの表示
クリスマスイブの今日は，複数のモデルを表で表示するための方法を紹介する。Webアプリケーションのほとんどで必要となる情報の表示方式だ。
StrutsとJSPの組み合わせでWebアプリケーションを作る場合，複数のモデルを表形式で表示するには，<logic:iterate>タグなどを使って，JSPにループの構文を記述しなければならない。よって，JSPにどうしてもロジック的な要素が含まれるために， MVCを完全に行うことができなかった。
Wicketであれば，このような場合もPOHPで記述できる。まずは，POHPから見ていこう。表形式なので，<table>タグを使う。
<table border="1">
<tr>
<th>名前</th>
<th>部署</th>
<th>年齢</th>
</tr>
<tr wicket:id="employeeList">
<td>
<span wicket:id="name">田中 洋一郎</span>
</td>
<td>
<span wicket:id="division">第1開発部</span>
</td>
<td>
<span wicket:id="age">30</span>
</td>
</tr>
</table>
<tr>タグにwicket:id属性を付けている。１つのモデルを表の1行に対応付けているわけだ。つまり，モデルの個数分，<tr>タグが繰り返されることになる。モデルのプロパティは，<td>タグで表される各セル内に，<span>タグのwicket:id属性で指定している。これをそのままWebブラウザで表示させれば，普通に1行の表が表示される。
さて，これに対応するWebPageクラスの内容だが，まずモデルを表すEmployeeクラスは以下のように３つのプロパティを持つ。ここでは，各プロパティはReadOnlyで作っている。
public class Employee implements Serializable {
private String name;
private String division;
private int age;
public Employee() {}
public Employee(String name, String division, int age) {
this.name = name;
this.division = division;
this.age = age;
}
public String getName() { return name; }
public String getDivision() { return division }
public int getAge() { return age; }
}
そして，表示対象のEmployeeモデルを作成するメソッドを以下のような感じで用意する。
public List getEmployeeList() {
List list = new ArrayList();
list.add(new Employee("山田 太郎", "第1開発部", 30));
list.add(new Employee("鈴木 花子", "第2開発部", 25));
list.add(new Employee("田中 愛", "営業部", 23));
return list;
}
さて，Wicketでは，表形式でモデルを表示するために，ListViewコンポーネントが提供されている。WebPageクラスのサブクラスのコンストラクタで，以下のような感じで使用する。
add(new ListView("employeeList", getEmployeeList()) {
protected void populateItem(ListItem item) {
Employee emp = (Employee)item.getModelObject();
item.add(new Label("name", emp.getName()));
item.add(new Label("division", emp.getDivision()));
item.add(new Label("age", String.valueOf(emp.getAge())));
}
});
ListViewクラスのコンストラクタに，IDと表示対象のモデルを格納したコレクションを渡してインスタンスを生成している。表示対象のモデルのコレクションは，先ほど作成したgetEmployeeList()メソッドを呼び出して得ている。IDは，POHPの<tr>タグに付与したwicket:id属性値と同じにする。
モデルのプロパティを取り出してPOHPと対応付ける処理は，ListViewクラスのpopulateItem()メソッドをオーバーライドして，その中で記述する。populateItem()メソッドは，ListViewオブジェクトの生成時に渡したコレクションの中身のモデル数分呼び出される。引数で渡されてくるListItemオブジェクトのgetModelObject()メソッドを使用してモデルオブジェクトを取得する。そして，ListItemクラスのaddメソッドにコンポーネントを渡していくことで，表の各セルを構成していく。上記の例では，Labelコンポーネントを使うことで，モデルのプロパティ値を表示するようにしている。
これを実行した結果，POHPは以下のHTMLに変換されて，Webブラウザに送信される。
<table border="1">
<tr>
<th>名前</th>
<th>部署名</th>
<th>年齢</th>
</tr>
<tr wicket:id="employeeList">
<td>
<span wicket:id="name">山田 太郎</span>
</td>
<td>
<span wicket:id="division">第1開発部</span>
</td>
<td>
<span wicket:id="age">30</span>
</td>
</tr>
<tr wicket:id="employeeList">
<td>
<span wicket:id="name">鈴木 花子</span>
</td>
<td>
<span wicket:id="division">第2開発部</span>
</td>
<td>
<span wicket:id="age">25</span>
</td>
</tr>
<tr wicket:id="employeeList">
<td>
<span wicket:id="name">田中 愛</span>
</td>
<td>
<span wicket:id="division">営業部</span>
</td>
<td>
<span wicket:id="age">23</span>
</td>
</tr>
</table>
デザイン要素はPOHPファイルで如何様にも可能だ。特殊なタグを記述しなくても良いので，非常に見通しが良い。populateItem()メソッドのコールバック機構で，モデルのプロパティをWicketに提供する手順もシンプルである。
- Posted:
- 12.24.2005
- Category:
- Wicket
