streamalism.org

1. Bemutatkozás

A Thymeleaf egy Java sablonmotor HTML, XML, JavaScript, CSS és egyszerű szöveg feldolgozásához és létrehozásához. A Thymeleaf and Spring bevezetőjéhez olvassa el ezt az írást.

Ebben az írásban a sablonokra összpontosítunk - erre az ésszerűbb összetettségű webhelyeknek így vagy úgy kell eljárniuk. Egyszerűen fogalmazva: az oldalaknak meg kell osztaniuk a közös oldalelemeket, például a fejlécet, a láblécet, a menüt és potenciálisan még sok minden mást.

A Thymeleaf egyedi dialektusokkal címzi meg az elrendezéseket - a Thymeleaf standard elrendezési rendszer vagy a Elrendezés nyelvjárás - amely a dekoratormintát használja az elrendezési fájlokkal való munkához.

Ebben a cikkben megvizsgáljuk a Thymeleaf elrendezés dialektus - amely itt található. Pontosabban: megvitatjuk a funkcióit, például az elrendezések létrehozását, az egyéni címek létrehozását vagy a fejelemek egyesítését.

2. Maven-függőségek

Először nézzük meg a Thymeleaf és a Spring integrálásához szükséges konfigurációt. A tűlevelű-tavaszi könyvtárra van szükség a függőségeinkben:

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

Vegye figyelembe, hogy egy 4. tavaszi projekt esetében a tűlevelű-tavasz4 könyvtár helyett kell használni kakukkfű-tavasz5. A függőségek legújabb verziója itt található.

Szükségünk lesz egy függőségre az egyéni elrendezés dialektusához is:

 nz.net.ultraq.thymeleaf thymeleaf-layout-dialektus 2.4.1 

A legújabb verzió megtalálható a Maven központi adattárában.

3. Thymeleaf Layout Dialect konfiguráció

Ebben a részben megvitatjuk a Thymeleaf használatának konfigurálását Elrendezés nyelvjárás. Ha szeretne visszalépni és megismerni a Thymeleaf 3.0 konfigurálását a webalkalmazás-projektben, ellenőrizze ezt az oktatóanyagot.

Miután hozzáadtuk a Maven-függőséget egy projekt részeként, hozzá kell adnunk a Elrendezés nyelvjárás a meglévő Thymeleaf sablonmotorunkhoz. Java konfigurációval tehetjük meg:

SpringTemplateEngine motor = új SpringTemplateEngine (); engine.addDialect (új LayoutDialect ());

Vagy az XML fájl konfigurációjának használatával:

A tartalmi és elrendezési sablonok szakaszainak díszítésekor az alapértelmezett viselkedés az összes tartalmi elem elhelyezése az elrendezés után.

Néha szükségünk van az elemek intelligensebb összevonására, lehetővé téve a hasonló elemek csoportosítását (js szkriptek, stíluslapok stb.).

Ennek eléréséhez rendezési stratégiát kell hozzáadnunk a konfigurációnkhoz - esetünkben ez lesz a csoportosítási stratégia:

engine.addDialect (új LayoutDialect (új GroupingStrategy ()));

vagy XML-ben:

Az alapértelmezett stratégia az elemek hozzáfűzése. A fentiekkel mindent rendezni és csoportosítani fogunk.

Ha egyik stratégia sem felel meg az igényeinknek, megvalósíthatjuk a sajátunkat RendezésStrategy és átadja a fentiekhez hasonlóan a dialektusnak.

4. A névtér és az attribútum processzorok jellemzői

Miután konfiguráltuk, elkezdhetjük használni elrendezés névtér és öt új attribútum-processzor: díszít, cím-minta, betét, cserélje ki, és töredék.

A HTML fájljainkhoz használni kívánt elrendezési sablon létrehozása érdekében létrehoztuk a következő nevű fájlt template.html:

  ... 

Mint láthatjuk, megváltoztattuk a névteret a szabványhoz képest xmlns: th = ”// www.thymeleaf.org” nak nek xmlns: layout = ”// www.ultraq.net.nz/thymeleaf/layout”.

Most elkezdhetjük a munkát HTML-fájljaink attribútum-feldolgozóival.

4.1. elrendezés: töredék

Annak érdekében, hogy egyedi szakaszokat hozzunk létre az elrendezésünkben, vagy újrafelhasználható sablonokat hozzunk létre, amelyek helyettesíthetők azonos nevű szakaszokkal, akkor töredék tulajdonság bennünk template.html test:

Az oldal tartalma ide kerül
Saját lábléc
Az egyéni lábléc itt

Figyelje meg, hogy két szakasz van, amelyeket az egyéni HTML-ek helyettesítenek - a tartalom és a lábléc.

Fontos megírni az alapértelmezett HTML-t is, amelyet használni fog, ha a töredékek egyike sem található.

4.2. elrendezés: díszít

A következő lépés, amelyet meg kell tennünk, egy HTML fájl létrehozása, amelyet az elrendezésünk díszít:

   Elrendezéses nyelvjárási példa 
Ez egy egyedi tartalom, amelyet megadhat
Ez a lábléc tartalma, amelyet meg lehet változtatni

Amint a 3. sorban látható, használjuk elrendezés: díszít és adja meg a dekoratőr forrását. Az elrendezési fájl minden olyan töredékét, amely egyezik a tartalomfájl töredékeivel, lecseréli annak egyedi megvalósítása.

4.3. elrendezés: cím-minta

Tekintettel arra, hogy a Elrendezés nyelvjárás automatikusan felülírja az elrendezés címét a tartalmi sablonban találhatóval, megőrizheti az elrendezésben található cím egyes részeit.

Például létrehozhatunk morzsákat vagy megtarthatjuk a weboldal nevét az oldal címében. A elrendezés: cím-minta processzor segítséget nyújt ilyen esetben. Az elrendezési fájlban csak annyit kell megadnia:

Baeldung

Tehát az előző bekezdésben bemutatott elrendezés és tartalom fájl végeredménye így fog kinézni:

Baeldung - Elrendezéses nyelvjárási példa

4.4. elrendezés: beillesztés / elrendezés: csere

Az első processzor, elrendezés: beillesztés, hasonló a Thymeleaf eredetihez th: betét, de lehetővé teszi a teljes HTML-töredékek továbbítását a beillesztett sablonba. Nagyon hasznos, ha van olyan HTML-je, amelyet újra fel akar használni, de amelynek tartalma túl bonyolult ahhoz, hogy csak kontextusváltozókkal meghatározhassa vagy felépíthesse.

A második, elrendezés: csere, hasonló az elsőhöz, de a th: cserélje ki, amely valójában a gazdagép címkét helyettesíti a definiált töredék kódjával.

5. Következtetés

Ebben a cikkben néhány módszert ismertettünk a Thymeleaf elrendezésében.

Vegye figyelembe, hogy a példák a Thymeleaf 3.0 verziót használják; ha meg akarja tanulni a projekt áttelepítését, kövesse ezt az eljárást.

Az oktatóanyag teljes megvalósítása megtalálható a GitHub projektben.

Hogyan kell tesztelni? Javaslatunk, hogy először böngészővel játsszon, majd ellenőrizze a meglévő JUnit teszteket is.

Ne feledje, hogy a fentiek segítségével elrendezéseket készíthet Elrendezés nyelvjárás vagy könnyedén létrehozhat saját megoldást. Remélhetőleg ez a cikk további betekintést nyújt a témába, és az igényeitől függően megtalálja a preferált megközelítést.