6月9日

フォームを使いこなす（テキストp.202）

FormModelにパスワード用のフィールドとテキストエリアのフィールドを用意し、getter/setterを生成する。

package jp.abc;

public class FormModel {
	private String input1;
	private String pass1;
	private String area1;

	public String getInput1() {
		return input1;
	}

	public void setInput1(String input1) {
		this.input1 = input1;
	}

	public String getPass1() {
		return pass1;
	}

	public void setPass1(String pass1) {
		this.pass1 = pass1;
	}

	public String getArea1() {
		return area1;
	}

	public void setArea1(String area1) {
		this.area1 = area1;
	}
}

showMessage.jspにパスワードとテキストエリアのタグを追加する。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
	<head>
		<meta charset="utf-8">
		<title>Welcome</title>
	</head>
	<body>
		<h2>${message}</h2>
		<table>
		<form:form modelAttribute="formModel">
			<tr>
				<td><form:input path="input1" /></td>
			</tr>
			<tr>
				<td><form:password path="pass1" showPassword="on" /></td>
			</tr>
			<tr>
				<td><form:textarea path="area1" cols="40" rows="3"/></td>
			</tr>
			<tr>
				<td><input type="submit"></td>
			</tr>
		</form:form>
		</table>
	</body>
</html>

コントローラも変更する。テキストのリスト4-3のとおり。

	@RequestMapping(value = "/helo", method = RequestMethod.POST)
	public String form(@ModelAttribute FormModel fm, Model model) {
		String res = "<ul><li>" + fm.getInput1()
				   + "</li><li>" + fm.getPass1()
				   + "</li><li>" + fm.getArea1()
				   + "</li></ul>";
		model.addAttribute("title", "Sample");
		model.addAttribute("message", res);
		return "showMessage";
	}

チェックボックスの利用
チェックボックスを利用するために新しくJSPファイルを作成する。
src/main/webapp/WEB-INF/view フォルダに、checkbox.jsp を作成する。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
	<head>
		<meta charset="utf-8">
		<title>${title}</title>
	</head>
	<body>
		<h1>${title}</h1>
		<p>${message}</p>
		<table>
		<form:form modelAttribute="checkboxModel">
			<tr>
				<td><form:checkbox path="check1" label="checkbox 1"/></td>
			</tr>
			<tr><td><input type="submit" /></td></tr>
		</form:form>
		</table>
	</body>
</html>

新規にFormModelに対応するクラスを作成する。
ファイル名は CheckBoxForm.java とする。

package jp.abc;

public class CheckBoxModel {
	private boolean check1;

	public boolean isCheck1() {
		return check1;
	}

	public void setCheck1(boolean check1) {
		this.check1 = check1;
	}
}

今回は、MyAppControllerを変更せずに、練習のために新しいコントローラのクラスを作成してみる。
クラス名を MyFormController.java とする。

package jp.abc;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MyFormContoller {

	@RequestMapping(value = "/checkbox", method = RequestMethod.GET)
	public String checkbox(Model model) {
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "CheckBoxのサンプルです。");
		CheckBoxModel cm = new CheckBoxModel();
		cm.setCheck1(true);
		model.addAttribute("checkboxModel", cm);
		return "checkbox";
	}
}

次はPOSTメソッドに対応するためのメソッドを追加する。

	@RequestMapping(value = "/checkbox", method = RequestMethod.POST)
	public String checkboxForm(@ModelAttribute CheckBoxModel cm, Model model) {
		String res = "checked: " + cm.isCheck1();
		model.addAttribute("title", "Sample");
		model.addAttribute("message", res);
		model.addAttribute("checkboxModel", cm);
		return "checkbox";
	}

複数のチェックボックスをまとめて作る form:checkboxes タグ

最初に複数のチェックボックスを扱うために CheckBoxModel にメンバーを追加する。
メンバーを追加したら、getter/setter を生成する。

package jp.abc;

public class CheckBoxModel {
	private boolean check1;
	private String[] checkes;

	public boolean isCheck1() {
		return check1;
	}

	public void setCheck1(boolean check1) {
		this.check1 = check1;
	}

	public String[] getCheckes() {
		return checkes;
	}

	public void setCheckes(String[] checkes) {
		this.checkes = checkes;
	}
}

checkbox.jsp に複数のチェックボックスを表示するための要素を追加する。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
	<head>
		<meta charset="utf-8">
		<title>${title}</title>
	</head>
	<body>
		<h1>${title}</h1>
		<p>${message}</p>
		<table>
		<form:form modelAttribute="checkboxModel">
			<tr>
				<td><form:checkbox path="check1" label="checkbox 1"/></td>
			</tr>
			<tr>
				<td><form:checkboxes items="${checkItems}"
							path="checks" delimiter=" " />
			</tr>
			<tr><td><input type="submit" /></td></tr>
		</form:form>
		</table>
	</body>
</html>

form:checkboxes タグの items属性でcheckItemsという名前のコレクションを要求しているので、コントローラ側でこれを用意するための処理を追加する。

package jp.abc;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MyFormContoller {

	private List<String> getList() {
		List<String> list = new ArrayList<String>();
		list.add("Mac OS X");
		list.add("Windows");
		list.add("Linux");
		return list;
	}

	@RequestMapping(value = "/checkbox", method = RequestMethod.GET)
	public String checkbox(Model model) {
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "CheckBoxのサンプルです。");
		CheckBoxModel cm = new CheckBoxModel();
		cm.setCheck1(true);
		model.addAttribute("checkboxModel", cm);
		model.addAttribute("checkItems", getList());
		return "checkbox";
	}

	@RequestMapping(value = "/checkbox", method = RequestMethod.POST)
	public String checkboxForm(@ModelAttribute CheckBoxModel cm, Model model) {
		String res = "checked: " + cm.isCheck1();
		model.addAttribute("title", "Sample");
		model.addAttribute("message", res);
		model.addAttribute("checkboxModel", cm);
		return "checkbox";
	}
}

現状では「送信」するとエラーになるので、POSTメソッドを受け取る checkboxform() メソッドも修正する。

	@RequestMapping(value = "/checkbox", method = RequestMethod.POST)
	public String checkboxForm(@ModelAttribute CheckBoxModel cm, Model model) {
		String res = "checked: " + cm.isCheck1();
		String[] selected = cm.getChecks();
		String msg = "<ol>";
		for (String s : selected) {
			msg += "<li>" + s + "</li>";
		}
		msg += "</ol>";
		model.addAttribute("title", "Sample");
		model.addAttribute("message", res);
		model.addAttribute("message1", msg);
		model.addAttribute("checkboxModel", cm);
		model.addAttribute("checkItems", getList());
		return "checkbox";
	}

ラベルと値を設定する（テキストp.213)
まずListDataModelクラスを作成する。

package jp.abc;

public class ListDataModel {
	private String label;
	private String data;

	public ListDataModel(String label, String data) {
		this.label = label;
		this.data = data;
	}
	public String getLabel() {
		return label;
	}
	public void setLabel(String label) {
		this.label = label;
	}
	public String getData() {
		return data;
	}
	public void setData(String data) {
		this.data = data;
	}
}

JSPでListDataModelを使ったコレクションを表示できるように要素を追加する。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
	<head>
		<meta charset="utf-8">
		<title>${title}</title>
	</head>
	<body>
		<h1>${title}</h1>
		<p>${message}</p>
		<p>${message1}</p>
		<table>
		<form:form modelAttribute="checkboxModel">
			<tr>
				<td><form:checkbox path="check1" label="checkbox 1"/></td>
			</tr>
			<tr>
				<td><form:checkboxes items="${checkItems}"
							path="checks" delimiter=" " />
			</tr>
			<tr>
				<td><form:checkboxes items="${listData}"
							itemLabel="label" itemValue="data"
							path="checks" delimiter=" " />
			</tr>
			<tr><td><input type="submit" /></td></tr>
		</form:form>
		</table>
	</body>
</html>

コントローラで、ListDataModelのコレクションを用意してlistDataの名前で属性を追加する。

package jp.abc;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MyFormContoller {

	private List<String> getList() {
		List<String> list = new ArrayList<String>();
		list.add("Mac OS X");
		list.add("Windows");
		list.add("Linux");
		return list;
	}

	@RequestMapping(value = "/checkbox", method = RequestMethod.GET)
	public String checkbox(Model model) {
		List<ListDataModel> list = new ArrayList<ListDataModel>();
		list.add(new ListDataModel("いち", "One"));
		list.add(new ListDataModel("にぃ", "Two"));
		list.add(new ListDataModel("さん", "Three"));
		list.add(new ListDataModel("しぃ", "Four"));
		list.add(new ListDataModel("ごぉ", "Five"));
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "CheckBoxのサンプルです。");
		CheckBoxModel cm = new CheckBoxModel();
		cm.setCheck1(true);
		model.addAttribute("checkboxModel", cm);
		model.addAttribute("checkItems", getList());
		model.addAttribute("listData", list);
		return "checkbox";
	}

	@RequestMapping(value = "/checkbox", method = RequestMethod.POST)
	public String checkboxForm(@ModelAttribute CheckBoxModel cm, Model model) {
		String res = "checked: " + cm.isCheck1();
		String[] selected = cm.getChecks();
		String msg = "<ol>";
		for (String s : selected) {
			msg += "<li>" + s + "</li>";
		}
		msg += "</ol>";
		model.addAttribute("title", "Sample");
		model.addAttribute("message", res);
		model.addAttribute("message1", msg);
		model.addAttribute("checkboxModel", cm);
		model.addAttribute("checkItems", getList());
		return "checkbox";
	}
}

JSPで両方のデータともにchecksのpathでアクセスしているためにふたつのコレクションが混ざってしまっている。
分離するために、CheckBoxModelに新しいメンバーを追加する。

package jp.abc;

public class CheckBoxModel {
	private boolean check1;
	private String[] checks;
	private String[] data;

	public boolean isCheck1() {
		return check1;
	}

	public void setCheck1(boolean check1) {
		this.check1 = check1;
	}

	public String[] getChecks() {
		return checks;
	}

	public void setChecks(String[] checks) {
		this.checks = checks;
	}

	public String[] getData() {
		return data;
	}

	public void setData(String[] data) {
		this.data = data;
	}
}

JSPで新しく用意したフィールドにアクセスする。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
	<head>
		<meta charset="utf-8">
		<title>${title}</title>
	</head>
	<body>
		<h1>${title}</h1>
		<p>${message}</p>
		<p>${message1}</p>
		<table>
		<form:form modelAttribute="checkboxModel">
			<tr>
				<td><form:checkbox path="check1" label="checkbox 1"/></td>
			</tr>
			<tr>
				<td><form:checkboxes items="${checkItems}"
							path="checks" delimiter=" " />
			</tr>
			<tr>
				<td><form:checkboxes items="${listData}"
							itemLabel="label" itemValue="data"
							path="data" delimiter=" " />
			</tr>
			<tr><td><input type="submit" /></td></tr>
		</form:form>
		</table>
	</body>
</html>

コントローラでもデータを分離する。

	@RequestMapping(value = "/checkbox", method = RequestMethod.POST)
	public String checkboxForm(@ModelAttribute CheckBoxModel cm, Model model) {
		String res = "checked: " + cm.isCheck1();
		String[] selected = cm.getChecks();
		List<ListDataModel> list = new ArrayList<ListDataModel>();
		String msg = "<ol>";
		for (String s : selected) {
			msg += "<li>" + s + "</li>";
		}
		msg += "</ol><ol>";

		selected = cm.getData();
		for (String s : selected) {
			list.add(new ListDataModel(s, s));
			msg += "<li>" + s + "</li>";
		}
		msg += "</ol>";
		model.addAttribute("title", "Sample");
		model.addAttribute("message", res);
		model.addAttribute("message1", msg);
		model.addAttribute("checkboxModel", cm);
		model.addAttribute("checkItems", getList());
		model.addAttribute("listData", list);
		return "checkbox";
	}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です