Scopri come integrare questo motore di modelli nelle tue applicazioni Spring.

Thymeleaf è un motore di template Java. Sviluppa modelli per applicazioni web e autonome. Questo motore di modelli utilizza il concetto di modelli naturali per inserire la logica nel tuo layout, senza compromettere il tuo design. Con Thymeleaf avrai il controllo su come un'applicazione elaborerà i modelli che crei.

Puoi utilizzare Thymeleaf per elaborare sei tipi di modelli: HTML, XML, Testo, JavaScript, CSS e RAW. Thymeleaf si riferisce a ciascuno dei modelli come a una modalità modello, essendo HTML il modello più popolare creato su questo motore.

Inizializzazione di Thymeleaf nella tua applicazione

Esistono due modi per aggiungere Thymeleaf all'applicazione Spring Boot. Puoi selezionare Thymeleaf come dipendenza quando generi il tuo boilerplate con Lo strumento di inizializzazione di Spring. Hai anche la possibilità di aggiungerlo in seguito al file delle specifiche di build nella sezione delle dipendenze.

Se hai selezionato una delle opzioni del progetto Gradle, il file che contiene le dipendenze è il

instagram viewer
build.gradle file. Tuttavia, se scegli Maven, quel file lo è pom.xml.

Tuo pom.xml il file dovrebbe contenere la seguente sezione di dipendenza:

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Mentre il tuo build.gradle il file dovrebbe contenere la seguente sezione di dipendenza:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

L'applicazione di esempio utilizzata nell'articolo è disponibile in this Repositorio GitHub ed è gratuito per l'utilizzo con la licenza MIT.

Aggiungendo Thymeleaf alla tua applicazione Spring avrai accesso alla sua libreria principale, che ti consentirà di utilizzare il dialetto standard primaverile di Thymeleaf. Il dialetto standard primaverile contiene attributi e sintassi unici che puoi utilizzare per aggiungere funzionalità diverse ai tuoi layout.

Utilizzo di Thymeleaf in Spring Boot

Quando usi Thymeleaf nella tua applicazione Spring, il primo passo è creare il tuo documento modello. Per questa applicazione di esempio, il documento modello è HTML. Dovresti sempre creare i tuoi modelli Thymeleaf in Spring Boot modelli cartella, che è disponibile nel file delle risorse.

Il file home.html

html>
<htmlxmlns: th="http://www.thymeleaf.org">


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Il modello Thymeleaf sopra è un modello HTML5 generale, con un attributo estraneo (xmlns: th). Lo scopo del xmlns: th L'attributo è fornire l'ambito per tutti i file esimo:* attributi che utilizzerai in questo documento HTML. Gli altri attributi e tag in un modello Thymeleaf sono tradizionali Tag e attributi HTML.

Creazione di un'intestazione

Uno dei primi e più importanti aspetti di qualsiasi sito Web o applicazione è l'intestazione. Spiega di cosa tratta l'applicazione (attraverso il logo) e ti aiuta a navigare facilmente nella tua applicazione. Un'intestazione di base dovrebbe avere un logo e diversi collegamenti di navigazione.

html>
<htmlxmlns: th="http://www.thymeleaf.org">


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

Thymeleaf ti consente di aggiungere l'intestazione sopra a qualsiasi pagina della tua applicazione web utilizzando il file th: inserire attributo. IL th: inserire E th: sostituire gli attributi accettano ciò che Thymeleaf chiama valori di espressione di frammento. Le espressioni di frammento ti consentono di posizionare frammenti di markup in qualsiasi posizione nel tuo layout.

<divth: insert="~{header:: #nav}">div>

Inserendo il markup sopra nella parte superiore del file home.html Il tag inserirà il markup dell'intestazione nella parte superiore della tua home page. Un'espressione frammento ha diversi componenti, due sono facoltativi e due sono obbligatori:

  • Una tilde (~), che è facoltativa.
  • Una coppia di parentesi graffe ({}), che è facoltativa.
  • Il nome del modello che contiene il markup che desideri inserire (intestazione.html).
  • Il selettore CSS del markup che desideri inserire (#nav).

Pertanto, il markup seguente produce lo stesso risultato di quello sopra.

"header:: #nav">

Compilazione del corpo del modello

Thymeleaf ti consente di utilizzare cinque tipi di espressioni nei tuoi modelli:

  • Espressione del frammento (~{…})
  • Espressione del messaggio (#{…})
  • Espressione URL collegamento (@{…})
  • Espressione variabile (${…})
  • Espressione variabile di selezione (*{…})

Un'espressione di messaggio ti consente di aggiungere frammenti di testo esternalizzati al tuo layout. Con le espressioni messaggio, puoi facilmente sostituire o riutilizzare il testo nel tuo layout. Quando usi un'espressione di messaggio, dovresti sempre inserire i frammenti di testo esterni in a .proprietà file sotto il risorse cartella.

Per questa applicazione di esempio, il file è messaggi.proprietà, che contiene il seguente frammento di testo:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

Tieni presente che il frammento di testo (o il messaggio) sopra ha una chiave univoca (segnaposto.testo). Questo perché ogni file di messaggi può contenere una raccolta di messaggi diversi. Quindi, avrai bisogno di una chiave per inserire un messaggio specifico nel tuo layout.

<pth: text="#{placeholder.text}">p>

Inserendo il markup riportato sopra nel corpo del tuo file HTML, il testo segnaposto verrà effettivamente visualizzato come un paragrafo nella tua visualizzazione. A differenza dell'espressione frammento, ogni aspetto dell'espressione del messaggio è obbligatorio. Un'espressione di messaggio richiede:

  • Un segno numerico (#).
  • Una coppia di parentesi graffe ({}).
  • La chiave che contiene il messaggio che desideri inserire (segnaposto.testo).

Modellare il tuo modello

Un altro file importante nel file risorse la cartella è il file statico. Questo file memorizza i tuoi file CSS e tutte le immagini che intendi utilizzare nella tua applicazione. Per collegare il tuo file CSS esterno al modello HTML Thymeleaf dovrai utilizzare l'espressione URL del collegamento. L'espressione dell'URL del collegamento viene elaborata URL sia relativi che assoluti.

<linkrel="stylesheet"th: href="@{/css/style.css}" />

Inserendo il markup sopra nel file del tuo file HTML ti consentirà di definire lo stile del tuo modello utilizzando un file style.css file. Questo file è disponibile in formato a css cartella sotto il statico sezione del risorse file della domanda di esempio. Dovresti sempre assegnare l'espressione URL del collegamento al file esimo: href attributo.

Thymeleaf fornisce molti altri attributi che puoi utilizzare per migliorare il design del tuo layout. Uno di questi attributi è il esimo: stile attributo, che puoi utilizzare per aggiungere immagini al tuo layout.

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

Il markup sopra utilizza il file esimo: stile attributo per aggiungere un'immagine di sfondo a una sezione specifica del layout. Thymeleaf ha oltre cento attributi diversi che puoi utilizzare per aggiungere stile e funzionalità ai tuoi layout.

L'espressione variabile

Le espressioni variabili sono le espressioni più popolari e probabilmente più complesse utilizzate da Thymeleaf. Le espressioni variabili Thymeleaf consentono di raccogliere dati dal contesto dell'applicazione o da un oggetto nell'applicazione e inserirli nel modello. A seconda dell'origine dei dati che desideri visualizzare, è possibile utilizzare due tipi di espressioni variabili.

L'espressione della variabile primaria utilizza il simbolo del dollaro e consente di raccogliere dati da contesto dell'applicazione (ovvero i dati associati alle diverse attività in esecuzione nel file applicazione). Ad esempio, se desideri acquisire i dati di un utente da una modale, l'espressione della variabile con il simbolo del dollaro è la scelta più pratica. Se esegui il progetto di esempio e vai a http://localhost: 8080/ nel tuo browser, vedrai la seguente modale:

Dopo aver chiuso la finestra modale o inviato un nome, l'applicazione passerà alla home page. Nella home page vedrai un sito Web generico che visualizza la parola "Benvenuto", seguita dalla stringa che hai appena inviato nel modale.

L'applicazione di esempio utilizza l'espressione variabile per completare questo processo. La forma semplice in modale.html il file ha il seguente markup:

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

Quando un utente invia il modulo, attiva il file th: azione attributo che ha il valore dell'URL di un post, che puoi trovare nel file WebController classe.

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

IL nome del processo() accetta la stringa che l'utente fornisce al modale, quindi assegna quella stringa a una variabile chiamata nome utente. Utilizzando l'espressione variabile, il controller inserisce quindi la variabile nome utente nel layout.

<h1>Welcome <spanth: text="${userName}">span>!h1>

L'espressione della variabile di selezione utilizza un asterisco ed è molto utile quando si ha a che fare con applicazioni più complesse. Ad esempio, un'applicazione che richiede agli utenti di accedere può utilizzare l'espressione della variabile di selezione. È possibile raccogliere il nome utente dall'oggetto utente e inserirlo nel layout.

Modello alternativo e opzioni di stile

Sebbene Thymeleaf sia l'opzione di modello più popolare per le applicazioni Spring Boot, esistono molte altre opzioni ugualmente valide. Questi includono JavaServer Pages (JSP), modelli basati su Groovy, modelli FreeMarker e modelli Moustache. Oltre a creare uno stile CSS personalizzato, puoi anche scegliere di utilizzare un framework CSS per definire lo stile del tuo layout.