Spring Boot | Thymeleafエンジンを使用する

Tags:

Thymeleafとは？

  • Thymeleafはテキスト、HTML、XML、JavaScript、CSSを生成するテンプレートエンジンです。
  • テンプレートを有効なHTMLとして記述できます。
  • Spring BootではJSPの代わりに使用することを推奨します。

Thymeleafドキュメント

Hello World

依存関係を追加する

dependencies {
    compile 'org.springframework.boot:spring-boot-starter-web'
+   compile 'org.springframework.boot:spring-boot-starter-thymeleaf'
    compile 'org.webjars:jquery-ui:1.11.4'
}

コントローラーを実装する

テンプレートを返す場合は@RestControllerではなく@Controllerを使用します。戻り値の文字列はtemplatesパッケージからの相対パスです。

@Controller
@RequestMapping("/hello")
public class HelloController {
    @RequestMapping(method=RequestMethod.GET)
    public String hello() {
        return "hello";
    }
}

<!DOCTYPE html>
<html>
  <head><title>Hello Thymeleaf</title></head>
  <body><h1>Hello Thymeleaf</h1></body>
</html>

http://localhost:8080/hello を開きます。

画面へ値を含める

コントローラーメソッドでModelを受け取り、属性を追加します。

public String hello(Model model) {
    Hoge hoge = new Hoge();
    hoge.id = 10;
    hoge.value = "hoge";
    model.addAttribute("myData", hoge);
    return "hello";
}

Thymeleafの名前空間を定義し、th:textを使用します。

<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <dl>
      <dt>id</dt>
      <dd th:text="${myData.id}"></dd>
      <dt>value</dt>
      <dd th:text="${myData.value}"></dd>
    </dl>
  </body>
</html>

繰り返し出力

コレクションをモデルへ追加し、th:eachで繰り返します。

model.addAttribute("hogeList", list);

<dl th:each="hoge : ${hogeList}">
  <dt>id</dt>
  <dd th:text="${hoge.id}"></dd>
  <dt>value</dt>
  <dd th:text="${hoge.value}"></dd>
</dl>