Thymeleafでのフラグメントの操作
1. 概要
このチュートリアルでは、make use of Thymeleaf Fragments to reuse some common parts of a siteを実行する方法を示します。 非常に単純なSpringMVCプロジェクトを設定した後、ビューに焦点を当てます。
Thymeleafを初めて使用する場合は、このサイトの他の記事（this introductionやエンジンのthis one about the 3.0 versionなど）を確認できます。
2. Mavenの依存関係
Thymeleafを有効にするには、いくつかの依存関係が必要です。
org.thymeleaf
thymeleaf
3.0.9.RELEASE
org.thymeleaf
thymeleaf-spring5
3.0.9.RELEASE
thymeleafとthymeleaf-spring5の最新バージョンは、MavenCentralにあります。
3. 春のプロジェクト
3.1. Spring MVC設定
Thymeleafを有効にしてテンプレートのサフィックスを設定するには、configure MVC with a view resolver and template resolverにする必要があります。
また、いくつかの静的リソースのディレクトリを設定します。
@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;
}
private ITemplateResolver htmlTemplateResolver() {
SpringResourceTemplateResolver resolver
= new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/views/");
resolver.setCacheable(false);
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**", "/css/**")
.addResourceLocations("/WEB-INF/resources/", "/WEB-INF/css/");
}Spring Bootを使用している場合は、独自のカスタマイズを適用する必要がない限り、この構成は必要ない場合があることに注意してください。
3.2. コントローラー
この場合、コントローラーはビューの単なる乗り物です。 各ビューは、異なるフラグメント使用シナリオを示しています。
最後のものは、モデルに渡されてビューに表示されるデータをロードします。
@Controller
public class FragmentsController {
@GetMapping("/fragments")
public String getHome() {
return "fragments.html";
}
@GetMapping("/markup")
public String markupPage() {
return "markup.html";
}
@GetMapping("/params")
public String paramsPage() {
return "params.html";
}
@GetMapping("/other")
public String otherPage(Model model) {
model.addAttribute("data", StudentUtils.buildStudents());
return "other.html";
}
}Note that the view names must contain the “.html” suffix because of the way we configured our resolver.フラグメント名を参照するときにサフィックスも指定します。
4. ビュー
4.1. 単純なフラグメントの包含
まず、ページ内の共通部分を再利用します。
これらの部分は、分離されたファイルまたは共通ページのいずれかのフラグメントとして定義できます。 このプロジェクトでは、これらの再利用可能なパーツは、fragmentsという名前のフォルダーで定義されています。
フラグメントのコンテンツを含めるには、次の3つの基本的な方法があります。
-
insert –はタグ内にコンテンツを挿入します
-
replace –は、現在のタグをフラグメントを定義するタグに置き換えます
-
include –これは非推奨ですが、レガシーコードに表示される可能性があります
次の例、fragments.html,は、3つの方法すべての使用法を示しています。 このThymeleafテンプレートは、ドキュメントのヘッドとボディにフラグメントを追加します。
Thymeleaf Fragments: home
Go to the next page to see fragments in action
Now, let’s take a look at a page that holds some fragments.これはgeneral.htmlと呼ばれ、すぐに使用できるフラグメントとして定義された一部の部分を含むページ全体のようなものです。
Thymeleaf Fragments sample
Go to the next page to see fragments in action
This is another sidebar
<head>セクションにはスタイルシートのみが含まれていますが、Bootstrap、jQuery、Foundationなどの他のツールを直接またはWebjarを使用して適用できます。
このテンプレートのすべての再利用可能なタグには属性th:fragmentがありますが、次に、ページの他の部分を含める方法を説明します。
レンダリングとフラグメントの包含後、返されるコンテンツは次のとおりです。
Thymeleaf Fragments: home
Thymeleaf Fragments sample
Go to the next page to see fragments in action
4.2. フラグメントのマークアップセレクター
Thymeleafフラグメントの優れた点の1つは、we can also grab any part of a template just using the simple selectorsが、クラス、IDを介して、または単にタグによって使用されることです。
たとえば、このページには、general.htmlファイルのいくつかのコンポーネントが含まれています：asideブロックとdiv.anotherブロック：
4.3. パラメータ化されたフラグメント
パラメータを fragmentに渡して、その特定の部分を変更することができます。 そのためには、フラグメントを関数呼び出しとして定義する必要があります。関数呼び出しでは、パラメーターのリストを宣言する必要があります。
この例では、汎用フォームフィールドのフラグメントを定義します。
そして、パラメータを渡すフラグメントの簡単な使用法は次のとおりです。
そして、これは返されたフィールドがどのように見えるかです：
4.4. フラグメント包含式
Thymeleafフラグメントは、conditional expressions to determine whether to include a fragmentのサポートなど、他の興味深いオプションを提供します。
Thymeleafが提供する式（セキュリティ、文字列、コレクションなど）のいずれかでElvis演算子を使用すると、さまざまなフラグメントを読み込むことができます。
たとえば、特定の条件に応じて表示するコンテンツでこのフラグメントを定義できます。 これは、さまざまな種類のブロックを含むファイルです。
Data received
No dataそして、これは式でそれらをロードする方法です：
Thymeleaf式の詳細については、記事hereを確認してください。
4.5. 柔軟なレイアウト
次の例は、render a table with dataに対するフラグメントの他の2つの興味深い使用法も示しています。 これは再利用可能なテーブルフラグメントであり、2つの重要な部分があります。変更可能なテーブルヘッダーと、データがレンダリングされる本文です。
0
Name
このテーブルを使用する場合は、fields関数を使用して独自のテーブルヘッダーを渡すことができます。 ヘッダーはクラスmyFieldsで参照されます。 テーブル本体は、データをパラメーターとしてtableBody関数に渡すことによってロードされます。
Id
Name
そして、これが最終ページの外観です。
Thymeleaf Fragments sample
Data received
Id
Name
1001
John Smith
1002
Jane Williams
5. 結論
この記事では、テンプレート管理を容易にする強力なツールであるThymeleaf Fragmentsを使用して、ビューコンポーネントを再利用する方法を示しました。
また、基本を超えた他の興味深い機能も紹介しました。 ビューレンダリングエンジンとしてThymeleafを選択するときは、これらを考慮する必要があります。
他のThymeleaf機能について知りたい場合は、Layout Dialectsに関する記事を必ずご覧ください。
いつものように、例の完全な実装コードはover on GitHubで利用できます。