読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Spring MVCでテキストボックスとセレクトボックスに入れた値を取得して表示するサンプル

<スポンサーリンク>

プロジェクトの作成

New→Spring Project→Simple Spring web mavenでプロジェクトを作成する。
このとき、Mavenがインストールされてなかったらライブラリの依存が解決できなくてエラーが出るので注意が必要。

右クリック→Maven→Update Projectでプロジェクト全体をUpdateすることができる。

セレクトボックスとテキストボックスを試してみる

実際に作る画面はこんな感じ。
f:id:sho322:20140114000409j:plain

陳腐だけど、サンプルなので・・・。
で、こういうのをSpring MVCの仕組みを使って作るためにはどうするか。
まずは一番簡単なフォームのモデルを作ってみる。

ちょっと正確な理解はまだ追いついていないけれど、フォームオブジェクトみたいなイメージだと思う。。。

package springapp;

public class FormModel {
	private String nameInput;
	private String interests;

	public String getNameInput() {
		return nameInput;
	}

	public void setNameInput(String nameInput) {
		this.nameInput = nameInput;
	}

	public String getInterests() {
		return interests;
	}

	public void setInterests(String interests) {
		this.interests = interests;
	}
	
}

ここにあるように、nameInputと、interestsというプロパティを持つ。
命名規則とか関係ないけど、これは色々と調べながら時間かけてやったから。あんまり気にしないでください。

で、Controllerの部分。

package springapp;

import java.util.HashMap;
import java.util.Map;

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 SampleController {
	
	@RequestMapping(value = "/sample", method = RequestMethod.GET)
	public String firstSamplePage(Model model) {
		FormModel fm = new FormModel();
		fm.setNameInput("名前を書いてね");
		Map<String, String> interests = new HashMap<String, String>();
		interests.put("game", "GAME");
		interests.put("programming", "PROGRAMMING");
		interests.put("soccer", "SOCCER");
		interests.put("tennis", "TENNIS");
		model.addAttribute("formModel", fm);
		model.addAttribute("interestList", interests);
		model.addAttribute("message", "名前を入力してください");
		return "showMessage";
	}
	
	@RequestMapping(value = "/sample", method = RequestMethod.POST)
	public String formSample(@ModelAttribute FormModel fm, Model model) {
		String interest = fm.getInterests();
		model.addAttribute("message", "your name: " + fm.getNameInput() + " and your interest:" + interest);
		return "showMessage";
	}
	
}

ここのところで、select optionに入るvalueをどんどん突っ込んでいっている。
上の画面でも、セレクトボックスにここで定義した値が入っていることが確認できるはずだ。

Map<String, String> interests = new HashMap<String, String>();
interests.put("game", "GAME");
interests.put("programming", "PROGRAMMING");
interests.put("soccer", "SOCCER");
interests.put("tennis", "TENNIS");

でも、こういうのはたぶん、本当はModelAndViewというので実装したほうがいいはず。
それは今度の記事で使ってみる。今回はとりあえずこのまま進む。

で、viewの部分。

<!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>
		<h2>${message}</h2>
		<form:form modelAttribute="formModel">
			<form:input path="nameInput" />
			<form:select path="interests">
				<form:options items="${interestList}"/>
			</form:select>
					
			<input type="submit">
		</form:form>
	</body>
</html>

formはこの辺で定義している。

<form:form modelAttribute="formModel">
	<form:input path="nameInput" />
	<form:select path="interests">
		<form:options items="${interestList}"/>
	</form:select>
			
	<input type="submit">
</form:form>

modelAttributeというのは、フォームの値を管理するために用意しているオブジェクトの名前のこと。
これは、Controllerで

model.addAttribute("formModel", fm);

と書いた、「formModel」と対応している。
で、

<form:input path="nameInput" />

のpathというのは、この項目に関連付けるフィールドを表す。
ここに入力した値はModelのプロパティに関連付けられて、値が入力されるので、
Controllerの

fm.getNameInput()

で取り出して使うことができる。

で、実際にブラウザで見てみた結果は・・・
f:id:sho322:20140114000409j:plain
送信をクリックすると・・・
f:id:sho322:20140114000426j:plain
こんな感じで送信した結果を取得して表示することができた。

参考

以下の本家のドキュメントは非常に参考になる。
http://docs.spring.io/spring/docs/3.2.x/spring-framework-reference/html/view.html

この本も、ものすごく丁寧でわかりやすい。
素晴らしい本だ。