繰り返し出力 ~ 一覧表示

2018年2月18日

この記事は最初の投稿日から18年経過しています。内容が古い可能性があります。

Webアプリケーションで重要な出力方法の1つに「繰り返し出力」があります。

なにかの一覧表示などで結構頻繁に使いますので、Wicket でそれをやってみます。

以下、このままでは使えませんが、ToDo 一覧みたいなのを出力するという想定で作ってみます。

ToDoListPage.html

一覧表示を行うHTMLです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>やること</title>
</head>
<body>
<div wicket:id="todoList">
<input type="checkbox" wicket:id="chk" />
<span wicket:id="todo">やること</span>:
<span wicket:id="comment">コメント</span>
</div>
</body>
</html>
<div wicket:id="todoList">~</div>

の間が繰り返しの出力項目になります。

ToDoListPage.java

package todo;
import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.CheckBox;
import wicket.markup.html.list.ListItem;
import wicket.markup.html.list.ListView;
import wicket.model.Model;
public class ToDoListPage extends WebPage {
private ToDoListData toDoListData = new ToDoListData();
public ToDoListPage() {
add(new ListView("todoList", toDoListData.findAll()) {
protected void populateItem(ListItem item) {
ToDo todo = (ToDo) item.getModelObject();
item.add(new CheckBox("chk", new Model(new Boolean(todo.isChk()))));
item.add(new Label("todo", todo.getTodo()));
item.add(new Label("comment", todo.getComment()));
}
});
}
}

ListView の匿名サブクラスを add しています。繰り返しデータは、populateItem() を使って追加しています。

この、ListView はセッションに格納され、それに付随するリストデータも同様にセッションに格納されてしまうため、大きなデータを扱う時には向かないとのこと。

動的にデータをロードしたりする仕組みを用意しなければならないようですが、それはまた次の機会に。

ToDoListData.java

複数の繰り返し項目を管理するクラスです。

ここでは、全件取得するための findAll()、しかもダミーデータしかありませんが、本当ならば DB から取得したり条件指定したりできなければならないということでしょう。

package todo;
import java.util.ArrayList;
import java.util.List;
public class ToDoListData {
private List<ToDo> toDoList = new ArrayList<ToDo>();
public ToDoListData() {
}
public List<ToDo> getToDoList() {
return toDoList;
}
public void setToDoList(List<ToDo> todoList) {
this.toDoList = todoList;
}
public List findAll() {
// ダミーデータ
ToDo todo = new ToDo();
todo.setChk(true);
todo.setTodo("お洗濯");
todo.setComment("洗濯機で洗濯をする。");
toDoList.add(todo);
todo = new ToDo();
todo.setChk(false);
todo.setTodo("お皿洗い");
todo.setComment("食洗機がこわれてるから手洗いで。");
toDoList.add(todo);
return toDoList;
}
}

ToDo.java

繰り返し項目の1つのデータを表すクラスです。

package todo;
public class ToDo {
private boolean chk;
private String todo;
private String comment;
public boolean isChk() {
return chk;
}
public void setChk(boolean chk) {
this.chk = chk;
}
public String getTodo() {
return todo;
}
public void setTodo(String todo) {
this.todo = todo;
}
public String getComment() {
return comment;
}
public void setComment(String comment) {
this.comment = comment;
}
}

ToDoApplication.java

そして、Application クラス。

package todo;
import wicket.protocol.http.WebApplication;
public class ToDoApplication extends WebApplication {
public Class getHomePage() {
return ToDoListPage.class;
}
}

これで動かすと、

■お洗濯: 洗濯機で洗濯をする。
□お皿洗い: 食洗機がこわれてるから手洗いで。

という形で一覧が表示されます。

先ほど、「ListView はセッションに保持される」と書きましたが、それも含め、何がセッションに保持されているのか、今のところよくわかっていません。

そこがもうちょっとわかっていないと、実際に使う時にははまりそうです。

Dev,Wicket

Posted by toshyon