Thymeleafの使い方
■準備
ThymeleafをHTMLファイルで使用する為に下記を記述
html xmlns:th="http://www.thymeleaf.org"
【使用例】
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
...
</body>
</html>
■th:text
HTMLタグ内の文字列を置換
サーバーサイドでレンダリングする際にHTMLエスケープを行ったうえで置換されるのでクロスサイトスクリプティングを防ぐことができる
■リテラル連結
「|」で囲うだけ
■th:each
Javaの拡張for構文のようなもの
【使用例】
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>顧客一覧</title>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>名前</td>
</tr>
<tr th:each="customer : ${customers}">
<td th:text="${customer.id}">dummyId</td>
<td th:text="${customer.name}">dummyName</td>
</tr>
</table>
</body>
</html>
※ステータスを参照する場合
【基本構文】
th:each="「変数」, 「ステータス変数」 : 「オブジェクト」"
【使用例】
name属性を動的に生成
<table>
<tr th:each="item, status : ${customerList}">
<td><input type="text" th:name="|name${status.count}|" th:value="|name${status.count}|"></td>
</tr>
</table>
■th:action
formタグのaction属性の内容を置換する
@{〇〇}でコンテキスト・パス相対のパスを絶対パスに置換
【使用例】
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>顧客一覧</title>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>名前</td>
<td>メールアドレス</td>
</tr>
<tr th:each="customer : ${customers}">
<td th:text="${customer.id}">dummyId</td>
<td th:text="${customer.name}">dummyName</td>
<td th:text="${customer.email}">dummyMail</td>
<td>
<form th:action="@{/customers/edit}" method="get">
<input type="submit" name="form" value="編集" />
<input type="hidden" name="id" th:value="${customer.id}" />
</form>
</td>
</tr>
</table>
</body>
</html>
■コメントアウト
通常のHTMLのコメントアウト「<!– –>」ではコメントアウト部分がページソースでは表示される
ページソースにも表示させたくない場合は下記のように記述する
<!--/* コメントアウト部分 */-->
■メッセージ式
①src/main/resources配下に「messages.properties」を作成
②「content.<変数名>=<メッセージ内容>」を記述
③HTMLファイルに「th:text="#{content.<変数名>}"」を記述
・messages.properties
content.title=顧客一覧・index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="#{content.title}"></title>
</head>
<body>
...
■th:object
Modelの属性名を指定するとタグ内で「th:field="*{フィールド名}"」を記法を使用できる
■th:field
HTMLフィールドとフォームオブジェクトのフィールドをバインディングできる
【使用例】
<form th:action="@{/customers/create}" th:object="${customerForm}" method="post">
<label for="name">名前</label>
<input type="text" id="name" name="create" th:field="*{name}">
<input type="submit" value="作成">
</form>
■th:errors="*{フィールド名}"
対象のフィールドに関するエラーメッセージでタグ内の文字列を置換する
【使用例】
<form th:action="@{/customers/create}" th:object="${customerForm}" method="post">
<label for="name">名前</label>
<input type="text" id="name" name="create" th:field="*{name}"><span th:errors="*{name}"></span>
<input type="submit" value="作成">
</form>
■th:errorclass
入力チェックエラー時に属性の値がclass属性に設定される
また対象フィールドにエラーがある場合のみ表示したいタグには「th:if="${#fields.hasErrors(‘フィールド名’)}"」を設定する
【使用例】
<form th:action="@{/customers/create}" th:object="${customerForm}" method="post">
<label for="name">名前</label>
<input type="text" id="name" name="name" th:field="*{name}" th:errorclass="error-input">
<span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="error-massages">error!</span>
<input type="submit" value="作成">
</form>
■th:classappend
指定の条件でクラスを付与
【使用例】
「name」フィールドがエラーの場合に「is-invalid」クラスを付与
<form th:action="@{/customers/create}" th:object="${customerForm}" method="post">
<label for="name">名前</label>
<input type="text" id="name" name="name" th:field="*{name}" th:classappend="${#fields.hasErrors('name')} ? 'is-invalid'">
<input type="submit" value="作成">
</form>
■th:if
条件文
【使用例】
<td th:if="${employee.adminFlag == '1'}">管理者</td>
■三項演算子
【使用例】
<td th:text="${employee.adminFlag == '1'}? '管理者' : '一般'"><td>
■th:switch
【使用例】
<div th:each="customer : ${customers}">
<div th:switch="${customer.gender}">
<p th:case="0" th:text="男性"></p>
<p th:case="1" th:text="女性"></p>
<p th:case="*">-</p>
</div>
</div>※th:case="*" ⇒ 条件に該当しない場合
■プリプロセッシング（事前評価）
${genderMap}.get()のパラメーターを変数（${employee.gender}）にした場合、パラメーター部分を事前に評価しておかないとエラーになる
事前に評価したい変数をアンダースコア2つ（変数）で囲む
※パラメータはシングルクォーテーションで囲む
【使用例】
<td th:text="${genderMap.get('__${employee.gender}__')}">
■フォーマット指定で日付表示
・ユーティリティオブジェクト
特定のJavaクラスのオブジェクトを「#クラス名」という定数で定義されている
【使用例】
<p th:text="${#dates.format(new java.util.Date(),'yyyy/MM/dd')}"></p>
■インライン処理
「th:inline="text"」を記述することで「th:text」を省略可能
[[${変数}]]でアクセス可能
【使用例】
<table>
<tr th:inline="text" th:each="item : ${customerList}">
<td>[[${item.name}]]</td>
</tr>
</table>