1. 序章

このクイックチュートリアルでは、Thymeleafで列挙型を操作する方法を学習します。

ドロップダウンに列挙値をリストすることから始めます。 その後、テンプレート内のフロー制御に列挙型を使用する方法を見ていきます。

2. 設定

まず、ThymeleafSpring Bootスターターをpom.xmlファイルに追加します。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <versionId>2.2.2.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
}

3. ドロップダウンメニューでの列挙の表示

selectとoptionを使用して、Color列挙型を使用するドロップダウンを作成しましょう。

<select name="color">
    <option th:each="colorOpt : ${T(com.baeldung.thymeleaf.model.Color).values()}" 
        th:value="${colorOpt}" th:text="${colorOpt}"></option>
</select>

T演算子は、クラスのインスタンスを指定したり、静的メソッドにアクセスしたりするためのSpring ExpressionLanguageの一部です。

アプリケーションを実行してウィジェットエントリページに移動すると、Colorドロップダウンにすべての色が表示されます。

フォームを送信すると、ウィジェットオブジェクトに選択した色が入力されます:

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>

ドロップダウンがより読みやすい色の名前で表示されるようになりました。

5. Ifステートメント

列挙型の値に基づいて、表示する内容を変更したい場合があります。 Color列挙型を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. Switch-Caseステートメント

if ステートメントに加えて、Thymeleafはswitch-caseステートメントをサポートします。

switch-caseステートメントをColor列挙型で使用してみましょう。

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

オレンジ色のウィジェットを入力すると、警告ステートメントが表示されます。

7. 結論

このチュートリアルでは、Thymeleafを使用して、アプリケーションで定義したColor列挙型を使用してドロップダウンを作成することから始めました。 そこから、ドロップダウン表示値を読みやすくする方法を学びました。

ドロップダウンで入力側を通過した後、出力側に移動し、制御構造で列挙体を操作する方法を学びました。  ifステートメントとswitch-caseステートメントの両方を使用して、Color列挙型に基づいていくつかの要素を条件付けました。

完全な例は、GitHubから入手できます。