Vad är Thymeleaf och hur kan du använda det i dina Spring Boot-applikationer?
Thymeleaf är en mallmotor i Java. Den utvecklar mallar för både webb och fristående applikationer. Denna mallmotor använder Natural Templates-konceptet för att injicera logik i din layout, utan att kompromissa med din design. Med Thymeleaf får du kontroll över hur ett program behandlar de mallar som du skapar.
Thymeleaf har stöd för bearbetning av flera mallformat, inklusive HTML, XML, Text, JavaScript, CSS och RAW. Bland dessa är HTML det mest använda mallformatet inom Thymeleaf-ramverket.
Initialisera Thymeleaf i din applikation
Alternativt kan man införliva Thymeleaf i sitt Spring Boot-projekt genom att antingen välja att inkludera det under genereringen av boilerplate-kod genom Springs initializr-verktyg eller inkludera det i byggspecifikationsfilen under rubriken beroenden.
Om du har valt ett Gradle-projekt kallas konfigurationsfilen som specificerar projektets beroenden för “build.gradle”-filen. Om du å andra sidan har valt Maven som din lösning för hantering av beroenden, skulle motsvarande konfigurationsfil ha titeln “pom.xml”.
XML-filen som specificerar beroendena för ditt projekt, kallad “pom.xml”, borde innehålla ett specifikt avsnitt som beskriver dessa beroenden.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Det är absolut nödvändigt att din build.gradle-fil innehåller ett specifikt beroendesegment enligt följande:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
Den ovannämnda artikeln innehåller en illustrativ applikation som kan nås via ett specifikt GitHub-arkiv, som ger användarna tillstånd att använda den utan kostnad enligt villkoren i den tillåtande MIT-licensen.
Integrering av Thymeleaf i en Spring-applikation ger fördelen att använda dess grundläggande bibliotek, vilket möjliggör användning av Spring Standard Dialect för Thymeleaf. Denna dialekt presenterar distinkta attribut och uttrycksstilar, vilket underlättar införlivandet av olika funktioner i designstrukturen.
Använda Thymeleaf i Spring Boot
För att kunna använda Thymeleaf i en Spring-applikation måste man börja med att skapa malldokumentet. I det här specifika exemplet är det valda formatet för mallen en HTML-fil. Det rekommenderas att alla Thymeleaf-mallar skapas i katalogen “templates” som finns i Spring Boots resursfiler.
Filen home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic Website</title>
</head>
<body></body>
</html>
Den medföljande Thymeleaf-mallen visar konventionell HTML-markering, inklusive ett främmande namnrymdsprefix, xmlns:th , som fungerar som en grund för användning av något av de attribut som anges av th: inom det aktuella HTML-dokumentet. Alla andra attribut och element i Thymeleaf-mallen överensstämmer med standard HTML-syntax och konventioner.
Skapa ett sidhuvud
Sidhuvudet spelar en viktig roll för att förmedla syftet med en webbplats eller applikation genom dess logotyp, samtidigt som det underlättar sömlös navigering för användarna. Viktiga komponenter i ett grundläggande sidhuvud inkluderar en logotyp och flera navigeringslänkar som ger enkel åtkomst till olika delar av webbplatsen eller appen.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div id="nav">
<h1>LOGO</h1>
<ul>
<li> <a id="current">Home </a> </li>
<li> <a>About</a> </li>
<li> <a>Services</a> </li>
</ul>
</div>
</body>
</html>
Thymeleaf erbjuder ett bekvämt sätt att införliva den angivna rubriken på valfri webbsida i din webbapplikation, genom att använda attributet th:insert . Detta attribut är kompatibelt med både th:insert och th:replace , vilka accepteras av Thymeleaf som “fragment expression values”. Dessa fragmentuttryck gör det möjligt att infoga delar av strukturerat innehåll på olika ställen i layoutens komposition.
<div th:insert="~{header :: #nav}"></div>
Inkorporering av ovan nämnda markering i den inledande taggen i home.html filen kommer att resultera i utseendet av rubriken på hemsidan. Fragmentet expression består av flera beståndsdelar, av vilka två är valbara medan de återstående två är obligatoriska.
⭐En tilde (~), som är valfri.
En valfri uppsättning lockiga parenteser, betecknade med {}
Den ovan nämnda HTML-mallen, som omfattar den önskade markeringen, betecknas med etiketten “header.html”.
För att framgångsrikt kunna exekvera den medföljande JavaScript-koden är det nödvändigt att säkerställa att HTML-filen innehåller ett element med ett ID-attribut inställt på “nav”. Detta kan uppnås genom att lägga till lämplig markup inom taggen i HTML-dokumentet och tilldela det önskade ID-värdet i enlighet därmed.
Genom att använda den ovan nämnda markeringen får man samma resultat som med det alternativa tillvägagångssätt som beskrivits tidigare.
<div th:insert="header :: #nav"></div>
Fylla på din mallkropp
Thymeleaf stöder en mängd olika uttrycksformat inom sin mallstruktur, som omfattar fem olika kategorier enligt följande:
⭐Fragmentuttryck (~{{¦})
⭐Meddelandeuttryck (#{{¦})
⭐Länk URL-uttryck (@{{¦})
⭐Variabeluttryck (${¦¦})
⭐Urval Variabeluttryck (*{¦¦})
Med hjälp av ett meddelandeuttryck kan du enkelt införliva främmande textelement i en layout. Genom att använda detta tillvägagångssätt kan man sömlöst ersätta eller återanvända det innehåll som finns i deras design. Vid implementering av ett meddelandeuttryck är det absolut nödvändigt att de tillhörande textkomponenterna lagras i en fil som ligger under resourcesfolder directory.
I det här exemplet används en specifik resursfil med namnet “messages.properties”, som innehåller det här utdraget:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.
Tänk på att den utdragna passagen innehåller en identifierare som kallas “placeholder.text”. Denna beteckning tilldelas på grund av det faktum att varje meddelandekomponent kan bestå av olika kommunikationer. Följaktligen blir det nödvändigt att införliva en referenspunkt för att integrera ett visst meddelande i konfigurationen.
<p th:text="#{placeholder.text}"></p>
Genom att infoga det medföljande kodavsnittet i HTML-dokumentets body säkerställs att platshållarinnehållet visas som ett sammanhängande stycke i användargränssnittet. I motsats till fragmentuttrycket är alla komponenter i meddelandeuttrycket obligatoriska och oumbärliga. Meddelandeuttrycket kräver att varje angivet element inkluderas, utan några utelämnanden eller substitutioner.
⭐Ett nummertecken (#).
⭐Ett par skruvade hakparenteser ({}).
Textinnehållet i elementet som betecknas “placeholder” är det meddelande som man vill förmedla, vilket kan nås via dess associerade attribut eller egenskap, till exempel “placeholder.text”.
Styla din mall
Den andra viktiga komponenten i katalogen “resources” är den statiska filen, som fungerar som en lagringsplats för de CSS-stilmallar och visuella element som är nödvändiga för att din webbapplikation ska fungera. För att upprätta en koppling mellan en extern CSS-fil och HTML-mallen Thymeleaf måste uttrycket link URL användas. Detta mångsidiga uttryck har kapacitet att hantera både relationella och absoluta URL:er, vilket ger flexibilitet och enkelhet när du integrerar viktiga designkomponenter med ditt projekts grund.
<link rel="stylesheet" th:href="@{/css/style.css}" />
Genom att infoga den medföljande koden i elementet i ditt HTML-dokument möjliggörs styling med en separat style.css fil, som finns i static/css katalogen i exempelapplikationens resursfiler. Det är viktigt att attributet th:href tilldelas ett lämpligt URL-uttryck när du länkar till denna CSS-fil.
Thymeleaf erbjuder en mängd olika attribut som gör det möjligt för utvecklare att förfina sina siddesigner. Bland dessa attribut finns attributet th:style , som gör det möjligt att integrera visuella element i layouten.
<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">
Markeringen använder attributet th:style för att ge en bakgrundsbild på ett visst segment av layouten. Thymeleaf har över hundra attribut, som kan användas för att ge stilistiska och funktionella egenskaper i layouten.
Variabeluttrycket
Variabeluttryck är en vanlig och komplicerad aspekt av Thymeleafs syntax, som gör det möjligt att hämta information från antingen programkontexten eller ett objekt i den för att införliva den i mallar. Det finns två varianter av variabeluttryck som baseras på vilken typ av data som är avsedd att visas i vyn.
Genom att använda dollartecknet som en del av ett variabeluttryck kan man extrahera information som rör de specifika uppgifter som förekommer i ett programs kontext. En relevant illustration är att hämta information om en användare från en viss modal. När man kör det medföljande exempelprojektet och navigerar till http://localhost:8080/ i en webbläsare, möts man av ett modalt gränssnitt.
När modalfönstret stängs eller ett namn skickas in via det, kommer applikationen att omdirigera till sin hemsida. När användaren kommer till hemsidan visas en standardwebbplats med hälsningen “Welcome” och därefter visas den inmatade texten från det modala fönstret inom strängen.
Ovanstående applikation använder sig av variabeluttryck för att uppnå sitt syfte. I modal.html-dokumentet presenteras den grundläggande strukturen genom inkorporering av följande markup:
<form id="form" th:action="@{/home}" method="post">
<input type="text" name="userName"class="form-control" placeholder="Your Name" />
<button type="submit" class="btn">Submit</button>
</form>
När en användare skickar in ett formulär aktiveras attributet th:action, vars värde motsvarar en POST-URL som finns i klassen WebController.
@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}
Metoden processName() tar som indata den sträng som användaren anger via modalen och lagrar den i en variabel med namnet userName . Därefter använder styrenheten variabeluttrycket för att infoga variabeln userName i layouten.
<h1>Welcome <span th:text="${userName}"></span>!</h1>
Användningen av det asteriskförstärkta variabeluttrycket för urval blir alltmer värdefullt när komplexiteten i programvarusystemen ökar. En praktisk illustration är autentiseringsmekanismer där insamling av användarnamn från användarobjekt och deras införlivande i gränssnittsdesignen exemplifierar denna funktionalitet på ett effektivt sätt.
Alternativa mallar och stylingalternativ
Thymeleaf har blivit den föredragna mallösningen för Spring Boot-projekt, men det är viktigt att överväga alternativa val som erbjuder jämförbar funktionalitet. Bland dessa alternativ finns JavaServer Pages (JSP), som genererar Java-kod på serversidan; Groovy-mallar, som möjliggör dynamiskt innehåll med hjälp av skriptspråket Groovy; FreeMarker-mallar, en mallmotor med öppen källkod och stöd för flera programmeringsspråk; och Mustache-mallar, kända för sin enkelhet och för att de är lätta att integrera. Dessutom har utvecklare flexibiliteten att använda anpassade CSS-stilar eller använda redan existerande CSS-ramverk för att utforma sina sidlayouter.