Lær hvordan du integrerer denne malmotoren i Spring-applikasjonene dine.

Thymeleaf er en Java-malmotor. Den utvikler maler for både web- og frittstående applikasjoner. Denne malmotoren bruker Natural Templates-konseptet for å injisere logikk i layouten din, uten å gå på akkord med designet. Med Thymeleaf har du kontroll over hvordan en applikasjon vil behandle malene du lager.

Du kan bruke Thymeleaf til å behandle seks typer maler: HTML, XML, Tekst, JavaScript, CSS og RAW. Thymeleaf refererer til hver av malene som en malmodus, med HTML som den mest populære malen laget på denne motoren.

Initialisere Thymeleaf i applikasjonen din

Det er to måter å legge til Thymeleaf i Spring Boot-applikasjonen. Du kan velge Thymeleaf som en avhengighet når du genererer boilerplate med Springs initializr-verktøy. Du har også muligheten til å legge den til senere i byggespesifikasjonsfilen i avhengighetsdelen.

Hvis du valgte ett av Gradle-prosjektalternativene, er filen som inneholder avhengighetene bygge.gradle fil. Men hvis du valgte Maven, er den filen det pom.xml.

Din pom.xml filen skal inneholde følgende avhengighetsdel:

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


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

Mens din bygge.gradle filen skal inneholde følgende avhengighetsdel:

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

Eksempelapplikasjonen som brukes i artikkelen er tilgjengelig i denne GitHub-depot og er gratis for deg å bruke under MIT-lisensen.

Ved å legge Thymeleaf til Spring-applikasjonen din får du tilgang til kjernebiblioteket, som lar deg bruke Thymeleafs Spring Standard Dialect. Spring Standard Dialect inneholder unike attributter og syntaks som du kan bruke til å legge til forskjellige funksjoner i layoutene dine.

Bruke Thymeleaf i Spring Boot

Når du bruker Thymeleaf i Spring-applikasjonen din, er det første trinnet å lage maldokumentet. For denne eksempelapplikasjonen er maldokumentet HTML. Du bør alltid lage dine Thymeleaf-maler i Spring Boot's maler mappe, som er tilgjengelig i ressursfilen.

home.html-filen

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Thymeleaf-malen ovenfor er en generell HTML5-mal, med ett utenlandsk attributt (xmlns: th). Hensikten med xmlns: th attributtet er å gi omfanget for alle th:* attributter som du vil bruke i dette HTML-dokumentet. De andre attributtene og taggene i en Thymeleaf-mal er tradisjonelle HTML-koder og attributter.

Opprette en topptekst

En av de første og viktigste aspektene ved enhver nettside eller applikasjon er overskriften. Den forteller hva applikasjonen handler om (gjennom logoen) og hjelper deg med å enkelt navigere i applikasjonen. En grunnleggende overskrift bør ha en logo, samt flere navigasjonslenker.

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 lar deg legge til overskriften ovenfor på hvilken som helst side i nettapplikasjonen din ved å bruke th: sette inn Egenskap. De th: sette inn og th: erstatte attributter aksepterer det Thymeleaf kaller fragmentuttrykksverdier. Fragmentuttrykk lar deg plassere fragmenter av markeringer hvor som helst i layouten.

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

Setter inn markeringen over på toppen av home.html taggen vil sette inn overskriftsmarkeringen øverst på hjemmesiden din. Et fragmentuttrykk har flere komponenter, to er valgfrie og to er obligatoriske:

  • En tilde (~), som er valgfri.
  • Et par krøllete seler ({}), som er valgfritt.
  • Navnet på malen som inneholder markeringen du ønsker å sette inn (header.html).
  • CSS-velgeren til markeringen du ønsker å sette inn (#nav).

Så, følgende markering gir det samme resultatet som det ovenfor.

"header:: #nav">

Fylle malkroppen din

Thymeleaf lar deg bruke fem typer uttrykk i malene dine:

  • Fragmentuttrykk (~{...})
  • Meldingsuttrykk (#{...})
  • Link URL-uttrykk (@{...})
  • Variabelt uttrykk (${…})
  • Utvalgsvariabelt uttrykk (*{...})

Et meldingsuttrykk lar deg legge til eksternaliserte fragmenter av tekst til layouten. Med meldingsuttrykk kan du enkelt erstatte eller gjenbruke teksten i oppsettet ditt. Når du bruker et meldingsuttrykk, bør du alltid plassere de eksterne tekstfragmentene i en .egenskaper fil under ressurser mappe.

For denne eksempelapplikasjonen er den filen meldinger.egenskaper, som inneholder følgende tekstfragment:

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

Du bør merke deg at tekstfragmentet (eller meldingen) ovenfor har en unik nøkkel (plassholder.tekst). Dette er fordi hver meldingsfil kan inneholde en samling av forskjellige meldinger. Så du trenger en nøkkel for å sette inn en spesifikk melding i oppsettet ditt.

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

Hvis du setter inn markeringen ovenfor i hoveddelen av HTML-filen din, vises plassholderteksten effektivt som et avsnitt i visningen din. I motsetning til fragmentuttrykket er alle aspekter ved meldingsuttrykket obligatoriske. Et meldingsuttrykk krever:

  • Et talltegn (#).
  • Et par krøllete seler ({}).
  • Nøkkelen som inneholder meldingen du ønsker å sette inn (plassholder.tekst).

Styling av malen din

En annen viktig fil i ressurser mappen er den statiske filen. Denne filen lagrer CSS-filene dine og alle bilder du planlegger å bruke i applikasjonen. For å koble den eksterne CSS-filen din til Thymeleaf HTML-malen må du bruke lenke URL-uttrykket. Link-URL-uttrykket behandler både relative og absolutte nettadresser.

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

Setter inn markeringen ovenfor i av HTML-filen din vil tillate deg å style malen ved hjelp av en style.css fil. Denne filen er tilgjengelig i en css mappen under statisk delen av ressurser filen til prøvesøknaden. Du bør alltid tilordne lenke-URL-uttrykket til th: href Egenskap.

Thymeleaf har flere andre attributter som du kan bruke for å forbedre utformingen av layouten din. En slik egenskap er th: stil attributt, som du kan bruke til å legge til bilder i oppsettet ditt.

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

Markeringen ovenfor bruker th: stil attributt for å legge til et bakgrunnsbilde til en bestemt del av layouten din. Thymeleaf har over hundre forskjellige attributter som du kan bruke for å legge til stil og funksjonalitet til layoutene dine.

Det variable uttrykket

De variable uttrykkene er de mest populære og uten tvil de mest komplekse uttrykkene som Thymeleaf bruker. Thymeleaf-variableuttrykk lar deg samle inn data fra enten applikasjonskonteksten eller et objekt i applikasjonen og injisere disse dataene i malen. Avhengig av kilden til dataene du vil gjengi til visningen, er det to typer variabeluttrykk du kan bruke.

Det primære variabeluttrykket bruker dollartegnet og lar deg samle inn data fra applikasjonskontekst (som er data knyttet til de forskjellige oppgavene som kjører i applikasjon). For eksempel, hvis du ønsket å fange opp en brukers data fra en modal, er dollartegnvariabeluttrykket det mer praktiske valget. Hvis du utfører eksempelprosjektet og navigerer til http://localhost: 8080/ i nettleseren din vil du se følgende modal:

Etter at du enten lukker modalen eller sender inn et navn, vil søknaden navigere til hjemmesiden. På hjemmesiden vil du se et generisk nettsted som viser ordet "Velkommen", etterfulgt av strengen du nettopp sendte inn i modalen.

Eksempelapplikasjonen bruker variabeluttrykket for å fullføre denne prosessen. Den enkle formen i modal.html filen 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 bruker sender inn skjemaet, utløser det th: handling attributt som har verdien av en post-URL, som du kan finne i WebController klasse.

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


 model.addAttribute("userName", userName);


return"home";
 }

De prosessnavn() metoden aksepterer strengen som brukeren leverer til modalen, og tildeler deretter strengen til en variabel kalt brukernavn. Ved å bruke variabeluttrykket injiserer kontrolleren deretter brukernavnvariabelen i layouten.

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

Valgvariabeluttrykket bruker en stjerne, og det er mest nyttig når du har å gjøre med mer komplekse applikasjoner. For eksempel kan et program som krever at brukere logger på bruke valgvariabeluttrykket. Du kan samle brukernavnet fra brukerobjektet og sette det inn i layouten.

Alternative mal- og stylingsalternativer

Selv om Thymeleaf er det mer populære malalternativet for Spring Boot-applikasjoner, er det flere andre like levedyktige alternativer. Disse inkluderer JavaServer Pages (JSP), Groovy-baserte maler, FreeMarker-maler og Mustache-maler. I tillegg til å lage tilpasset CSS-styling, kan du også velge å bruke et CSS-rammeverk for å style layouten din.