Práca s fragmentmi v Thymeleaf

1. Prehľad

V tomto tutoriáli si ukážeme, ako na to využiť fragmenty Thymeleaf na opätovné použitie niektorých bežných častí webu. Po založení veľmi jednoduchého projektu Spring MVC sa zameriame na pohľady.

Pokiaľ ste na Thymeleaf nováčikom, môžete si pozrieť ďalšie články na tomto webe, napríklad tento úvod, ako aj tento o verzii 3.0 tohto motora.

2. Maven závislosti

Aby sme umožnili Thymeleaf, budeme potrebovať niekoľko závislostí:

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

Najnovšiu verziu brzlíka a brzlíka-pružina5 nájdete na serveri Maven Central.

3. Jarný projekt

3.1. Jarná konfigurácia MVC

Aby sme povolili Thymeleaf a nastavili príponu šablóny, musíme nakonfigurovať MVC s prekladačom pohľadov a prekladačom šablón.

Nastavíme tiež adresár pre niektoré statické prostriedky:

@Bean public ViewResolver htmlViewResolver () {ThymeleafViewResolver resolver = nový ThymeleafViewResolver (); resolver.setTemplateEngine (templateEngine (htmlTemplateResolver ())); resolver.setContentType ("text / html"); resolver.setCharacterEncoding ("UTF-8"); resolver.setViewNames (ArrayUtil.array ("*. html")); spätný rezolver; } private ITemplateResolver htmlTemplateResolver () {SpringResourceTemplateResolver resolver = nový SpringResourceTemplateResolver (); resolver.setApplicationContext (applicationContext); resolver.setPrefix ("/ WEB-INF / zobrazenia /"); resolver.setCacheable (false); resolver.setTemplateMode (TemplateMode.HTML); spätný rezolver; } @Override public void addResourceHandlers (register ResourceHandlerRegistry) {registry.addResourceHandler ("/ resources / **", "/ css / **") .addResourceLocations ("/ WEB-INF / resources /", "/ WEB-INF / css / "); }

Upozorňujeme, že ak používame Spring Boot, táto konfigurácia nemusí byť nevyhnutná, pokiaľ nepotrebujeme použiť naše vlastné prispôsobenia.

3.2. Kontrolór

V takom prípade je ovládač iba prostriedkom na výhľady. Každé zobrazenie zobrazuje iný scenár použitia fragmentu.

Posledná načítava niektoré údaje, ktoré prechádzajú modelom, aby sa zobrazili v zobrazení:

@Controller verejná trieda 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 ()); vrátiť "other.html"; }}

Názvy pohľadov musia obsahovať znak „.Html“ prípona kvôli spôsobu, akým sme nakonfigurovali náš prekladač. Príponu tiež uvedieme, keď sa odvolávame na názvy fragmentov.

4. Pohľady

4.1. Jednoduché zahrnutie fragmentov

Najskôr použijeme na našich stránkach znova bežné časti.

Tieto časti môžeme definovať ako fragmenty, a to buď v izolovaných súboroch, alebo na spoločnej stránke. V tomto projekte sú tieto opakovane použiteľné časti definované v priečinku s názvom fragmenty.

Existujú tri základné spôsoby, ako zahrnúť obsah z fragmentu:

vložiť - vloží obsah do značky
vymeniť - nahradí aktuálnu značku značkou definujúcou fragment
zahrnúť - toto je zastarané, ale môže sa stále zobrazovať v starom kóde

Nasledujúci príklad, fragments.html, ukazuje použitie všetkých troch spôsobov. Táto šablóna Thymeleaf pridáva fragmenty do hlavy a tela dokumentu:

   Fragmenty Thymeleaf: doma Prejdite na ďalšiu stránku a pozrite si fragmenty v akcii

Poďme sa teraz pozrieť na stránku, ktorá obsahuje niektoré fragmenty. Volá sa general.htmla je to ako celá stránka s niektorými časťami definovanými ako fragmenty, ktoré sú pripravené na použitie:

Prejdite na ďalšiu stránku a pozrite si fragmenty v akcii
 Toto je bočný panel Toto je ďalší bočný panel Fragmenty index | Náklon značky | Fragmentové parametre | Iné

The Táto sekcia obsahuje iba šablónu so štýlmi, ale mohli by sme použiť ďalšie nástroje ako Bootstrap, jQuery alebo Foundation, a to buď priamo, alebo pomocou nástroja Webjars.

Upozorňujeme, že všetky opakovane použiteľné značky tejto šablóny majú tento atribút th: fragment, ale ďalej uvidíme, ako zahrnúť ktorúkoľvek ďalšiu časť stránky.

Po zahrnutí vykreslenia a fragmentov je vrátený obsah:

   Fragmenty Thymeleaf: doma Prejdite na ďalšiu stránku a pozrite si fragmenty v akcii
  Register fragmentov Náklon značky | Fragmentové parametre | Iné

4.2. Selektory značiek pre fragmenty

Jednou z veľkých vecí na Thymeleaf Fragments je to môžeme tiež chytiť ktorúkoľvek časť šablóny pomocou jednoduchých selektorovprostredníctvom tried, identifikačných údajov alebo jednoducho pomocou značiek.

Táto stránka napríklad obsahuje niektoré komponenty z general.html spis: an stranou blok a div.ďalší blok:

4.3. Parametrizované fragmenty

Parametre môžeme odovzdať afragment, aby sa zmenila jeho konkrétna časť. Aby sme to dosiahli, musí byť fragment definovaný ako volanie funkcie, kde musíme deklarovať zoznam parametrov.

V tomto príklade definujeme fragment pre všeobecné pole formulára:

 Lúka

A toto je jednoduché použitie tohto fragmentu, do ktorého mu odovzdávame parametre:

A takto bude vyzerať vrátené pole:

 názov

4.4. Výrazy na zahrnutie fragmentov

Fragmenty brzlíka ponúkajú ďalšie zaujímavé možnosti, ako napríklad podporu pre podmienené výrazy na určenie, či sa má zahrnúť fragment.

Pomocou Elvis operátor s ktorýmkoľvek z výrazov poskytovaných Thymeleaf (napríklad zabezpečenie, reťazce a kolekcie), sme schopní načítať rôzne fragmenty.

Tento fragment môžeme napríklad definovať pomocou určitého obsahu, ktorý zobrazíme v závislosti od danej podmienky. Môže to byť súbor obsahujúci rôzne druhy blokov:

 Prijaté údaje Žiadne údaje

A takto by sme ich mohli načítať s výrazom:

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

Ak sa chcete dozvedieť viac informácií o výrazoch Thymeleaf, prečítajte si náš článok tu.

4.5. Flexibilné rozloženia

Nasledujúci príklad tiež ukazuje ďalšie dve zaujímavé použitia fragmentov vykresliť tabuľku s údajmi. Toto je opakovane použiteľný fragment tabuľky, ktorý má dve dôležité časti: hlavičku tabuľky, ktorú je možné zmeniť, a telo, kde sa údaje vykresľujú:


0 názov

Ak chceme použiť túto tabuľku, môžeme odovzdať vlastnú hlavičku tabuľky pomocou znaku polia funkcie. Na hlavičku sa odkazuje na triedu myFields. Telo tabuľky sa načíta odovzdaním údajov ako parametra do tableBody funkcia:

Id názov

A takto bude vyzerať výsledná stránka:

 Prijaté údaje Id názov
1001 John Smith
1002 Jane Williams
  Register fragmentov Náklon značky | Fragmentové parametre | Iné

Id	názov
1001	John Smith
1002	Jane Williams

5. Záver

V tomto článku sme si ukázali, ako znovu použiť komponenty zobrazenia pomocou Thymeleaf Fragments, mocného nástroja, ktorý môže uľahčiť správu šablón.

Predstavili sme tiež niekoľko ďalších zaujímavých funkcií, ktoré idú nad rámec základných informácií. Mali by sme to vziať do úvahy pri výbere Thymeleaf ako nášho nástroja na vykreslenie pohľadu.

Ak sa chcete dozvedieť viac o ďalších funkciách Thymeleaf, určite by ste si mali prečítať náš článok o dialektoch rozloženia.

Úplný implementačný kód príkladu je ako vždy k dispozícii na serveri GitHub.

streamalism.org