Thymeleaf記法
Thymeleaf（タイムリーフ）は属性名th:~で指定された値を処理し様々なHTMLを生成することができます。
<div th:text="${'Hello!'}">Goodbye!</div>上記の場合th:textの中の文字列"Hello!"を"Goodbye!"の代わりに表示します。
"th:~"の部分はHTMLの正常な属性として扱われ画面に表示されることはありません。
生成されるHTML
<div>Hello!</div>
Thymeleafの属性
Thymeleafに値を処理させるにはth:で始まる専用の属性を指定することが必要です。
主に使用される属性として以下のものが挙げられます。
th:text
値の評価結果をタグのボディに設定します。
既存のボディは置き換わり、処理後のHTMLにはこの属性は残りません。
処理前
<div th:text=${2}>two</div>処理後
<div>2</div>
th:value
値の評価結果をvalue属性に値を設定します
既存の値は置き換わり、処理後のHTMLにはこの属性は残りません
処理前
<input type="submit" value="Next" th:value=${'次へ'}>処理後
<input type="submit" value="次へ">
th:if
この属性が指定された要素は値がfalseの時削除されます
エラーメッセージなどの特定の条件で出したい時などによく使用されます
処理後のHTMLにはこの属性は残りません
処理前
<div th:if="${true}" th:text="値はTrueです"></div><div th:if="${false}" th:text="値はFalseです"></div>
処理後
<div>値はTrueです</div>th:each
この属性が指定された要素は繰り返し処理されます
<input type="checkbox">や<option>などの繰り返し記述される要素によく使用されます
処理後のHTMLにはこの属性は残りません
処理前 ※valuesは文字列のリスト("abc", "def", "ghi", "jkl")
<div><span th:each="value : ${values}" th:text="${value}"></span></div>
処理後
<div><span>abc</span><span>def</span><span>ghi</span><span>jkl</span></div>
使用できる変数
SPIRAL ver2のフォームでは以下の変数が参照できます。
fields
各フィールド情報を持つ変数です。f0+フィールドIDで参照するフィールドを指定することができます。
${fields['f01']} IDが1のフィールド${fields['f010']} IDが10のフィールド
フィールドが持つデータには以下の様に参照できます。
${fields['f01'].label} フォームで設定したラベル${fields['f01'].help} フォームで設定したヘルプメッセージ${fields['f01'].options[0].id} DBで設定したセレクトorマルチセレクトの1番目の項目のID${fields['f01'].options[0].label} DBで設定したセレクトorマルチセレクトの1番目の項目のラベル
※ optionsはセレクトorマルチセレクトフィールドでのみ参照可能です
inputs
ユーザの入力した情報を持つ変数です
fieldsと同様にf0+フィールドIDで指定することでフィールド毎の入力された値を参照できます
${inputs['f01']}※入力フィールドがマルチセレクトの場合、値は文字列ではなくListで格納されています
errors
エラーメッセージを持つ変数です
エラーとなる値を検出した際に不正な値、入力必須、重複不可の中から最も適したエラーメッセージが格納されます
fieldsと同様にf0+フィールドIDで指定することでフィールド毎のエラーメッセージを参照できます
${errors['f01']}注意事項
th:text=に直接テキストをダブルクォートもしくはシングルクォートで記載した場合その中に半角スペースが入っているとInternal server errorになってしまいます。
例：フォームのエラーメッセージを直接入力<span class="sp-form-error" th:if="${errors['f01'] != null}" th:text="This is error"></span> ※上記だとフォーム入力ページは表示されるが送信ボタンを押すとInternal server errorになる
ダブルクォート内にシングルクォートで記述することで半角スペースを入力しても正常に反映されます。
<span class="sp-form-error" th:if="${errors['f01'] != null}" th:text="'This is error'"></span>※送信ボタン押下後の確認ページで入力したエラーメッセージが表示される