Spring MVCのサンプルプロジェクトでViewの描画をthymeleafテンプレートエンジンによるものに変更する

EclipseにインストールしたSpring Test SuiteでSpringMVCプロジェクトを作成する」では、STSを使用してSpringMVCのサンプルプロジェクトを作成した。

サンプルプロジェクトのViewはJSPによるものだが、今回はViewのデータバインド部分にテンプレートエンジンであるthymeleafを導入する。

1.pom.xmlにthymeleafを追加する
thymeleafのページからMaven infoを参照して追加する。

<dependency>
 <groupId>org.thymeleaf</groupId>
 <artifactId>thymeleaf-spring3</artifactId>
 <version>2.1.2.RELEASE</version>
</dependency>

2.servlet-context.xmlでSpringテンプレートエンジンをthymeleafに設定する
Tutorial: Thymeleaf + Spring 3」を参照して設定する。
beanタグになっているので、beans:beanには手で書き換えた・・・。

<!-- Resolves views selected for rendering by @Controllers to .jsp resources
		in the /WEB-INF/views directory -->
	<!-- <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" /> <beans:property
		name="suffix" value=".jsp" /> </beans:bean> -->
	<beans:bean id="templateResolver"
		class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
		<beans:property name="prefix" value="/WEB-INF/templates/" />
		<beans:property name="suffix" value=".html" />
		<beans:property name="templateMode" value="HTML5" />
	</beans:bean>
	<beans:bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine">
		<beans:property name="templateResolver" ref="templateResolver" />
	</beans:bean>

	<beans:bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
		<beans:property name="templateEngine" ref="templateEngine" />
	</beans:bean>

3.WEB-INF/templatesフォルダを新規に作成してViewを作成する
元のサンプルでは、/WEB-INF/viewsフォルダにjspが格納されていたが、pom.xmlを書き換えてViewを/WEB-INF/templatesフォルダに変更しているので、そこにhtmlを作成する。
作成したhtmlは下記で、ファイル名はhome.htmlとした。

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html>
<head>
	<title>Home</title>
</head>
<body>
<h1>
	Hello world!
</h1>
<p th:utext="${thymeleaf}">Welcome to our grocery store!</p>
</body>
</html>

4.コントローラの修正
htmlの変数バインドキー名を{thymeleaf}としているので、それに合わせてコントローラ側も修正する。ついでに、変更が反映されていることを確認するために、表示するメッセージも修正した。

package jp.co.sample;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

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

/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {

	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);

	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);

		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);

		String formattedDate = dateFormat.format(date);
		String message = "  [Spring Sample To thymeleaf]: " + formattedDate + ". ";
		model.addAttribute("thymeleaf", message );

		return "home";
	}

}

5.結果の確認
http://localhost:8080/sampleにアクセスして動作を確認する。

なお、直接htmlファイルにアクセスした場合は、pタグ内の文字列が直接表示される。th:utext="${thymeleaf}によってサーバにアクセスした場合はpタグ内の文字列がサーバ側で作成された文字列で置換されていることがわかる。

◎参照
thymeleafのSpring向けドキュメント