streamalism.org

1. Úvod

Thymeleaf je šablónový engine Java pre spracovanie a vytváranie HTML, XML, JavaScript, CSS a obyčajného textu. Pre úvod do Thymeleaf a Spring si prečítajte tento článok.

V tomto dokumente sa zameriame na šablónovanie - niečo, čo najrozumnejšie stránky musia urobiť tak či onak. Jednoducho povedané, stránky musia zdieľať bežné súčasti stránky, ako je hlavička, päta, ponuka a potenciálne oveľa viac.

Thymeleaf oslovuje, že s vlastnými dialektmi - môžete vytvoriť rozloženie pomocou Thymeleaf Standard Layout System alebo Layout Dialect - ktorý používa dekoratívny vzor pre prácu so súbormi rozloženia.

V tomto článku si ukážeme niekoľko funkcií aplikácie Dialekt Thymeleaf Layout - ktoré nájdete tu. Aby sme boli konkrétnejší, rozoberieme jeho funkcie, ako je vytváranie rozložení, vlastné názvy alebo zlučovanie hlavových prvkov.

2. Maven závislosti

Najskôr sa pozrime na požadovanú konfiguráciu potrebnú na integráciu Thymeleaf s Spring. The tymianovy-jar v našich závislostiach sa vyžaduje knižnica:

 org.thymeleaf thymeleaf 3.0.11.RELEASE org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Upozorňujeme, že v prípade projektu na jar 4 sa projekt thymeleaf-spring4 namiesto. musí byť použitá knižnica thymeleaf-spring5. Najnovšiu verziu závislostí nájdete tu.

Budeme tiež potrebovať závislosť pre dialekt vlastných rozložení:

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

Najnovšiu verziu nájdete v centrálnom úložisku Maven.

3. Konfigurácia dialektu rozloženia Thymeleaf

V tejto časti si rozoberieme, ako nakonfigurovať Thymeleaf na použitie Layout Dialect. Ak sa chcete vrátiť o krok späť a zistiť, ako nakonfigurovať Thymeleaf 3.0 vo svojom projekte webovej aplikácie, pozrite si tento návod.

Akonáhle pridáme závislosť Maven ako súčasť projektu, budeme musieť pridať Layout Dialect do nášho existujúceho šablónového modulu Thymeleaf. Môžeme to urobiť pomocou konfigurácie Java:

SpringTemplateEngine engine = nový SpringTemplateEngine (); engine.addDialect (nový LayoutDialect ());

Alebo pomocou konfigurácie súborov XML:

Pri zdobení častí šablón obsahu a rozloženia je predvoleným správaním umiestnenie všetkých prvkov obsahu za prvky rozloženia.

Niekedy potrebujeme inteligentnejšie zlúčenie prvkov, ktoré umožní zoskupiť podobné prvky dohromady (skripty js dohromady, štýly spolu atď.).

Aby sme to dosiahli, musíme do našej konfigurácie pridať stratégiu triedenia - v našom prípade to bude stratégia zoskupovania:

engine.addDialect (nový LayoutDialect (nový GroupingStrategy ()));

alebo v XML:

Predvolená stratégia je pridanie prvkov. Pri vyššie uvedenom budeme mať všetko zoradené a zoskupené.

Ak ani jedna stratégia nevyhovuje našim potrebám, môžeme realizovať vlastnú SortingStrategy a odovzdať ho ďalej do dialektu, ako je uvedené vyššie.

4. Funkcie procesorov menného priestoru a atribútov

Po nakonfigurovaní môžeme začať používať rozloženie menný priestor a päť nových procesorov atribútov: ozdobiť, nadpis-vzor, vložiť, vymeniťa fragment.

Aby sme vytvorili šablónu rozloženia, ktorú chceme použiť pre naše súbory HTML, vytvorili sme nasledujúci súbor s názvom template.html:

  ... 

Ako vidíme, zmenili sme menný priestor zo štandardu xmlns: th = ”// www.thymeleaf.org” do xmlns: layout = ”// www.ultraq.net.nz/thymeleaf/layout”.

Teraz môžeme začať pracovať s procesormi atribútov v našich súboroch HTML.

4.1. rozloženie: fragment

Aby sme v našom rozložení vytvorili vlastné sekcie alebo opakovane použiteľné šablóny, ktoré je možné nahradiť sekciami, ktoré majú rovnaký názov, používame fragment atribút v našom template.html telo:

Sem sa dostane váš obsah stránky
Moja vlastná päta
Tu je vaša vlastná päta

Všimnite si, že existujú dve sekcie, ktoré budú nahradené našim vlastným HTML - obsah a päta.

Je tiež dôležité napísať predvolený kód HTML, ktorý sa použije, ak nenájdete niektorý z fragmentov.

4.2. rozloženie: vyzdobiť

Ďalším krokom, ktorý musíme urobiť, je vytvoriť súbor HTML, ktorý bude zdobený našim rozložením:

   Príklad dialektu rozloženia 
Toto je vlastný obsah, ktorý môžete poskytnúť
Toto je časť päty, ktorú môžete zmeniť

Ako je zobrazené v 3. riadku, používame rozloženie: vyzdobiť a určiť zdroj dekoratéra. Všetky fragmenty zo súboru rozloženia, ktoré sa zhodujú s fragmentmi v súbore obsahu, budú nahradené jeho vlastnou implementáciou.

4.3. rozloženie: nadpis-vzor

Vzhľadom na to, že Rozloženie nárečie automaticky prepíše nadpis rozloženia nad názov rozloženia, ktorý sa nachádza v šablóne obsahu, môžete zachovať časti nadpisu rozloženia.

Môžeme napríklad vytvoriť strúhanku alebo zachovať názov webovej stránky v názve stránky. The rozloženie: nadpis-vzor procesor v takom prípade prichádza s pomocou. Všetko, čo musíte určiť v súbore rozloženia, je:

Baeldung

Konečný výsledok pre súbor rozloženia a obsahu uvedený v predchádzajúcom odseku bude teda vyzerať takto:

Baeldung - Príklad dialektu rozloženia

4.4. rozloženie: vložiť / rozložiť: vymeniť

Prvý procesor, rozloženie: vložiť, je podobný originálu Thymeleaf th: vložiť, ale umožňuje preniesť celé fragmenty HTML do vloženej šablóny. Je to veľmi užitočné, ak máte nejaký HTML, ktorý chcete znovu použiť, ale ktorého obsah je príliš zložitý na to, aby ste ho mohli určiť alebo skonštruovať iba pomocou kontextových premenných.

Druhý, rozloženie: vymeniť, je podobný ako prvý, ale má správanie th: vymeniť, ktorý skutočne nahradí hostiteľskú značku kódom definovaného fragmentu.

5. Záver

V tomto článku sme popísali niekoľko spôsobov implementácie rozložení v Thymeleaf.

Upozorňujeme, že v príkladoch sa používa Thymeleaf verzia 3.0; ak sa chcete dozvedieť, ako migrovať váš projekt, postupujte podľa tohto postupu.

Celú implementáciu tohto tutoriálu nájdete v projekte GitHub.

Ako testovať? Náš návrh je najskôr hrať s prehliadačom, až potom skontrolovať aj existujúce testy JUnit.

Pamätajte, že rozloženia môžete zostaviť pomocou vyššie uvedeného Layout Dialect alebo si môžete ľahko vytvoriť vlastné riešenie. Dúfajme, že tento článok poskytne ďalšie poznatky o tejto téme a podľa vašich potrieb nájdete preferovaný prístup.