Rad s ulomcima u majčinoj dušici

1. Pregled

U ovom uputstvu pokazat ćemo kako iskoristite fragmente majčine dušice za ponovnu upotrebu nekih uobičajenih dijelova stranice. Nakon postavljanja vrlo jednostavnog proljetnog MVC projekta, usredotočit ćemo se na poglede.

Ako ste novi u Thymeleaf-u, možete provjeriti druge članke na ovom mjestu poput ovog uvoda, kao i ovaj o 3.0 verziji motora.

2. Ovisnosti Mavena

Trebat će nam nekoliko ovisnosti da omogućimo Thymeleaf:

 timijanov list orgy 3.0.11.OSLOBODITI timijanov list-proljeće5 3.0.11. 

Najnovija verzija majčine dušice i majčine dušice-opruge5 može se naći na Maven Central.

3. Proljetni projekt

3.1. Proljetna MVC konfiguracija

Da bismo omogućili Thymeleaf i postavili sufiks predloška, ​​moramo konfigurirajte MVC pomoću razrješivača pogleda i razlučivača predloška.

Također ćemo postaviti direktorij za neke statičke resurse:

@Bean public ViewResolver htmlViewResolver () {ThymeleafViewResolver resolver = novi ThymeleafViewResolver (); resolver.setTemplateEngine (templateEngine (htmlTemplateResolver ())); resolver.setContentType ("text / html"); resolver.setCharacterEncoding ("UTF-8"); resolver.setViewNames (ArrayUtil.array ("*. html")); povratnik; } privatni ITemplateResolver htmlTemplateResolver () {SpringResourceTemplateResolver rješivač = novi SpringResourceTemplateResolver (); resolver.setApplicationContext (applicationContext); resolver.setPrefix ("/ WEB-INF / views /"); resolver.setCacheable (false); resolver.setTemplateMode (TemplateMode.HTML); povratnik; } @Override public void addResourceHandlers (Registry ResourceHandlerRegistry) {registry.addResourceHandler ("/ resources / **", "/ css / **") .addResourceLocations ("/ WEB-INF / resources /", "/ WEB-INF / css / "); }

Imajte na umu da ako koristimo Spring Boot, ova konfiguracija možda neće biti potrebna ako ne trebamo primijeniti vlastite prilagodbe.

3.2. Kontroler

U ovom slučaju, kontroler je samo vozilo za poglede. Svaki prikaz prikazuje drugačiji scenarij uporabe fragmenata.

Posljednji učitava neke podatke koji se prolaze kroz model za prikaz u prikazu:

@Controller javna klasa FragmentsController {@GetMapping ("/ fragmenti") javni String getHome () {return "fragmenti.html"; } @GetMapping ("/ markup") javni niz markupPage () {return "markup.html"; } @GetMapping ("/ params") javni String paramsPage () {return "params.html"; } @GetMapping ("/ other") javni niz otherPage (model modela) {model.addAttribute ("data", StudentUtils.buildStudents ()); povratak "other.html"; }}

Napominjemo da imena pogleda moraju sadržavati ".Html" sufiks zbog načina na koji smo konfigurirali naš razrješivač. Sufiks ćemo odrediti i kada se pozivamo na imena fragmenata.

4. Pogledi

4.1. Jednostavno uključivanje fragmenata

Prije svega, koristit ćemo ponovnu upotrebu uobičajenih dijelova na našim stranicama.

Te dijelove možemo definirati kao fragmente, bilo u izoliranim datotekama ili na zajedničkoj stranici. U ovom su projektu ovi dijelovi za višekratnu upotrebu definirani u mapi s imenom fragmenti.

Tri su osnovna načina za uključivanje sadržaja iz fragmenta:

  • umetnuti - umetne sadržaj unutar oznake
  • zamijeniti - zamjenjuje trenutnu oznaku oznakom koja definira fragment
  • uključuju - ovo je zastarjelo, ali još uvijek se može pojaviti u naslijeđenom kodu

Sljedeći primjer, fragmenti.html, pokazuje upotrebu sva tri načina. Ovaj predložak Thymeleaf dodaje fragmente u glavi i tijelu dokumenta:

   Fragmenti majčine dušice: dom 

Idite na sljedeću stranicu da biste vidjeli fragmente na djelu

Sada, pogledajmo stranicu koja sadrži neke fragmente. To se zove općenito.html, i to je poput cijele stranice s nekim dijelovima definiranim kao fragmenti spremni za upotrebu:

Idite na sljedeću stranicu da biste vidjeli fragmente na djelu

Ovo je bočna traka Ovo je druga indeks fragmenata bočne trake | Uključivanje oznaka | Parametri fragmenta | Ostalo

The odjeljak sadrži samo tablicu stilova, ali mogli bismo primijeniti i druge alate kao što su Bootstrap, jQuery ili Foundation, bilo izravno ili pomoću Webjarsa.

Imajte na umu da sve oznake ovog predloška za višekratnu upotrebu imaju atribut th: ulomak, ali sljedeće ćemo vidjeti kako uključiti bilo koji drugi dio stranice.

Nakon uključivanja prikaza i fragmenata, vraćeni sadržaj je:

   Fragmenti majčine dušice: dom 

Idite na sljedeću stranicu da biste vidjeli fragmente na djelu

Kazalo fragmenata | Uključivanje oznaka | Parametri fragmenta | Ostalo

4.2. Birači oznaka za fragmente

Jedna od sjajnih stvari o Fragmentima majčine dušice je ta također možemo zgrabiti bilo koji dio predloška samo pomoću jednostavnih birača, kroz klase, ID-ove ili jednostavno pomoću oznaka.

Ova stranica, na primjer, uključuje neke komponente iz općenito.html datoteka: an na stranu blok i div.drugi blok:

4.3. Parametarizirani ulomci

Možemo proslijediti parametre u afragment kako bi se promijenio neki njegov određeni dio. Da bi to učinio, fragment mora biti definiran kao poziv funkcije, gdje moramo deklarirati popis parametara.

U ovom primjeru definiramo fragment za polje generičkog oblika:

 Polje 

I evo jednostavne upotrebe tog fragmenta gdje mu prosljeđujemo parametre:

A ovako će izgledati vraćeno polje:

 Ime 

4.4. Izrazi za uključivanje fragmenata

Fragmenti majčine dušice nude i druge zanimljive mogućnosti poput podrške za uvjetni izrazi kako bi se utvrdilo hoće li se uključiti fragment.

Koristiti Elvise s bilo kojim izrazom koji pruža Thymeleaf (sigurnost, nizovi i zbirke, na primjer), možemo učitati različite fragmente.

Na primjer, možemo definirati ovaj fragment s nekim sadržajem koji ćemo prikazati ovisno o danom stanju. Ovo bi mogla biti datoteka koja sadrži različite vrste blokova:

 Primljeni podaci Nema podataka 

A evo kako bismo ih mogli učitati izrazom:

 0}? ~ {fragmenti / menus.html :: dataPresent}: ~ {fragmenti / menus.html :: noData} ">

Da biste saznali više o izrazima majčine dušice, pogledajte naš članak ovdje.

4.5. Fleksibilni rasporedi

Sljedeći primjer također pokazuje još dvije zanimljive upotrebe fragmenata za prikazati tablicu s podacima. Ovo je fragment tablice za višekratnu upotrebu, sa dva važna dijela: zaglavlje tablice koje se može mijenjati i tijelo u kojem se podaci generiraju:

0Ime

Kada želimo koristiti ovu tablicu, možemo proslijediti vlastito zaglavlje tablice pomoću polja funkcija. Zaglavlje se odnosi na klasu myFields. Tijelo tablice učitava se prosljeđivanjem podataka kao parametra na stolBjelo funkcija:

IskaznicaIme

A ovako će izgledati završna stranica:

 Podaci primljeni 
IskaznicaIme
1001John Smith
1002Jane Williams
Kazalo fragmenata | Uključivanje oznaka | Fragment params | Ostalo

5. Zaključak

U ovom smo članku pokazali kako ponovno koristiti komponente prikaza korištenjem Thymeleaf Fragments, moćnog alata koji može olakšati upravljanje predloškom.

Predstavili smo i neke druge zanimljive značajke koje nadilaze osnove. To bismo trebali uzeti u obzir prilikom odabira Thymeleaf-a kao mehanizma za prikazivanje prikaza.

Ako želite saznati više o ostalim značajkama Thymeleaf, svakako biste trebali pogledati naš članak o dijalektima izgleda.

Kao i uvijek, cjeloviti implementacijski kod primjera dostupan je na GitHub-u.