フォームの基本
テキスト 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"; } }