Zistite, ako integrovať tento nástroj šablón do vašich aplikácií Spring.

Thymeleaf je nástroj na vytváranie šablón Java. Vyvíja šablóny pre webové aj samostatné aplikácie. Tento nástroj šablón používa koncept prirodzených šablón na vloženie logiky do vášho rozloženia bez toho, aby ohrozil váš dizajn. S Thymeleaf budete mať kontrolu nad tým, ako aplikácia spracuje šablóny, ktoré vytvoríte.

Thymeleaf môžete použiť na spracovanie šiestich typov šablón: HTML, XML, Text, JavaScript, CSS a RAW. Thymeleaf označuje každú zo šablón ako režim šablón, pričom HTML je najobľúbenejšou šablónou vytvorenou na tomto motore.

Inicializácia Thymeleaf vo vašej aplikácii

Existujú dva spôsoby, ako pridať Thymeleaf do vašej aplikácie Spring Boot. Môžete si vybrať Thymeleaf ako závislosť pri vytváraní vášho štandardu Inicializačný nástroj Spring. Máte tiež možnosť pridať ho neskôr do súboru so špecifikáciou zostavy v sekcii závislostí.

Ak ste vybrali jednu z možností projektu Gradle, súbor, ktorý obsahuje závislosti, je stavať.gradle súbor. Ak ste si však vybrali Maven, potom tento súbor je pom.xml.

instagram viewer

Váš pom.xml súbor by mal obsahovať nasledujúcu sekciu závislostí:

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


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

Zatiaľ čo váš stavať.gradle súbor by mal obsahovať nasledujúcu sekciu závislostí:

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

Vzorová aplikácia použitá v článku je dostupná v tomto úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT.

Pridaním Thymeleaf do vašej aplikácie Spring získate prístup k jej základnej knižnici, ktorá vám umožní používať Thymeleaf's Spring Standard Dialect. Spring Standard Dialect obsahuje jedinečné atribúty a syntax, ktoré môžete použiť na pridanie rôznych funkcií do vašich rozložení.

Použitie Thymeleaf v Spring Boot

Keď používate Thymeleaf v aplikácii Spring, prvým krokom je vytvorenie dokumentu šablóny. Pre túto vzorovú aplikáciu je dokument šablóny HTML. Šablóny Thymeleaf by ste mali vždy vytvárať v aplikácii Spring Boot's šablóny priečinok, ktorý je dostupný v súbore zdrojov.

Súbor home.html

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Vyššie uvedená šablóna Thymeleaf je všeobecná šablóna HTML5 s jedným cudzím atribútom (xmlns: th). Účelom xmlns: th atribútom je poskytnúť rozsah pre všetky št:* atribúty, ktoré použijete v tomto HTML dokumente. Ostatné atribúty a značky v šablóne Thymeleaf sú tradičné HTML tagy a atribúty.

Vytvorenie hlavičky

Jedným z prvých a najdôležitejších aspektov každej webovej stránky alebo aplikácie je hlavička. Informuje o tom, o čom je aplikácia (prostredníctvom loga) a pomáha vám jednoducho sa v aplikácii orientovať. Základná hlavička by mala mať logo, ako aj niekoľko navigačných odkazov.

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 pridať hlavičku vyššie na ľubovoľnú stránku vo vašej webovej aplikácii pomocou th: vložiť atribút. The th: vložiť a th: nahradiť atribúty akceptujú to, čo Thymeleaf nazýva fragmentové výrazové hodnoty. Výrazy fragmentov vám umožňujú umiestniť fragmenty značiek na ľubovoľné miesto v rozložení.

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

Vloženie označenia vyššie v hornej časti home.html značka vloží značku hlavičky do hornej časti vašej domovskej stránky. Výraz fragmentu má niekoľko komponentov, dva sú voliteľné a dva sú povinné:

  • Vlnovka (~), ktorá je voliteľná.
  • Dvojica zložených zátvoriek ({}), ktorá je voliteľná.
  • Názov šablóny, ktorá obsahuje označenie, ktoré chcete vložiť (header.html).
  • Selektor CSS značky, ktorú chcete vložiť (#nav).

Nasledujúce označenie teda poskytne rovnaký výsledok ako vyššie uvedené.

"header:: #nav">

Napĺňanie tela vašej šablóny

Thymeleaf vám umožňuje použiť päť typov výrazov vo vašich šablónach:

  • Fragmentový výraz (~{…})
  • Výraz správy (#{…})
  • Výraz adresy URL odkazu (@{…})
  • Variabilný výraz (${…})
  • Výraz premennej výberu (*{…})

Výraz správy vám umožňuje pridať externalizované fragmenty textu do vášho rozloženia. Pomocou výrazov správ môžete ľahko nahradiť alebo znova použiť text vo svojom rozložení. Keď používate výraz správy, mali by ste vždy umiestniť fragmenty externého textu do a .vlastnosti súbor pod zdrojov priečinok.

Pre túto vzorovú aplikáciu je to súbor správy.vlastnosti, ktorý obsahuje nasledujúci fragment textu:

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

Mali by ste si uvedomiť, že časť textu (alebo správa) vyššie má jedinečný kľúč (zástupný symbol.text). Je to preto, že každý súbor správ môže obsahovať kolekciu rôznych správ. Na vloženie konkrétnej správy do rozloženia teda budete potrebovať kľúč.

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

Vložením označenia vyššie do tela súboru HTML sa zástupný text vo vašom zobrazení efektívne zobrazí ako odsek. Na rozdiel od fragmentového výrazu je každý aspekt výrazu správy povinný. Výraz správy vyžaduje:

  • Znak čísla (#).
  • Pár zložených zátvoriek ({}).
  • Kľúč, ktorý obsahuje správu, ktorú chcete vložiť (zástupný symbol.text).

Úprava štýlu vašej šablóny

Ďalší dôležitý súbor v zdrojov priečinok je statický súbor. Tento súbor ukladá vaše CSS súbory a všetky obrázky, ktoré plánujete použiť vo svojej aplikácii. Ak chcete prepojiť svoj externý súbor CSS so šablónou HTML Thymeleaf, budete musieť použiť výraz odkazovej adresy URL. Spracuje sa výraz URL odkazu relatívne aj absolútne adresy URL.

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

Vloženie označenia vyššie do vášho súboru HTML vám umožní upraviť štýl vašej šablóny pomocou a style.css súbor. Tento súbor je dostupný v a css priečinok pod statické časť zdrojov súbor vzorovej žiadosti. Výraz URL odkazu by ste mali vždy priradiť k th: href atribút.

Thymeleaf poskytuje niekoľko ďalších atribútov, ktoré môžete použiť na vylepšenie dizajnu vášho rozloženia. Jedným z takýchto atribútov je th: štýl atribút, ktorý môžete použiť na pridanie obrázkov do rozloženia.

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

Vyššie uvedené označenie používa th: štýl atribút na pridanie obrázka na pozadí do konkrétnej časti vášho rozloženia. Thymeleaf má viac ako sto rôznych atribútov, ktoré môžete použiť na pridanie štýlu a funkčnosti do vašich rozložení.

Variabilný výraz

Variabilné výrazy sú najobľúbenejšie a pravdepodobne najkomplexnejšie výrazy, ktoré Thymeleaf používa. Výrazy premenných Thymeleaf vám umožňujú zhromažďovať údaje buď z kontextu aplikácie, alebo z objektu v aplikácii a vkladať tieto údaje do šablóny. V závislosti od zdroja údajov, ktoré chcete vykresliť do svojho zobrazenia, existujú dva typy výrazov premenných, ktoré môžete použiť.

Primárny výraz premennej používa znak dolára a umožňuje vám zbierať údaje z kontext aplikácie (čo sú údaje spojené s rôznymi úlohami, ktoré sú spustené v žiadosť). Ak ste napríklad chceli zachytiť údaje používateľa z modálu, potom je praktickejšou voľbou výraz premennej znak dolára. Ak spustíte vzorový projekt a prejdite na http://localhost: 8080/ vo vašom prehliadači uvidíte nasledujúci modal:

Po zatvorení modálu alebo odoslaní názvu aplikácia prejde na domovskú stránku. Na domovskej stránke uvidíte všeobecnú webovú stránku, ktorá zobrazuje slovo „Vitajte“, za ktorým nasleduje reťazec, ktorý ste práve odoslali do modálu.

Vzorová aplikácia používa na dokončenie tohto procesu výraz premennej. Jednoduchá forma v modal.html súbor má nasledujúce označenie:

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


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


form>

Keď používateľ odošle formulár, spustí sa th: akcia atribút, ktorý má hodnotu adresy URL príspevku, ktorú nájdete v WebController trieda.

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


 model.addAttribute("userName", userName);


return"home";
 }

The processName() metóda akceptuje reťazec, ktorý používateľ dodá modalu, a potom priradí tento reťazec k volanej premennej užívateľské meno. Pomocou výrazu premennej potom ovládač vloží premennú používateľského mena do rozloženia.

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

Výraz výberovej premennej používa hviezdičku a je najužitočnejší, keď sa zaoberáte zložitejšími aplikáciami. Napríklad aplikácia, ktorá vyžaduje, aby sa používatelia prihlásili, môže použiť výraz premennej výberu. Môžete zhromaždiť používateľské meno z objektu používateľa a vložiť ho do rozloženia.

Možnosti alternatívnej šablóny a štýlu

Hoci je Thymeleaf populárnejšou možnosťou šablóny pre aplikácie Spring Boot, existuje niekoľko ďalších rovnako životaschopných možností. Patria sem JavaServer Pages (JSP), šablóny založené na Groovy, šablóny FreeMarker a šablóny Moustache. Okrem vytvárania vlastného štýlu CSS sa môžete rozhodnúť použiť na úpravu rozloženia aj rámec CSS.