Ismerje meg, hogyan integrálhatja ezt a sablonmotort tavaszi alkalmazásaiba.

A Thymeleaf egy Java sablonmotor. Webes és önálló alkalmazásokhoz egyaránt fejleszt sablonokat. Ez a sablonmotor a Natural Templates koncepciót használja, hogy logikát illesszen az elrendezésbe anélkül, hogy ez veszélyeztetné a tervezést. A Thymeleaf segítségével Ön szabályozhatja, hogy egy alkalmazás hogyan dolgozza fel az Ön által létrehozott sablonokat.

A Thymeleaf segítségével hatféle sablont dolgozhat fel: HTML, XML, szöveg, JavaScript, CSS és RAW. A Thymeleaf mindegyik sablonra sablonmódként hivatkozik, és a HTML a legnépszerűbb sablon ezen a motoron.

A kakukklevél inicializálása az alkalmazásban

Kétféleképpen adhatja hozzá a Thymeleaf-et a Spring Boot alkalmazáshoz. Kiválaszthatja a Thymeleaf-et függőségként a kazán létrehozása során A tavasz inicializáló eszköze. Lehetősége van arra is, hogy később hozzáadja azt a build specifikációs fájljához a függőségek szakaszban.

Ha kiválasztotta valamelyik Gradle projektbeállítást, a függőségeket tartalmazó fájl a

instagram viewer
build.gradle fájlt. Ha azonban a Maven-t választotta, akkor az a fájl pom.xml.

A te pom.xml a fájlnak a következő függőségi részt kell tartalmaznia:

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


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

Míg a te build.gradle a fájlnak a következő függőségi részt kell tartalmaznia:

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

A cikkben használt minta alkalmazás itt érhető el GitHub adattár és az MIT licence alapján ingyenesen használható.

Ha hozzáadja a Thymeleaf-et Spring alkalmazásához, hozzáférhet annak alapvető könyvtárához, amely lehetővé teszi a Thymeleaf Spring Standard Dialektusának használatát. A Spring Standard Dialect egyedi attribútumokat és szintaxist tartalmaz, amelyek segítségével különböző funkciókat adhat hozzá elrendezéseihez.

A kakukklevél használata a Spring Boot-ban

Ha a Thymeleaf-et használja a Spring alkalmazásban, az első lépés a sablondokumentum létrehozása. Ennél a példaalkalmazásnál a sablondokumentum HTML. A Thymeleaf sablonokat mindig a Spring Boot's-ban kell létrehoznia sablonokat mappát, amely az erőforrásfájlban érhető el.

A home.html fájl

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

A fenti Thymeleaf sablon egy általános HTML5-sablon, egy idegen attribútummal (xmlns: th). A célja a xmlns: th attribútum, hogy biztosítsa a hatókört az összes th:* attribútumok, amelyeket ebben a HTML-dokumentumban fog használni. A Thymeleaf sablon többi attribútuma és címkéje hagyományos HTML címkék és attribútumok.

Fejléc létrehozása

Minden webhely vagy alkalmazás egyik első és legfontosabb szempontja a fejléc. Megmondja, miről szól az alkalmazás (a logón keresztül), és segít az alkalmazásban való egyszerű navigálásban. Az alapfejlécnek rendelkeznie kell logóval, valamint több navigációs hivatkozással.

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>

A Thymeleaf lehetővé teszi a fenti fejléc hozzáadását a webalkalmazás bármely oldalához a th: beszúr tulajdonság. A th: beszúr és th: csere Az attribútumok elfogadják azt, amit a Thymeleaf fragmens kifejezési értékeknek nevez. A töredékkifejezések lehetővé teszik, hogy a jelölés töredékeit az elrendezés bármely pontjára elhelyezze.

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

A fenti jelölés beszúrása a tetejére home.html címke beilleszti a fejléc jelölését a kezdőlap tetejére. Egy fragmens kifejezés több összetevőből áll, kettő nem kötelező, kettő pedig kötelező:

  • Tilde (~), amely nem kötelező.
  • Egy pár göndör kapcsos zárójel ({}), amely nem kötelező.
  • A beszúrni kívánt jelölést tartalmazó sablon neve (header.html).
  • A beilleszteni kívánt jelölés CSS-választója (#nav).

Tehát a következő jelölés ugyanazt az eredményt adja, mint a fenti.

"header:: #nav">

A sablon törzsének feltöltése

A Thymeleaf lehetővé teszi ötféle kifejezés használatát a sablonokban:

  • Fragment kifejezés (~{…})
  • Üzenetkifejezés (#{…})
  • Link URL-kifejezése (@{…})
  • Változó kifejezés (${…})
  • Kijelölési változó kifejezés (*{…})

Az üzenetkifejezés lehetővé teszi külső szövegtöredékek hozzáadását az elrendezéshez. Az üzenetkifejezésekkel egyszerűen lecserélheti vagy újra felhasználhatja a szöveget az elrendezésben. Üzenetkifejezés használatakor a külső szövegrészleteket mindig az a .tulajdonságok alatti fájl erőforrások mappát.

Ennél a példaalkalmazásnál ez a fájl üzenetek.tulajdonságok, amely a következő szövegrészletet tartalmazza:

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

Megjegyzendő, hogy a fenti szövegrészletnek (vagy az üzenetnek) egyedi kulcsa van (helyőrző.szöveg). Ennek az az oka, hogy minden üzenetfájl tartalmazhat különböző üzenetek gyűjteményét. Tehát szüksége lesz egy kulcsra egy adott üzenet beillesztéséhez az elrendezésbe.

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

Ha beilleszti a fenti jelölést a HTML-fájl törzsébe, akkor a helyőrző szöveg gyakorlatilag bekezdésként jelenik meg a nézetben. A töredék kifejezéssel ellentétben az üzenetkifejezés minden aspektusa kötelező. Az üzenet kifejezéséhez:

  • Egy számjel (#).
  • Egy pár göndör zárójel ({}).
  • A beszúrni kívánt üzenetet tartalmazó kulcs (helyőrző.szöveg).

A sablon stílusa

Egy másik fontos fájl a erőforrások mappa a statikus fájl. Ez a fájl tárolja a CSS-fájlokat és az alkalmazásban használni kívánt képeket. A külső CSS-fájl és a Thymeleaf HTML-sablon összekapcsolásához a link URL kifejezést kell használnia. A link URL kifejezési folyamatai relatív és abszolút URL-eket is.

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

A fenti jelölés beszúrása a HTML-fájlja lehetővé teszi a sablon stílusának beállítását a stílus.css fájlt. Ez a fájl elérhető a css alatti mappa statikus szakasza a erőforrások a mintakérelem fájlja. Mindig hozzá kell rendelnie a link URL kifejezését a th: href tulajdonság.

A Thymeleaf számos egyéb attribútumot biztosít, amelyek segítségével javíthatja az elrendezés kialakítását. Az egyik ilyen tulajdonság a th: stílus attribútum, amellyel képeket adhat hozzá az elrendezéshez.

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

A fenti jelölés a th: stílus attribútum segítségével háttérképet adhat hozzá az elrendezés egy adott részéhez. A Thymeleaf több mint száz különböző tulajdonsággal rendelkezik, amelyek segítségével stílust és funkcionalitást adhat az elrendezésekhez.

A változó kifejezés

A változó kifejezések a legnépszerűbb és vitathatatlanul a legösszetettebb kifejezések, amelyeket Thymeleaf használ. A Thymeleaf változókifejezések lehetővé teszik, hogy adatokat gyűjtsön az alkalmazás környezetéből vagy egy objektumból az alkalmazásban, és beszúrja ezeket az adatokat a sablonba. A nézetben megjeleníteni kívánt adatok forrásától függően kétféle változókifejezés használható.

Az elsődleges változókifejezés a dollárjelet használja, és lehetővé teszi adatok gyűjtését a alkalmazáskörnyezet (amely a programban futó különböző feladatokhoz társított adatok Alkalmazás). Például, ha egy felhasználó adatait egy modálisból akarta rögzíteni, akkor a dollárjel változó kifejezés a praktikusabb választás. Ha végrehajtja a mintaprojektet, és oda navigál http://localhost: 8080/ böngészőjében a következő módot fogja látni:

Miután bezárta a modált, vagy elküldte a nevet, az alkalmazás a kezdőlapra navigál. A kezdőlapon egy általános webhely jelenik meg, amely az „Üdvözöljük” szót jeleníti meg, amelyet az imént beküldött karakterlánc követ.

A példaalkalmazás a változó kifejezést használja a folyamat befejezéséhez. Az egyszerű forma a modal.html fájl a következő jelöléssel rendelkezik:

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


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


form>

Amikor egy felhasználó elküldi az űrlapot, az elindítja a th: akció attribútum, amely egy bejegyzés URL-jének értékével rendelkezik, amely megtalálható a WebController osztály.

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


 model.addAttribute("userName", userName);


return"home";
 }

A processName() metódus elfogadja a felhasználó által a modálisnak megadott karakterláncot, majd hozzárendeli a karakterláncot egy változóhoz felhasználónév. A változókifejezés használatával a vezérlő ezután beilleszti a felhasználónév változót az elrendezésbe.

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

A kiválasztási változó kifejezése csillagot használ, és akkor a leghasznosabb, ha összetettebb alkalmazásokkal foglalkozik. Például egy olyan alkalmazás, amelyhez a felhasználóknak be kell jelentkezniük, használhatják a kiválasztási változó kifejezést. A felhasználónevet összegyűjtheti a felhasználói objektumból, és beillesztheti az elrendezésbe.

Alternatív sablon- és stílusbeállítások

Bár a Thymeleaf a legnépszerűbb sablon a Spring Boot alkalmazásokhoz, számos más, hasonlóan életképes lehetőség is létezik. Ide tartoznak a JavaServer Pages (JSP), a Groovy-alapú sablonok, a FreeMarker-sablonok és a Moustache-sablonok. Az egyéni CSS-stílus létrehozása mellett választhat egy CSS-keretrendszert is az elrendezés stílusának kialakításához.