Kugelblitz
Thymeleafの基本的な使い方
テンプレートエンジンThymeleafの基本的な使い方について説明したいと思います。
テキストの置き換え
まずは基本の基本、テンプレートファイルの一部の文字列を、動的に置き換える方法です。
<p th:text="${thymeleaf}">サンプルテキスト</p>コントローラ側は以下です。Tymeleafだからといって、特別なことはありません。まぁこれはほかのテンプレートエンジンでも同じですが。
@RequestMapping(value = "/", method = RequestMethod.GET)
public String hello(Locale locale, Model model) {
String message = "サンプル<br/>サンプル";
model.addAttribute("thymeleaf", message );
return "hello";
}繰り返し
DBの検索結果を表示するなど、一覧の行を繰り返して表示したい場合は以下です。
<table border="1" th:unless="${#lists.isEmpty(items)}">
<thead>
<tr>
<th>商品コード</th>
<th>商品名</Th.>
<th>価格</th>
<th>発売日</th>
</tr>
</thead>
<tbody th:remove="all-but-first">
<tr th:each="item,iterStat : ${items}" th:class="${iterStat.odd}? 'odd'">
<td th:text="${item.code}">99999999</td>
<td th:text="${item.name}">サンプル商品名</td>
<td th:text="${#strings.prepend(#numbers.formatInteger(item.price,1,'COMMA'),'¥')}">¥999,999,999</td>
<td th:text="${#dates.format(item.startDate, 'yyyy/MM/dd')}">9999/99/99</td>
</tr>
<tr>
<td>99999999</td>
<td>サンプル商品名</td>
<td>¥999,999,999</td>
<td>9999/99/99</td>
</tr>
<tr>
<td>99999999</td>
<td>サンプル商品名</td>
<td>¥999,999,999</td>
<td>9999/99/99</td>
</tr>
</tbody>
</table>「#strings.prepend」「#numbers.formatInteger」「#dates.format」などは、繰り返し表示とは別の話なので説明は割愛しますが、なかなか便利な機能です。
条件分岐
条件分岐は、以下です。
まず「〜でないときは表示しない」は、「th:unless」ですね。以下の例だと、items(List)が空の場合はtableタグそのものがレンダリングされません。
<table border="1" th:unless="${#lists.isEmpty(items)}"><table border="1" th:if="${not #lists.isEmpty(items)}">部品の読み込み
ヘッダとかフッタとか、全ページで共通の部分を別部品にして、レンダリング時に合体させる方法は以下です。
まず、部品のページは以下のようになります。
<!DOCTYPE html>
<html xmlns="XHTML namespace" xmlns:th="Thymeleaf">
<head>
<meta charset="utf-8" />
<title>header</title>
</head>
<body>
<div th:fragment="menu">
<span>header</span>
<hr />
</div>
</body>
</html><div th:include="/template/header :: menu"></div>2015/07/27 10:24
Spring MVC + Thymeleaf
SpringMVCで、ビューのテンプレートエンジンにThymeleafを使った場合のサンプルです。
pom.xml
まずはpom.xml。
<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>net.treewoods</groupId>
<artifactId>sample_thymeleaf</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>sample_thymeleaf</name>
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<spring.version>4.1.7.RELEASE</spring.version>
</properties>
<dependencies>
<!-- spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${spring.version}</version>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>2.1.4.RELEASE</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<outputDirectory>${endorsed.dir}</outputDirectory>
<silent>true</silent>
<artifactItems>
<artifactItem>
<groupId>javax</groupId>
<artifactId>javaee-endorsed-api</artifactId>
<version>7.0</version>
<type>jar</type>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
web.xml
次はweb.xml。特にThymeleaf固有の設定はありません。Spring MVCを使うときのweb.xmlでOKです。
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee" "http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/dispatcher-servlet.xml</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
</web-app>Spring設定ファイル
Spring設定ファイルは以下です。web.xmlで/WEB-INF/dispatcher-servlet.xmlを指定しているので、そこに記述します。
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans"
"http://www.springframework.org/schema/beans/spring-beans-3.0.xsd"
"http://www.springframework.org/schema/context"
"http://www.springframework.org/schema/context/spring-context-3.0.xsd" >
<context:component-scan base-package="net.treewoods.sample.thymeleaf.controller" />
<bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".html" />
<property name="templateMode" value="HTML5" />
<property name="characterEncoding" value="UTF-8" />
</bean>
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
<property name="templateEngine">
<bean class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver" />
</bean>
</property>
<property name="order" value="1" />
<property name="characterEncoding" value="UTF-8" />
</bean>
</beans>ビュー
ビューを作成します。Spring設定ファイルで、/WEB-INF/views/以下をビューファイルの置き場所にしていたので、そこにhello.htmlを配置します。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
</head>
<body>
<h1>
Hello world!
</h1>
<p th:utext="${thymeleaf}">サンプルテキスト</p>
</body>
</html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >コントローラ
最後にコントローラです。当然ですが、テンプレートエンジンにThymeleaf使うからといって特別なことは何もありません。
package net.treewoods.sample.thymeleaf.controller;
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
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 HelloWorldController {
@RequestMapping(value = "/", method = RequestMethod.GET)
public String hello(Locale locale, Model model) {
Date date = new Date();
DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
String formattedDate = dateFormat.format(date);
String message = " [Spring + thymeleafサンプル]: " + formattedDate + ". ";
model.addAttribute("thymeleaf", message );
return "hello";
}
}2015/07/18 10:24
Loading...