Werken met fragmenten in Thymeleaf

1. Overzicht

In deze tutorial laten we zien hoe maak gebruik van Thymeleaf Fragments om bepaalde gemeenschappelijke delen van een site opnieuw te gebruiken. Na het opzetten van een heel eenvoudig Spring MVC-project, zullen we ons concentreren op weergaven.

Als Thymeleaf nieuw voor je is, kun je andere artikelen op deze site bekijken, zoals deze inleiding, en ook deze over de 3.0-versie van de engine.

2. Maven afhankelijkheden

We hebben een aantal afhankelijkheden nodig om Thymeleaf in te schakelen:

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

De laatste versie van thymeleaf en thymeleaf-spring5 is te vinden op Maven Central.

3. Lente-project

3.1. Spring MVC-configuratie

Om Thymeleaf in te schakelen en het sjabloon-achtervoegsel in te stellen, moeten we configureer MVC met een view resolver en template resolver.

We zullen ook de map instellen voor enkele statische bronnen:

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

Merk op dat als we Spring Boot gebruiken, deze configuratie misschien niet nodig is, tenzij we onze eigen aanpassingen moeten toepassen.

3.2. De controller

In dit geval is de controller slechts een voertuig voor de weergaven. Elke weergave toont een ander scenario voor fragmentgebruik.

De laatste laadt enkele gegevens die door het model worden gestuurd om op de weergave te worden weergegeven:

@Controller openbare klasse FragmentsController {@GetMapping ("/ fragmenten") openbare String getHome () {retourneer "fragmenten.html"; } @GetMapping ("/ markup") public String markupPage () {return "markup.html"; } @GetMapping ("/ params") public String paramsPage () {return "params.html"; } @GetMapping ("/ other") public String otherPage (Modelmodel) {model.addAttribute ("data", StudentUtils.buildStudents ()); retourneer "other.html"; }}

Merk op dat de weergavenamen de ".Html" achtervoegsel vanwege de manier waarop we onze resolver hebben geconfigureerd. We specificeren ook het achtervoegsel als we naar fragmentnamen verwijzen.

4. De uitzichten

4.1. Eenvoudige opname van fragmenten

Allereerst zullen we veelgebruikte onderdelen op onze pagina's hergebruiken.

We kunnen deze onderdelen definiëren als fragmenten, hetzij in geïsoleerde bestanden, hetzij op een gemeenschappelijke pagina. In dit project worden deze herbruikbare onderdelen gedefinieerd in een map met de naam fragmenten.

Er zijn drie basismanieren om inhoud uit een fragment op te nemen:

invoegen - voegt inhoud in de tag in
vervangen - vervangt de huidige tag door de tag die het fragment definieert
omvatten - dit is verouderd, maar het kan nog steeds in een oude code voorkomen

Het volgende voorbeeld, fragmenten.html, toont het gebruik van alle drie de manieren. Deze Thymeleaf-sjabloon voegt fragmenten toe in het hoofd en de body van het document:

   Thymeleaf Fragments: thuis Ga naar de volgende pagina om fragmenten in actie te zien

Laten we nu eens kijken naar een pagina die enkele fragmenten bevat. Het heet general.html, en het is als een hele pagina waarvan sommige delen zijn gedefinieerd als fragmenten die klaar zijn om te worden gebruikt:

Ga naar de volgende pagina om fragmenten in actie te zien
 Dit is een zijbalk Dit is een andere zijbalk Fragmentenindex | Opmaak inclussie | Fragmentparams | Andere

De sectie bevat slechts een stylesheet, maar we zouden andere tools zoals Bootstrap, jQuery of Foundation kunnen toepassen, hetzij rechtstreeks, hetzij met behulp van Webjars.

Merk op dat alle herbruikbare tags van deze sjabloon het attribuut hebben th: fragment, maar hierna zullen we zien hoe we een ander deel van de pagina kunnen opnemen.

Na het weergeven en opnemen van fragmenten is de geretourneerde inhoud:

   Thymeleaf Fragments: thuis Ga naar de volgende pagina om fragmenten in actie te zien
  Fragmenten Index | Opmaak inclussie | Fragmentparams | Andere

4.2. Markeringskiezers voor fragmenten

Een van de geweldige dingen van Thymeleaf Fragments is dat we kunnen ook elk deel van een sjabloon pakken door gewoon de eenvoudige selectors te gebruiken, via klassen, id's of gewoon door tags.

Deze pagina bevat bijvoorbeeld enkele componenten van general.html bestand: een terzijde block en het div. een ander blok:

4.3. Geparametriseerde fragmenten

We kunnen parameters doorgeven aan eenfragment om een specifiek deel ervan te veranderen. Om dat te doen, moet het fragment worden gedefinieerd als een functieaanroep, waarbij we een lijst met parameters moeten declareren.

In dit voorbeeld definiëren we een fragment voor een generiek formulierveld:

 Veld

En hier is een eenvoudig gebruik van dat fragment waar we parameters aan doorgeven:

En dit is hoe het geretourneerde veld eruit zal zien:

 Naam

4.4. Opname-expressies fragmenteren

Thymeleaf-fragmenten bieden andere interessante opties, zoals ondersteuning voor voorwaardelijke uitdrukkingen om te bepalen of een fragment moet worden opgenomen.

De ... gebruiken Elvis operator met een van de uitdrukkingen die door Thymeleaf worden geleverd (bijvoorbeeld beveiliging, tekenreeksen en verzamelingen), kunnen we verschillende fragmenten laden.

We kunnen dit fragment bijvoorbeeld definiëren met wat inhoud die we laten zien, afhankelijk van een bepaalde voorwaarde. Dit kan een bestand zijn dat verschillende soorten blokken bevat:

 Gegevens ontvangen Geen gegevens

En dit is hoe we ze kunnen laden met een uitdrukking:

 0}? ~ {fragmenten / menu's.html :: dataPresent}: ~ {fragmenten / menu's.html :: noData} ">

Bekijk ons artikel hier voor meer informatie over Thymeleaf Expressions.

4.5. Flexibele lay-outs

Het volgende voorbeeld laat ook twee andere interessante toepassingen van fragmenten zien geef een tabel met gegevens weer. Dit is het herbruikbare tabelfragment, met twee belangrijke onderdelen: een tabelkop die kan worden gewijzigd en de hoofdtekst waarin gegevens worden weergegeven:


0 Naam

Als we deze tabel willen gebruiken, kunnen we onze eigen tabelkop doorgeven met de velden functie. De koptekst wordt verwezen met de klasse myFields. De hoofdtekst van de tabel wordt geladen door gegevens als parameter door te geven aan het tableBody functie:

ID kaart Naam

En zo ziet de laatste pagina eruit:

 Gegevens ontvangen ID kaart Naam
1001 John Smith
1002 Jane Williams
  Fragmenten Index | Opmaak inclussie | Fragmentparams | Andere

ID kaart	Naam
1001	John Smith
1002	Jane Williams

5. Conclusie

In dit artikel hebben we laten zien hoe u weergavecomponenten kunt hergebruiken met behulp van Thymeleaf Fragments, een krachtige tool die sjabloonbeheer eenvoudiger kan maken.

We hebben ook enkele andere interessante functies gepresenteerd die verder gaan dan de basis. We moeten hiermee rekening houden bij het kiezen van Thymeleaf als onze engine voor weergave van weergaven.

Als je meer wilt weten over andere Thymeleaf-functies, moet je zeker eens kijken naar ons artikel over Layout Dialects.

Zoals altijd is de volledige implementatiecode van het voorbeeld beschikbaar op GitHub.

streamalism.org