春にThymeleafを使用することへの紹介

SpringでのThymeleafの使用の概要

1. 前書き

Thymeleafは、HTML、XML、JavaScript、CSS、およびテキストを処理および作成するためのJavaテンプレートエンジンです。

この記事では、Spring MVCアプリケーションのビューレイヤーでのいくつかの基本的なユースケースとともに、how to use Thymeleaf with Springについて説明します。

ライブラリは非常に拡張可能であり、その自然なテンプレート機能により、バックエンドなしでテンプレートをプロトタイプ化できます。これにより、JSPなどの他の一般的なテンプレートエンジンと比較して、開発が非常に高速になります。

2. ThymeleafとSpringの統合

まず、Springとの統合に必要な構成を見てみましょう。 統合にはthymeleaf-springライブラリが必要です。

Maven POMファイルに次の依存関係を追加します。


    org.thymeleaf
    thymeleaf
    3.0.9.RELEASE


    org.thymeleaf
    thymeleaf-spring4
    3.0.9.RELEASE

Spring 4プロジェクトの場合、thymeleaf-spring5の代わりにthymeleaf-spring4ライブラリを使用する必要があることに注意してください。

SpringTemplateEngineクラスは、すべての構成ステップを実行します。 Java構成ファイルでこのクラスをBeanとして構成できます。

@Bean
@Description("Thymeleaf Template Resolver")
public ServletContextTemplateResolver templateResolver() {
    ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
    templateResolver.setPrefix("/WEB-INF/views/");
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("HTML5");

    return templateResolver;
}

@Bean
@Description("Thymeleaf Template Engine")
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(templateResolver());
    templateEngine.setTemplateEngineMessageSource(messageSource());
    return templateEngine;
}

templateResolver Beanプロパティprefixおよびsuffixは、それぞれwebappディレクトリ内のビューページの場所とそのファイル名拡張子を示します。

Spring MVCのViewResolverインターフェースは、コントローラーによって返されたビュー名を実際のビューオブジェクトにマップします。 ThymeleafViewResolverViewResolverインターフェースを実装し、ビュー名を指定してレンダリングするThymeleafビューを決定するために使用されます。

統合の最後のステップは、ThymeleafViewResolverをBeanとして追加することです。

@Bean
@Description("Thymeleaf View Resolver")
public ThymeleafViewResolver viewResolver() {
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(templateEngine());
    viewResolver.setOrder(1);
    return viewResolver;
}

3. メッセージソースからの値の表示(プロパティファイル)

th:text=”#{key}”タグ属性を使用して、プロパティファイルの値を表示できます。 これを機能させるには、プロパティファイルをmessageSourceBeanとして構成する必要があります。

@Bean
@Description("Spring Message Resolver")
public ResourceBundleMessageSource messageSource() {
    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
    messageSource.setBasename("messages");
    return messageSource;
}

キーwelcome.messageに関連付けられた値を表示するThymeleafHTMLコードは次のとおりです。

4. モデル属性の表示

4.1. 単純な属性

th:text=”${attributename}”タグ属性を使用して、モデル属性の値を表示できます。 コントローラクラスにserverTimeという名前のモデル属性を追加しましょう。

model.addAttribute("serverTime", dateFormat.format(new Date()));

serverTime属性の値を表示するHTMLコード:

Current time is 

4.2. コレクションの属性

モデル属性がオブジェクトのコレクションである場合、th:eachタグ属性を使用してそれを反復処理できます。 idnameの2つのフィールドを持つStudentモデルクラスを定義しましょう。

public class Student implements Serializable {
    private Integer id;
    private String name;
    // standard getters and setters
}

次に、コントローラークラスのモデル属性として生徒のリストを追加します。

List students = new ArrayList();
// logic to build student data
model.addAttribute("students", students);

最後に、Thymeleafテンプレートコードを使用して、学生のリストを反復処理し、すべてのフィールド値を表示できます。


    
        
        
    

5. 条件付き評価

5.1. ifおよびunless

th:if=”${condition}”属性は、条件が満たされた場合にビューのセクションを表示するために使用されます。 th:unless=”${condition}”属性は、条件が満たされない場合にビューのセクションを表示するために使用されます。

genderフィールドをStudentモデルに追加します。

public class Student implements Serializable {
    private Integer id;
    private String name;
    private Character gender;

    // standard getters and setters
}

このフィールドに、学生の性別を示す2つの可能な値(MまたはF)があるとします。 単一の文字ではなく「男性」または「女性」という単語を表示したい場合は、次のThymeleafコードを使用してこれを実現できます。


    
    

5.2. switchおよびcase

th:switch属性とth:case属性は、switchステートメント構造を使用して条件付きでコンテンツを表示するために使用されます。

前のコードは、th:switchおよびth:case属性を使用して書き直すことができます。


    
    

6. ユーザー入力の処理

フォーム入力は、th:action=”@{url}”およびth:object=”${object}”属性を使用して処理できます。 th:actionはフォームアクションURLを提供するために使用され、th:objectは送信されたフォームデータがバインドされるオブジェクトを指定するために使用されます。 個々のフィールドは、th:field=”*{name}”属性を使用してマップされます。ここで、nameはオブジェクトの一致するプロパティです。

Studentクラスの場合、入力フォームを作成できます。

上記のコードでは、/saveStudentはフォームアクションURLであり、studentは送信されたフォームデータを保持するオブジェクトです。

StudentControllerクラスは、フォームの送信を処理します。

@Controller
public class StudentController {
    @RequestMapping(value = "/saveStudent", method = RequestMethod.POST)
    public String saveStudent(@ModelAttribute Student student, BindingResult errors, Model model) {
        // logic to process input data
    }
}

上記のコードでは、@RequestMappingアノテーションは、フォームで提供されたURLを使用してコントローラーメソッドをマップします。 注釈付きメソッドsaveStudent()は、送信されたフォームに必要な処理を実行します。 @ModelAttribute注釈は、フォームフィールドをstudentオブジェクトにバインドします。

7. 検証エラーの表示

#fields.hasErrors()関数を使用して、フィールドに検証エラーがあるかどうかを確認できます。 #fields.errors()関数を使用して、特定のフィールドのエラーを表示できます。 フィールド名は、これら両方の機能の入力パラメーターです。

フォームの各フィールドのエラーを繰り返し表示するHTMLコード:

上記の関数は、フィールド名の代わりに、ワイルドカード文字*または定数allを受け入れて、すべてのフィールドを示します。 th:each属性は、各フィールドに存在する可能性のある複数のエラーを繰り返すために使用されます。

ワイルドカード*を使用して書き直された以前のHTMLコード:

または定数allを使用します。

同様に、Springのグローバルエラーは、global定数を使用して表示できます。

グローバルエラーを表示するHTMLコード:

th:errors属性を使用して、エラーメッセージを表示することもできます。 フォームにエラーを表示する前のコードは、th:errors属性を使用して書き直すことができます。

8. 変換の使用

二重括弧構文\{\{}}は、表示用にデータをフォーマットするために使用されます。 これは、コンテキストファイルのconversionService Bean内のそのタイプのフィールド用に構成されたformattersを利用します。

Studentクラスの名前フィールドの形式は次のとおりです。


    

上記のコードは、WebMvcConfigurerインターフェイスからaddFormatters()メソッドをオーバーライドすることによって構成されたNameFormatterクラスを使用しています。 この目的のために、@ConfigurationクラスはWebMvcConfigurerAdapterクラスをオーバーライドします。

@Configuration
public class WebMVCConfig extends WebMvcConfigurerAdapter {
    // ...
    @Override
    @Description("Custom Conversion Service")
    public void addFormatters(FormatterRegistry registry) {
        registry.addFormatter(new NameFormatter());
    }
}

NameFormatterクラスは、SpringFormatterインターフェースを実装します。

#conversionsユーティリティを使用して、オブジェクトを表示用に変換することもできます。 ユーティリティ関数の構文は#conversions.convert(Object, Class)で、ObjectClassタイプに変換されます。

小数部分を削除してstudentオブジェクトpercentageフィールドを表示するには:


    

9. 結論

このチュートリアルでは、ThymeleafをSpringMVCアプリケーションに統合して使用する方法を説明しました。

また、フィールドの表示、入力の受け入れ、検証エラーの表示、および表示用のデータの変換方法の例を見てきました。 この記事に示されているコードの作業バージョンは、a GitHub repositoryで入手できます。