6月9日

フォームの基本(続き)

複数のチェックボックスをまとめて作る

FormModel.java

package jp.abc;

public class FormModel {
	private String input1;
	private String pass1;
	private String area1;
	private boolean check1;
	private String[] checks;

	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;
	}

	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;
	}
}

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><form:checkbox path="check1" label="checkbox 1"/></td></tr>
			<tr><td><form:checkboxes items="${checkItems}" path="checks" delimiter=" "/></td></tr>
			<tr><td><input type="submit" /></td></tr>
		</form:form>
		</table>
	</body>
</html>

MyAppController.java

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 MyAppController {
	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 = "/helo", method = RequestMethod.GET)
	public String helo(Model model) {
		FormModel fm = new FormModel();
		fm.setCheck1(true);
		fm.setChecks(new String[]{"Windows"});
		model.addAttribute("title", "ModelAndView sample");
		model.addAttribute("message", "これはModelAndViewのテストです。");
		model.addAttribute("formModel", fm);
		model.addAttribute("checkItems", getList());
		return "showMessage";
	}

	@RequestMapping(value = "/helo", method = RequestMethod.POST)
	public String form(@ModelAttribute FormModel fm, Model model) {
		String[] selected = fm.getChecks();
		String res = "<ul><li>" + fm.getInput1()
				   + "</li><li>" + fm.getPass1()
				   + "</li><li>" + fm.getArea1()
				   + "</li><li> checked:" + fm.isCheck1()
				   + "</li></ul>"
				   + "<ol>";
		for (String sel : selected) {
			res += "<li>" + sel + "</li>";
		}
		res += "</ol>";
		model.addAttribute("title", "Sample");
		model.addAttribute("message", res);
		model.addAttribute("formModel", fm);
		model.addAttribute("checkItems", getList());
		return "showMessage";
	}
}

spring3

ラジオボタンを使用する

テキストとは異なる方法で実装する。

新しくRadioFormModelクラスを作る。

  1. プロジェクトエクスプローラで SpringMyApp→Javaリソース→src/main/java→jp.abcを右クリック
  2. [新規]-[クラス]を選択する
  3. クラス名を RadioFormModel にして完了
  4. RadioFormModelクラスに private String radio1; を追加
  5. [ソース]-[getterおよびsetterの生成]でgetter/setterを生成
package jp.abc;

public class RadioFormModel {
	private String radio1;

	public String getRadio1() {
		return radio1;
	}

	public void setRadio1(String radio1) {
		this.radio1 = radio1;
	}
}

radiosample.jsp を作成する。

  1. プロジェクトエクスプローラで src→main→webapp→WEB-INF→view を右クリック
  2. [新規]-[JSP File]を選択
  3. ファイル名は radiosample.jsp で「完了」

radiosample.jsp

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

<html>
	<head>
		<meta charset="utf-8">
		<title>Welcome</title>
	</head>

<body>
	<h1>${title}</h1>
	<p>${message}</p>
	<table>
	<form:form modelAttribute="formModel">
		<tr><td>
		<form:radiobutton path="radio1" name="radio1"
			label="男性" value="male"/>
		<form:radiobutton path="radio1" name="radio1"
			label="女性" value="female"/>
		</td></tr>
		<tr><td><input type="submit" /></td></tr>
	</form:form>
	</table>
</body>

</html>

MyRadioController を作成する。

  1. プロジェクトエクスプローラで SpringMyApp→Javaリソース→src/main/java→jp.abcを右クリック
  2. [新規]-[クラス]を選択する
  3. クラス名を MyRadioController にして完了
  4. [ソース]-[getterおよびsetterの生成]でgetter/setterを生成
package jp.abc;

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 MyRadioController {

	@RequestMapping(value = "/radio", method = RequestMethod.GET)
	public String radio(Model model) {
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "Radiobuttonのサンプルです。");
		RadioFormModel fm = new RadioFormModel();
		fm.setRadio1("male");
		model.addAttribute("formModel", fm);
		return "radiosample";
	}

	@RequestMapping(value = "/radio", method = RequestMethod.POST)
	public String form(@ModelAttribute RadioFormModel fm, Model model) {
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "selected: " + fm.getRadio1());
		model.addAttribute("formModel", fm);
		return "radiosample";

	}
}

ラジオボタンをまとめて作成する

radiosample.jsp

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

<html>
	<head>
		<meta charset="utf-8">
		<title>Welcome</title>
	</head>

<body>
	<h1>${title}</h1>
	<p>${message}</p>
	<table>
	<form:form modelAttribute="formModel">
		<tr><td>
		<form:radiobutton path="radio1" name="radio1"
			label="男性" value="male"/>
		<form:radiobutton path="radio1" name="radio1"
			label="女性" value="female"/>
		</td></tr>
		<tr><td><form:radiobuttons path="radio2" name="radio2"
			items="${radioList}" delimiter=" " /></td></tr>
		<tr><td><input type="submit" /></td></tr>
	</form:form>
	</table>
</body>

</html>

RadioFormModel.java に radio2 を追加する。

package jp.abc;

public class RadioFormModel {
	private String radio1;
	private String radio2;

	public String getRadio1() {
		return radio1;
	}

	public void setRadio1(String radio1) {
		this.radio1 = radio1;
	}

	public String getRadio2() {
		return radio2;
	}

	public void setRadio2(String radio2) {
		this.radio2 = radio2;
	}
}

MyRadioController.java

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 MyRadioController {

	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 = "/radio", method = RequestMethod.GET)
	public String radio(Model model) {
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "Radiobuttonのサンプルです。");
		RadioFormModel fm = new RadioFormModel();
		fm.setRadio1("male");
		fm.setRadio2("Linux");
		model.addAttribute("formModel", fm);
		model.addAttribute("radioList", getList());
		return "radiosample";
	}

	@RequestMapping(value = "/radio", method = RequestMethod.POST)
	public String form(@ModelAttribute RadioFormModel fm, Model model) {
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "selected: " + fm.getRadio1() + ", " + fm.getRadio2());
		model.addAttribute("formModel", fm);
		model.addAttribute("radioList", getList());
		return "radiosample";
	}
}

select による選択リストを使用する

ラジオボタンを参考にして、選択リストを実装する。
URL は、http://localhost:8080/SpringMyApp/select
・selectsample.jsp
・SelectFormModel.java
・MySelectController.java

selectsample.jsp

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

<html>
	<head>
		<meta charset="utf-8">
		<title>Welcome</title>
	</head>

<body>
	<h1>${title}</h1>
	<p>${message}</p>
	<table>
	<form:form modelAttribute="formModel">
		<tr><td>
		<tr><td><form:select path="select1" name="select1"
			items="${selectList}" delimiter=" " /></td></tr>
		<tr><td><input type="submit" /></td></tr>
	</form:form>
	</table>
</body>

</html>

SelectFormModel.java

package jp.abc;

public class SelectFormModel {
	private String select1;

	public String getSelect1() {
		return select1;
	}

	public void setSelect1(String select1) {
		this.select1 = select1;
	}
}

MySelectController.java

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 MySelectController {

	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 = "/select", method = RequestMethod.GET)
	public String select(Model model) {
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "selectのサンプルです。");
		SelectFormModel fm = new SelectFormModel();
		fm.setSelect1("Linux");
		model.addAttribute("formModel", fm);
		model.addAttribute("selectList", getList());
		return "selectsample";
	}

	@RequestMapping(value = "/select", method = RequestMethod.POST)
	public String form(@ModelAttribute SelectFormModel fm, Model model) {
		model.addAttribute("title", "Sample");
		model.addAttribute("message", "selected: " + fm.getSelect1());
		model.addAttribute("formModel", fm);
		model.addAttribute("selectList", getList());
		return "selectsample";
	}

}

コメントを残す

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