ヘッダ、フッタなどの共通化
common.htmlなど共通部品用のHTMLファイルを用意します。
demo\src\main\resources\templates\common.html
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header()">
ヘッダー
</header>
</html>
画面固有のHTMLでcommon.htmlで定義したHTMLを読み込むように指定します。
demo\src\main\resources\templates\templateTest\index.html
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="common :: header()"></header>
</body>
解説
index.htmlの
<header th:replace="common :: header()"></header>
をcommon.htmlで定義した
<header th:fragment="header()">
に差し替えています。
その他最低限必要な知識
controllerが渡した値の出力
th:text="${変数名}"
または
[[${変数名}]]IF文
th:if="${条件式}"
変数の定義
th:with="変数名 = '設定する値'"switch
<th:block th:switch="${検査対象の値}">
<th:block th:case=値1>
検査対象の値 = 値1 の場合の処理
</th:block>
<th:block th:case=値2>
検査対象の値 = 値2 の場合の処理
</th:block>
</th:block>
リストの繰り返し処理
th:each="{繰り返し中の変数名} , ${繰り返し処理中のステータス変数名} : ${繰り返し対象の変数名}"
「繰り返し処理中のステータス変数名」について、下記の情報を得ることができます。
| プロパティ | 説明 |
|---|---|
| index | ループ中のインデックス番号（0～の値） |
| count | ループ中のカウント（1～の値） |
| size | ループ対象のリストサイズ |
| current | ループ中の要素 |
| even | 偶数行であるか否か（boolean） |
| odd | 奇数行であるか否か（boolean） |
| first | 先頭行であるか否か（boolean） |
| last | 最終行であるか否か（boolean） |
各機能を使用した実装サンプル
demo\src\main\resources\templates\templateTest\index.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: head('テンプレートテスト',~{::link},~{::script})">
<!-- 画面固有のCSS、JS -->
<link rel="stylesheet" th:href="@{/css/index.css}" />
<script type="text/javascript" th:src="@{/js/index.js}"></script>
<script>
console.log("画面固有のJS");
</script>
</head>
<body>
<header th:replace="common :: header()"></header>
<section>
<h1>controllerValueの値を出力</h1>
th:text使用：<span th:text="${controllerValue}"></span>
<br>
th:text使用しない：[[${controllerValue}]]
</section>
<br>
<section>
<h1>ＩＦ</h1>
<th:block th:if="${conditionVal == 1}">
true
</th:block>
</section>
<br>
<section>
<h1>変数</h1>
<th:block th:with="hensu = 'hensuの値'">
hensu = [[${hensu}]]
</th:block>
</section>
<br>
<section>
<th:block th:switch="${conditionVal}">
<th:block th:case=1>
conditionVal=1 の場合に出力
</th:block>
<th:block th:case=2>
conditionVal=2 の場合に出力
</th:block>
</th:block>
</section>
<br>
<section>
<h1>リストの繰り返し処理</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>ループの情報</th>
</tr>
</thead>
<tbody>
<tr th:each="company , status : ${companyList}">
<td th:text="${company.id}"></td>
<td th:text="${company.name}"></td>
<td>
index：[[${status.index}]]<br>
count：[[${status.count}]]<br>
size：[[${status.size}]]<br>
current：[[${status.current}]]<br>
even：[[${status.even}]]<br>
odd：[[${status.odd}]]<br>
first：[[${status.first}]]<br>
last：[[${status.last}]]<br>
</td>
</tr>
</tbody>
</table>
</section>
<footer th:replace="common :: footer()"></footer>
</body>
</html>
demo\src\main\resources\templates\common.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title , links , scripts)">
<meta charset="utf-8">
<!-- 画面固有のタイトルを設定 -->
<title th:text="${title}"></title>
<!-- 画面共通のCSS、JS -->
<link rel="stylesheet" th:href="@{/css/common.css}" />
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<!-- 画面固有のCSS、JSで置き換え用 -->
<th:block th:replace="${links} ?: _" />
<th:block th:replace="${scripts} ?: _" />
</head>
<header th:fragment="header()">
ヘッダー
</header>
<footer th:fragment="footer()">
フッター
</footer>
</html>
demo\src\main\java\com\example\demo\TemplateTestConttoller.java
package com.example.demo;
import java.util.ArrayList;
import java.util.List;
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
@RequestMapping("templateTest")
public class TemplateTestConttoller {
@RequestMapping(value = "/index", method = RequestMethod.GET)
public Model index(Model model) throws Exception {
// 繰り返し処理用
List<Company> companyList = new ArrayList<>();
companyList.add(new Company(1, "会社A"));
companyList.add(new Company(2, "会社B"));
model.addAttribute("companyList", companyList);
model.addAttribute("controllerValue", "コントローラから渡された文字列");
model.addAttribute("conditionVal", 1);
return model;
}
public class Company{
public Integer id;
public String name;
public Company(Integer id, String name) {
this.id = id;
this.name = name;
}
}
}