streamalism.org

1. Uvod

Thymeleaf je Java predložak za obradu i stvaranje HTML-a, XML-a, JavaScript-a, CSS-a i običnog teksta. Za uvod u majčinu dušicu i proljeće, pogledajte ovaj spis.

U ovom tekstu usredotočit ćemo se na predloške - nešto što većina razumno složenih web lokacija mora napraviti na ovaj ili onaj način. Jednostavno rečeno, stranice trebaju dijeliti uobičajene komponente stranica poput zaglavlja, podnožja, izbornika i potencijalno mnogo više.

Thymeleaf se obraća tome s prilagođenim dijalektima - možete izraditi izglede pomoću Thymeleaf standardni sustav rasporeda ili Raspored dijalekta - koji koristi obrazac dekoratora za rad s datotekama izgleda.

U ovom ćemo članku razmotriti nekoliko značajki Dijalekt rasporeda majčine dušice - koje možete pronaći ovdje. Da bismo bili precizniji, razgovarat ćemo o njegovim značajkama poput izrade izgleda, prilagođenih naslova ili spajanja elemenata glave.

2. Ovisnosti Mavena

Prvo, pogledajmo potrebnu konfiguraciju potrebnu za integraciju Thymeleaf-a s Springom. The majčina dušica-proljeće knjižnica je potrebna u našim ovisnostima:

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

Za projekt Spring 4, majčina dušica-proljeće4 knjižnica se mora koristiti umjesto majčina dušica-proljeće5. Najnoviju verziju ovisnosti možete pronaći ovdje.

Trebat će nam i ovisnost za prilagođeni dijalekt rasporeda:

 nz.net.ultraq.thymeleaf timileaf-izgled-dijalekt 2.4.1 

Najnoviju verziju možete pronaći u Maven Central Repository.

3. Konfiguracija dijalekta rasporeda majčine dušice

U ovom ćemo odjeljku razgovarati o tome kako konfigurirati Thymeleaf za upotrebu Raspored dijalekta. Ako želite napraviti korak unatrag i vidjeti kako konfigurirati Thymeleaf 3.0 u projektu web aplikacije, provjerite ovaj vodič.

Jednom kada dodamo ovisnost o Mavenu kao dio projekta, morat ćemo dodati Raspored dijalekta našem postojećem mehanizmu predložaka Thymeleaf. To možemo učiniti s Java konfiguracijom:

SpringTemplateEngine engine = novi SpringTemplateEngine (); engine.addDialect (novi LayoutDialect ());

Ili pomoću konfiguracije XML datoteke:

Prilikom ukrašavanja odjeljaka predložaka sadržaja i izgleda, zadano ponašanje je postavljanje svih elemenata sadržaja nakon onih izgleda.

Ponekad nam treba pametnije spajanje elemenata, što omogućuje grupiranje sličnih elemenata (js skripte zajedno, tabele stilova itd.).

Da bismo to postigli, u našu konfiguraciju moramo dodati strategiju sortiranja - u našem slučaju to će biti strategija grupiranja:

engine.addDialect (novi LayoutDialect (novi GroupingStrategy ()));

ili u XML-u:

Zadana strategija je dodavanje elemenata. Sa gore spomenutim, imat ćemo sve razvrstano i grupirano.

Ako niti jedna strategija ne odgovara našim potrebama, možemo provesti vlastitu SortingStrategy i prenesite ga na dijalekt kao gore.

4. Prostor imena i značajke procesora atributa

Jednom, konfigurirani možemo početi koristiti raspored prostor imena i pet novih procesora atributa: ukrasiti, naslov-obrazac, umetnuti, zamijeniti, i fragment.

Da bismo stvorili predložak izgleda koji želimo koristiti za naše HTML datoteke, stvorili smo sljedeću datoteku s imenom predložak.html:

  ... 

Kao što vidimo, promijenili smo prostor imena iz standardnog xmlns: th = ”// www.thymeleaf.org” do xmlns: layout = ”// www.ultraq.net.nz/thymeleaf/layout”.

Sada možemo početi raditi s procesorima atributa u našim HTML datotekama.

4.1. izgled: ulomak

Da bismo stvorili prilagođene odjeljke u našem izgledu ili predloške za višekratnu upotrebu koji se mogu zamijeniti odjeljcima koji dijele isto ime, koristimo fragment atribut unutar našeg predložak.html tijelo:

Sadržaj vaše stranice ide ovdje
Moje prilagođeno podnožje
Ovdje je vaše prilagođeno podnožje

Primijetite da postoje dva odjeljka koja će zamijeniti naš prilagođeni HTML - sadržaj i podnožje.

Također je važno napisati zadani HTML koji će se koristiti ako neki od fragmenata neće biti pronađen.

4.2. izgled: ukrasiti

Sljedeći korak koji trebamo napraviti je stvoriti HTML datoteku koja će biti ukrašena našim izgledom:

   Primjer dijalekta rasporeda 
Ovo je prilagođeni sadržaj koji možete pružiti
Ovo je neki sadržaj podnožja koji možete promijeniti

Kao što je prikazano u 3. retku, koristimo izgled: ukrasiti i navedite izvor dekoratera. Svi fragmenti iz datoteke izgleda koji se podudaraju s fragmentima u datoteci sadržaja zamijenit će se njenom prilagođenom implementacijom.

4.3. izgled: naslov-obrazac

S obzirom da je Raspored dijalekta automatski poništava naslov izgleda s onim koji se nalazi u predlošku sadržaja, možda ćete sačuvati dijelove naslova koji se nalaze u izgledu.

Na primjer, možemo stvoriti prezle ili zadržati naziv web stranice u naslovu stranice. The izgled: naslov-obrazac procesor dolazi s pomoći u takvom slučaju. Sve što trebate navesti u datoteci izgleda je:

Baeldung

Tako će konačni rezultat za datoteku izgleda i sadržaja predstavljenu u prethodnom odlomku izgledati ovako:

Baeldung - Primjer dijalekta rasporeda

4.4. layout: insert / layout: replace

Prvi procesor, izgled: umetak, sličan je Thymeleafovom originalu th: umetak, ali omogućuje prosljeđivanje cijelih HTML fragmenata u umetnuti predložak. Vrlo je korisno ako imate neki HTML koji želite ponovno upotrijebiti, ali čiji je sadržaj previše složen da bi se mogao odrediti ili konstruirati samo s kontekstnim varijablama.

Drugi, izgled: zamijeniti, sličan je prvom, ali s ponašanjem th: zamijeniti, koji će zapravo zamijeniti host oznaku kodom definiranog fragmenta.

5. Zaključak

U ovom smo članku opisali nekoliko načina implementacije izgleda u Thymeleaf-u.

Primijetite da primjeri koriste Thymeleaf verzije 3.0; ako želite naučiti kako migrirati svoj projekt, slijedite ovaj postupak.

Potpuna implementacija ovog vodiča može se naći u projektu GitHub.

Kako testirati? Naš je prijedlog da se prvo igrate s preglednikom, a zatim provjerite i postojeće JUnit testove.

Imajte na umu da možete izraditi izgled koristeći gore spomenute Raspored dijalekta ili možete jednostavno stvoriti vlastito rješenje. Nadamo se da će vam ovaj članak dati još nekih uvida u temu i pronaći ćete željeni pristup ovisno o vašim potrebama.