6月5日

フォームの基本

テキスト 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 も変更するように書いているが、ここで動作を確認しておく。

      spring1

      画面を確認してから 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";
      	}
      }
      
      

      spring2

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

コメントを残す

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