Spring MVC Jspで画面表示
今回は、Jspとモデルをやっていきます。プロジェクトの作成はこちらを参照して下さい。
設定ファイル
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
<display-name>springMVC</display-name>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<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>
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
applicationContext.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd">
<context:component-scan base-package="spring.test.controller" />
<mvc:annotation-driven />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
モデル
まずはデータを格納するためだけのクラスを作成します。GetterとSetterだけ作成します。
package spring.test;
public class UserModel {
String id;
String name;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
コントローラ
package spring.test.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import spring.test.UserModel;
@Controller
@RequestMapping(value = "/login")
public class LoginControler {
// GETやPOSTの引数に@ModelAttribute("UM")をつけない場合、コメントを外す
//
// @ModelAttribute("UM")
// public UserModel init() {
// return new UserModel();
// }
@RequestMapping(method = RequestMethod.GET)
public String loginGet(@ModelAttribute("UM") UserModel userModel) {
userModel.setId("初期値");
return "login";
}
@RequestMapping(method = RequestMethod.POST)
public ModelAndView loginPost(@ModelAttribute("UM") UserModel userModel) {
String id = userModel.getId();
ModelAndView mv = new ModelAndView("login");
if (id.equals("abc")) {
userModel.setName("ABCさん");
mv.addObject("msg", "ログイン成功");
} else {
userModel.setName("");
mv.addObject("msg", "ログイン失敗");
}
return mv;
}
}
呼ばれる順番はGETの場合は、init() -> loginGet() で、POSTの場合はinit() -> loginPost()
になります。
init()で作成したUserModelのオブジェクトに対し、Springが画面の情報で上書きして、loginPost()の引数に入ってきます。
loginGet()、loginPost()でUserModelのオブジェクトに値をセットすると、それが画面に連携されます。
@ModelAttributeアノテーションでJspとモデルの連携をします。
今回の例ではコントローラで"UM"を指定しているので、Jsp側も"UM"でモデルを受け取ります。
ModelAndView のコンストラクタでJspの画面名を指定しています。今までの例ではJspの指定は文字列で行っていましたが、
ModelAndView では画面指定の他に、データの連携もできます。
Jsp
login.jsp という名前で作成します。今回はSpringが用意しているタグを使用します。
<%@page import="spring.test.controller.LoginControler"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<title>ログイン</title>
</head>
<body>
<spring:url value="/login" var="url" htmlEscape="true" />
<form:form action="${url}" method="POST" modelAttribute="UM">
ID:<form:input path="id" />
<form:input path="name" disabled="true" />
<BR />
<input type="submit" value="ログイン" />
<BR />
</form:form>
${msg}
</body>
</html>
<spring:url>
URLを環境に適したURLに変換してくれます。今回はspringMVCというプロジェクトで作成しているのですが、以下のような変換をしてくれます。変換前(Jspファイル) | : | /login |
変換後(ブラウザで表示時のソース) | : | /springMVC/login |
今回の例では url という変数に /login と入れています。
その下の ${url} で変換した値を出力しています。
<form:form>
HtmlのFormタグに変換されます。modelAttributeでコントローラの@ModelAttributeアノテーションと連携します。form:form内のタグでpathにモデルの属性名を指定することにより連携することが出来ます。
<form:input>
<input type="text">に変換されます。modelAttribute="UM"はコントローラではUserModelクラスのオブジェクトをセットしているので、 path="id"を指定することでUserModelオブジェクトの属性:idと連携されます。
実行
ID:にabcと入力してログインボタンを押すと、ログイン成功というメッセージと名称にあたる情報が表示されます。
JspスクリプトレットとJavaScriptでmodelAttributeを使用
JspスクリプトレットやJavaScriptでmodelAttributeを使用するには以下のようにします。
<%@page import="spring.test.controller.LoginControler"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<title>ログイン</title>
<script type="text/javascript">
//JavaScriptで使用
alert("JavaScript:${UM.id}");
</script>
</head>
<body>
<%
spring.test.UserModel user = (spring.test.UserModel)request.getAttribute("UM");
//スクリプトレットで使用
out.print("JSP:" + user.getId());
%>
<spring:url value="/login" var="url" htmlEscape="true" />
<form:form action="${url}" method="POST" modelAttribute="UM">
ID:<form:input path="id" />
<form:input path="name" disabled="true" />
<BR />
<input type="submit" value="ログイン" />
<BR />
</form:form>
${msg}
</body>
</html>
ページのトップへ戻る