ver.2サポートサイト

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>※送信ボタン押下後の確認ページで入力したエラーメッセージが表示される