Thymeleafでの列挙の操作

1. 前書き

このクイックチュートリアルでは、https://www.baeldung.com/thymeleaf-in-spring-mvc [Thymeleaf]で列挙型を操作する方法を学習します。
ドロップダウンに列挙値をリストすることから始めます。 その後、テンプレート内のフロー制御に列挙型を使用する方法を見ていきます。

2. セットアップ

まず、https://search.maven.org/search?q = a:spring-boot-starter-thymeleaf%20AND%20g:org.springframework.boot [Thymeleafのスプリングブートスターター]を_pom.xml_に追加することから始めましょう。ファイル:
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <versionId>2.1.6.RELEASE</versionId>
</dependency>
色の選択肢がいくつかあるウィジェットで作業するので、_Color_列挙型を定義しましょう。
public enum Color {
    BLACK, BLUE, RED, YELLOW, GREEN, ORANGE, PURPLE, WHITE
}
それでは、_Widget_クラスを作成しましょう。
public class Widget {
    private String name;
    private Color color;

    // Standard getters/setters
}
link:/thymeleaf-select-option[select and option]を使用して、_Color_ enumを使用するドロップダウンを作成しましょう。
<select name="color">
    <option th:each="colorOpt : ${T(com.baeldung.thymeleaf.model.Color).values()}"
        th:value="${colorOpt}" th:text="${colorOpt}"></option>
</select>
  • _T_演算子は、クラスのインスタンスを指定したり、静的メソッドにアクセスしたりするためのSpring Expression Language *の一部です。

    アプリケーションを実行してウィジェットエントリページに移動すると、_Color_ドロップダウンにすべての色が表示されます。
    link:/uploads/entry_enum_dd1-100x53.jpg%20100w []
    フォームを送信すると、*私たちの_Widget_オブジェクトに選択した色が入力されます:*
    link:/uploads/view_1-1-100x73.jpg%20100w []

4. 表示名を使用する

すべての大文字は少し耳障りになる可能性があるため、この例を拡張して、より使いやすいドロップダウンラベルを提供しましょう。
まず、_Color_列挙型を変更して表示名を提供します。
public enum Color {
    BLACK("Black"),
    BLUE("Blue"),
    RED("Red"),
    YELLOW("Yellow"),
    GREEN("Green"),
    ORANGE("Orange"),
    PURPLE("Purple"),
    WHITE("White");

    private final String displayValue;

    private Color(String displayValue) {
        this.displayValue = displayValue;
    }

    public String getDisplayValue() {
        return displayValue;
    }
}
次に、Thymeleafテンプレートに戻り、ドロップダウンを更新して新しい_displayValue_を使用します。
<select name="color">
    <option th:each="colorOpt : ${T(com.baeldung.thymeleaf.model.Color).values()}"
        th:value="${colorOpt}" th:text="${colorOpt.displayValue}"></option>
</select>
ドロップダウンに、より読みやすい色の名前が表示されるようになりました。
link:/uploads/entry_enum_dd2-100x55.jpg%20100w []

5. Ifステートメント

時々、enumの値に基づいて表示するものを変えたい場合があります。 _Color_ enumをlink:/spring-thymeleaf-conditionals[Thymeleaf条件ステートメント]で使用できます。
可能なウィジェットの色について意見があると想像してみましょう。
Thymeleaf _if_ステートメントと_Color_列挙を使用して、条件付きでテキストを表示できます。
<div th:if="${widget.color == T(com.baeldung.thymeleaf.model.Color).RED}">
    This color screams danger.
</div>
別のオプションは、_String_比較を使用することです。
<div th:if="${widget.color.name() == 'GREEN'}">
    Green is for go.
</div>

6. スイッチケースステートメント

  • _if_ステートメントに加えて、Thymeleafは_switch-case_ステートメントをサポートしています。*

    _Color_ enumで_switch-case_ステートメントを使用しましょう:
<div th:switch="${widget.color}">
    <span th:case="${T(com.baeldung.thymeleaf.model.Color).RED}"
      style="color: red;">Alert</span>
    <span th:case="${T(com.baeldung.thymeleaf.model.Color).ORANGE}"
      style="color: orange;">Warning</span>
    <span th:case="${T(com.baeldung.thymeleaf.model.Color).YELLOW}"
      style="color: yellow;">Caution</span>
    <span th:case="${T(com.baeldung.thymeleaf.model.Color).GREEN}"
      style="color: green;">All Good</span>
</div>
オレンジ色のウィジェットを入力すると、警告文が表示されるはずです。
link:/uploads/view_2-100x83.jpg%20100w []

7. 結論

このチュートリアルでは、Thymeleafを使用して、アプリケーションで定義した_Color_ enumを使用してドロップダウンを作成することから始めました。 そこから、ドロップダウン表示の値をより読みやすくする方法を学びました。
ドロップダウンで入力側を調べた後、出力側に移動し、制御構造内で列挙型を操作する方法を学びました。 _Color_列挙に基づいていくつかの要素を条件付けるために、_if_と_switch-case_ステートメントの両方を使用しました。
完全な例は、https://github.com/eugenp/tutorials/tree/master/spring-thymeleaf-2 [GitHub上]で入手できます。