Thymeleafの宣言
HTMLファイルの中に以下のHTML要素があるとき、”th~”から始まる属性があればそれはThymeleafを指しますよ。と宣言するものです。
HTML
<html xmlns:th="http://www.thymeleaf.org">
th:text
属性
Thymeleafはth:text
属性を見つけるとその右辺にある変数式"${sample}"
に書かれている変数の値を取得し、テキストに変換します。
HTML
<p th:text="${sample}"></p>
th:object
属性
form要素にバインドするJavaのオブジェクトを設定します。
th:object
のスコープ内では、オブジェクト名を省略してフィールド名のみ記述できるようになります。
<form th:action="@{/}" th:object="${otoiawase}" method="post" novalidate>
th:object
を使用しない場合は、${オブジェクト名.フィールド名}の形式で記述する必要があります。
例${person.age}
th:field
属性
input要素のid属性、name属性、value属性をHTMLに出力することができます。
th:field="*{name}"
と指定すると、id属性とname属性の値はnameになります。
<input type="text" th:field="*{name}"><br>
変数式"${}"
変数を埋め込むことができます。
記述例は以下のとおりです。
HTML
<form th:action="@{/}" th:object="${otoiawase}" method="post" novalidate>
th:error
属性
エラーがあった場合にエラーメッセージを表示できます。
HTML
<div class="invalid-feedback" th:errors="*{name}"></div>
リンクURL式"@{}"
記述例は以下のとおりです。リンクURL式を使うと、staticフォルダを起点としたパスとして解釈されます。
従って下記は、/static/webjars/bootstrap/css/bootstrap.min.css
を意味します。
HTML
<link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
以下のように記述すれば、/static/css/style.css
を意味します。
HTML
<link th:href="@{/css/style.css}" rel="stylesheet">
メッセージ式"#{}"
messeage_ja_properties
のテキストを埋め込むことができます。
記述例は以下のとおりです。
HTML
<h4 class="border-bottomy-3" th:text="#{contents}"></h4>
選択変数式"*{}"
th:object
が指定された要素ないでオブジェクト名を省略してフィールド名のみ記載できるようになります。
HTML
<div class="invalid-feedback" th:errors="*{name}"></div>
th:errorclass="xxx"
エラーがあった場合にclass属性にstyleを付与できます。
記述例は以下のとおりです。
HTML
<input type="text" class="form-control" th:errorclass="is-invalid" placeholder="taro" th:field="*{name}">