ビュー/ビューテンプレートの作成 - Thymeleaf

ビューテンプレートには、Spring プロジェクトで標準的に採用されることの多い、Thymeleaf を使用します。変数を埋め込んだ簡単なビューテンプレートを、以下を参考に作成します。

<!-- src/main/resources/templates/memo.html -->
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Memo</title>
    <style>
        body,
        input,
        button {
            color: #333;
        }
        input,
        button {
            font-size: 1rem;
            margin: .5rem 0 .5rem .5rem;
            height: 2rem;
        }
        button {
            border: #333 solid 1px;
            background: #eee;
            padding: .25rem .75rem .25rem .75rem;
        }
    </style>
</head>
<body>
<form action="/memo" method="post">
    <div>
        <input name="memo" placeholder="memo"/>
        <input name="author" placeholder="author"/>
        <button type="submit">Submit</button>
    </div>
</form>
<ul>
    <li th:each="item : ${items}" 
        th:text="${item.memo} + ${#strings.isEmpty(item.author) ? '' : ' @' + item.author}">memo text</li>
</ul>
</body>
</html>

Thymeleaf は、特別なカスタムタグを使用することなく、HTML タグの属性を使用することで、テンプレートへの変数割当を行うことができます。この特徴により、マークアップ記述を崩すことなく、HTML をテンプレート化することのできる、数少ないテンプレートエンジンとなっています。

先の例でも th:text により、li タグのテキスト要素を ${models} の各メンバーフィールドに置き換える記述を行っており、この例からもマークアップ記述を崩さずに、変数を埋め込むことができているのが確認できます。

一点だけ注意すべき点として、Thymeleaf テンプレートは XML 文書としてパースされるため、DOCTYPE 宣言を除いては、全てのタグを閉じる必要があります。タグの閉じ漏れがあると、パースエラーとなり、例外がスローされます。そのため、先の例でも、HTML5 文書であるにもかかわらず、meta、input タグなどを意識的に閉じています。(Thymeleaf 3 では、HTML5 に完全対応し、空要素への閉じタグが不要になりました。)

参考

サンプル

ここまでのコードサンプルは、以下より入手できます。

$ git clone -b chapter/2 https://github.com/yo1000/self-study-spring.git

results matching ""

    No results matching ""