thymleaf備忘録

#`#{...}`

- `#{...}`は、メッセージ式です。外部のテキストを読み込めます。

#`th:field`
- `th:field`(タグのid・name・value属性を、HTMLに出力する機能)

#`th:errorclass= "..."`
- `th:errorclass= "..."` エラーがある場合に、class属性にスタイルを追加
- エラーのチェックは、th:field(タグのid・name・value属性を、HTMLに出力する機能)、又はname属性から取得するため、これらと一緒に使う必要がある

```java:spring-mvc3/src/main/resources/templates/confirm.html 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- webjars locatorあり（バージョン管理が不要）-->
<link rel="stylesheet"
		th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<title>Title</title>
</head>
<body class="bg-light">
		<div class="container">
				<div class="row justify-content-md-center">
						<div class="col-md-8 order-md-1">
								<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
								<h4 class="border-bottom my-3" th:text="#{invoice}"></h4>
								<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
								<p class="text-danger" th:text="#{confirmationMessage}"></p>

								<div th:object="${invoice}">
										<div class="form-group">
												<!-- label要素のfor属性は、ラベル付け対象であるラベル付け可能フォーム関連要素のid属性値を指定する属性 -->
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:field(タグのid・name・value属性を、HTMLに出力する機能)-->
												<label for="name" th:text="#{name}"></label> <input
														type="text" class="form-control" th:field="*{name}"
														disabled>
										</div>

										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:field(タグのid・name・value属性を、HTMLに出力する機能)-->
												<label for="address" th:text="#{address}"></label> <input
														type="text" class="form-control" th:field="*{address}"
														disabled>
										</div>

										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:field(タグのid・name・value属性を、HTMLに出力する機能)-->
												<label for="phoneNumber" th:text="#{phoneNumber}"></label> <input
														type="tel" class="form-control" th:field="*{phoneNumber}"
														disabled>
										</div>

										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:field(タグのid・name・value属性を、HTMLに出力する機能)-->
												<label for="price" th:text="#{price}"></label> <input
														type="text" class="form-control" th:field="*{price}"
														disabled>
										</div>

										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:field(タグのid・name・value属性を、HTMLに出力する機能)-->
												<label for="paymentDeadline" th:text="#{paymentDeadline}"></label>
												<input type="date" class="form-control"
														th:field="*{paymentDeadline}" disabled>
										</div>
								</div>

						</div>
				</div>
		</div>
		<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
		<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
		<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</body>
</html>
```


```java:spring-mvc3/src/main/resources/templates/index.html 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- webjars locatorあり（バージョン管理が不要）-->
<link rel="stylesheet"
		th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<title>Title</title>
</head>
<body class="bg-light">
		<div class="container">
				<div class="row justify-content-md-center">
						<div class="col-md-8">
								<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
								<h4 class="border-bottom my-3" th:text="#{invoice}"></h4>

								<form th:action="@{/}" th:object="${invoice}" method="post"
										novalidate>
										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:errorclass= "..." エラーがある場合に、class属性にスタイルを追加 -->
												<!-- エラーのチェックは、th:field(タグのid・name・value属性を、HTMLに出力する機能)、
            又はname属性から取得するため、これらと一緒に使う必要がある。 -->
												<label for="name" th:text="#{name}"></label> <input
														type="text" class="form-control"
														th:errorclass="is-invalid" th:field="*{name}">
												<div class="invalid-feedback" th:errors="*{name}"></div>
										</div>

										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:errorclass= "..." エラーがある場合に、class属性にスタイルを追加 -->
												<!-- エラーのチェックは、th:field(タグのid・name・value属性を、HTMLに出力する機能)、
            又はname属性から取得するため、これらと一緒に使う必要がある。 -->
												<label for="address" th:text="#{address}"></label> <input
														type="text" class="form-control"
														th:errorclass="is-invalid" th:field="*{address}">

												<div class="invalid-feedback" th:errors="*{address}"></div>
										</div>

										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:errorclass= "..." エラーがある場合に、class属性にスタイルを追加 -->
												<!-- エラーのチェックは、th:field(タグのid・name・value属性を、HTMLに出力する機能)、
            又はname属性から取得するため、これらと一緒に使う必要がある。 -->
												<label for="phone" th:text="#{phoneNumber}"></label> <input
														type="tel" class="form-control" th:errorclass="is-invalid"
														th:field="*{phoneNumber}">
												<div class="invalid-feedback" th:errors="*{phoneNumber}"></div>
										</div>

										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:errorclass= "..." エラーがある場合に、class属性にスタイルを追加 -->
												<!-- エラーのチェックは、th:field(タグのid・name・value属性を、HTMLに出力する機能)、
            又はname属性から取得するため、これらと一緒に使う必要がある。 -->
												<label for="price" th:text="#{price}"></label> <input
														type="text" class="form-control"
														th:errorclass="is-invalid" th:field="*{price}">
												<div class="invalid-feedback" th:errors="*{price}"></div>
										</div>

										<div class="form-group">
												<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
												<!-- th:errorclass= "..." エラーがある場合に、class属性にスタイルを追加 -->
												<!-- エラーのチェックは、th:field(タグのid・name・value属性を、HTMLに出力する機能)、
            又はname属性から取得するため、これらと一緒に使う必要がある。 -->
												<label for="paymentDeadline" th:text="#{paymentDeadline}"></label>
												<input type="date" class="form-control"
														th:errorclass="is-invalid" th:field="*{paymentDeadline}">
												<div class="invalid-feedback" th:errors="*{paymentDeadline}"></div>
										</div>
										<!-- #{...}は、メッセージ式です。外部のテキストを読み込めます。 -->
										<button class="btn btn-primary btn-lg btn-block my-4"
												type="submit" th:text="#{register}"></button>
								</form>

						</div>
				</div>
		</div>
		<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
		<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
		<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</body>
</html>
```

#`th:inline="text"`

```java:mst_user/list.html
/*【リファクタリング】
全てにth:textを適用したい場合はth:inline="text" に変更できる*/

//【使い方】
<tr>中に th:inline="text"を書く

//【変更前】
<tr th:each="customer : ${customers}">
    <td th:text="*{id}"></td>
    <td th:text="*{lastName}"></td>
    <td th:text="*{firstName}"></td>
</tr>

//【変更後】
<tr th:inline="text" th:each="customer : ${customers}">
    <td>[[${customer.id}]]</td>
    <td>[[${customer.lastName}]]</td>
    <td>[[${customer.firstName}]]</td>
</tr>
```

#`他`

>変数式：${...}
選択変数式：*{...}
メッセージ式：#{...}
リンクURL式：@{...}
フラグメント式： ~{...}

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html

##参考にした記事（いつもありがとうございます。）


- [th:field と th:object によるフォームバインディング機能（inputタグ・基本入力系編）
](https://casual-tech-note.hatenablog.com/entry/2018/10/10/224250)

- [th:field と th:object によるフォームバインディング機能（inputタグ・password編）](https://casual-tech-note.hatenablog.com/entry/2018/10/18/091306)

- [Thymeleafとは](https://javazuki.com/articles/thymeleaf-standard-expression-syntax.html)
→書き方

- [Thymeleafチートシート
](https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482)