Töredékek a Thymeleaf-ben

1. Áttekintés

Ebben az oktatóanyagban megmutatjuk, hogyan kell használja a Thymeleaf töredékeket a webhely néhány gyakori részének újrafelhasználásához. Egy nagyon egyszerű tavaszi MVC projekt felállítása után a nézetekre összpontosítunk.

Ha még nem ismeri a Thymeleaf alkalmazást, megnézhet ezen a webhelyen található egyéb cikkeket, például ezt a bevezetőt, valamint a motor 3.0 verziójáról szóló cikket.

2. Maven-függőségek

A Thymeleaf engedélyezéséhez szükségünk lesz néhány függőségre:

 org.thymeleaf thymeleaf 3.0.11.KÖZLEMÉNY org. thymeleaf thymeleaf-spring5 3.0.11.

A thymeleaf és a thymeleaf-spring5 legújabb verziója megtalálható a Maven Central oldalon.

3. Tavaszi projekt

3.1. Tavaszi MVC konfiguráció

A Thymeleaf engedélyezéséhez és a sablon utótagjának beállításához meg kell tennünk konfigurálja az MVC-t egy nézetfeloldóval és sablonfeloldóval.

Néhány statikus erőforrás könyvtárát is beállítjuk:

@Bean public ViewResolver htmlViewResolver () {ThymeleafViewResolver resolver = new ThymeleafViewResolver (); resolver.setTemplateEngine (templateEngine (htmlTemplateResolver ())); resolver.setContentType ("text / html"); resolver.setCharacterEncoding ("UTF-8"); resolver.setViewNames (ArrayUtil.array ("*. html")); return resolver; } privát ITemplateResolver htmlTemplateResolver () {SpringResourceTemplateResolver resolver = új SpringResourceTemplateResolver (); resolver.setApplicationContext (applicationContext); resolver.setPrefix ("/ WEB-INF / nézetek /"); resolver.setCacheable (hamis); resolver.setTemplateMode (TemplateMode.HTML); return resolver; } @Orride public void addResourceHandlers (ResourceHandlerRegistry registry) {register.addResourceHandler ("/ resources / **", "/ css / **") .addResourceLocations ("/ WEB-INF / resources /", "/ WEB-INF / css / "); }

Ne feledje, hogy ha a Spring Boot programot használjuk, akkor ez a konfiguráció csak akkor szükséges, ha saját testreszabásainkat kell alkalmaznunk.

3.2. A Vezérlő

Ebben az esetben a vezérlő csak a nézetek járműve. Minden nézet más töredékhasználati forgatókönyvet mutat.

Az utolsó betölti a modellen keresztül továbbított néhány adatot, amely megjelenik a nézetben:

@Controller public class FragmentsController {@GetMapping ("/ fragments") public String getHome () {return "fragments.html"; } @GetMapping ("/ markup") public String markupPage () {return "markup.html"; } @GetMapping ("/ params") public String paramsPage () {return "params.html"; } @GetMapping ("/ other") public String otherPage (Model model) {model.addAttribute ("data", StudentUtils.buildStudents ()); return "egyéb.html"; }}

Vegye figyelembe, hogy a nézetek nevének tartalmaznia kell a „.Html” utótag a felbontónk konfigurálásának módja miatt. Az utótagot akkor is megadjuk, amikor a töredéknevekre hivatkozunk.

4. A nézetek

4.1. Egyszerű töredék-befogadás

Először is az újrafelhasználási részeket fogjuk használni oldalainkon.

Ezeket a részeket definiálhatjuk töredékként, akár elszigetelt fájlokban, akár egy közös oldalon. Ebben a projektben ezek az újrafelhasználható részek egy megnevezett mappában vannak meghatározva töredékek.

A töredék tartalmának három alapvető módja van:

betét - tartalmat illeszt be a címkébe
cserélje - az aktuális címkét a töredéket meghatározó címkével helyettesíti
tartalmazza - ez elavult, de még mindig megjelenhet egy régi kódban

A következő példa, fragments.html, mindhárom út használatát mutatja. Ez a Thymeleaf sablon töredékeket ad hozzá a dokumentum fejéhez és törzséhez:

   Thymeleaf töredékek: otthon A következő oldalon megtekintheti a töredékeket

Most nézzünk meg egy olyan oldalt, amely néhány töredéket tartalmaz. Ezt hívják általános.html, és olyan, mint egy egész oldal, néhány rész használatra kész töredékként definiálva:

A következő oldalon megtekintheti a töredékeket
 Ez egy oldalsáv Ez egy másik oldalsáv Fragments Index | Jelölési zaklatás | Töredékparaméterek Egyéb

A szakasz csak egy stíluslapot tartalmaz, de alkalmazhatunk más eszközöket is, például a Bootstrap-ot, a jQuery-t vagy az Foundation-t, akár közvetlenül, akár a Webjars segítségével.

Vegye figyelembe, hogy ennek a sablonnak az összes újrafelhasználható címkéje rendelkezik az attribútummal th: töredék, de ezután megtudjuk, hogyan lehet az oldal bármely más részét felvenni.

A megjelenítés és a töredékek felvétele után a visszaküldött tartalom:

   Thymeleaf töredékek: otthon A következő oldalon megtekintheti a töredékeket
  Töredékek Index | Jelölési zaklatás | Töredékparaméterek Egyéb

4.2. Jelölésválasztók a töredékek számára

A Thymeleaf Fragments egyik legnagyobb dolga az meg is ragadhatjuk a sablon bármely részét, csak az egyszerű választók segítségévelosztályok, azonosítók vagy egyszerűen címkék segítségével.

Ez az oldal például tartalmaz néhány alkotórészt általános.html fájl: an félre blokk és a div.más Blokk:

4.3. Paraméterezett töredékek

Paramétereket adhatunk át atöredéke annak bizonyos részének megváltoztatása érdekében. Ehhez a töredéket függvényhívásként kell meghatározni, ahol deklarálnunk kell a paraméterek listáját.

Ebben a példában definiálunk egy töredéket egy általános űrlapmezőhöz:

 Terület

És itt van a töredék egyszerű használata, ahol paramétereket adunk át neki:

A visszaküldött mező így fog kinézni:

 Név

4.4. Töredék-befogadó kifejezések

A Thymeleaf töredékek más érdekes lehetőségeket kínálnak, például a feltételes kifejezések annak eldöntésére, hogy tartalmazzanak-e egy töredéket.

Használni a Elvis operátor a Thymeleaf által biztosított bármelyik kifejezéssel (például biztonság, karakterláncok és gyűjtemények), különböző töredékeket tudunk betölteni.

Például definiálhatjuk ezt a töredéket olyan tartalommal, amelyet egy adott körülménytől függően megjelenítünk. Ez lehet egy fájl, amely különböző típusú blokkokat tartalmaz:

 Fogadott adatok Nincsenek adatok

Így tölthetnénk be őket egy kifejezéssel:

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

Ha többet szeretne megtudni a Thymeleaf kifejezésekről, tekintse meg cikkünket itt.

4.5. Rugalmas elrendezések

A következő példa a töredékek két másik érdekes felhasználását is bemutatja rendereljen egy táblázatot adatokkal. Ez az újrafelhasználható tábla töredéke, amelynek két fontos része van: egy módosítható táblafejléc és az a törzs, ahol az adatokat megjelenítik:


0 Név

Amikor használni akarjuk ezt a táblázatot, átadhatjuk saját táblázatfejlécünket a mezők funkció. A fejlécre az osztály tartozik myFields. A tábla törzse úgy töltődik be, hogy az adatokat paraméterként továbbítja a tableBody funkció:

Id Név

És így fog kinézni az utolsó oldal:

 adat fogadva Id Név
1001 John Smith
1002 Jane Williams
  Töredékek Index | Jelölési zaklatás | Töredékparaméterek Egyéb

Id	Név
1001	John Smith
1002	Jane Williams

5. Következtetés

Ebben a cikkben bemutattuk, hogyan lehet újból felhasználni a nézetkomponenseket a Thymeleaf Fragments segítségével, amely egy hatékony eszköz, amely megkönnyíti a sablonkezelést.

Néhány más érdekes tulajdonságot is bemutattunk, amelyek túlmutatnak az alapokon. Ezeket figyelembe kell vennünk, amikor a Thymeleaf-et választjuk nézetmegjelenítő motorunknak.

Ha szeretne többet megismerni a Thymeleaf egyéb funkcióiról, feltétlenül nézze meg a Layout Dialects című cikkünket.

Mint mindig, a példa teljes implementációs kódja elérhető a GitHubon.

streamalism.org