ソース設定とThymeleaf
機能概要
SPIRAL ver2ではDBやフォームの設定、入力値をページ上で表示などのために、テンプレートエンジンとしてThymeleaf（タイムリーフ）を使用しています。
例えば、通常のHTMLタグでフォームのドロップダウンを記述した場合、
DB側で項目追加や名称変更した際に、HTML側も手動で変更する必要がありますが、SPIRAL ver2のコードを挿入すると自動でHTML側も変更されます。
Thymeleafとは？
Thymeleafの特徴としてHTMLとして解釈してもデザイン崩れを起こさずロジック部分と分けて管理することが可能です。
詳しい内容は以下のURLを参照してください。使用しているthymeleafのバージョンは3.0です。
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html
HTMLエディタ
フォームの各ステップページ作成のHTMLエディタでThymeleafを使用することができます。
またこのHTMLエディタにはValidation機能があります、タグの閉じ忘れや記述間違いなどがあると保存ができません。
※Thymeleaf記法の間違いや、HTMLタグのカッコ漏れ等に関しては保存できてしまいますのでご注意ください。
間違いのある状態でページを表示した場合、「Internal server error」と表示されます。
フォームの入力ステップページの記述方法
フォームの1項目につきフォーム項目、フォーム項目名、インプット、エラーメッセージ、ヘルプテキスト
のコードが1セットになります。
フォーム項目
各フォーム入力項目には下記タグが必須になります。
（※フォームで使用するDBフィールドの指定をしていますので、省略してしまうとDBに入力値が保存されなくなります）
<sp:input-field name="f0XXX"></sp:input-field>
フォーム項目名（ラベル）
DBのフィールドに設定した表示名が表示されます。
th:text="${fields['f0XXX'].label}
属性として記述するとタグ内に出力されます。
例：f0XXXのフィールド表示名は氏名を設定
<p th:text="${fields['f0XXX'].label}"></p>
実際に出力されるHTMLは以下になります。
<p>氏名</p>
インプットタグ
各フォームのインプット/セレクト/テキストエリアタグを作成します。
※各出力HTMLのclassはSPIRAL ver.2デフォルトのclassが自動で出力されます。
1行テキスト
<input type="text" name="f0XXX" th:value="${inputs['f0XXX']}">
実際に出力されるHTMLは以下になります。
<input type="text" name="f0XXX" value="">
テキストエリア
<textarea name="f0XXX" th:text="${inputs['f0XXX']}"></textarea>
実際に出力されるHTMLは以下になります。
<textarea name="f0XXX"></textarea>
チェックボックス
<label th:each="option : ${fields['f0XXX'].options}"><input type="checkbox" th:name="f0XXX" th:value="${option.id}" th:checked="${inputs['f0XXX'] != null ? #lists.contains(inputs['f0XXX'], #strings.toString(option.id)) : false}"><span th:text="${option.label}">Item</span></label>
実際に出力されるHTMLは以下になります。
<input type="checkbox" name="f0XXX" value="1"><span>セレクト項目1</span></input></label><label><input type="checkbox" name="f0XXX" value="2"><span>セレクト項目2</span></input></label><label><input type="checkbox" name="f0XXX" value="3"><span>セレクト項目3</span></input></label>
ラジオボタン
<input type="radio" name="f0XXX" th:each="option : ${fields['f0XXX'].options}" th:value="${option.id}" th:text="${option.label}" th:th:checked="${inputs['f0XXX'] == #strings.toString(option.id)}">
実際に出力されるHTMLは以下になります。
<input type="radio" name="f0XXX" value="1">セレクト項目1<input type="radio" name="f0XXX" value="2">セレクト項目2<input type="radio" name="f0XXX" value="3">セレクト項目3
セレクト
<select name="f0XXX">
<option th:each="option : ${fields['f0XXX'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0XXX] == #strings.toString(option.id)}"></option>
</select>
実際に出力されるHTMLは以下になります。
<select name="f0XXX">
<option value="1">項目1</option><option value="2">項目2</option><option value="3">項目3</option>
</select>
エラーメッセージ
各フィールドのエラーメッセージを出力します。
th:if="${errors['f0XXX'] != null}" th:text="${errors['f0XXX'].message}"
属性として記述するとタグ内に出力されます。
例：<span>タグ内に設置する場合。（f02のエラーメッセージは"入力してください。"を設定）
<span th:if="${errors['f02'] != null}" th:text="${errors['f02'].message}"></span>
実際に出力されるHTMLは以下になります。
<span>入力してください。</span>
ヘルプテキスト
各フィールドのヘルプテキストを出力します。
th:if="${fields['f0XXX'].help != null}" th:text="${fields['f0XXX'].help}"
属性として記述するとタグ内に出力されます。
例：<span>タグ内に設置する場合。（f03のヘルプテキストは"半角英数字のみになります。"を設定）
<span th:if="${fields['f03'].help != null}" th:text="${fields['f03'].help}"></span>
実際に出力されるHTMLは以下になります。
<span>半角英数字のみになります。</span>
記述例：フォームの確認ステップページ
入力/選択した値の表示
th:text="${inputs['f0XXX']}"
<span th:text="${inputs['f04']}"></span>
実際に出力されるHTMLは以下になります。
<span>パイプドビッツ</span>
f0XXXについて
こちらの数字はフォームで使用しているDBのフィールドIDの数字になっています。
f0+フィールドIDで参照するフィールドを指定することができます。
${fields['f01']} IDが1のフィールド
${fields['f010']} IDが10のフィールド
SPIRAL ver2で許可されている記法
Thymeleaf自体には多くの機能が用意されていますがSPIRAL ver2では幾つかの機能を制限しています。
以下はSPIRAL ver2で許可している属性です。
許可している属性
- th:alt-title
- th:attrappend
- th:attr
- th:block
- th:case
- th:classappend
- th:each
- th:if
- th:remove
- th:styleappend
- th:switch
- th:text
- th:unless
- th:with
また、HTMLの属性に「th:」を付けることで、値を処理した結果をHTMLとして出力することができます。
例）ページのbodyタブに
<input type="number" name="number" th:value="${1+1}">
を設定した場合、HTMLソースは
<input type="number" name="number" value="2">
になります。