Wat is Thymeleaf en hoe kun je het gebruiken in je Spring Boot-applicaties?
Thymeleaf is een Java-template-engine. Het ontwikkelt sjablonen voor zowel web- als standalone-toepassingen. Deze template engine gebruikt het Natural Templates concept om logica in je layout te injecteren, zonder afbreuk te doen aan je ontwerp. Met Thymeleaf heb je controle over hoe een applicatie de sjablonen die je maakt verwerkt.
Thymeleaf ondersteunt de verwerking van meerdere sjabloonformaten, waaronder HTML, XML, Tekst, JavaScript, CSS en RAW. Hiervan is HTML het meest gebruikte sjabloonformaat binnen het Thymeleaf framework.
Thymeleaf initialiseren in uw toepassing
Als alternatief kan men Thymeleaf opnemen in hun Spring Boot project door ofwel te kiezen voor opname tijdens het genereren van boilerplate code door Spring’s initializr tool of door het vervolgens op te nemen in het build specificaties bestand onder de afhankelijkheden.
Als je hebt gekozen voor een Gradle projectoptie, wordt het configuratiebestand dat de afhankelijkheden van het project specificeert het “build.gradle” bestand genoemd. Aan de andere kant, als je Maven hebt gekozen als je oplossing voor het beheren van afhankelijkheden, zou het overeenkomstige configuratiebestand “pom.xml” heten.
Het XML bestand dat de afhankelijkheden voor je project specificeert, aangeduid als “pom.xml”, zou een specifieke sectie moeten bevatten die deze afhankelijkheden beschrijft.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Het is inderdaad noodzakelijk dat je build.gradle bestand een specifiek afhankelijkheidssegment bevat zoals hieronder:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
Het eerder genoemde artikel bevat een illustratieve applicatie die toegankelijk is via een specifieke GitHub repository, die gebruikers toestemming geeft om het gratis te gebruiken onder de voorwaarden van de permissieve MIT licentie.
Het integreren van Thymeleaf in een Spring-applicatie biedt het voordeel van het gebruik van de fundamentele bibliotheek, waardoor het gebruik van het Spring Standard Dialect voor Thymeleaf mogelijk wordt. Dit dialect presenteert onderscheidende attributen en uitdrukkingsstijlen, die het opnemen van verschillende mogelijkheden binnen de ontwerpstructuur vergemakkelijken.
Thymeleaf gebruiken in Spring Boot
Om Thymeleaf te gebruiken binnen een Spring applicatie, is het noodzakelijk om te beginnen met het maken van het template document. In dit specifieke voorbeeld is het gekozen formaat voor het sjabloon een HTML-bestand. Het wordt aanbevolen om alle Thymeleaf-sjablonen aan te maken in de map “templates” in de bronbestanden van Spring Boot.
Het bestand home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic Website</title>
</head>
<body></body>
</html>
Het meegeleverde Thymeleaf sjabloon toont conventionele HTML opmaak, inclusief een extrane namespace prefix, xmlns:th , die dient als basis voor het gebruik van elk van de attributen geannoteerd door th: binnen dit HTML-document. Alle andere attributen en elementen in het Thymeleaf sjabloon voldoen aan de standaard HTML syntaxis en conventies.
Een koptekst maken
De koptekst speelt een essentiële rol in het overbrengen van het doel van een website of applicatie door middel van het logo, terwijl het ook een naadloze navigatie voor gebruikers mogelijk maakt. Essentiële onderdelen van een basistheader zijn een logo en meerdere navigatiekoppelingen die gemakkelijk toegang bieden tot verschillende secties van de site of app.
<!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 biedt een handige manier om de gespecificeerde koptekst op te nemen in elke webpagina binnen je webapplicatie, door gebruik te maken van het th:insert attribuut. Dit attribuut is compatibel met zowel th:insert als th:replace , die door Thymeleaf worden geaccepteerd als ‘fragment expressie waarden’. Deze fragment expressies bieden de mogelijkheid om delen van gestructureerde inhoud in te voegen op verschillende punten in de samenstelling van je lay-out.
<div th:insert="~{header :: #nav}"></div>
Het opnemen van de bovenstaande markup in de openings tag in het home.html bestand zal resulteren in het verschijnen van de header op de homepage. De fragmentexpressie bestaat uit meerdere bestanddelen, waarvan er twee kieskeurig zijn en de overige twee verplicht.
⭐A tilde (~), die optioneel is.
Een optionele set accolades, aangeduid met {}
De eerder genoemde HTML-sjabloon, die de gewenste opmaak bevat, wordt aangeduid met het label “header.html”.
Om de JavaScript-code met succes uit te voeren, moet het HTML-bestand een element bevatten met een ID-attribuut ingesteld op “nav”. Dit kan worden bereikt door de juiste markup toe te voegen binnen de tag van het HTML-document en de gewenste ID-waarde dienovereenkomstig toe te wijzen.
Het gebruik van de bovengenoemde opmaak zal inderdaad identieke resultaten opleveren als de resultaten van de eerder beschreven alternatieve aanpak.
<div th:insert="header :: #nav"></div>
Uw sjabloon vullen
Thymeleaf ondersteunt een verscheidenheid aan uitdrukkingsformaten binnen zijn sjabloonstructuur, die vijf verschillende categorieën omvat:
⭐Fragment uitdrukking (~{…})
⭐Bericht uitdrukking (#{…})
⭐Link URL uitdrukking (@{…})
⭐Variabele uitdrukking (${…})
⭐Selectie Variabele Expressie (*{…})
Door gebruik te maken van een berichtexpressie kunnen vreemde tekstelementen eenvoudig worden opgenomen in een lay-out. Door deze benadering te gebruiken, kan men de inhoud in het ontwerp naadloos vervangen of hergebruiken. Bij het implementeren van een berichtexpressie is het noodzakelijk dat de bijbehorende tekstcomponenten worden opgeslagen in een bestand dat zich onder de resourcesfolder directory bevindt.
Het gegeven voorbeeld gebruikt een specifiek bestand met de naam “messages.properties”, dat het gegeven uittreksel bevat:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.
Houd er rekening mee dat de uittrekselpassage een identifier bevat die bekend staat als “placeholder.text”. Deze aanduiding wordt toegekend omdat elke berichtencomponent uit verschillende communicaties kan bestaan. Bijgevolg wordt het noodzakelijk om een referentiepunt op te nemen om een bepaald bericht in de configuratie te integreren.
<p th:text="#{placeholder.text}"></p>
Door het meegeleverde codefragment in de body van het HTML-document op te nemen, wordt ervoor gezorgd dat de inhoud van de plaatsaanduiding als een samenhangende paragraaf in de gebruikersinterface verschijnt. In tegenstelling tot de fragment-expressie zijn alle componenten van de berichtexpressie verplicht en onmisbaar. De berichtexpressie vereist de opname van elk gespecificeerd element, zonder weglatingen of substituties.
⭐Een cijferteken (#).
⭐Een paar accolades ({}).
De tekstuele inhoud die is ingesloten in het element dat is aangeduid als “placeholder” is het bericht dat men wenst over te brengen, en dat toegankelijk is via het bijbehorende attribuut of de bijbehorende eigenschap, zoals “placeholder.text”.
Je template stylen
De andere cruciale component in de “resources” map heeft betrekking op het statische bestand, dat dient als opslagplaats voor de CSS stylesheets en visuele elementen die integraal zijn voor het functioneren van je webapplicatie. Om een verbinding te maken tussen een extern gehost CSS bestand en het Thymeleaf HTML sjabloon, moet de link URL expressie gebruikt worden. Deze veelzijdige expressie kan zowel relationele als absolute URL’s verwerken, wat flexibiliteit en gemak biedt bij het integreren van essentiële ontwerpcomponenten met de basis van je project.
<link rel="stylesheet" th:href="@{/css/style.css}" />
Door de meegeleverde code op te nemen in het element van je HTML-document, kun je de vormgeving aanpassen met behulp van een apart style.css bestand, dat je kunt vinden in de static/css map van de bronbestanden van de voorbeeldtoepassing. Het is essentieel om ervoor te zorgen dat het th:href attribuut wordt toegewezen met een geschikte URL-expressie bij het linken naar dit CSS-bestand.
Thymeleaf biedt een verscheidenheid aan attributen waarmee ontwikkelaars hun pagina-ontwerpen kunnen verfijnen. Onder deze attributen is het th:style attribuut, waarmee visuele elementen in de opmaak kunnen worden geïntegreerd.
<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">
De opmaak maakt gebruik van het kenmerk th:style om een achtergrondafbeelding toe te voegen aan een bepaald segment van de opmaak. Thymeleaf heeft meer dan honderd attributen, die kunnen worden gebruikt om stilistische en functionele kenmerken toe te kennen aan de opmaak.
De Variabele Expressie
Variabele expressies zijn een veelvoorkomend en ingewikkeld aspect van Thymeleaf’s syntaxis, waarmee informatie uit de applicatiecontext of een object daarin kan worden opgehaald om in sjablonen op te nemen. Er zijn twee variëteiten van variabele expressies beschikbaar, gebaseerd op de aard van de gegevens die getoond moeten worden in de view.
Door het dollarteken te gebruiken als deel van een variabele expressie kan informatie worden geëxtraheerd die betrekking heeft op de specifieke taken die binnen de context van een applicatie voorkomen. Een relevante illustratie betreft het verkrijgen van details over een gebruiker uit een bepaald modaal. Bij het uitvoeren van het voorbeeldproject en het navigeren naar http://localhost:8080/ in een webbrowser, komt de gebruiker een modale interface tegen.
Na het sluiten van het modale venster of het verzenden van een naam via het venster, verwijst de toepassing door naar de homepage. Bij aankomst op de homepage zien gebruikers een standaardwebsite met de begroeting “Welkom” en vervolgens de ingevoerde tekst uit het modale venster in de string.
De bovenstaande toepassing maakt gebruik van variabele expressies om haar doel te bereiken. In het modal.html-document wordt de basisstructuur gepresenteerd door de volgende opmaak op te nemen:
<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>
Bij het indienen van een formulier door een gebruiker wordt het th:action attribuut geactiveerd, waarvan de waarde overeenkomt met een POST URL die is ontdekt in de WebController klasse.
@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}
De methode processName() neemt als invoer de string die door de gebruiker via het modal is opgegeven en slaat deze op in een variabele met de naam userName . Vervolgens voegt de controller de variabele userName toe aan de lay-out met behulp van de variabeluitdrukking.
<h1>Welcome <span th:text="${userName}"></span>!</h1>
Het gebruik van de selectievariabele met sterretje wordt steeds waardevoller naarmate de complexiteit van softwaresystemen toeneemt. Een praktische illustratie betreft authenticatiemechanismen waarbij het verzamelen van gebruikersnamen van gebruikersobjecten en hun opname in het interfaceontwerp deze functionaliteit effectief illustreert.
Alternatieve Template en Styling Opties
Hoewel Thymeleaf de voorkeur heeft gekregen als templating oplossing voor Spring Boot projecten, is het belangrijk om alternatieve keuzes te overwegen die vergelijkbare functionaliteit bieden. Onder deze alternatieven zijn JavaServer Pages (JSP), die server-side Java code generatie biedt; Groovy templates, die het mogelijk maken om dynamische inhoud te creëren met behulp van Groovy scripting taal; FreeMarker templates, een open source template engine met ondersteuning voor meerdere programmeertalen; en Mustache templates, bekend om hun eenvoud en gemak van integratie. Verder hebben ontwikkelaars de flexibiliteit om eigen CSS-stijlen te gebruiken of gebruik te maken van bestaande CSS-frameworks om hun paginalay-outs te ontwerpen.