Spring MVC + Thymeleaf 3.0:新機能

Spring MVC + Thymeleaf 3.0：新機能

1. 前書き

Thymeleafは、HTML、XML、JavaScript、CSS、およびプレーンテキストを処理および作成するためのJavaテンプレートエンジンです。 ThymeleafとSpringの紹介については、this write-upをご覧ください。

この記事では、Thymeleafアプリケーションを使用したSpring MVCのnew features of Thymeleaf 3.0について説明します。バージョン3には、新機能と内部の多くの改善が含まれています。具体的には、自然な処理とJavascriptのインライン化のトピックを取り上げます。

Thymeleaf 3.0には、TEXT、JAVASCRIPT、およびCSSの3つの新しいテキストテンプレートモードが含まれています。これらは、それぞれプレーン、JavaScript、およびCSSテンプレートの処理に使用されます。

2. Mavenの依存関係

まず、ThymeleafをSpringと統合するために必要な構成を見てみましょう。依存関係にはthymeleaf-springライブラリが必要です。


    org.thymeleaf
    thymeleaf
    3.0.9.RELEASE


    org.thymeleaf
    thymeleaf-spring4
    3.0.9.RELEASE

Spring 4プロジェクトの場合、thymeleaf-spring5の代わりにthymeleaf-spring4ライブラリを使用する必要があることに注意してください。依存関係の最新バージョンはhereにあります。

3. JavaThymeleaf構成

最初に、新しいテンプレートエンジン、ビュー、およびテンプレートリゾルバを構成する必要があります。そのためには、作成されたJava configクラスを更新する必要があります

これを行うには、hereを作成したJava構成クラスを更新する必要があります。新しいタイプのリゾルバーに加えて、テンプレートはSpringインターフェースApplicationContextAwareを実装しています。

@Configuration
@EnableWebMvc
@ComponentScan({ "com.example.thymeleaf" })
public class WebMVCConfig implements WebMvcConfigurer, ApplicationContextAware {

    private ApplicationContext applicationContext;

    // Java setter

    @Bean
    public ViewResolver htmlViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
        resolver.setContentType("text/html");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("*.html"));
        return resolver;
    }

    @Bean
    public ViewResolver javascriptViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(javascriptTemplateResolver()));
        resolver.setContentType("application/javascript");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("*.js"));
        return resolver;
    }

    @Bean
    public ViewResolver plainViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(plainTemplateResolver()));
        resolver.setContentType("text/plain");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("*.txt"));
        return resolver;
    }
}

上記のように、3つの異なるビューリゾルバーを作成しました。1つはHTMLビュー用、もう1つはJavascriptファイル用、もう1つはプレーンテキストファイル用です。 Thymeleafは、ファイル名拡張子（それぞれ.html、.js、および.txt）をチェックすることにより、それらを区別します。

また、ビュー名を使用して必要なString[]配列を作成するメソッドarray()を使用するために、静的ArrayUtilクラスを作成しました。

このクラスの次の部分では、テンプレートエンジンを構成する必要があります。

private ISpringTemplateEngine templateEngine(ITemplateResolver templateResolver) {
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);
    return engine;
}

最後に、3つの個別のテンプレートリゾルバを作成する必要があります。

private ITemplateResolver htmlTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/views/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.HTML);
    return resolver;
}

private ITemplateResolver javascriptTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/js/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
    return resolver;
}

private ITemplateResolver plainTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/txt/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.TEXT);
    return resolver;
}

テストには、キャッシュされていないテンプレートを使用することをお勧めします。そのため、setCacheable(false)メソッドを使用することをお勧めします。

Javascriptテンプレートは/WEB-INF/js/フォルダーに保存され、プレーンテキストファイルは/WEB-INF/txt/フォルダーに保存され、最後にHTMLファイルへのパスは/WEB-INF/htmlになります。

4. Springコントローラーの構成

新しい構成をテストするために、次のSpringコントローラーを作成しました。

@Controller
public class InliningController {

    @RequestMapping(value = "/html", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("title", "example");
        model.addAttribute("description", "Thymeleaf tutorial");
        return "inliningExample.html";
    }

    @RequestMapping(value = "/js", method = RequestMethod.GET)
    public String getExampleJS(Model model) {
        model.addAttribute("students", StudentUtils.buildStudents());
        return "studentCheck.js";
    }

    @RequestMapping(value = "/plain", method = RequestMethod.GET)
    public String getExamplePlain(Model model) {
        model.addAttribute("username", SecurityContextHolder.getContext()
          .getAuthentication().getName());
        model.addAttribute("students", StudentUtils.buildStudents());
        return "studentsList.txt";
    }
}

HTMLファイルの例では、HTMLタグをエスケープする場合としない場合で、新しいインライン化機能を使用する方法を示します。

JSの例では、AJAXリクエストを生成します。これにより、学生の情報を含むjsファイルが読み込まれます。このarticleから、StudentUtilsクラス内で単純なbuildStudents()メソッドを使用していることに注意してください。

最後に、プレーンテキストの例では、学生情報をテキストファイルとして表示します。プレーンテキストテンプレートモードを使用する典型的な例は、プレーンテキストメールの送信に使用できます。

追加機能として、SecurityContextHolderを使用して、ログに記録されたユーザー名を取得します。

5. Html/Js/Text Example Files

このチュートリアルの最後の部分では、3種類のファイルを作成し、新しいThymeleaf機能の使用をテストします。 HTMLファイルから始めましょう：




    
    Inlining example


    Title of tutorial: [[title}]]
    Description: [(${description})]

このファイルでは、2つの異なるアプローチを使用します。タイトルを表示するために、エスケープ構文を使用します。これにより、すべてのHTMLタグが削除され、テキストのみが表示されます。説明の場合、エスケープされていない構文を使用して、HTMLタグを保持します。最終結果は次のようになります。

Title of tutorial: example
Description: Thymeleaf tutorial

もちろん、Thymeleafという単語を太字で表示することにより、ブラウザによって解析されます。

次に、jsテンプレート機能のテストに進みます。

var count = [[students.size()}]];
alert("Number of students in group: " + count);

JAVASCRIPTテンプレートモードの属性はJavaScriptでエスケープされません。その結果、jsアラートが作成されます。 jQuery AJAXを使用して、listStudents.htmlファイルにこのアラートをロードします。

テストする最後の、しかし最も重要な機能は、プレーンテキストファイルの生成です。以下のコンテンツを含むstudentList.txtファイルを作成しました。

Dear [(${username})],

This is the list of our students:
[# th:each="s : ${students}"]
   - [(${s.name})]. ID: [(${s.id})]
[/]
Thanks,
The example University

マークアップテンプレートモードと同様に、標準ダイアレクトには1つの処理可能な要素（[# …])と一連の処理可能な属性（th:text, th:utext, th:if, th:unless, th:eachなど）のみが含まれることに注意してください。結果はテキストファイルになり、セクション3の最後で述べたように、たとえば電子メールで使用できます。

How to test?最初にブラウザーで遊んでから、既存のJUnitテストも確認することをお勧めします。

6. 結論

この記事では、バージョン3.0を中心に、Thymeleafフレームワークに実装された新機能について説明しました。

このチュートリアルの完全な実装はthe GitHub projectにあります。これはEclipseベースのプロジェクトであり、最新のすべてのインターネットブラウザで簡単にテストできます。

最後に、プロジェクトをバージョン2からこの最新バージョンに移行することを計画している場合は、here at the migration guideを確認してください。また、既存のThymeleafテンプレートはThymeleaf 3.0とほぼ100％互換性があるため、構成を変更するだけで済みます。

TOC

Spring MVC + Thymeleaf 3.0:新機能