トッカンソフトウェア

Spring MVC 入力項目

今回は、Jspで各入力項目をやります。
プロジェクトの作成はこちらを参照して下さい。

UserModel.java 
				
package spring.test;

public class UserModel {

	private String txt;
	private String area;
	private String sel1;
	private String sel2;
	private boolean chk1;
	private String[] chk2;
	private String rdo1;
	private String rdo2;
	private String pass;
	private String hdn;

	public String toString() {
		StringBuilder stb = new StringBuilder();

		stb.append("txt:" + txt + System.lineSeparator());
		stb.append("area:" + area + System.lineSeparator());
		stb.append("sel1:" + sel1 + System.lineSeparator());
		stb.append("sel2:" + sel2 + System.lineSeparator());
		stb.append("chk1:" + chk1 + System.lineSeparator());
		stb.append("chk2:" + chk2.length + System.lineSeparator());
		stb.append("rdo1:" + rdo1 + System.lineSeparator());
		stb.append("rdo2:" + rdo2 + System.lineSeparator());
		stb.append("pass:" + pass + System.lineSeparator());
		stb.append("hdn:" + hdn + System.lineSeparator());

		return stb.toString();
	}

	public String getTxt() {
		return txt;
	}

	public void setTxt(String txt) {
		this.txt = txt;
	}

	public String getArea() {
		return area;
	}

	public void setArea(String area) {
		this.area = area;
	}

	public String getSel1() {
		return sel1;
	}

	public void setSel1(String sel1) {
		this.sel1 = sel1;
	}

	public String getSel2() {
		return sel2;
	}

	public void setSel2(String sel2) {
		this.sel2 = sel2;
	}

	public String[] getChk2() {
		return chk2;
	}

	public void setChk2(String[] chk2) {
		this.chk2 = chk2;
	}

	public String getRdo1() {
		return rdo1;
	}

	public void setRdo1(String rdo1) {
		this.rdo1 = rdo1;
	}

	public String getPass() {
		return pass;
	}

	public void setPass(String pass) {
		this.pass = pass;
	}

	public String getHdn() {
		return hdn;
	}

	public void setHdn(String hdn) {
		this.hdn = hdn;
	}

	public boolean isChk1() {
		return chk1;
	}

	public void setChk1(boolean chk1) {
		this.chk1 = chk1;
	}

	public String getRdo2() {
		return rdo2;
	}

	public void setRdo2(String rdo2) {
		this.rdo2 = rdo2;
	}

}
LoginControler.java 
				
package spring.test.controller;

import java.util.LinkedHashMap;

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;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import spring.test.UserModel;

@Controller
public class LoginControler {

	@ModelAttribute("UM")
	public UserModel init() {
		UserModel um = new UserModel();
		um.setTxt("test");
		um.setRdo1("r1");
		um.setRdo2("B");

		return um;
	}

	public void setMap(Model model) {
		LinkedHashMap<String, String> map = new LinkedHashMap<>();
		map.put("A", "その１");
		map.put("B", "その２");
		model.addAttribute("map", map);
	}

	@RequestMapping(value = "/login", method = RequestMethod.GET)
	public String loginGet(Model model) {
		init();
		setMap(model);
		return "login";
	}

	@RequestMapping(value = "/login", method = RequestMethod.POST)
	public String loginPost(@ModelAttribute("UM") UserModel userModel, Model model,
			RedirectAttributes redirectAttributes) {

		System.out.println(userModel.toString());

		setMap(model);
		return "login";
	}
}
login.jsp 
				
<%@page import="spring.test.UserModel"%>
<%@page import="spring.test.controller.LoginControler"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<title>ログイン</title>

<script type="text/javascript">
	//テキスト読み込み時に実行
	document.addEventListener("DOMContentLoaded", function() {

		// form:select で複数選択した場合、選択されなかったため手動で選択。
		// ※Modelで配列、リストにすればできた。「form:selectの追記」を参照
		var ary = [];

<%
	UserModel model = (UserModel) request.getAttribute("UM");
	if (model != null && model.getSel2() != null) {
		String[] strs = model.getSel2().split(",");
		for (String str : strs) {
			out.println("ary.push('" + str + "');");
		}
	}
%>
		
		var obj = document.getElementById("sel2");

		for (var i = 0; i < obj.length; i++) {
			if (ary.indexOf(obj.options[i].value) >= 0) {
				obj.options[i].selected = true;
			}
		}
	}, false);
</script>
</head>
<body>
	<spring:url value="/login" var="url" htmlEscape="true" />
	<form:form action="${url}" method="POST" modelAttribute="UM">

		<form:input path="txt" />
		<hr />
		<form:textarea path="area" />
		<hr />
		<form:select path="sel1" items="${map}" />
		<hr />
		<form:select path="sel2" multiple="true">
			<form:option value="op1">オプション</form:option>
			<form:options items="${map}" />
		</form:select>
		<hr />
		<form:checkbox path="chk1" label="チェック" />
		<hr />
		<form:checkboxes path="chk2" items="${map}" />
		<hr />
		<form:radiobutton path="rdo1" label="ラジオ１" value="r1" />
		<form:radiobutton path="rdo1" label="ラジオ２" value="r2" />
		<hr />
		<form:radiobuttons path="rdo2" items="${map}" />
		<hr />
		<form:password path="pass" />
		<hr />
		<form:hidden path="hdn" />
		<BR />
		<input type="submit" value="テスト" />
		<BR />
		<BR />
	</form:form>
</body>
</html>

実行イメージ

コンソール出力

				
txt:test
area:aaa
bb
sel1:B
sel2:op1,B
chk1:true
chk2:2
rdo1:r2
rdo2:A
pass:xxxx
hdn:

Jspから作成されたHtml

(整形してます) 
				
<html>
<head>
<title>ログイン</title>

<script type="text/javascript">
	//テキスト読み込み時に実行
	document.addEventListener("DOMContentLoaded", function() {
		var ary = [];

		var obj = document.getElementById("sel2");

		for (var i = 0; i < obj.length; i++) {
			if (ary.indexOf(obj.options[i].value) >= 0) {
				obj.options[i].selected = true;
			}
		}
	}, false);
</script>
</head>
<body>

	<form id="UM"
		action="/springMVC/login;jsessionid=004CFF0B3C51540AA02FE085AC4F556D"
		method="POST">

		<input id="txt" name="txt" type="text" value="test" />
		<hr />
		<textarea id="area" name="area"></textarea>
		<hr />
		<select id="sel1" name="sel1"><option value="A">その１</option>
			<option value="B">その２</option></select>
		<hr />
		<select id="sel2" name="sel2" multiple="multiple">
			<option value="op1">オプション</option>
			<option value="A">その１</option>
			<option value="B">その２</option>
		</select><input type="hidden" name="_sel2" value="1" />
		<hr />
		<input id="chk11" name="chk1" type="checkbox" value="true" /><label
			for="chk11">チェック</label><input type="hidden" name="_chk1" value="on" />
		<hr />
		<span><input id="chk21" name="chk2" type="checkbox" value="A" /><label
			for="chk21">その１</label></span><span><input id="chk22" name="chk2"
			type="checkbox" value="B" /><label for="chk22">その２</label></span><input
			type="hidden" name="_chk2" value="on" />
		<hr />
		<input id="rdo11" name="rdo1" type="radio" value="r1"
			checked="checked" /><label for="rdo11">ラジオ１</label> <input id="rdo12"
			name="rdo1" type="radio" value="r2" /><label for="rdo12">ラジオ２</label>
		<hr />
		<span><input id="rdo21" name="rdo2" type="radio" value="A" /><label
			for="rdo21">その１</label></span><span><input id="rdo22" name="rdo2"
			type="radio" value="B" checked="checked" /><label for="rdo22">その２</label></span>
		<hr />
		<input id="pass" name="pass" type="password" value="" />
		<hr />
		<input id="hdn" name="hdn" type="hidden" value="" />
		<BR />
		<input type="submit" value="テスト" />
		<BR />
		<BR />
	</form>
</body>
</html>

checkboxes、radiobuttonsを縦に並べる場合

checkboxes、radiobuttonsを縦に並べる場合、delimiterで<br>を指定します。 
				
		<hr />
		<form:checkboxes path="chk2" items="${map}" delimiter="<br>" />
		<hr />
		<form:radiobuttons path="rdo2" items="${map}" delimiter="<br>" />
		<hr />

実行イメージ

form:selectの追記

上のサンプルではform:selectをmultiにしたときにJavaScriptを使う必要があったのですが、
Modelを配列、リストにしたら、JavaScriptなしで動作しました。ついでにリスト候補をModelにしてみました。

リストに表示するモデル 
				
package spring.test;

public class DropModel {
	private String key;
	private String value;

	public DropModel(String k, String v) {
		key = k;
		value = v;
	}

	public String getKey() {
		return key;
	}

	public void setKey(String key) {
		this.key = key;
	}

	public String getValue() {
		return value;
	}

	public void setValue(String value) {
		this.value = value;
	}

}

UserModel はSELECT以外の項目は削除し、配列、リスト形式に変更。 
				
package spring.test;

import java.util.Arrays;
import java.util.List;

public class UserModel {

	private String[] sel1;
	private List<String> sel2;

	public String toString() {
		StringBuilder stb = new StringBuilder();

		stb.append("sel1:" + Arrays.toString(sel1) + System.lineSeparator());
		stb.append("sel2:" + sel2 + System.lineSeparator());

		return stb.toString();
	}

	public String[] getSel1() {
		return sel1;
	}

	public void setSel1(String[] sel1) {
		this.sel1 = sel1;
	}

	public List<String> getSel2() {
		return sel2;
	}

	public void setSel2(List<String> sel2) {
		this.sel2 = sel2;
	}

}
LoginControler は選択候補にDropModelを使用するように変更。 


package spring.test.controller;

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;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import spring.test.DropModel;
import spring.test.UserModel;

@Controller
public class LoginControler {

	@ModelAttribute("UM")
	public UserModel init() {
		UserModel um = new UserModel();

		return um;
	}

	public void setModel(Model model) {
		List<DropModel> ary = new ArrayList<>();
		ary.add(new DropModel("A", "その１"));
		ary.add(new DropModel("B", "その２"));

		model.addAttribute("ary", ary);
	}

	@RequestMapping(value = "/login", method = RequestMethod.GET)
	public String loginGet(Model model) {
		init();
		setModel(model);
		return "login";
	}

	@RequestMapping(value = "/login", method = RequestMethod.POST)
	public String loginPost(@ModelAttribute("UM") UserModel userModel, Model model,
			RedirectAttributes redirectAttributes) {

		System.out.println(userModel.toString());

		setModel(model);
		return "login";
	}
}

login.jspはSELECT以外の項目を削除しました。SELECTにmultipleを付けなくてもモデルが配列、リストであればmultipleになりました。 

<%@page import="spring.test.UserModel"%>
<%@page import="spring.test.controller.LoginControler"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<title>ログイン</title>

</head>
<body>
	<spring:url value="/login" var="url" htmlEscape="true" />
	<form:form action="${url}" method="POST" modelAttribute="UM">


		<form:select path="sel1" items="${ary}" itemLabel="value" itemValue="key"  />
		<hr />
		<form:select path="sel2" >
			<form:option value="op1">オプション</form:option>
			<form:options items="${ary}" itemLabel="value" itemValue="key" />
		</form:select>
		
		<BR />
		<input type="submit" value="テスト" />
		<BR />
		<BR />
	</form:form>
</body>
</html>

実行イメージ



ページのトップへ戻る
�ェア All Rights Reserved.