Spring MVC usando Maven ed Eclipse (IV): creazione di un template tramite Apache Tiles

Una volta realizzata la nostra applicazioncina web grazie all’utilizzo di Spring MVC e di Maven vediamo come realizzare un semplice layout composto da un header, un footer, una colonna sinistra per il menù (le tre componenti statiche del sito) e un corpo centrale al cui interno i contenuti cambino dinamicamente.

apache_tiles

Per realizzare il layout ci avvarremo di Apache Tiles, uno dei framework più diffusi utilizzati per semplificare la creazione delle interfaccie grafiche all’interno delle applicazioni web. Per poter utilizzare Tiles come prima cosa dovremo importarne le dipendenze all’interno del pom.xml:

All’interno del file dispatcher-servlet.xml dovremo apportare due modifiche. In primo luogo dovremo mappare il bean per la configurazione di Tiles aggiungendo il seguente codice:

In secondo luogo procediamo con la modifica del bean del view resolver come segue:

A questo punto, all’interno della cartella WEB-INF, creiamo un file tiles.xml. In questo file vengono elencate tutte le viste dell’applicazione e viene stabilito il layout che sarà utilizzato per la loro visualizzazione:

Eseguiti questi passaggi abbiamo stabilito quella che dovrà essere la struttura visiva delle nostre pagine. Procediamo creando all’interno della cartella WEB-INF una sottocartella template e mettendo al suo interno il file template.xml che rappresenta l’ossatura di ogni singola pagina, all’interno del quale saranno montate le varie sezioni header, footer, menù e di volta in volta un body diverso:

Adesso vediamo il codice di ciascuna delle sezioni fisse.
header.jsp

footer.jsp

menu.jsp

quindi modifichiamo come segue il codice della nostra unica vista attuale, hello.jsp

Manca ancora qualcosa prima di poter lanciare l’applicazione, ovvero la creazione di uno stile grafico per ogni sezione della pagina. All’interno della cartella webapp (quindi allo stesso livello di WEB-INF) creiamo una cartella resources da utilizzare per includere risorse tipo JavaScript, CSS ecc. quindi al suo interno inseriamo un file style.css oltre all’immagine menu.gif riportata di seguito. Attenzione, la cartella da creare non coincide con la cartella resources creata di default allo stesso livello della cartella webapp.

menu

Per includere le risorse nel nostro progetto dobbiamo eseguire due ultimi step.
Il primo, che in realtà già abbiamo visto nel codice del nostro template.xml, consiste nel richiamare il file CSS all’interno dei tag head della pagina come segue:

Il secondo step è quello di aggiungere le due seguenti righe di codice all’interno della dispatcher servlet:

Ora scriviamo nella url del browser l’indirizzo localhost:8080/SpringMVCmvn/hello e dovremmo finalmente visualizzare una schermata come la seguente:

tiles_screenshot

Ecco come appare l’alberatura della nostra web application una volta eseguiti tutti gli step descritti in questa serie di 4 tutorial:

screenshot

Un’ultima miglioria che, se vogliamo, è possibile apportare all’applicazione è quella di modificare il file index.jsp, già presente di default in fase di creazione del progetto, per consentire il reindirizzamento ad una vista specifica ogni volta che come url non specifichiamo un percorso completo ma digitiamo solo il context root, ad esempio localhost:8080/SpringMVCmvn. Di seguito il codice completo di index.jsp, composto da una sola riga, per essere reindirizzati alla vista hello.jsp:

Lascia un commento

Your email address will not be published.