SpringBoot Thymeleaf

Thymeleafとは何ですか？

Thymeleaf は、以下に基づくオープンソースのJavaライブラリです Apache許可2.0 許可を取得します。これは HTML5/XHTML/XML テンプレートエンジン。それはWeb（サーバー側のServlet）と非Web（オフライン）環境のために使用されます サーバーサイドJavaテンプレートエンジン。現代のHTML5 JVM Web開発において、それは完璧な選択です。Spring Frameworkとの完全な統合を提供します。

テンプレートファイルに変換を適用し、アプリケーションが生成するデータやテキストを表示します。WebアプリケーションでXHTMLを提供するのに適しています。/HTML5。

Thymeleafの目標は、以下のようなものを提供することです ファッションおよび フォーマットが良いのテンプレート作成方法。それはXMLタグと属性に基づいています。これらのXMLタグは、DOM（ドキュメントオブジェクトモデル）上で事前に定義されたロジックの実行を定義し、そのロジックをテンプレート内のコードとして明示的に書き込むのではなく、それを置き換えます。 JSP 。

Thymeleafのアーキテクチャは、テンプレートに対して速く処理、キャッシュ解析のファイルに応じて異なります。実行中に最も少ないI/O操作。

なぜThymeleafを使用するのか？

JSPはHTMLに多少似ていますが、ThymeleafなどのHTMLとは完全に互換性がありません。Thymeleafのテンプレートファイルはブラウザで正常に開き表示できますが、JSPファイルはできません。

ThymeleafはSpring ELのような変数式($ {...})をサポートし、モデル属性、スター式表現上で実行します(* {...})はフォームサポートBean上で実行され、ハッシュ式(#{...})は国際化に使用され、リンク式(@{......}))はURLを書き換えます。

JSPのように、ThymeleafはリッチHTMLメールに非常に適しています。

Thymeleafがどのテンプレートを処理できますか？

Thymeleafは6種類のテンプレートを処理できます（別名としても呼ばれます" テンプレートパターン以下の通り

XML 有効なXML XHTML 有効なXHTML HTML5 旧版HTML5

旧版HTMLを除いて5パターン以外のすべてのパターンは参照されます 明確に定義されたXML ファイル。これにより、独立したタグ、値のないタグ属性、または引用符の間に書かれていない属性などの機能を持つHTMLを処理できます5ファイル。

この特定のパターンでファイルを処理するために、Thymeleafは変換を実行し、ファイルを以下のように変換します フォーマットが良いXML ファイル（有効なHTML5ファイル)。

注意: Thymeleafでは、検証はXHTMLおよびXMLテンプレートに限定されます。

Thymeleafは、このモードでテンプレートを解析する方法を指定することで、独自のパターンを定義することもできます。これにより、ThymeleafはDOMツリーとしてモデル化できるどんなモデルも効果的にテンプレートとして処理できます。

標準方言

Thymeleafは、DOMノードのフレームワークを定義するテンプレートエンジンです。テンプレートで処理されるDOMノード。

DOMノードに逻辑を適用するオブジェクトが プロセッサ。一組のプロセッサおよび一部の追加の工芸品が方言。Thymeleafのコアライブラリを含む方言は 標準方言。

ライブラリの高度な機能を利用しつつ、独自の処理ロジックを定義したい場合、独自の方言を定義できます。独自の方言。テンプレートエンジンでは、一度に複数の方言を設定できます。

Thymeleaf統合パッケージ（thymeleaf-spring3およびthymeleaf-spring4)は、以下と呼ばれる SpringStandard Dialect の方言。標準方言とSpringStandardはほぼ同じですが、標準方言にはSpringフレームワークの一部の機能をよりよく利用できる小さな変更があります。

例えば、Spring Expression Languageを使用してThymeleafの標準的なONGL（オブジェクトグラフナビゲーション言語）を置き換えます。

標準方言は、どのように処理するかに関係なくテンプレートを処理できますが、特にWebオrienテンプレートパターン（HTML）に適しています。5およびXHTML)。以下のXHTML規格をサポートおよび検証します:

XHTML 1.0トランジション版厳格なXHTML 1.0 XHTML 1.0フレームワークセット XHTML 1.1。

標準方言プロセッサは、HTMLを処理する前にブラウザに表示を許可する属性プロセッサです5/XHTMLテンプレートファイルです。これは、他の属性を無視しているためです。

例えば、JSPファイルがタグライブラリを使用する場合、以下のタグの代わりに以下のコードが含まれています:

例

<form:inputText name="student.Name" value="${student.name}"　/>

Thymeleafの標準方言は以下のコードで同じ機能を実現できます。

例

<input type="text" name="student Name" value="Thomas" th:value="${student.name}"　/>

上記のコードでは、以下のようにその中で定義することもできます value 属性 Thomas ブラウザでプロトタイプを開くと、この値が表示されます。Thymeleafのテンプレート処理中に、この属性は以下の ${student.name} の計算結果を値に置き換えます。

デザインエンジニアと開発者が処理を行うことができます。同じテンプレートファイルを使用することで、静的プロトタイプを動作テンプレートファイルに変換する作業を減少させます。これを 自然なテンプレート。

Thymeleafの特徴

ネットワーク環境だけでなく、非ネットワーク環境でも使用できます。 HTML用5/XML/XHTMLのJavaテンプレートエンジン。高いパフォーマンスの解析テンプレートキャッシュを持っていますので、I/Oを最低限に抑えます。必要に応じて、テンプレートエンジンフレームワークとして使用できます。いくつかのテンプレートパターンをサポートしています: XML、XHTML、HTML5。開発者が拡張し、カスタム方言を作成することができます。方言と呼ばれるモジュール化機能セットに基づいています。インターナショナライズをサポートしています。

Thymeleaf実装

アプリケーションのpom.xmlに追加することで、Thymeleafの実装を行います。　 spring-boot-starter-thymeleaf 依存関係を実装してThymeleafテンプレートエンジンのファイルを設定します。Spring Bootはテンプレートエンジンを、　/resource/templatesからテンプレートファイルを読み取ります。

例

<dependency>
<groupId>org.springframework.boot</<groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Spring Boot Thymeleafサンプル

Spring Bootアプリケーションを作成し、Thymeleafテンプレートを実装します。

ステップ1: Spring Initializrを開きます http://start.spring.io。

ステップ2: Spring Bootバージョンを選択　 2.3.0.M1。

ステップ2: 提供　グループ名前。以下のものを提供しました。　 com.w3codebox 。

ステップ3: 提供　アーティファクト ID。以下のものを提供しました。　 spring-boot-thymeleaf-view-example。

ステップ5: 依存関係を追加　 Spring Web および　Thymeleaf。

ステップ6: をクリック　 Generate (生成)ボタンをクリックすると、規格をパッケージ化し　 Jar ファイルから、それをローカルシステムにダウンロードします。

第7ステップ: 提取 JarファイルをコピーしてSTSのワークスペースに貼り付けます。

ステップ8: インポート STSのプロジェクトフォルダ

ファイル->インポート->既存のMavenプロジェクト->ブラウズ->springを選択するフォルダ-boot-thymeleaf-view-example->完了

インポートには少し時間がかかります。

ステップ9: のパッケージ　 com.w3codebox 中でクラスを作成します。名前を　 Userのクラス。

このクラスでは、2つの変数を定義しました。　名前および　 メール 生成し　 getterとsetter。

User.java

例

package com.w3codebox;　　
public class User　
{　　
String name;　　
String email;　　
public String getName()　
{　　
return name;　　
}　　
public void setName(String name)　
{　　
this.name = name;　　
}　　
public String getEmail()　
{　　
return email;　　
}　　
public void setEmail(String email)　
{　　
this.email = email;　　
}　　
}

ステップ10: 制御クラスを作成します。名前が　 DemoController の制御クラスです。

DemoController.java

例

package com.w3codebox;　　
import org.springframework.web.bind.annotation.ModelAttribute;　　
import org.springframework.web.bind.annotation.RequestMapping;　　
import org.springframework.web.bind.annotation.RequestMethod;　　
import org.springframework.web.servlet.ModelAndView;　　
import org.springframework.stereotype.Controller;　　
@Controller　　
public class DemoController　
{　　
@RequestMapping("/")　　
public String index()
{　　
return"index";　　
}　　
@RequestMapping(value="/save", method=RequestMethod.POST)　　
public ModelAndView save(@ModelAttribute User user)
{　　
ModelAndView modelAndView = new ModelAndView();　　
modelAndView.setViewName("user-data");　　　　　　
modelAndView.addObject("user", user);　　　　
return modelAndView;　　
}　　
}

次に、Thymeleafテンプレートを作成します。

ステップ11: 在　テンプレート内部(src/main/resources/テンプレート)フォルダー内に、以下の名前の　 user-data のThymeleafテンプレート。

テンプレートフォルダーを右クリック->新規作成->その他->HTMLファイル->次へ->ファイル名を提供->完了

注意: テンプレートファイル内で以下の内容を実装しないとダメです。

例

<html　lang="en"　xmlns:th="http://www.thymeleaf.org">

user-data.html

例

<html　xmlns:th="https://thymeleaf.org">　　
<table>　　
<tr>　　
<td><h4>ユーザー名:　</h4></td>　　
<td><h4　th:text="${user.name}"></h4></td>　　
</tr>　　
<tr>　　
<td><h4>メールID:　</h4></td>　　
<td><h4　th:text="${user.email}"></h4></td>　　
</tr>　　
</table>　　
</html>

ステップ12: 同様に、フォルダー「テンプレート」内に　 HTML ファイルを作成しました。以下の名前の　 index のHTMLファイル。

index.html

例

<html　lang="en">　　
<head>　　
<title>Index　Page</title>　　
</head>　　
<body>　　
<form　action="save"　method="post">　　
<table>　　
<tr>　　
<td><label　for="user-name">ユーザー名</label></td>　　
<td><input　type="text"　name="name"></input></td>　　
　</tr>　　
<tr>　　
<td><label　for="email">Email</label></td>　　
<td><input　type="text"　name="email"></input></td>　　
</tr>　　
<tr>　　
<td></td>　　
<td><input　type="submit"　value="Submit"></input></td>　　
</tr>　　
</table>　　
</form>　　
</body>　　
</html>

ステップ13: 開く　 application.properties ファイルに以下の属性を追加します。

application.properties

例

spring.thymeleaf.cache=false
spring.thymeleaf.suffix:　.html

全てのファイル、フォルダー、パッケージを作成した後、プロジェクトのディレクトリ構造は以下のようになります:

アプリケーションを実行してみましょう。

ステップ14: 開く　 SpringBootThymeleafViewExampleApplication.java のファイルをJavaアプリケーションとして作成。

SpringBootThymeleafViewExampleApplication.java

例

package com.w3codebox;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SpringBootThymeleafViewExampleApplication　
{
public static void main(String[] args)　
{
SpringApplication.run(SpringBootThymeleafViewExampleApplication.class, args);
}
}

ステップ15: 今、ブラウザを開いてURL http:を呼び出します//localhost:8080。以下のように出力が表示されます。

提供　ユーザー名および　メール、次に　送信クリックします。

ボタンを　送信ボタンをクリックすると、URLがhttp:に変更されます//localhost: 8080/saveしてユーザーデータを表示するようにします。

このセクションでは、Thymeleafビューについて説明しました。ビューをより魅力的にするために、以下のように追加できます　 CSS および　 JS ファイル。これらのファイルは以下の場所に配置する必要があります　 src/main/resources/static フォルダー内。

SpringBoot キャッシュ Spring Boot JPA

SpringBoot 教程