Aflați cum să integrați acest motor de șablon în aplicațiile dvs. Spring.

Thymeleaf este un motor de șablon Java. Ea dezvoltă șabloane atât pentru aplicații web, cât și pentru aplicații independente. Acest motor de șabloane folosește conceptul de șabloane naturale pentru a injecta logica în aspectul dvs., fără a vă compromite designul. Cu Thymeleaf, veți avea control asupra modului în care o aplicație va procesa șabloanele pe care le creați.

Puteți utiliza Thymeleaf pentru a procesa șase tipuri de șabloane: HTML, XML, Text, JavaScript, CSS și RAW. Thymeleaf se referă la fiecare dintre șabloane ca un mod de șablon, HTML fiind cel mai popular șablon creat pe acest motor.

Inițializarea Thymeleaf în aplicația dvs

Există două moduri de a adăuga Thymeleaf la aplicația Spring Boot. Puteți selecta Thymeleaf ca dependență atunci când vă generați boilerplate cu Instrumentul de inițializare al lui Spring. Aveți, de asemenea, opțiunea de a-l adăuga mai târziu în fișierul de specificații de construcție în secțiunea dependențe.

instagram viewer

Dacă ați selectat una dintre opțiunile proiectului Gradle, fișierul care conține dependențele este construi.gradle fişier. Cu toate acestea, dacă ați ales Maven, atunci acel fișier este pom.xml.

Ta pom.xml fișierul ar trebui să conțină următoarea secțiune de dependență:

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


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

În timp ce dvs construi.gradle fișierul ar trebui să conțină următoarea secțiune de dependență:

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

Exemplul de aplicație folosit în articol este disponibil în acest articol Depozitul GitHub și este gratuit pentru utilizare sub licența MIT.

Adăugând Thymeleaf la aplicația Spring, veți obține acces la biblioteca sa de bază, care vă permite să utilizați dialectul standard Spring al Thymeleaf. Dialectul standard de primăvară conține atribute și sintaxă unice pe care le puteți utiliza pentru a adăuga diferite caracteristici la machetele dvs.

Folosind Thymeleaf în Spring Boot

Când utilizați Thymeleaf în aplicația Spring, primul pas este să creați documentul șablon. Pentru această aplicație exemplu, documentul șablon este HTML. Ar trebui să vă creați întotdeauna șabloanele Thymeleaf în Spring Boot șabloane folder, care este disponibil în fișierul de resurse.

Fișierul home.html

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Șablonul Thymeleaf de mai sus este un șablon HTML5 general, cu un atribut străin (xmlns: th). Scopul xmlns: th atributul este de a oferi domeniul de aplicare pentru toate al:* atributele pe care le veți folosi în acest document HTML. Celelalte atribute și etichete dintr-un șablon Thymeleaf sunt tradiționale Etichete și atribute HTML.

Crearea unui antet

Unul dintre primele și cele mai importante aspecte ale oricărui site web sau aplicație este antetul. Spune despre ce este aplicația (prin logo) și vă ajută să navigați cu ușurință în aplicație. Un antet de bază ar trebui să aibă un logo, precum și mai multe link-uri de navigare.

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 vă permite să adăugați antetul de mai sus la orice pagină din aplicația dvs. web folosind th: inserare atribut. The th: inserare și th: înlocui atributele acceptă ceea ce Thymeleaf numește valori de expresie a fragmentelor. Expresiile de fragmente vă permit să plasați fragmente de marcare în orice locație din aspectul dvs.

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

Inserarea marcajului de mai sus în partea de sus a home.html eticheta va insera marcajul antetului în partea de sus a paginii dvs. de pornire. O expresie de fragment are mai multe componente, două sunt opționale și două sunt necesare:

  • O tilde (~), care este opțională.
  • O pereche de acolade ({}), care este opțională.
  • Numele șablonului care conține marcajul pe care doriți să îl introduceți (header.html).
  • Selectorul CSS al marcajului pe care doriți să îl inserați (#nav).

Deci, următorul marcaj produce același rezultat ca cel de mai sus.

"header:: #nav">

Popularea corpului șablonului

Thymeleaf vă permite să utilizați cinci tipuri de expresii în șabloane:

  • Expresie fragment (~{…})
  • Expresia mesajului (#{…})
  • Expresia URL a linkului (@{…})
  • Expresie variabilă (${…})
  • Expresie variabilă de selecție (*{…})

O expresie de mesaj vă permite să adăugați fragmente de text externalizate la aspectul dvs. Cu expresiile de mesaj, puteți înlocui sau reutiliza cu ușurință textul din aspectul dvs. Când utilizați o expresie de mesaj, ar trebui să plasați întotdeauna fragmentele de text externe într-un .proprietăţi dosar sub resurse pliant.

Pentru această aplicație exemplu, acel fișier este mesaje.proprietăţi, care conține următorul fragment de text:

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

Trebuie să rețineți că fragmentul de text (sau mesajul) de mai sus are o cheie unică (substituent.text). Acest lucru se datorează faptului că fiecare fișier de mesaje poate conține o colecție de mesaje diferite. Deci, veți avea nevoie de o cheie pentru a insera un anumit mesaj în aspectul dvs.

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

Inserarea marcajului de mai sus în corpul fișierului HTML va afișa efectiv textul substituent ca paragraf în vizualizarea dvs. Spre deosebire de expresia fragmentului, fiecare aspect al expresiei mesajului este obligatoriu. O expresie de mesaj necesită:

  • Un semn numeric (#).
  • O pereche de bretele ({}).
  • Cheia care deține mesajul pe care doriți să-l introduceți (substituent.text).

Stilizarea șablonului

Un alt fișier important în resurse folderul este fișierul static. Acest fișier stochează fișierele dvs. CSS și orice imagini pe care intenționați să le utilizați în aplicația dvs. Pentru a conecta fișierul CSS extern la șablonul HTML Thymeleaf, va trebui să utilizați expresia URL a linkului. Procesele de expresie URL a linkului URL-uri atât relative cât și absolute.

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

Inserarea marcajului de mai sus în din fișierul HTML vă va permite să vă stilați șablonul folosind un stil.css fişier. Acest fișier este disponibil în format a css folderul de sub static secțiunea resurse dosarul aplicației exemplu. Ar trebui să atribuiți întotdeauna expresia URL a linkului th: href atribut.

Thymeleaf oferă câteva alte atribute pe care le puteți folosi pentru a îmbunătăți designul aspectului dvs. Un astfel de atribut este th: stil atribut, pe care îl puteți folosi pentru a adăuga imagini la aspectul dvs.

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

Marcajul de mai sus folosește th: stil atribut pentru a adăuga o imagine de fundal la o anumită secțiune a aspectului dvs. Thymeleaf are peste o sută de atribute diferite pe care le puteți folosi pentru a adăuga stil și funcționalitate machetelor dvs.

Expresia variabilă

Expresiile variabile sunt cele mai populare și, probabil, cele mai complexe expresii pe care le folosește Thymeleaf. Expresiile variabile Thymeleaf vă permit să colectați date fie din contextul aplicației, fie dintr-un obiect din aplicație și să injectați acele date în șablon. În funcție de sursa datelor pe care doriți să le redați în vizualizarea dvs., există două tipuri de expresii variabile pe care le puteți utiliza.

Expresia variabilă primară folosește semnul dolarului și vă permite să colectați date de la contextul aplicației (care sunt date asociate cu diferitele sarcini care rulează în aplicație). De exemplu, dacă doriți să capturați datele unui utilizator dintr-un modal, atunci expresia variabilă cu semnul dolarului este alegerea mai practică. Dacă executați proiectul exemplu și navigați la http://localhost: 8080/ în browser, veți vedea următorul mod:

După ce închideți modalul sau trimiteți un nume, aplicația va naviga la pagina de pornire. Pe pagina principală, veți vedea un site web generic care afișează cuvântul „Bun venit”, urmat de șirul pe care tocmai l-ați trimis în mod.

Aplicația exemplu utilizează expresia variabilă pentru a finaliza acest proces. Forma simplă în modal.html fișierul are următorul marcaj:

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


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


form>

Când un utilizator trimite formularul, acesta declanșează th: acţiune atribut care are valoarea unei adrese URL de postare, pe care o puteți găsi în WebController clasă.

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


 model.addAttribute("userName", userName);


return"home";
 }

The numele procesului() metoda acceptă șirul pe care utilizatorul îl furnizează modalului, apoi alocă acel șir unei variabile numite nume de utilizator. Folosind expresia variabilă, controlerul injectează apoi variabila nume de utilizator în aspect.

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

Expresia variabilă de selecție folosește un asterisc și este cea mai utilă atunci când aveți de-a face cu aplicații mai complexe. De exemplu, o aplicație care solicită utilizatorilor să se conecteze poate folosi expresia variabilă de selecție. Puteți colecta numele de utilizator din obiectul utilizator și îl puteți introduce în aspect.

Opțiuni alternative de șablon și stil

Deși Thymeleaf este cea mai populară opțiune de șablon pentru aplicațiile Spring Boot, există câteva alte opțiuni la fel de viabile. Acestea includ JavaServer Pages (JSP), șabloane bazate pe Groovy, șabloane FreeMarker și șabloane Mustache. Pe lângă crearea unui stil CSS personalizat, puteți opta și pentru a utiliza un cadru CSS pentru a vă stila aspectul.