Kugelblitz

いつ何時誰の挑戦でも受ける!

Thymeleafの基本的な使い方

テンプレートエンジンThymeleafの基本的な使い方について説明したいと思います。

テキストの置き換え

まずは基本の基本、テンプレートファイルの一部の文字列を、動的に置き換える方法です。

<p th:text="${thymeleaf}">サンプルテキスト</p>

ちゃんとタグエスケープもしてくれます。エスケープしない場合は、th:textのかわりに、th:utextになります。XSSの危険があるので、ちゃんと理由がなければ、th:textでやるべきです。

コントローラ側は以下です。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>

面白いのは、「th:remove=”all-but-first”」ですかね。1行目以外をレンダリング時にばっさりカットしてくれます。なので、デザインしているときは複数行時での表示を確認することもできます。

「#strings.prepend」「#numbers.formatInteger」「#dates.format」などは、繰り返し表示とは別の話なので説明は割愛しますが、なかなか便利な機能です。

条件分岐

条件分岐は、以下です。

まず「〜でないときは表示しない」は、「th:unless」ですね。以下の例だと、items(List)が空の場合はtableタグそのものがレンダリングされません。

<table border="1" th:unless="${#lists.isEmpty(items)}">

逆の「〜であるときは表示」は「th:if」です。以下の例はわかりやすい例とは言えませんが、「not」があるのでitemsが空でないときにtableタグが表示されます。

<table border="1" th:if="${not #lists.isEmpty(items)}">

部品の読み込み

ヘッダとかフッタとか、全ページで共通の部分を別部品にして、レンダリング時に合体させる方法は以下です。

まず、部品のページは以下のようになります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<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>

そうすると、部品のページの「th:fragment=”menu”」で指定された部分がレンダリング時に読み込まれます。部品も個別のページも、html文書としては完結しているので、デザイン時はそれぞれブラウザで見え具合を確認することができます。便利ですね。

Pocket

他の記事