Thymeleaf: dialetto layout personalizzato

1. Introduzione

Thymeleaf è un motore di modelli Java per l'elaborazione e la creazione di HTML, XML, JavaScript, CSS e testo normale. Per un'introduzione a Thymeleaf e Spring, dai un'occhiata a questo articolo.

In questo articolo, ci concentreremo sulla creazione di modelli, qualcosa che i siti più ragionevolmente complessi devono fare in un modo o nell'altro. In poche parole, le pagine devono condividere componenti comuni della pagina come l'intestazione, il piè di pagina, il menu e potenzialmente molto altro.

Thymeleaf risolve questo problema con i dialetti personalizzati: puoi creare layout utilizzando il sistema di layout standard Thymeleaf o il dialetto di layout , che utilizza il motivo decorator per lavorare con i file di layout.

In questo articolo, discuteremo una manciata di funzionalità di Thymeleaf Layout Dialect , che può essere trovato qui. Per essere più specifici, discuteremo le sue caratteristiche come la creazione di layout, titoli personalizzati o fusione di elementi di testa.

2. Dipendenze di Maven

Per prima cosa, vediamo la configurazione richiesta necessaria per integrare Thymeleaf con Spring. La libreria thymeleaf-spring è richiesta nelle nostre dipendenze:

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

Nota che, per un progetto Spring 4, la libreria thymeleaf-spring4 deve essere utilizzata al posto di thymeleaf-spring5 . L'ultima versione delle dipendenze può essere trovata qui.

Avremo anche bisogno di una dipendenza per il dialetto dei layout personalizzati:

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

L'ultima versione può essere trovata nel Maven Central Repository.

3. Configurazione dialetto layout foglia di timo

In questa sezione, discuteremo come configurare Thymeleaf per utilizzare Layout Dialect . Se vuoi fare un passo indietro e vedere come configurare Thymeleaf 3.0 nel tuo progetto di app web, controlla questo tutorial.

Dopo aver aggiunto la dipendenza Maven come parte di un progetto, dovremo aggiungere Layout Dialect al nostro motore di template Thymeleaf esistente. Possiamo farlo con la configurazione Java:

SpringTemplateEngine engine = new SpringTemplateEngine(); engine.addDialect(new LayoutDialect());

O utilizzando la configurazione del file XML:

Quando si decorano le sezioni del contenuto e dei modelli di layout, il comportamento predefinito è di posizionare tutti gli elementi di contenuto dopo quelli di layout.

A volte abbiamo bisogno di una fusione più intelligente di elementi, che consenta di raggruppare elementi simili (script js insieme, fogli di stile insieme ecc.).

Per ottenere ciò, dobbiamo aggiungere la strategia di ordinamento alla nostra configurazione - nel nostro caso, sarà la strategia di raggruppamento:

engine.addDialect(new LayoutDialect(new GroupingStrategy()));

o in XML:

La strategia predefinita è aggiungere elementi. Con quanto sopra, avremo tutto ordinato e raggruppato.

Se nessuna delle due strategie soddisfa le nostre esigenze, possiamo implementare la nostra SortingStrategy e trasmetterla al dialetto come sopra.

4. Funzionalità dei processori dello spazio dei nomi e degli attributi

Una volta configurato, possiamo iniziare a utilizzare lo spazio dei nomi del layout e cinque nuovi processori di attributi: decorare , title-pattern , insert , replace e fragment.

Per creare il modello di layout che vogliamo utilizzare per i nostri file HTML, abbiamo creato il seguente file, denominato template.html :

  ... 

Come possiamo vedere, abbiamo cambiato lo spazio dei nomi dallo standard xmlns: th = "// www.thymeleaf.org" a xmlns: layout = "// www.ultraq.net.nz/thymeleaf/layout" .

Ora possiamo iniziare a lavorare con i processori di attributi nei nostri file HTML.

4.1. layout: frammento

Per creare sezioni personalizzate nel nostro layout o modelli riutilizzabili che possono essere sostituiti da sezioni che condividono lo stesso nome, utilizziamo l' attributo fragment all'interno del nostro corpo template.html :

Your page content goes here

My custom footer

Your custom footer here

Tieni presente che ci sono due sezioni che verranno sostituite dal nostro HTML personalizzato: contenuto e piè di pagina.

È anche importante scrivere l'HTML predefinito che verrà utilizzato se uno qualsiasi dei frammenti non verrà trovato.

4.2. layout: decorare

Il prossimo passo che dobbiamo fare è creare un file HTML, che sarà decorato dal nostro layout:

   Layout Dialect Example    

This is a custom content that you can provide

This is some footer content that you can change

Come mostrato nella 3a riga, usiamo layout: decora e specifica la fonte del decoratore. Tutti i frammenti del file di layout che corrispondono ai frammenti in un file di contenuto verranno sostituiti dalla sua implementazione personalizzata.

4.3. layout: titolo-pattern

Dato che il dialetto Layout sostituisce automaticamente il titolo del layout con quello che si trova nel modello di contenuto, potresti conservare parti del titolo che si trovano nel layout.

Ad esempio, possiamo creare breadcrumb o mantenere il nome del sito web nel titolo della pagina. Il processore layout: title-pattern viene fornito con l'aiuto in tal caso. Tutto quello che devi specificare nel tuo file di layout è:

Baeldung

Quindi il risultato finale per il layout e il file di contenuto presentato nel paragrafo precedente sarà simile a questo:

Baeldung - Layout Dialect Example

4.4. layout: inserire / layout: sostituire

Il primo processore, layout: insert , è simile all'originale th: insert di Thymeleaf , ma permette di passare gli interi frammenti HTML al template inserito. È molto utile se si dispone di codice HTML che si desidera riutilizzare, ma i cui contenuti sono troppo complessi da determinare o costruire con le sole variabili di contesto.

Il secondo, layout: replace , è simile al primo, ma con il comportamento di th: replace , che sostituirà effettivamente il tag host con il codice del frammento definito.

5. conclusione

In questo articolo, abbiamo descritto alcuni modi per implementare i layout in Thymeleaf.

Notare che gli esempi utilizzano la versione 3.0 di Thymeleaf; se vuoi imparare come migrare il tuo progetto, segui questa procedura.

L'implementazione completa di questo tutorial può essere trovata nel progetto GitHub.

Come testare? Il nostro suggerimento è di giocare prima con un browser, quindi controllare anche i test JUnit esistenti.

Ricorda, puoi creare layout utilizzando il suddetto dialetto di layout oppure puoi creare facilmente la tua soluzione. Si spera che questo articolo ti offra ulteriori approfondimenti sull'argomento e troverai il tuo approccio preferito a seconda delle tue esigenze.