Thymeleafで検索結果の表を書く（tableの書き方)

Thymeleafの利点と便利なところ

ThymeleafはHTMLファイルをそのままWebアプリケーションのテンプレートとして使え、名前空間:thで値を出力する属性を指定します。つまり、ブラウザで直接HTMLファイル（一般的にモックアップHTMLと呼ばれるもの）を見ても、Webアプリの出力結果も画面のレイアウトは崩しません。

例：検索結果の一覧表

一覧表を<table>でレイアウトするときは、たいてい仮の検索結果を数件程度モックアップに組み込みます。その後、Webアプリに組み込むときには、この仮に作ったタグを削除し、JSPなどへ変換しますが、Thymeleafではこの手間もなくせます。

table.html

<!-- 一覧結果 -->
<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>タスク名</th>
            <th>登録日</th>
            <th>ステータス</th>
        </tr>
    </thead>
    <tbody th:remove="all-but-first" th:each="result : ${action.resultList}">
        <tr th:class="${result['limitdate']} &lt; ${action.systemDate} ? 'danger' : ''">
            <td th:text="${result['id']}">1</td>
            <td><a href="update.html" th:href="@{display(vo.id=${result['id']})}" th:text="${result['name']}">タスク1</a></td>
            <td th:text="${#dates.format(result['writedate'], 'yyyy/MM/dd')}">3/5</td>
            <td th:text="${beans.master.getValue('status',result['status'])}">Open</td>
        </tr>
        <tr>
            <td>2</td>
            <td>タスク2</td>
            <td>3/7</td>
            <td>Close</td>
        </tr>
        <tr>
            <td>3</td>
            <td>タスク3</td>
            <td>1/9</td>
            <td>NotOpen</td>
        </tr>
    </tbody>
</table>

大事なところは、<tbody th:remove="all-but-first"> です。

これは、テンプレートとして読む場合は、「子要素である <tr>を全部消すけれど、先頭は残してね」と、便利な機能です。
そのあと、th:each属性で指定した検索結果のオブジェクト(Listなど)を指定するだけです。

繰り返し要素の使い方は、他のテンプレートエンジンやJSTLでも同じですね。

まとめ

以上をまとめる＆私の所感も添えると…

• HTMLからJSPへ変換し、同じ画面なのに複数のファイルに持つことがなくなります。
  • JSPちょっと直したらHTMLモックも直す…という2重メンテがなくなりますね d(・ω・)
  • HTMLで下地を作ってJSPへ変換し、またその逆を考えてHTMLを構築する JSP職人業が不要です。
  • View実装と画面レイアウトの分担がしやすいですね。
  • 書き方は今までのテンプレートエンジンやJSTLとそっくりです。