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

あれこれ興味をもって考えたことを書いてます

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

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」・・いけてるみたいです。

 

 


 STS  3.8.3(Spring Boot 1.5.1)+thymeleaf 関連記事

 

入力画面に関連する記事

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。