Lär dig hur du integrerar denna mallmotor i dina Spring-applikationer.

Thymeleaf är en Java-mallmotor. Den utvecklar mallar för både webb- och fristående applikationer. Denna mallmotor använder konceptet Natural Templates för att injicera logik i din layout, utan att kompromissa med din design. Med Thymeleaf har du kontroll över hur en applikation kommer att behandla mallarna som du skapar.

Du kan använda Thymeleaf för att bearbeta sex typer av mallar: HTML, XML, Text, JavaScript, CSS och RAW. Thymeleaf hänvisar till var och en av mallarna som ett mallläge, där HTML är den mest populära mallen som skapats på denna motor.

Initiera Thymeleaf i din applikation

Det finns två sätt att lägga till Thymeleaf i din Spring Boot-applikation. Du kan välja Thymeleaf som ett beroende när du genererar din boilerplate med Springs initializr-verktyg. Du har också möjlighet att lägga till den senare i din byggspecifikationsfil i avsnittet beroenden.

Om du valde ett av Gradle-projektalternativen är filen som innehåller beroenden bygga.gradle fil. Men om du valde Maven, är den filen det pom.xml.

instagram viewer

Din pom.xml filen bör innehålla följande beroendesektion:

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


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

Medan din bygga.gradle filen bör innehålla följande beroendesektion:

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

Exempelapplikationen som används i artikeln är tillgänglig i denna GitHub-förråd och är gratis för dig att använda under MIT-licensen.

Genom att lägga till Thymeleaf till din Spring-applikation får du tillgång till dess kärnbibliotek, som låter dig använda Thymeleafs Spring Standard Dialect. Spring Standard Dialect innehåller unika attribut och syntax som du kan använda för att lägga till olika funktioner till dina layouter.

Använda Thymeleaf i Spring Boot

När du använder Thymeleaf i din Spring-applikation är det första steget att skapa ditt malldokument. För denna exempelapplikation är malldokumentet HTML. Du bör alltid skapa dina Thymeleaf-mallar i Spring Boot's mallar mapp, som är tillgänglig i resursfilen.

Home.html-filen

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Thymeleaf-mallen ovan är en allmän HTML5-mall, med ett främmande attribut (xmlns: th). Syftet med xmlns: th attribut är att ge utrymmet för alla e:* attribut som du kommer att använda i detta HTML-dokument. De andra attributen och taggarna i en Thymeleaf-mall är traditionella HTML-taggar och attribut.

Skapa en rubrik

En av de första och viktigaste aspekterna av en webbplats eller applikation är rubriken. Den berättar vad applikationen handlar om (genom logotypen) och hjälper dig att enkelt navigera i din applikation. En grundläggande rubrik bör ha en logotyp, samt flera navigeringslänkar.

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 låter dig lägga till rubriken ovan på valfri sida i din webbapplikation med hjälp av th: infoga attribut. De th: infoga och th: byt ut attribut accepterar vad Thymeleaf kallar fragmentuttrycksvärden. Fragmentuttryck låter dig placera fragment av markeringar var som helst i din layout.

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

Infogar markeringen ovan överst på home.html kommer att infoga rubrikmarkeringen överst på din startsida. Ett fragmentuttryck har flera komponenter, två är valfria och två krävs:

  • En tilde (~), som är valfri.
  • Ett par lockiga hängslen ({}), som är valfritt.
  • Namnet på mallen som innehåller märkningen du vill infoga (header.html).
  • CSS-väljaren för markeringen som du vill infoga (#nav).

Så, följande uppmärkning ger samma resultat som den ovan.

"header:: #nav">

Fylla på din mallkropp

Thymeleaf låter dig använda fem typer av uttryck i dina mallar:

  • Fragmentuttryck (~{...})
  • Meddelandeuttryck (#{...})
  • Länk URL-uttryck (@{...})
  • Variabelt uttryck (${…})
  • Valvariabelt uttryck (*{...})

Ett meddelandeuttryck låter dig lägga till externa fragment av text till din layout. Med meddelandeuttryck kan du enkelt ersätta eller återanvända texten i din layout. När du använder ett meddelandeuttryck bör du alltid placera de externa textfragmenten i en .egenskaper fil under Resurser mapp.

För denna exempelapplikation är den filen meddelanden.egenskaper, som innehåller följande textfragment:

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

Du bör notera att textfragmentet (eller meddelandet) ovan har en unik nyckel (platshållare.text). Detta beror på att varje meddelandefil kan innehålla en samling olika meddelanden. Så du behöver en nyckel för att infoga ett specifikt meddelande i din layout.

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

Om du infogar markeringen ovan i brödtexten i din HTML-fil visas platshållartexten som ett stycke i din vy. Till skillnad från fragmentuttrycket är varje aspekt av meddelandeuttrycket obligatoriskt. Ett meddelandeuttryck kräver:

  • Ett nummertecken (#).
  • Ett par lockiga hängslen ({}).
  • Nyckeln som innehåller meddelandet du vill infoga (platshållare.text).

Styla din mall

En annan viktig fil i Resurser mappen är den statiska filen. Den här filen lagrar dina CSS-filer och alla bilder du planerar att använda i din applikation. För att länka din externa CSS-fil till Thymeleaf HTML-mallen måste du använda länkens URL-uttryck. Länkens URL-uttryck bearbetas både relativa och absoluta webbadresser.

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

Infoga markeringen ovan i av din HTML-fil låter dig stil din mall med hjälp av en style.css fil. Denna fil är tillgänglig i en css mapp under statisk avsnitt av Resurser fil i provansökan. Du bör alltid tilldela länkens URL-uttryck till th: href attribut.

Thymeleaf tillhandahåller flera andra attribut som du kan använda för att förbättra designen av din layout. Ett sådant attribut är th: stil attribut, som du kan använda för att lägga till bilder i din layout.

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

Markeringen ovan använder th: stil attribut för att lägga till en bakgrundsbild till en specifik del av din layout. Thymeleaf har över hundra olika attribut som du kan använda för att lägga till stil och funktionalitet till dina layouter.

Det variabla uttrycket

Variabeluttrycken är de mest populära och utan tvekan de mest komplexa uttrycken som Thymeleaf använder. Thymeleaf-variableuttryck låter dig samla in data från antingen applikationskontexten eller ett objekt i applikationen och injicera dessa data i mallen. Beroende på källan till de data som du vill återge till vyn finns det två typer av variabeluttryck som du kan använda.

Det primära variabelns uttryck använder dollartecknet och låter dig samla in data från applikationskontext (som är data associerade med de olika uppgifterna som körs i Ansökan). Till exempel, om du vill fånga en användares data från en modal, är dollarteckenvariabeluttrycket det mer praktiska valet. Om du kör exempelprojektet och navigerar till http://localhost: 8080/ i din webbläsare kommer du att se följande modal:

När du antingen har stängt modalen eller skickat in ett namn, navigerar ansökan till startsidan. På startsidan ser du en generisk webbplats som visar ordet "Välkommen", följt av strängen som du just skickade in i modalen.

Exempelapplikationen använder variabeluttrycket för att slutföra denna process. Den enkla formen i modal.html filen har följande 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 användare skickar in formuläret utlöser det th: action attribut som har värdet av en post-URL, som du kan hitta i WebController klass.

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


 model.addAttribute("userName", userName);


return"home";
 }

De process namn() metoden accepterar strängen som användaren levererar till modalen och tilldelar sedan den strängen till en variabel som heter Användarnamn. Med hjälp av variabeluttrycket injicerar styrenheten sedan användarnamnsvariabeln i layouten.

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

Uttrycket för urvalsvariabeln använder en asterisk, och det är mest användbart när du har att göra med mer komplexa applikationer. Till exempel kan ett program som kräver att användare loggar in använda uttrycket för urvalsvariabeln. Du kan samla in användarnamnet från användarobjektet och infoga det i layouten.

Alternativa mallar och stylingalternativ

Även om Thymeleaf är det mer populära mallalternativet för Spring Boot-applikationer, finns det flera andra lika genomförbara alternativ. Dessa inkluderar JavaServer Pages (JSP), Groovy-baserade mallar, FreeMarker-mallar och Mustache-mallar. Förutom att skapa anpassad CSS-styling kan du också välja att använda ett CSS-ramverk för att utforma din layout.