Spring Boot + thymeleafで、前回一覧表出力をやったのですが、今回は、条件に一致した時のみHTML要素を出力するのをやってみます。
STS3（3.9.6）＋SpringBoot2.0＋Tymeleaf3.0迄動作確認しています。
イラスト文字を条件によって出力
受け渡されたPersonオブジェクトの出力データの値（Value）を得点ととらえて、得点によって5段階評価（A,B,C,D,E）のイラスト文字を、thymeleafの出力制御を使って表示します。
画像の配置
まず、準備として、AからEの画像ファイルを、/bdemo/src/main/resources/static/images に配置しておきます。
コントローラクラス
JAVAソース側はコントローラクラスで、値をセットして、画面に渡します。
HTMLは、hello2.htmlなので、”hello2”を返しています。
@RequestMapping("/hello2")
public String hello(Model model) {model.addAttribute("person",getPersonBean());
return "hello2";
}
毎回の得点を変えるために、getPersonBean()の中で、JAVAの標準ライブラリ、Randomを使って、0-99の数字を生成するようにします。
private PersonBean getPersonBean(){
Random rnd = new Random();
PersonBean pb = new PersonBean();
pb.setPid("003");
pb.setName("テスト 太郎");
pb.setValue("");
pb.setIntValue(Integer.valueOf(rnd.nextInt(100)));
return pb;
}
HTML＋tymeleaf
ざっと引用します。
<ol>
<li th:text="${person.pid}" />
<li th:text="${person.name}" />
<li th:text="${person.intValue}" />
</ol><div th:if="${person.intValue gt 0 and person.intValue lt 100}">
<div th:if="${person.intValue ge 1 and person.intValue lt 20}"><img src="/images/capital_e.png" /></div>
<div th:if="${person.intValue ge 20 and person.intValue lt 40}"><img src="/images/capital_d.png" /></div>
<div th:if="${person.intValue ge 40 and person.intValue lt 60}"><img src="/images/capital_c.png" /></div>
<div th:if="${person.intValue ge 60 and person.intValue lt 80}"><img src="/images/capital_b.png" /></div>
<div th:if="${person.intValue ge 80 and person.intValue lt 100}"><img src="/images/capital_a.png" /></div>
</div>
tymeleaf条件分岐（if)
th:if は、条件に一致（真）になった場合だけ、そのHTML要素を出力します。
thymeleafには、th:switchとth:caseという多重分岐もあるのですが、こちらは「等しい場合のみHTML要素を出力する」形で、th:ifのように柔軟な条件指定ができないので、 th:if を使ってます。
th:ifの演算子は以下が使えます。
- 以上 ： ge
- 以下 ： le
- より大きい ： gt
- より小さい ： lt
- 等しい ： eq
- 等しくない ： neq
- 以外 ： not
- 且つ ： and
- または ： or
基本は、制御したい要素を<DIV>タグで囲って、th:ifを<DIV>タグに仕設定する例みたいなやり方になります。
今回の0では、0 または 100以上の場合は、画像を表示しない。1～19ならE、20-39でD、40-59でC、60-79でB、80-99がA の画像を表示するように条件をつけてます。
やってみます
どれどれ・・。
42点で「C」、79点で「B」・・いけてるみたいです。
STS ＋Spring Boot ＋thymeleaf 関連記事
入力画面に関連する記事
参照画面・画面遷移に関連する記事
参照画面：テーブルを使い、行毎に色分けした一覧表を表示する。
入力チェックに関連する記事
入力チェック：@Patternと正規表現で独自チェックする。
入力チェック用アノテーション定義を自分で作る。（独自実装版）
データアクセス・その他に関連する記事
