前回、Mavenからアプリケーションの起動までを確認しました。
今回はThymeleafテンプレートを利用して、Controllerから呼び出せるようにします。

#Thymeleafとは
XHTMLやHTML5に準拠した形で記述できる.html形式のテンプレートです。
メリットは拡張子がhtmlであるため、途中の状態でもブラウザに直接表示することができ、デザインの確認をすることができます。

##今回作成変更するファイル
pom.xml
spring-mvc.xml
web.xml
Welcomecontroller.java
index.html

最終的なフォルダ構成は以下になります。

SpringとThyemleafの連携

MavenプロジェクトからTymeleafのライブラリやSpring MVCの依存ライブラリを適用します。
pom.xmlの全体は以下になります。

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>
  <groupId>work</groupId>
  <artifactId>app</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>app Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <dependencyManagement>
  <dependencies>

    <dependency>
    	<groupId>io.spring.platform</groupId>
    	<artifactId>platform-bom</artifactId>
    	<version>2.0.5.RELEASE</version>
    	<type>pom</type>
    	<scope>import</scope>
    </dependency>
  
  </dependencies>
  </dependencyManagement>

  <dependencies>
    <!-- ①Spring Frameworkの依存モジュールへの依存関係を解決 -->
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-webmvc</artifactId>
    </dependency>

    <!-- ②Hibernate Validatorを使用する -->
    <dependency>
    	<groupId>org.hibernate</groupId>
    	<artifactId>hibernate-validator</artifactId>
    </dependency>

    <!-- ③thymeleaf-spring4ライブラリを指定 -->
    <dependency>
    	<groupId>org.thymeleaf</groupId>
    	<artifactId>thymeleaf-spring4</artifactId>
    </dependency>
    
    <!-- ④ログ出力の依存ライブラリ -->
    <dependency>
    	<groupId>org.slf4j</groupId>
    	<artifactId>jcl-over-slf4j</artifactId>	
    </dependency>
    
    <dependency>
    	<groupId>ch.qos.logback</groupId>
    	<artifactId>logback-classic</artifactId>
    </dependency>
    
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>

  </dependencies>

  <build>
    <finalName>app</finalName>
    <pluginManagement>
    	<plugins>
    		<plugin>
    			<artifactId>maven-compiler-plugin</artifactId>
    			<configuration>
    				<soruce>1.8</soruce>
    				<target>1.8</target>
    			</configuration>
    		</plugin>
    	</plugins>
    </pluginManagement>
  </build>
</project>

###SpringとThymeleafの設定
今回はxmlファイルを利用してSpringとThyemleafの連携をしていきます。Spring-mvc.xmlファイルをresource/META-INF/springフォルダ配下に設置します。

spring-mvc.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: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.xsd
	   	http://www.springframework.org/schema/context
	   	http://www.springframework.org/schema/context/spring-context.xsd
	   	http://www.springframework.org/schema/mvc
	   	http://www.springframework.org/schema/mvc/spring-mvc.xsd
	   ">

	<context:component-scan base-package="spring.controller" />	   
	   
	
	<!-- ①サーブレットコンテナ内のリソースからテンプレートを読み込む -->
	<bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
		<property name="prefix" value="/WEB-INF/view/" />
		<property name="suffix" value=".html" />
		<property name="templateMode" value="HTML5" />
		<property name="characterEncoding" value="UTF-8" />
	</bean>

	<!-- ②テンプレートとSpring MVCとの連携 -->
	<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
		<property name="templateResolver" ref="templateResolver" />
	</bean>
	
	<!-- ③View解決の仕組みの設定 -->
	<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
		<property name="templateEngine" ref="templateEngine" />
		<property name="characterEncoding" value="UTF-8" />
		<property name="order" value="1" />
	</bean>
	   	   
</beans>

①では、Thymeleafを利用するための設定をしています。
Viewに関する設定を定義しています。

③では、②で設定したテンプレートエンジンの出力データのエンコーディングと優先順位を設定しています。

web.xmlの修正

web.xml

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

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="
 	http://java.sun.com/xml/ns/javaee
 	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd 
 " 
 version="3.0"
 >
 
 <servlet>
 	<servlet-name>app</servlet-name>
 	<!-- DispatcherServletクラスをサーブレットコンテナに登録 -->
	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	
	<!-- 作成したspring-mvc.xmlを読み込む -->
	<init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>
        classpath:/META-INF/spring/spring-mvc.xml
      </param-value>
    </init-param>
	
	<load-on-startup>1</load-on-startup>
	
 </servlet>
 
 <!-- DispatcherServletを使用してリクエストをハンドリングするパターンを指定 -->
 <servlet-mapping>
 	<servlet-name>app</servlet-name>
 	<url-pattern>/</url-pattern>
 </servlet-mapping>
 
 <!-- サーブレットのリスナクラス -->
 <listener>
 	<listener-class>
 		org.springframework.web.context.ContextLoaderListener
 	</listener-class>
 </listener>
 
 <!-- サーブレットコンテナのcontextClassパラメータにAnnotationConfigWebApplicationContext指定 -->
 <context-param>
 	<param-name>contextClass</param-name>
	<param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>
 </context-param>
 
 <filter>
 	<!-- CaracterEncodingFilterをサーブレットコンテナに登録 -->
 	<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>
 
 <!-- CharacterEncodignFilterを適用するURLパターンを指定する -->
 <filter-mapping>
 	<filter-name>CharacterEncodingFilter</filter-name>
 	<url-pattern>/*</url-pattern>
 </filter-mapping>

</web-app>

コントローラを作成

Viewを呼び出すためのコントローラを作成します。
今回は単純に
http://localhost:8080/app/
にアクセスしてメッセージをViewに返すようにします。

WelcomeController.java

package spring.controller;

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

@Controller
public class WelcomeController {
	
	@RequestMapping(value="/", method= {RequestMethod.GET, RequestMethod.POST})
	public String home(Model model) {
		model.addAttribute("hello", "Hello World!!!!");
		return "index";
	}

}

@Controllerアノテーション
Controllerクラスに付与する

@RequestMappingアノテーション
メソッドを呼び出す、リクエストURLを指定する、今回はルートパスが呼ばれたら、index.htmlを呼び出すように設定しています。

Model
遷移先に連携するデータを保持するインターフェース。
「hello」というキーに「Hello World!!!!」の値を格納しています。

###Viewの作成
先程作成したコントローラが呼び出す、Viewを作成します。

index.html

<!DOCTYPE html>
<!-- ① xmln:th -->
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">

	<body>
		<!-- ② メッセージの表示 -->
		<h2 th:text="${hello}">Hello World!!</h2>
	</body>	  
	  
</html>

①ネームスペースとして①以下を付与する。
Thymeleafのマークアップとしてxml:th・・・を付与して、th:属性を利用できるようにする。

② コントローラーで設定した値をキーを使って呼び出す。
今回はただのテキスト表示であるため「th:text」使用する。
キーを使用して呼び出す場合は{}でキー名を囲う必要がある。

上記の準備が整ったら以下にアクセスして
http://localhost:8080/app/

「Hello World!!」ではなく「Hello World!!!!」が表示されれば完了

次回は、フォームを利用して入力した値を表示できるようにします。
また、プロパティファイルを利用して、エラーメッセージを日本語化していきます。