Thymeleaf コントローラーとのやりとり①

SpringBootでThymeleafを使用することが多いので、備忘録としていろいろまとめてみる。
Controller側をController.java、View側をsample.htmlとする。

値を表示する

Modelを使用して、値を個別に設定してみる
Modelの場合は、addAttributeで値をViewに渡します

// Controller.java
public String init(Model model) {
 model.addAttribute("id", 1);
 model.addAttribute("no", "000001");
 model.addAttribute("name", "サンプル");

 return "sample";
}

<!-- sample.html -->
<div th:text="${id}"></div>
<p th:text="${no}"></p>
<span th:text="${name}"></span>

こんな感じで設定することで表示できる！
次はModelを使用して、オブジェクトを設定してみる

// Controller.java
public String init(Model model) {
 SampleForm form = new SampleForm();
 form.setId(1);
 form.setNo("000001");
 form.setName("サンプル");
 model.addAttribute("sampleForm", form);

 return "sample";
}

// SampleForm.java
@Data
public class SampleForm {
 private Integer id;
 private String no;
 private String name;
}

<!-- sample.html -->
<div th:text="${sampleForm.id}"></div>
<p th:text="${sampleForm.no}"></p>
<span th:text="${sampleForm.name}"></span>

sampleFormにあるプロパティ名を指定することでそれぞれの値が表示できる！
「sampleForm.」を毎回書くのが面倒なので・・・

<!-- sample.html -->
<th:block th:object="${sampleForm}">
 <div th:text="*{id}"></div>
 <p th:text="*{no}"></p>
 <span th:text="*{name}"></span>
</th:block>

「th:object」を使えば、「$」ではなく「*」でプロパティを指定するだけで表示できる！

値を結合して表示してみる

<!-- sample.html -->
<th:block th:object="${sampleForm}">
 <div th:text="*{id} + ':' + *{no}"></div>
 <span th:text="|名前:*{name}|"></span>
</th:block>

※表示イメージ
1:000001
名前:サンプル

「|」で囲うことでリテラル置換ができる！文字列を「+」でつなげるよりも簡単

 

次はModelAndViewを使用してみる
ModelAndViewの場合は、addObjectで値をViewに渡します

// Controller.java
public ModelAndView init(ModelAndView mav) {
 mav.addObject("id", 1);
 mav.addObject("no", "000001");
 mav.addObject("name", "サンプル");

 mav.setViewName("sample");
 return mav;
}

<!-- sample.html -->
<div th:text="${id}"></div>
<p th:text="${no}"></p>
<span th:text="${name}"></span>

View側は、Modelの時と同じ設定で値を表示できる！

Controller側は、Modelの方が簡潔で作りやすい印象です
①終了