読者です 読者をやめる 読者になる 読者になる

アラカン"BOKU"のITな日常

人事評価と人工知能について考えたことがメインテーマです。

STS 3.8.3(Spring Boot 1.5.1)+thymeleaf 条件に一致した時のみHTML要素を出力する

Spring Boot入門 プログラミング

Spring Boot + thymeleafで、前回一覧表出力をやったのですが、今回は、条件に一致した時のみHTML要素を出力するのをやってみます。

 

受け渡された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側です。

<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>

 

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 の画像を表示するように条件をつけてます。

 

やってみます。

f:id:arakan_no_boku:20170311122419j:plain

f:id:arakan_no_boku:20170311122851j:plain

42点で「C」、79点で「B」・・いけてるみたいです。