1前書き


Thymeleaf

は、HTML、XML、JavaScript、CSS、およびプレーンテキストを処理および作成するためのJavaテンプレートエンジンです。 ThymeleafとSpringの紹介については、リンクを見てください:/thymeleaf-in-spring-mvc[この記事を書く]

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

Thymeleaf 3.0には、

TEXT



JAVASCRIPT

、および

CSS

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


2 Mavenの依存関係

まず、ThymeleafとSpringを統合するために必要な設定を見てみましょう。私たちの依存関係では

thymeleaf-spring

ライブラリが必要です。

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>

Spring 4プロジェクトでは、

thymeleaf-spring5

の代わりに

thymeleaf-spring4

ライブラリを使用する必要があります。依存関係の最新版はhttps://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.thymeleaf%22%20AND%20a%3A%22thymeleaf-spring5%22[で見つけることができます。ここに]。


3 Java Thymeleafの設定

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

そのためには、Java構成クラスを更新し、リンクを作成する必要があります。/thymeleaf-in-spring-mvc[ここ]。新しいタイプのリゾルバに加えて、私たちのテンプレートはSpringインターフェース

ApplicationContextAware

を実装しています。

@Configuration
@EnableWebMvc
@ComponentScan({ "com.baeldung.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;
    }
}

上記のように、HTMLビュー用、Javascriptファイル用、プレーンテキストファイル用の3つの異なるビューリゾルバを作成しました。

Thymeleafは、ファイル名拡張子 –

.html



.js

、および

.txt

をそれぞれ確認することでそれらを区別します。

ビュー名を持つ必須の

String[]

配列を作成するメソッド

array()

を使用するために、静的な

ArrayUtil

クラスも作成しました。

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

private <span class="pl-smi x x-first x-last">ISpringTemplateEngine</span> 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スプリングコントローラー構成

私たちの新しい設定をテストするために、我々は次の春のコントローラを作成しました:

@Controller
public class InliningController {

    @RequestMapping(value = "/html", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("title", "Baeldung");
        model.addAttribute("description", "<strong>Thymeleaf</strong> 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ファイルに学生情報がロードされます。このリンクから、

StudentUtils

クラス内で単純な__buildStudents()メソッドを使用していることに注意してください。/thymeleaf-in-spring-mvc[article]。

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

追加機能として、ログに記録されたユーザー名を取得するために

SecurityContextHolder

を使用します。


5 HTML/JS/TEXTサンプルファイル

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Inlining example</title>
</head>
<body>
    <p>Title of tutorial:[[${title}]]</p>
    <p>Description:[(${description})]</p>
</body>
</html>

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

<p>Title of tutorial: Baeldung</p>
<p>Description: <strong>Thymeleaf</strong> tutorial</p>

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

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

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


JAVASCRIPT

テンプレートモードの属性はJavaScriptでエスケープされません。

その結果、js alertが作成されます。 listStudents.htmlファイルにjQuery AJAXを使用してこのアラートをロードします。

<script>
    $(document).ready(function() {
        $.ajax({
            url : "/spring-thymeleaf/js",
            });
        });
</script>

テストしたい最後の、ただし最も重要ではない機能は、プレーンテキストファイルの生成です。以下の内容のStudentsList.txtファイルを作成しました。

Dear[(${username})],

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

マークアップテンプレートモードと同様に、標準言語には1つの処理可能な要素(

[#…​])

と一連の処理可能な属性(__th:text、th:utext、th:if、th: 、th:各_など)。その結果はテキストファイルになるでしょう、それがセクション3の終わりに述べられたように、私たちが例えば電子メールで使うかもしれないそれです。

  • テスト方法?** 最初にブラウザでプレイしてから、既存のJUnitテストも確認することをお勧めします。


6. 結論

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

このチュートリアルの完全な実装はhttps://github.com/eugenp/tutorials/tree/master/spring-thymeleaf[GitHubプロジェクト]で見つけることができます – これはEclipseベースのプロジェクトです。インターネットブラウザ

最後に、プロジェクトをバージョン2からこの最新バージョンに移行することを計画している場合は、http://www.thymeleaf.org/doc/articles/thymeleaf3migration.html[移行ガイド]をご覧ください。また、既存のThymeleafテンプレートはThymeleaf 3.0とほぼ100%互換性があるため、構成を少し変更するだけで済みます。