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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- Tiles Core Library --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-core</artifactId> <version>3.0.5</version> </dependency> <!-- Tiles JSP Support --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-jsp</artifactId> <version>3.0.5</version> </dependency> |
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:
|
1 2 3 4 5 6 7 |
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer"> <property name="definitions"> <list> <value>/WEB-INF/tiles.xml</value> </list> </property> </bean> |
In secondo luogo procediamo con la modifica del bean del view resolver come segue:
|
1 2 3 4 5 |
<bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="viewClass"> <value>org.springframework.web.servlet.view.tiles3.TilesView</value> </property> </bean> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd"> <tiles-definitions> <definition name="defaultTemplate" template="/WEB-INF/template/template.jsp"> <put-attribute name="header" value="/WEB-INF/template/header.jsp" /> <put-attribute name="menu" value="/WEB-INF/template/menu.jsp" /> <put-attribute name="body" value="" /> <put-attribute name="footer" value="/WEB-INF/template/footer.jsp" /> </definition> <definition name="hello" extends="defaultTemplate"> <put-attribute name="title" value="Homepage" /> <put-attribute name="body" value="/WEB-INF/views/hello.jsp" /> </definition> </tiles-definitions> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title><tiles:insertAttribute name="title" ignore="true" /></title> <spring:url value="/resources/style.css" var="my_style_css" /> <link href="${my_style_css}" rel="stylesheet" /> </head> <body> <div id="div_header"> <tiles:insertAttribute name="header" /> </div> <div id="div_menu"> <tiles:insertAttribute name="menu" /> </div> <div id="div_body"> <tiles:insertAttribute name="body" /> </div> <div id="div_footer"> <tiles:insertAttribute name="footer" /> </div> </body> </html> |
Adesso vediamo il codice di ciascuna delle sezioni fisse.
header.jsp
|
1 2 |
<h2>Redluck.it</h2> <hr/> |
footer.jsp
|
1 2 |
<hr/> <p>Copyright 2016 redluck.it</p> |
menu.jsp
|
1 2 3 4 5 6 7 8 |
<div id="my_menu"> <ul> <li><a href="hello.html">Homepage</a></li> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </div> |
quindi modifichiamo come segue il codice della nostra unica vista attuale, hello.jsp
|
1 2 3 |
<center> <h1>${message}</h1> </center> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
html, body { height: 100%; font-family: Calibri; } #div_header { font-size: 20px; } #div_footer { clear: both; } #div_menu { float: left; width: 15%; min-height: 75%; background-color: #F5F5DC; border: 1px solid #A9A9A9; margin-right: 5px; margin-bottom: 10px; padding: 10px; } #my_menu li a { text-decoration: none; height: 24px; } #my_menu li a:link, #my_menu li a:visited { display: block; background: url(menu.gif); padding: 8px 0 0 20px; } #my_menu li a:hover { background: url(menu.gif) 0 -32px; padding: 8px 0 0 25px; } #my_menu li a:active { color: #fff; background: url(menu.gif) 0 -64px; } #my_menu ul { list-style: none; margin: 0; padding: 0; } #div_body { float: left; width: 80%; min-height: 75%; border: 1px solid #A9A9A9; margin-bottom: 10px; padding-bottom: 20px; } |
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:
|
1 2 |
<spring:url value="/resources/style.css" var="my_style_css" /> <link href="${my_style_css}" rel="stylesheet" /> |
Il secondo step è quello di aggiungere le due seguenti righe di codice all’interno della dispatcher servlet:
|
1 2 3 4 5 |
<!-- Attivazione del supporto per le annotations MVC --> <mvc:annotation-driven /> <!-- Inclusione della cartella resources --> <mvc:resources mapping="/resources/**" location="/resources/" /> |
Ora scriviamo nella url del browser l’indirizzo localhost:8080/SpringMVCmvn/hello e dovremmo finalmente visualizzare una schermata come la seguente:
Ecco come appare l’alberatura della nostra web application una volta eseguiti tutti gli step descritti in questa serie di 4 tutorial:
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:
|
1 |
<% response.sendRedirect("hello.html"); %> |
