8月24日

復習として新規にWebアプリを作成する

入力フォームを用意(URLは、 http://localhost:8080/Rating/form )

「○○」さんの「○○」度は? [判定]

判定ボタンを押すと、

「○○さんの ○○度は、○○%です。」

と表示する。

プロジェクト名: Rating
テンプレート: Simple Spring Web Maven

プロジェクトを作成したら、以下を実行。

  1. [Maven]-[プロジェクトの更新]
  2. [実行]-[maven install]

文字化け対策

文字化け対策のために、web.xml を編集。
最後の <web-app> タグの手前に以下の内容を追加。
src/main/webapp/WEB-INF/web.xml

	<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>
</web-app>

パッケージの設定

使用するパッケージ名を mvc-config.xml に設定。
src/main/webapp/WEB-INF/mvc-config.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

    <context:component-scan base-package="jp.abc"/>


    <mvc:annotation-driven />

	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
	        <!-- Example: a logical view name of 'showMessage' is mapped to '/WEB-INF/jsp/showMessage.jsp' -->
	        <property name="prefix" value="/WEB-INF/view/"/>
	        <property name="suffix" value=".jsp"/>
	</bean>

</beans>

ルートコンテキストの動作確認

サーバータブの Tomcat7 サーバーに Ratingプロジェクトを追加して Tomcat7 サーバーを再起動。
http://localhost:8080/Rating/ にアクセスすれば、click to enter が表示される。

FormModelの作成

javaリソースの src/java/main を右クリックし、クラスを新規作成する。
パッケージ名: jp.abc
クラス名; FormModel

FormModel.java

package jp.abc;

public class FormModel {
	private String name;
	private String title;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
}

ビューテンプレートの作成

form.jsp を以下のように作成する。

<!DOCTYPE html>

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
	<head>
		<meta charset="utf-8">
		<title>なんとか度判定</title>
	</head>
	<body>
		<h1>なんとか度判定</h1>
		<div style="font-size: 24pt;">${result}</div>
		<h2>${message}</h2>
		<form:form modelAttribute="formModel">
		<form:input path="name"/>さんの<form:input path="title"/>度
		<br />
		<input type="submit" value="判定" />
		</form:form>
	</body>
</html>

コントローラを作成する

買い物メモのコントローラを作成する。
テキストでは MyAppController を再利用しているが、ここでは新しく RatingController を作成する。
※開発する際に、名前は重要!

Javaリソースの src/java/main の下にある jp.abc パッケージを右クリックして [新規]-[クラス] を選択。

名前: RatingController

まずは、GET メソッドに対応する部分だけ入力する。

RatingController.java

package jp.abc;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class RatingController {

	@RequestMapping(value = "/form", method = RequestMethod.GET)
	public String form(Model model) {
        model.addAttribute("message", "名前と判定したいなにかを入力してください。");
        FormModel fm = new FormModel();
        model.addAttribute("formModel", fm);
		return "form";
	}

}

http://localhost:8080/Rating/form にアクセスする。
なんとか度判定の画面が表示されればOK。

次に POST メソッドに対応する部分を実装する。

RatingController.java

	@RequestMapping(value = "/form", method = RequestMethod.POST)
	public String rating(@Valid @ModelAttribute FormModel formModel, BindingResult result, Model model) {
            model.addAttribute("message", "名前と判定したいなにかを入力してください。");
       	    String s = formModel.getName() + " さんの "
       			 + formModel.getTitle() + "度は、";
       	    float r = (Math.abs(s.hashCode()) % 1001) / 10;
       	    s = s + r + "% です。";
       	    model.addAttribute("result", s);
       	    FormModel fm = new FormModel();
            model.addAttribute("formModel", fm);
	    return "form";
	}

入力チェックの追加

バリデーション用ライブラリをロードする

パッケージエクスプローラで、Memoプロジェクトの一番下にあるファイル pom.xml を開く。
エディタの下にある「pom.xml」タブを選択する。
ファイルの最後の の手前に以下の内容を追加する。

pom.xml

        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <version>1.1.0.Final</version>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>5.0.1.Final</version>
        </dependency>
    </dependencies>
</project>

保存すると、自動的にプロジェクトがビルドされ、ライブラリをダウンロードしてくれる。

JSPの変更

form.jsp にエラーメッセージを表示するためのタグを追加する。

form.jsp

		<h1>なんとか度判定</h1>
		<div style="font-size: 24pt;">${result}</div>
		<h2>${message}</h2>
		<form:form modelAttribute="formModel">
		<form:errors path="*" cssStyle="color:red" element="div" />
		<form:input path="name"/>さんの<form:input path="title"/>度
		<br />
		<input type="submit" value="判定" />
		</form:form>

コントローラの修正

入力チェックのための@Validアノテーションと、結果を通知するための BindingResult引数を追加する。

RatingController.java

	@RequestMapping(value = "/form", method = RequestMethod.POST)
	public String rating(@Valid @ModelAttribute FormModel formModel, BindingResult result, Model model) {
        model.addAttribute("message", "名前と判定したいなにかを入力してください。");
        if (result.hasErrors()) {
            model.addAttribute("title", "Sample [ERROR]");
            model.addAttribute("message", "値を再チェックしてください");
        } else {
        	String s = formModel.getName() + " さんの "
        			 + formModel.getTitle() + "度は、";
        	float r = (Math.abs(s.hashCode()) % 1001) / 10;
        	s = s + r + "% です。";
        	model.addAttribute("result", s);
        	FormModel fm = new FormModel();
            model.addAttribute("formModel", fm);
        }
		return "form";
	}

FormModelの変更

FormModelに入力チェック方法を示すアノテーションを追加する。

FormModel.java

	@NotEmpty
	private String name;
	@NotEmpty
	private String title;

エラーメッセージをカスタマイズする

@NotEmpty などのアノテーションに message 引数を指定する。

FormModel.java

	@NotEmpty(message = "名前は必須です")
	private String name;
	@NotEmpty(message = "判定内容は必須です")
	private String title;

コメントを残す

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