Přečtěte si, jak integrovat tento šablonovací modul do vašich aplikací Spring.

Thymeleaf je Java šablonový engine. Vyvíjí šablony pro webové i samostatné aplikace. Tento šablonovací modul využívá koncept Natural Templates k vložení logiky do vašeho rozvržení, aniž by došlo k ohrožení vašeho návrhu. S Thymeleaf budete mít kontrolu nad tím, jak aplikace zpracuje šablony, které vytvoříte.

Thymeleaf můžete použít ke zpracování šesti typů šablon: HTML, XML, Text, JavaScript, CSS a RAW. Thymeleaf označuje každou ze šablon jako režim šablon, přičemž HTML je nejoblíbenější šablonou vytvořenou na tomto enginu.

Inicializace Thymeleaf ve vaší aplikaci

Existují dva způsoby, jak přidat Thymeleaf do vaší aplikace Spring Boot. Thymeleaf si můžete vybrat jako závislost při generování vašeho standardu pomocí Inicializační nástroj Spring. Máte také možnost jej později přidat do souboru specifikace sestavení v sekci závislostí.

Pokud jste vybrali jednu z možností projektu Gradle, soubor, který obsahuje závislosti, je build.gradle soubor. Pokud jste však vybrali Maven, pak tento soubor je pom.xml.

Vaše pom.xml soubor by měl obsahovat následující sekci závislostí:

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Zatímco vaše build.gradle soubor by měl obsahovat následující sekci závislostí:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

Ukázková aplikace použitá v článku je k dispozici zde úložiště GitHub a můžete jej používat zdarma pod licencí MIT.

Přidáním Thymeleaf do vaší Spring aplikace získáte přístup k její základní knihovně, která vám umožní používat Thymeleafův Spring Standard Dialect. Spring Standard Dialect obsahuje jedinečné atributy a syntaxi, které můžete použít k přidání různých funkcí do rozvržení.

Použití Thymeleaf v jarní botě

Při použití Thymeleaf ve vaší aplikaci Spring je prvním krokem vytvoření dokumentu šablony. Pro tuto ukázkovou aplikaci je dokument šablony HTML. Šablony Thymeleaf byste měli vždy vytvářet ve Spring Boot's šablony složku, která je k dispozici v souboru zdrojů.

Soubor home.html

html>
<htmlxmlns: th="http://www.thymeleaf.org">


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Výše uvedená šablona Thymeleaf je obecná šablona HTML5 s jedním cizím atributem (xmlns: th). Účelem xmlns: th atributem je poskytnout rozsah pro všechny čt:* atributy, které použijete v tomto HTML dokumentu. Ostatní atributy a značky v šabloně Thymeleaf jsou tradiční HTML tagy a atributy.

Vytvoření záhlaví

Jedním z prvních a nejdůležitějších aspektů každé webové stránky nebo aplikace je záhlaví. Říká, o čem aplikace je (prostřednictvím loga), a pomáhá vám snadno se v aplikaci orientovat. Základní záhlaví by mělo mít logo a několik navigačních odkazů.

html>
<htmlxmlns: th="http://www.thymeleaf.org">


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

Thymeleaf vám umožňuje přidat záhlaví výše na jakoukoli stránku ve vaší webové aplikaci pomocí th: vložit atribut. The th: vložit a th: nahradit atributy přijímají to, co Thymeleaf nazývá fragmentové výrazové hodnoty. Výrazy fragmentů vám umožňují umístit fragmenty značek na libovolné místo v rozvržení.

<divth: insert="~{header:: #nav}">div>

Vložení označení výše v horní části home.html tag vloží značku záhlaví do horní části vaší domovské stránky. Výraz fragmentu má několik složek, dvě jsou volitelné a dvě jsou povinné:

  • Vlnovka (~), která je volitelná.
  • Dvojice složených závorek ({}), která je volitelná.
  • Název šablony obsahující označení, které chcete vložit (header.html).
  • Selektor CSS označení, které chcete vložit (#nav).

Následující označení tedy vede ke stejnému výsledku jako výše.

"header:: #nav">

Vyplnění těla šablony

Thymeleaf vám umožňuje používat ve vašich šablonách pět typů výrazů:

  • Výraz fragmentu (~{…})
  • Výraz zprávy (#{…})
  • Výraz adresy URL odkazu (@{…})
  • Variabilní výraz (${…})
  • Výraz proměnné výběru (*{…})

Výraz zprávy vám umožňuje přidat do rozvržení externalizované fragmenty textu. Pomocí výrazů zpráv můžete snadno nahradit nebo znovu použít text v rozvržení. Při použití výrazu zprávy byste měli vždy umístit fragmenty externího textu do a .vlastnosti soubor pod zdroje složku.

Pro tuto ukázkovou aplikaci je tento soubor zprávy.vlastnosti, který obsahuje následující fragment textu:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

Měli byste si uvědomit, že fragment textu (nebo zpráva) výše má jedinečný klíč (zástupný.text). Důvodem je, že každý soubor zpráv může obsahovat kolekci různých zpráv. K vložení konkrétní zprávy do rozvržení tedy budete potřebovat klíč.

<pth: text="#{placeholder.text}">p>

Vložením výše uvedeného označení do těla souboru HTML se zástupný text ve vašem zobrazení efektivně zobrazí jako odstavec. Na rozdíl od výrazu fragmentu je každý aspekt výrazu zprávy povinný. Výraz zprávy vyžaduje:

  • Znak čísla (#).
  • Pár složených závorek ({}).
  • Klíč, který obsahuje zprávu, kterou chcete vložit (zástupný.text).

Styl vaší šablony

Další důležitý soubor v zdroje složka je statický soubor. Tento soubor ukládá vaše soubory CSS a všechny obrázky, které plánujete použít ve své aplikaci. Chcete-li propojit svůj externí soubor CSS se šablonou HTML Thymeleaf, budete muset použít výraz odkazové adresy URL. Zpracuje se výraz URL odkazu relativní i absolutní adresy URL.

<linkrel="stylesheet"th: href="@{/css/style.css}" />

Vložení označení výše do vašeho HTML souboru vám umožní stylizovat vaši šablonu pomocí a styl.css soubor. Tento soubor je dostupný v a css složka pod statický sekce zdroje soubor vzorové aplikace. Výraz URL odkazu byste měli vždy přiřadit k th: href atribut.

Thymeleaf poskytuje několik dalších atributů, které můžete použít k vylepšení designu vašeho rozvržení. Jedním z takových atributů je th: styl atribut, který můžete použít k přidání obrázků do rozvržení.

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

Výše uvedené označení používá th: styl atribut pro přidání obrázku na pozadí do určité části vašeho rozvržení. Thymeleaf má více než sto různých atributů, které můžete použít k přidání stylu a funkčnosti do rozvržení.

Variabilní výraz

Proměnné výrazy jsou nejoblíbenější a pravděpodobně nejsložitější výrazy, které Thymeleaf používá. Výrazy proměnných Thymeleaf vám umožňují shromažďovat data buď z kontextu aplikace, nebo z objektu v aplikaci a vkládat tato data do šablony. V závislosti na zdroji dat, která chcete vykreslit do zobrazení, existují dva typy výrazů proměnných, které můžete použít.

Primární výraz proměnné používá znak dolaru a umožňuje shromažďovat data z kontext aplikace (což jsou data spojená s různými úlohami, které jsou spuštěny v aplikace). Pokud jste například chtěli zachytit data uživatele z modálu, pak je praktičtější volbou výraz proměnné znak dolaru. Pokud spustíte ukázkový projekt a přejděte na http://localhost: 8080/ ve vašem prohlížeči uvidíte následující modal:

Poté, co zavřete modal nebo odešlete jméno, aplikace přejde na domovskou stránku. Na domovské stránce uvidíte obecnou webovou stránku, která zobrazuje slovo „Vítejte“, za kterým následuje řetězec, který jste právě odeslali v modálu.

Ukázková aplikace používá k dokončení tohoto procesu proměnný výraz. Jednoduchá forma v modal.html soubor má následující označení:

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

Když uživatel odešle formulář, spustí se čt: akce atribut, který má hodnotu adresy URL příspěvku, kterou najdete v WebController třída.

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

The processName() metoda přijímá řetězec, který uživatel zadá modalu, a poté tento řetězec přiřadí volané proměnné uživatelské jméno. Pomocí výrazu proměnné pak ovladač vloží proměnnou uživatelského jména do rozložení.

<h1>Welcome <spanth: text="${userName}">span>!h1>

Výraz výběrové proměnné používá hvězdičku a je nejužitečnější, když se zabýváte složitějšími aplikacemi. Například aplikace, která vyžaduje přihlášení uživatelů, může použít výraz výběrové proměnné. Můžete shromáždit uživatelské jméno z objektu uživatele a vložit jej do rozvržení.

Alternativní možnosti šablon a stylů

Ačkoli je Thymeleaf populárnější možností šablony pro aplikace Spring Boot, existuje několik dalších stejně životaschopných možností. Patří mezi ně JavaServer Pages (JSP), šablony založené na Groovy, šablony FreeMarker a šablony Moustache. Kromě vytváření vlastních stylů CSS se můžete také rozhodnout použít pro úpravu rozvržení rámec CSS.