Leer hoe u deze sjabloonengine in uw Spring-applicaties kunt integreren.

Thymeleaf is een Java-sjabloonengine. Het ontwikkelt sjablonen voor zowel web- als standalone-applicaties. Deze sjabloonengine maakt gebruik van het Natural Templates-concept om logica in uw lay-out te injecteren, zonder uw ontwerp in gevaar te brengen. Met Thymeleaf heeft u controle over hoe een toepassing de sjablonen die u maakt, verwerkt.

U kunt Thymeleaf gebruiken om zes soorten sjablonen te verwerken: HTML, XML, Tekst, JavaScript, CSS en RAW. Thymeleaf verwijst naar elk van de sjablonen als een sjabloonmodus, waarbij HTML de meest populaire sjabloon is die op deze engine is gemaakt.

Initialiseren van Thymeleaf in uw toepassing

Er zijn twee manieren om Thymeleaf aan uw Spring Boot-applicatie toe te voegen. U kunt Thymeleaf als afhankelijkheid selecteren bij het genereren van uw standaardsjabloon Spring's initializr-tool. U hebt ook de mogelijkheid om het later toe te voegen aan uw buildspecificatiebestand in de sectie Afhankelijkheden.

instagram viewer

Als u een van de Gradle-projectopties hebt geselecteerd, is het bestand dat de afhankelijkheden bevat de bouw.gradle bestand. Als u echter Maven kiest, dan is dat bestand dat wel pom.xml.

Jouw pom.xml bestand moet de volgende afhankelijkheidssectie bevatten:

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


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

Terwijl jouw bouw.gradle bestand moet de volgende afhankelijkheidssectie bevatten:

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

De voorbeeldtoepassing die in het artikel wordt gebruikt, is hierin beschikbaar GitHub-opslagplaats en kunt u gratis gebruiken onder de MIT-licentie.

Door Thymeleaf aan uw Spring-applicatie toe te voegen, krijgt u toegang tot de kernbibliotheek, waarmee u Thymeleaf's Spring Standard Dialect kunt gebruiken. Het Spring Standard Dialect bevat unieke attributen en syntaxis die u kunt gebruiken om verschillende functies aan uw lay-outs toe te voegen.

Thymeleaf gebruiken in Spring Boot

Wanneer u Thymeleaf in uw Spring-applicatie gebruikt, is de eerste stap het maken van uw sjabloondocument. Voor deze voorbeeldtoepassing is het sjabloondocument HTML. U moet uw Thymeleaf-sjablonen altijd in Spring Boot's maken Sjablonen map, die beschikbaar is in het bronnenbestand.

Het home.html-bestand

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Het bovenstaande Thymeleaf-sjabloon is een algemene HTML5-sjabloon, met één vreemd attribuut (xmlns: th). Het doel van de xmlns: th attribuut is om de ruimte te bieden voor alle e:* attributen die u in dit HTML-document gaat gebruiken. De andere attributen en tags in een Thymeleaf-sjabloon zijn traditioneel HTML-tags en attributen.

Een koptekst maken

Een van de eerste en belangrijkste aspecten van elke website of applicatie is de header. Het vertelt waar de applicatie over gaat (via het logo) en helpt u gemakkelijk door uw applicatie te navigeren. Een basiskoptekst moet een logo bevatten, evenals verschillende navigatielinks.

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>

Met Thymeleaf kunt u de bovenstaande kop toevoegen aan elke pagina in uw webapplicatie met behulp van de d: invoegen attribuut. De d: invoegen En d: vervangen attributen accepteren wat Thymeleaf fragmentexpressiewaarden noemt. Met fragmentexpressies kunt u opmaakfragmenten op elke gewenste locatie in uw lay-out plaatsen.

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

Door de opmaak hierboven bovenaan in te voegen thuis.html tag voegt de koptekstmarkering bovenaan uw startpagina in. Een fragmentexpressie heeft verschillende componenten, twee zijn optioneel en twee zijn vereist:

  • Een tilde (~), die optioneel is.
  • Een paar accolades ({}), wat optioneel is.
  • De naam van de sjabloon die de opmaak bevat die u wilt invoegen (koptekst.html).
  • De CSS-kiezer van de opmaak die u wilt invoegen (#nav).

De volgende opmaak levert dus hetzelfde resultaat op als het bovenstaande.

"header:: #nav">

Uw sjabloontekst invullen

Met Thymeleaf kunt u vijf soorten uitdrukkingen in uw sjablonen gebruiken:

  • Fragmentexpressie (~{…})
  • Berichtexpressie (#{…})
  • Link-URL-expressie (@{…})
  • Variabele expressie (${…})
  • Selectievariabele-expressie (*{…})

Met een berichtexpressie kunt u geëxternaliseerde tekstfragmenten aan uw lay-out toevoegen. Met berichtuitdrukkingen kunt u de tekst in uw lay-out eenvoudig vervangen of hergebruiken. Wanneer u een berichtuitdrukking gebruikt, plaatst u de externe tekstfragmenten altijd in a .eigenschappen bestand onder de bronnen map.

Voor deze voorbeeldtoepassing is dat bestand berichten.eigenschappen, dat het volgende tekstfragment bevat:

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

Houd er rekening mee dat het tekstfragment (of het bericht) hierboven een unieke sleutel heeft (Placeholder tekst). Dit komt omdat elk berichtenbestand een verzameling verschillende berichten kan bevatten. U hebt dus een sleutel nodig om een ​​specifiek bericht in uw lay-out in te voegen.

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

Als u de bovenstaande opmaak in de hoofdtekst van uw HTML-bestand invoegt, wordt de tijdelijke tekst in uw weergave effectief als een alinea weergegeven. In tegenstelling tot de fragmentexpressie is elk aspect van de berichtexpressie verplicht. Voor een berichtexpressie is het volgende vereist:

  • Een hekje (#).
  • Een paar accolades ({}).
  • De sleutel met het bericht dat u wilt invoegen (Placeholder tekst).

Uw sjabloon stylen

Een ander belangrijk bestand in de bronnen map is het statische bestand. In dit bestand worden uw CSS-bestanden en alle afbeeldingen opgeslagen die u in uw toepassing wilt gebruiken. Om uw externe CSS-bestand aan de Thymeleaf HTML-sjabloon te koppelen, moet u de link-URL-expressie gebruiken. De link-URL-expressieprocessen zowel relatieve als absolute URL's.

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

Door de bovenstaande opmaak in te voegen in het van uw HTML-bestand kunt u uw sjabloon opmaken met behulp van een stijl.css bestand. Dit bestand is beschikbaar in een css map onder de statisch gedeelte van de bronnen bestand van de voorbeeldaanvraag. U moet altijd de link-URL-expressie toewijzen aan de d: href attribuut.

Thymeleaf biedt verschillende andere attributen die u kunt gebruiken om het ontwerp van uw lay-out te verbeteren. Eén zo'n kenmerk is de d: stijl attribuut, dat u kunt gebruiken om afbeeldingen aan uw lay-out toe te voegen.

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

De bovenstaande opmaak gebruikt de d: stijl attribuut om een ​​achtergrondafbeelding toe te voegen aan een specifiek gedeelte van uw lay-out. Thymeleaf heeft meer dan honderd verschillende attributen die u kunt gebruiken om stijl en functionaliteit aan uw lay-outs toe te voegen.

De variabele expressie

De variabele uitdrukkingen zijn de meest populaire en misschien wel de meest complexe uitdrukkingen die Thymeleaf gebruikt. Met Thymeleaf-variabele-expressies kunt u gegevens verzamelen uit de toepassingscontext of een object in de toepassing en die gegevens in de sjabloon injecteren. Afhankelijk van de bron van de gegevens die u in uw weergave wilt weergeven, zijn er twee soorten variabele-expressies die u kunt gebruiken.

De primaire variabele-expressie gebruikt het dollarteken en stelt u in staat gegevens te verzamelen uit de applicatiecontext (dit zijn gegevens die zijn gekoppeld aan de verschillende taken die worden uitgevoerd in de sollicitatie). Als u bijvoorbeeld de gegevens van een gebruiker uit een modaal wilt vastleggen, dan is de variabele-expressie met dollarteken de meer praktische keuze. Als u het voorbeeldproject uitvoert en naar http://localhost: 8080/ in uw browser ziet u het volgende modaal:

Nadat u de modal heeft gesloten of een naam heeft opgegeven, navigeert de toepassing naar de startpagina. Op de startpagina ziet u een algemene website waarop het woord 'Welkom' wordt weergegeven, gevolgd door de tekenreeks die u zojuist in de modal hebt ingediend.

De voorbeeldtoepassing gebruikt de variabele-expressie om dit proces te voltooien. Het eenvoudige formulier in de modaal.html bestand heeft de volgende opmaak:

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


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


form>

Wanneer een gebruiker het formulier verzendt, wordt de d: actie attribuut dat de waarde heeft van een bericht-URL, die u kunt vinden in de Webcontroller klas.

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


 model.addAttribute("userName", userName);


return"home";
 }

De proces naam() methode accepteert de string die de gebruiker aan de modal levert, en wijst die string vervolgens toe aan een aangeroepen variabele gebruikersnaam. Met behulp van de variabele-expressie injecteert de controller vervolgens de gebruikersnaamvariabele in de lay-out.

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

De expressie van de selectievariabele gebruikt een asterisk en is vooral handig als u met complexere toepassingen te maken heeft. Een toepassing waarbij gebruikers zich moeten aanmelden, kan bijvoorbeeld de selectievariabele-expressie gebruiken. U kunt de gebruikersnaam uit het gebruikersobject halen en deze in de lay-out invoegen.

Alternatieve sjabloon- en stijlopties

Hoewel Thymeleaf de populairste sjabloonoptie is voor Spring Boot-toepassingen, zijn er verschillende andere, even haalbare opties. Deze omvatten JavaServer Pages (JSP), op Groovy gebaseerde sjablonen, FreeMarker-sjablonen en Moustache-sjablonen. Naast het maken van aangepaste CSS-stijlen, kunt u er ook voor kiezen om een ​​CSS-framework te gebruiken om uw lay-out te stylen.