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タグ内の文字列がサーバ側で作成された文字列で置換されていることがわかる。