Lær, hvordan du integrerer denne skabelonmotor i dine Spring-applikationer.

Thymeleaf er en Java-skabelonmotor. Det udvikler skabeloner til både web- og selvstændige applikationer. Denne skabelonmotor bruger Natural Templates-konceptet til at indsprøjte logik i dit layout uden at gå på kompromis med dit design. Med Thymeleaf har du kontrol over, hvordan en applikation behandler de skabeloner, du opretter.

Du kan bruge Thymeleaf til at behandle seks typer skabeloner: HTML, XML, Tekst, JavaScript, CSS og RAW. Thymeleaf refererer til hver af skabelonerne som en skabelontilstand, hvor HTML er den mest populære skabelon oprettet på denne motor.

Initialisering af Thymeleaf i din applikation

Der er to måder at tilføje Thymeleaf til din Spring Boot-applikation. Du kan vælge Thymeleaf som en afhængighed, når du genererer din boilerplate med Springs initializr-værktøj. Du har også mulighed for at tilføje det senere til din byggespecifikationsfil i afhængighedsafsnittet.

Hvis du valgte en af ​​Gradle-projektindstillingerne, er filen, der indeholder afhængighederne

instagram viewer
bygge.gradle fil. Men hvis du valgte Maven, så er den fil det pom.xml.

Din pom.xml filen skal indeholde følgende afhængighedssektion:

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


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

Mens din bygge.gradle filen skal indeholde følgende afhængighedssektion:

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

Eksempelapplikationen brugt i artiklen er tilgængelig i denne GitHub-depot og er gratis for dig at bruge under MIT-licensen.

Ved at tilføje Thymeleaf til din Spring-applikation får du adgang til dets kernebibliotek, som giver dig mulighed for at bruge Thymeleafs Spring Standard Dialect. Spring Standard Dialect indeholder unikke attributter og syntaks, som du kan bruge til at tilføje forskellige funktioner til dine layouts.

Brug af Thymeleaf i Spring Boot

Når du bruger Thymeleaf i din Spring-applikation, er det første skridt at oprette dit skabelondokument. For denne eksempelapplikation er skabelondokumentet HTML. Du bør altid oprette dine Thymeleaf-skabeloner i Spring Boot's skabeloner mappe, som er tilgængelig i ressourcefilen.

Home.html-filen

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Thymeleaf-skabelonen ovenfor er en generel HTML5-skabelon med én fremmed attribut (xmlns: th). Formålet med xmlns: th attribut er at give omfanget for alle th:* attributter, som du vil bruge i dette HTML-dokument. De andre attributter og tags i en Thymeleaf-skabelon er traditionelle HTML-tags og attributter.

Oprettelse af en header

Et af de første og vigtigste aspekter af enhver hjemmeside eller applikation er overskriften. Den fortæller, hvad applikationen handler om (via logoet) og hjælper dig med nemt at navigere i din applikation. En grundlæggende header skal have et logo samt flere navigationslinks.

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 giver dig mulighed for at tilføje overskriften ovenfor til enhver side i din webapplikation ved hjælp af th: indsæt attribut. Det th: indsæt og th: udskift attributter accepterer, hvad Thymeleaf kalder fragmentekspressionsværdier. Fragmentudtryk giver dig mulighed for at placere fragmenter af markeringer på et hvilket som helst sted i dit layout.

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

Indsættelse af markeringen ovenfor i toppen af home.html tag vil indsætte header-markeringen øverst på din startside. Et fragmentudtryk har flere komponenter, to er valgfrie og to er påkrævet:

  • En tilde (~), som er valgfri.
  • Et par krøllede seler ({}), som er valgfri.
  • Navnet på skabelonen, der indeholder den markup, du ønsker at indsætte (header.html).
  • CSS-vælgeren for den markup, du ønsker at indsætte (#nav).

Så følgende opmærkning giver det samme resultat som ovenstående.

"header:: #nav">

Udfyldning af din skabelonkrop

Thymeleaf giver dig mulighed for at bruge fem typer udtryk i dine skabeloner:

  • Fragmentudtryk (~{...})
  • Meddelelsesudtryk (#{...})
  • Link-URL-udtryk (@{...})
  • Variabelt udtryk (${…})
  • Valg variabelt udtryk (*{...})

Et beskedudtryk giver dig mulighed for at tilføje eksternaliserede fragmenter af tekst til dit layout. Med beskedudtryk kan du nemt erstatte eller genbruge teksten i dit layout. Når du bruger et beskedudtryk, bør du altid placere de eksterne tekstfragmenter i en .ejendomme fil under ressourcer folder.

For denne eksempelapplikation er denne fil beskeder.egenskaber, som indeholder følgende tekstfragment:

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

Du skal bemærke, at tekstfragmentet (eller meddelelsen) ovenfor har en unik nøgle (pladsholder.tekst). Dette skyldes, at hver meddelelsesfil kan indeholde en samling af forskellige meddelelser. Så du skal bruge en nøgle til at indsætte en bestemt besked i dit layout.

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

Hvis du indsætter markeringen ovenfor i brødteksten i din HTML-fil, vises pladsholderteksten effektivt som et afsnit i din visning. I modsætning til fragmentudtrykket er alle aspekter af budskabsudtrykket obligatoriske. Et meddelelsesudtryk kræver:

  • Et taltegn (#).
  • Et par krøllede seler ({}).
  • Nøglen, der indeholder den besked, du ønsker at indsætte (pladsholder.tekst).

Stil din skabelon

En anden vigtig fil i ressourcer mappe er den statiske fil. Denne fil gemmer dine CSS-filer og alle billeder, du planlægger at bruge i din applikation. For at linke din eksterne CSS-fil til Thymeleaf HTML-skabelonen skal du bruge link-URL-udtrykket. Link-URL-udtrykket behandler både relative og absolutte URL'er.

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

Indsættelse af markeringen ovenfor i af din HTML-fil giver dig mulighed for at style din skabelon ved hjælp af en style.css fil. Denne fil er tilgængelig i en css mappe under statisk afsnit af ressourcer fil i prøveansøgningen. Du bør altid tildele link-URL-udtrykket til th: href attribut.

Thymeleaf giver flere andre egenskaber, som du kan bruge til at forbedre designet af dit layout. En sådan egenskab er th: stil attribut, som du kan bruge til at tilføje billeder til dit layout.

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

Ovenstående opmærkning bruger th: stil attribut for at tilføje et baggrundsbillede til en bestemt sektion af dit layout. Thymeleaf har over hundrede forskellige egenskaber, som du kan bruge til at tilføje stil og funktionalitet til dine layouts.

Det variable udtryk

De variable udtryk er de mest populære og uden tvivl de mest komplekse udtryk, som Thymeleaf bruger. Thymeleaf variable udtryk giver dig mulighed for at indsamle data fra enten applikationskonteksten eller et objekt i applikationen og indsætte disse data i skabelonen. Afhængigt af kilden til de data, du vil gengive til din visning, er der to typer variable udtryk, som du kan bruge.

Det primære variabeludtryk bruger dollartegnet og giver dig mulighed for at indsamle data fra applikationskontekst (som er data forbundet med de forskellige opgaver, der kører i Ansøgning). For eksempel, hvis du ønskede at fange en brugers data fra en modal, så er dollartegnvariablen det mere praktiske valg. Hvis du udfører prøveprojektet og navigerer til http://localhost: 8080/ i din browser vil du se følgende modal:

Når du enten har lukket modalen eller indsendt et navn, vil applikationen navigere til startsiden. På startsiden vil du se et generisk websted, der viser ordet "Velkommen", efterfulgt af den streng, du lige har indsendt i modalen.

Eksempelapplikationen bruger variabeludtrykket til at fuldføre denne proces. Den simple form i modal.html fil har følgende markering:

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


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


form>

Når en bruger indsender formularen, udløser den th: handling attribut, der har værdien af ​​en post-URL, som du kan finde i WebController klasse.

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


 model.addAttribute("userName", userName);


return"home";
 }

Det procesnavn() metoden accepterer den streng, som brugeren leverer til modalen, og tildeler derefter den streng til en variabel kaldet brugernavn. Ved at bruge variabeludtrykket injicerer controlleren derefter brugernavnsvariablen i layoutet.

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

Udtrykket for valgvariablen bruger en stjerne, og det er mest nyttigt, når du har at gøre med mere komplekse applikationer. For eksempel kan et program, der kræver, at brugere logger ind, bruge udtrykket for valgvariablen. Du kan samle brugernavnet fra brugerobjektet og indsætte det i layoutet.

Alternative skabelon- og stylingmuligheder

Selvom Thymeleaf er den mere populære skabelonmulighed til Spring Boot-applikationer, er der flere andre lige så levedygtige muligheder. Disse omfatter JavaServer Pages (JSP), Groovy-baserede skabeloner, FreeMarker-skabeloner og Mustache-skabeloner. Ud over at skabe tilpasset CSS-styling kan du også vælge at bruge en CSS-ramme til at style dit layout.