Siit saate teada, kuidas integreerida see mallimootor oma kevadiste rakendustesse.

Thymeleaf on Java mallimootor. See arendab malle nii veebi- kui ka eraldiseisvate rakenduste jaoks. See mallimootor kasutab loomulike mallide kontseptsiooni, et lisada teie paigutusse loogikat, ilma teie disaini kahjustamata. Thymeleafi abil saate kontrollida, kuidas rakendus teie loodud malle töötleb.

Thymeleafi saate kasutada kuut tüüpi mallide töötlemiseks: HTML, XML, tekst, JavaScript, CSS ja RAW. Thymeleaf viitab igale mallile kui mallirežiimile, kusjuures HTML on selle mootoriga loodud kõige populaarsem mall.

Tüümialehi lähtestamine teie rakenduses

Thymeleafi lisamiseks oma Spring Booti rakendusse on kaks võimalust. Saate valida Thymeleafi sõltuvuseks, kui loote katlaplaadi Kevade lähtestamistööriist. Samuti saate selle hiljem sõltuvuste jaotises oma järgu spetsifikatsiooni faili lisada.

Kui valisite ühe Gradle'i projekti suvanditest, on sõltuvusi sisaldav fail ehitama.gradle faili. Kui aga valisite Maveni, siis see fail on pom.xml.

instagram viewer

Sinu pom.xml fail peaks sisaldama järgmist sõltuvuse jaotist:

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


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

Samal ajal kui teie ehitama.gradle fail peaks sisaldama järgmist sõltuvuse jaotist:

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

Artiklis kasutatud näidisrakendus on saadaval siin GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada.

Lisades Thymeleafi oma Spring-rakendusse, saate juurdepääsu selle põhiteegile, mis võimaldab kasutada Thymeleafi kevadist standardset dialekti. Spring Standard Dialect sisaldab unikaalseid atribuute ja süntaksit, mida saate kasutada oma paigutustele erinevate funktsioonide lisamiseks.

Thymeleafi kasutamine Spring Boot'is

Kui kasutate Thymeleafi oma Spring rakenduses, on esimene samm luua oma mallidokument. Selle näidisrakenduse jaoks on mallidokument HTML. Peaksite alati oma Thymeleafi mallid looma Spring Boot’sis mallid kaust, mis on saadaval ressursside failis.

Fail home.html

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Ülaltoodud Thymeleafi mall on üldine HTML5 mall, millel on üks võõratribuut (xmlns: th). Eesmärk xmlns: th atribuut on pakkuda ulatust kõigile th:* atribuudid, mida selles HTML-dokumendis kasutate. Muud atribuudid ja sildid Thymeleafi mallis on traditsioonilised HTML-i sildid ja atribuudid.

Päise loomine

Iga veebisaidi või rakenduse üks esimesi ja kõige olulisemaid aspekte on päis. See räägib rakendusest (logo kaudu) ja aitab teil rakenduses hõlpsalt navigeerida. Põhipäisel peaks olema logo ja mitu navigeerimislinki.

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õimaldab teil lisada ülaltoodud päise oma veebirakenduse mis tahes lehele, kasutades th: sisesta atribuut. The th: sisesta ja th: asendada atribuudid aktsepteerivad seda, mida Thymeleaf nimetab fragmendi ekspressiooniväärtusteks. Fragmendiväljendid võimaldavad teil paigutada märgistuse fragmente paigutuses mis tahes kohta.

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

Märgistuse lisamine ülaossa home.html silt lisab päise märgistuse teie avalehe ülaossa. Fragmendiekspressioonil on mitu komponenti, kaks on valikulised ja kaks on kohustuslikud:

  • Tilde (~), mis on valikuline.
  • Paar lokkis trakse ({}), mis on valikuline.
  • Malli nimi, mis sisaldab märgistust, mida soovid lisada (header.html).
  • Sisestatava märgistuse CSS-i valija (#nav).

Seega annab järgmine märgistus sama tulemuse kui ülaltoodud.

"header:: #nav">

Oma malli keha sisestamine

Thymeleaf võimaldab teil mallides kasutada viit tüüpi väljendeid:

  • Fragmendi avaldis (~{…})
  • Sõnumi väljendus (#{…})
  • Lingi URL-i väljend (@{…})
  • Muutuja avaldis (${…})
  • Valikumuutuja avaldis (*{…})

Sõnumiväljend võimaldab teil lisada küljendusse väliseid tekstifragmente. Sõnumiväljendite abil saate hõlpsasti teksti oma paigutuses asendada või uuesti kasutada. Sõnumiväljendi kasutamisel tuleks välised tekstifragmendid alati paigutada a-sse .omadused faili all ressursse kausta.

Selle näidisrakenduse jaoks on see fail teated.omadused, mis sisaldab järgmist tekstikatkest:

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

Peaksite arvestama, et ülaltoodud tekstifragmendil (või sõnumil) on kordumatu võti (kohahoidja.tekst). Seda seetõttu, et iga sõnumifail võib sisaldada erinevate sõnumite kogumit. Seega on teil vaja võtit konkreetse sõnumi sisestamiseks oma paigutusse.

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

Ülaltoodud märgistuse lisamine HTML-faili sisusse kuvab kohatäite teksti teie vaates tõhusalt lõiguna. Erinevalt fragmendiväljendist on sõnumiväljenduse kõik aspektid kohustuslikud. Sõnumi väljendus nõuab:

  • Numbrimärk (#).
  • Paar lokkis traksidega ({}).
  • Võti, mis sisaldab sisestatavat sõnumit (kohahoidja.tekst).

Malli kujundamine

Teine oluline fail ressursse kaust on staatiline fail. See fail salvestab teie CSS-failid ja kõik pildid, mida kavatsete oma rakenduses kasutada. Välise CSS-faili linkimiseks Thymeleaf HTML-malliga peate kasutama lingi URL-i väljendit. Lingi URL-i väljendusprotsessid nii suhtelisi kui ka absoluutseid URL-e.

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

Ülaltoodud märgistuse sisestamine HTML-faili võimaldab teil oma malli stiili kujundada, kasutades a stiil.css faili. See fail on saadaval a css all oleva kausta staatiline osa ressursse näidistaotluse fail. Peaksite alati määrama lingi URL-i avaldise th: href atribuut.

Thymeleaf pakub mitmeid muid atribuute, mida saate oma paigutuse kujunduse täiustamiseks kasutada. Üks selline atribuut on th: stiil atribuut, mida saate kasutada oma paigutusele piltide lisamiseks.

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

Ülaltoodud märgistus kasutab th: stiil atribuut, et lisada küljenduse konkreetsele jaotisele taustpilt. Thymeleafil on üle saja erineva atribuudi, mida saate kasutada oma paigutustele stiili ja funktsionaalsuse lisamiseks.

Muutuv avaldis

Muutuvad avaldised on kõige populaarsemad ja vaieldamatult kõige keerukamad väljendid, mida Thymeleaf kasutab. Thymeleaf muutujaavaldised võimaldavad teil koguda andmeid kas rakenduse kontekstist või rakenduses olevast objektist ja sisestada need andmed malli. Olenevalt andmete allikast, mida soovite oma vaates renderdada, saate kasutada kahte tüüpi muutujaavaldisi.

Peamine muutuja avaldis kasutab dollarimärki ja võimaldab teil koguda andmeid rakenduse kontekst (mis on andmed, mis on seotud rakenduses töötavate erinevate ülesannetega rakendus). Näiteks kui soovite jäädvustada kasutaja andmeid modaalist, on dollarimärgi muutuja avaldis praktilisem valik. Kui käivitate näidisprojekti ja navigeerite saidile http://localhost: 8080/ brauseris näete järgmist modaali:

Pärast modaali sulgemist või nime esitamist liigub rakendus avalehele. Avalehel näete üldist veebisaiti, mis kuvab sõna "Tere tulemast", millele järgneb string, mille just modaalis esitasite.

Näidisrakendus kasutab selle protsessi lõpuleviimiseks muutujaavaldist. Lihtne vorm rakenduses modaal.html failil on järgmine märgistus:

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


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


form>

Kui kasutaja vormi esitab, käivitab see th: tegevus atribuut, millel on postituse URL-i väärtus, mille leiate jaotisest Veebikontroller klass.

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


 model.addAttribute("userName", userName);


return"home";
 }

The protsessinimi() meetod aktsepteerib stringi, mille kasutaja modaalile annab, ja määrab selle stringi muutujale nimega kasutajanimi. Kasutades muutujaavaldist, sisestab kontroller seejärel paigutusse kasutajanime muutuja.

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

Valikumuutuja avaldis kasutab tärni ja see on kõige kasulikum keerulisemate rakenduste puhul. Näiteks rakendus, mis nõuab kasutajatelt sisselogimist, saab kasutada valikumuutuja avaldist. Kasutajanime saab koguda kasutajaobjektilt ja lisada selle paigutusse.

Alternatiivsed malli- ja stiilivalikud

Kuigi Thymeleaf on Spring Booti rakenduste jaoks populaarsem mallivalik, on ka mitmeid teisi sama elujõulisi võimalusi. Nende hulka kuuluvad JavaServer Pages (JSP), Groovy-põhised mallid, FreeMarkeri mallid ja Moustache mallid. Lisaks kohandatud CSS-stiili loomisele saate oma paigutuse kujundamiseks kasutada ka CSS-i raamistikku.