Opi integroimaan tämä mallimoottori kevään sovelluksiisi.

Thymeleaf on Java-mallipohja. Se kehittää malleja sekä verkko- että itsenäisille sovelluksille. Tämä mallipohja käyttää Natural Templates -konseptia tuodakseen logiikkaa asetteluusi tinkimättä suunnittelusta. Thymeleafin avulla voit hallita sitä, kuinka sovellus käsittelee luomiasi malleja.

Thymeleafin avulla voit käsitellä kuuden tyyppistä mallia: HTML, XML, teksti, JavaScript, CSS ja RAW. Thymeleaf viittaa jokaiseen malliin mallitilaksi, ja HTML on suosituin tällä moottorilla luotu malli.

Thymeleafin alustaminen sovelluksessasi

On kaksi tapaa lisätä Thymeleaf Spring Boot -sovellukseesi. Voit valita Thymeleafin riippuvuudeksi luodessasi kattilalevyäsi Kevään alustava työkalu. Voit myös lisätä sen myöhemmin koontiversion määritystiedostoon riippuvuudet-osiossa.

Jos valitsit jonkin Gradle-projektivaihtoehdoista, riippuvuudet sisältävä tiedosto on build.gradle tiedosto. Jos kuitenkin valitsit Mavenin, se tiedosto on pom.xml.

Sinun pom.xml tiedoston tulee sisältää seuraava riippuvuusosio:

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


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

Kun sinun build.gradle tiedoston tulee sisältää seuraava riippuvuusosio:

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

Artikkelissa käytetty mallisovellus on saatavilla tästä GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.

Kun lisäät Thymeleafin Spring-sovellukseesi, saat pääsyn sen ydinkirjastoon, jonka avulla voit käyttää Thymeleafin Spring Standard Murretta. Spring Standard Dialect sisältää ainutlaatuisia attribuutteja ja syntaksia, joiden avulla voit lisätä erilaisia ​​ominaisuuksia asetteluihisi.

Thymeleafin käyttö Spring Bootissa

Kun käytät Thymeleafiä Spring-sovelluksessasi, ensimmäinen askel on luoda mallidokumentti. Tämän esimerkkisovelluksen mallidokumentti on HTML. Sinun tulee aina luoda Thymeleaf-mallisi Spring Boot'sissa malleja kansio, joka on saatavilla resurssitiedostossa.

Home.html-tiedosto

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Yllä oleva Thymeleaf-malli on yleinen HTML5-malli, jossa on yksi vieras attribuutti (xmlns: th). Tarkoitus xmlns: th attribuutti on tarjota laajuus kaikille th:* attribuutit, joita käytät tässä HTML-asiakirjassa. Muut Thymeleaf-mallin attribuutit ja tunnisteet ovat perinteisiä HTML-tunnisteet ja attribuutit.

Otsikon luominen

Yksi verkkosivuston tai sovelluksen ensimmäisistä ja tärkeimmistä näkökohdista on otsikko. Se kertoo, mistä sovelluksessa on kyse (logon kautta) ja auttaa sinua helposti navigoimaan sovelluksessasi. Perusotsikossa tulee olla logo sekä useita navigointilinkkejä.

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>

Thymeleafin avulla voit lisätä yllä olevan otsikon mille tahansa verkkosovelluksesi sivulle käyttämällä th: lisää attribuutti. The th: lisää ja th: vaihda attribuutit hyväksyvät sen, mitä Thymeleaf kutsuu fragmenttien ilmaisuarvoiksi. Fragmenttilausekkeiden avulla voit sijoittaa merkintöjen fragmentteja mihin tahansa asettelun kohtaan.

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

Merkintöjen lisääminen yläpuolelle home.html -tunniste lisää otsikkomerkinnän kotisivusi yläosaan. Fragmenttilausekkeessa on useita komponentteja, joista kaksi on valinnaista ja kaksi vaaditaan:

  • Tilde (~), joka on valinnainen.
  • Aaltosulkeet ({}), jotka ovat valinnaisia.
  • Mallin nimi, joka sisältää lisättävän merkinnän (header.html).
  • Lisättävän merkinnän CSS-valitsin (#nav).

Joten seuraava merkintä tuottaa saman tuloksen kuin yllä oleva.

"header:: #nav">

Mallin rungon täyttäminen

Thymeleaf antaa sinun käyttää malleissasi viittä erityyppistä lauseketta:

  • Fragmenttilauseke (~{…})
  • Viestilauseke (#{…})
  • Linkin URL-lauseke (@{…})
  • Muuttujalauseke (${…})
  • Valintamuuttujan lauseke (*{…})

Viestilausekkeen avulla voit lisätä ulkoistettuja tekstinpätkiä asetteluusi. Viestilausekkeiden avulla voit helposti korvata tekstin tai käyttää sitä uudelleen asettelussasi. Kun käytät viestilauseketta, sinun tulee aina sijoittaa ulkoiset tekstinpalat a-kenttään .ominaisuudet tiedosto alla resursseja kansio.

Tässä esimerkkisovelluksessa tämä tiedosto on messages.properties, joka sisältää seuraavan tekstikatkelman:

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

Huomaa, että yllä olevalla tekstinpätkällä (tai viestillä) on yksilöllinen avain (paikkamerkki.teksti). Tämä johtuu siitä, että jokainen viestitiedosto voi sisältää kokoelman erilaisia ​​viestejä. Tarvitset siis avaimen tietyn viestin lisäämiseksi asetteluun.

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

Yllä olevan merkinnän lisääminen HTML-tiedostosi tekstiosaan näyttää paikkamerkkitekstin näkymässäsi kappaleena. Toisin kuin fragmenttilauseke, sanoman ilmaisun jokainen osa on pakollinen. Viestin ilmaisu edellyttää:

  • Numeromerkki (#).
  • Pari kiharat henkselit ({}).
  • Avain, jolla on viesti, jonka haluat lisätä (paikkamerkki.teksti).

Mallin muotoilu

Toinen tärkeä tiedosto resursseja kansio on staattinen tiedosto. Tämä tiedosto tallentaa CSS-tiedostosi ja kaikki kuvat, joita aiot käyttää sovelluksessasi. Jos haluat linkittää ulkoisen CSS-tiedostosi Thymeleaf HTML -malliin, sinun on käytettävä linkin URL-lauseketta. Linkin URL-lausekeprosessit sekä suhteelliset että absoluuttiset URL-osoitteet.

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

Yllä olevan merkinnän lisääminen kohtaan HTML-tiedostosi avulla voit muokata mallin tyyliä käyttämällä a tyyli.css tiedosto. Tämä tiedosto on saatavilla a css kansio alla staattinen osio resursseja mallihakemuksen tiedosto. Sinun tulee aina määrittää linkin URL-lauseke th: href attribuutti.

Thymeleaf tarjoaa useita muita attribuutteja, joiden avulla voit parantaa asettelusi suunnittelua. Yksi tällainen ominaisuus on th: tyyli attribuutti, jonka avulla voit lisätä kuvia asetteluun.

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

Yllä oleva merkintä käyttää th: tyyli attribuutti, jolla voit lisätä taustakuvan asettelusi tiettyyn osaan. Thymeleafillä on yli sata erilaista attribuuttia, joiden avulla voit lisätä tyyliä ja toimivuutta asetteluihisi.

Muuttuva lauseke

Muuttujalausekkeet ovat suosituimpia ja luultavasti monimutkaisimpia lausekkeita, joita Thymeleaf käyttää. Thymeleaf-muuttujalausekkeiden avulla voit kerätä tietoja joko sovelluskontekstista tai sovelluksen objektista ja lisätä ne malliin. Voit käyttää kahdentyyppisiä muuttujalausekkeita riippuen niiden tietojen lähteestä, jotka haluat hahmontaa näkymään.

Ensisijainen muuttujalauseke käyttää dollarimerkkiä ja mahdollistaa tietojen keräämisen sovelluskonteksti (joka on tietoja, jotka liittyvät sovelluksessa suoritettaviin eri tehtäviin sovellus). Jos esimerkiksi halusit kaapata käyttäjän tiedot modaalista, dollarimerkkimuuttujalauseke on käytännöllisempi vaihtoehto. Jos suoritat esimerkkiprojektin ja siirryt kohtaan http://localhost: 8080/ selaimessasi näet seuraavan modaalin:

Kun joko suljet modaalin tai lähetät nimen, sovellus siirtyy kotisivulle. Etusivulla näet yleisen verkkosivuston, jossa on sana "Tervetuloa" ja merkkijono, jonka juuri lähetit modaaliin.

Esimerkkisovellus käyttää muuttujalauseketta tämän prosessin suorittamiseen. Yksinkertainen muoto modal.html tiedostossa on seuraava merkintä:

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


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


form>

Kun käyttäjä lähettää lomakkeen, se käynnistää th: toiminta attribuutti, jolla on viestin URL-osoitteen arvo, jonka löydät WebController luokkaa.

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


 model.addAttribute("userName", userName);


return"home";
 }

The prosessinnimi() menetelmä hyväksyy merkkijonon, jonka käyttäjä toimittaa modaalille ja määrittää sitten merkkijonon muuttujalle nimeltä käyttäjänimi. Käyttämällä muuttujalauseketta ohjain lisää sitten käyttäjänimen muuttujan asetteluun.

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

Valintamuuttujan lauseke käyttää tähteä, ja se on hyödyllisin, kun on kyse monimutkaisemmista sovelluksista. Esimerkiksi sovellus, joka edellyttää käyttäjien kirjautumista, voi käyttää valintamuuttujan lauseketta. Voit kerätä käyttäjätunnuksen käyttäjäobjektista ja lisätä sen asetteluun.

Vaihtoehtoiset malli- ja tyyliasetukset

Vaikka Thymeleaf on suosituin mallivaihtoehto Spring Boot -sovelluksille, on olemassa useita muita yhtä käyttökelpoisia vaihtoehtoja. Näitä ovat JavaServer Pages (JSP), Groovy-pohjaiset mallit, FreeMarker-mallit ja Moustache-mallit. Mukautetun CSS-tyylin luomisen lisäksi voit myös käyttää CSS-kehystä asettelun tyylin luomiseen.