フォームの基本
テキスト p.178からの「フォームの基本」に従ってWebアプリを変更する。
FormModelクラスを作成
- プロジェクトエクスプローラでJavaリソースの下の「jp.abc」を右クリックし[新規]-[クラス]を選択。
- クラス名に「FormModel」を入力し「完了」をクリック。
- インスタンス変数を追加。「private String input1;」
- Eclipseメニューから[ソース]-[getterおよびsetterの生成]でinput1をチェックし「OK」する。
MyAppControllerを変更
テキストp.184のコードに変更する。
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 MyAppController {
@RequestMapping(value = "/helo", method = RequestMethod.GET)
public String helo(Model model) {
FormModel fm = new FormModel();
fm.setInput1("ここに書く");
model.addAttribute("formModel", fm);
model.addAttribute("message", "何か書いてください");
return "showMessage";
}
@RequestMapping(value = "/helo", method = RequestMethod.POST)
public String form(@ModelAttribute FormModel fm, Model model) {
model.addAttribute("message", "you typed: " + fm.getInput1());
return "showMessage";
}
}
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>
<form:form modelAttribute="formModel">
<form:input path="input1"/>
<input type="submit" />
</form:form>
</body>
</html>
文字化けを修正
パッケージエクスプローラで「src/main/webapp/WEB-INF/web.xml」を開き、以下のコードを最後の </web-app> の前に追加する。
<filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
フォームを使いこなす
テキスト関連タグを利用する
FormModelにインスタンス変数とアクセサメソッドを追加する。
- FormModelに private String pass1; と private String area1; を追加する。
- Eclipseメニューから[ソース]-[getterおよびsetterの生成]でinput1をチェックし「OK」する。
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>
テキストでは MyAppController も変更するように書いているが、ここで動作を確認しておく。
画面を確認してから MyAppController を変更する。
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 MyAppController {
@RequestMapping(value = "/helo", method = RequestMethod.GET)
public String helo(Model model) {
model.addAttribute("title", "ModelAndView sample");
model.addAttribute("message", "これはModelAndViewのテストです。");
model.addAttribute("formModel", new FormModel());
return "showMessage";
}
@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";
}
}
FormModelにチェックボックス用のメンバを追加する。
package jp.abc;
public class FormModel {
private String input1;
private String pass1;
private String area1;
private boolean check1;
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;
}
}
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><input type="submit" /></td></tr>
</form:form>
</table>
</body>
</html>
MyAppController も変更する。
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 MyAppController {
@RequestMapping(value = "/helo", method = RequestMethod.GET)
public String helo(Model model) {
FormModel fm = new FormModel();
fm.setCheck1(true);
model.addAttribute("title", "ModelAndView sample");
model.addAttribute("message", "これはModelAndViewのテストです。");
model.addAttribute("formModel", fm);
return "showMessage";
}
@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><li> checked:" + fm.isCheck1()
+ "</li></ul>";
model.addAttribute("title", "Sample");
model.addAttribute("message", res);
model.addAttribute("formModel", fm);
model.addAttribute("checkItems", getList());
return "showMessage";
}
}