Da diversi anni ormai ha preso piede l’utilizzo intelligente dei Cascading Style Sheet (CSS); in particolar modo, grazie a iniziative come CSS Zen Garden e molti altri a seguire, si è dimostrato che è possibile avere una gran varietà di ottimi layout utilizzando una struttura HTML comune e dei fogli di stile CSS progettati a dovere.
Questo approccio si è rivelato molto potente sotto diversi aspetti. Il suo pregio maggiore è che diventa possibile rivoluzionare completamente la grafica di un sito agendo (quasi) solamente sui CSS, inoltre questo modo di lavorare si adatta molto bene anche a siti statici, ovvero siti il cui HTML non è generato automaticamente. Da ultimo, ma non meno importante, ha educato i web designer alla pulizia e alla razionalità, qualità praticamente inesistenti sui primi siti degli anni ’90, permettendo fra l’altro la nascita di molti framework CSS e convenzioni di progettazione usate tutt’oggi.
Cambiare layout da CSS
Vediamo quindi in semplice esempio una delle tecniche più utilizzate dai “guru” del CSS, ovvero il rendering della pagina con layout diversi in base ad una semplice modifica all’HTML della pagina. Il trucco è molto semplice, si tratta di:
- assegnare un attributo id al tag <body>;
- creare delle regole nel file CSS che posizionano i vari elementi di una pagina in base al valore (se presente) di questo id.
Vediamo in concreto come fare, per farlo modificheremo il decorator e i CSS del progetto creato nelle scorse puntate (vedi parte I e parte II).
Copiare questo codice sorgente in main.jsp:
[html]
<span style="font-family: Consolas, Monaco, ‘Courier New’, Courier, monospace; line-height: 18px; font-size: 12px; white-space: pre;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</span>
<pre> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Il mio sito web | <decorator:title default="Nessun titolo" /></title>
<style type="text/css">@import "css/style.css";</style>
<decorator:head />
</head>
<c:set var="hideBanner"><decorator:getProperty property="meta.hideBanner" /></c:set>
<c:set var="bodyID"><decorator:getProperty property="body.id" writeEntireProperty="true" /></c:set>
<body ${bodyID}>
<div id="container">
<div id="masthead">
<h1><decorator:title default="Nessun titolo" /></h1>
</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
<div id="content-wrap">
<div id="content">
<c:if test="${hideBanner ne ‘true’}">
<div style="border: 1px solid black; width: 468px; height: 60px">
Questo è un banner pubblicitario
</div>
</c:if>
<decorator:body />
</div>
</div>
</div>
</body>
</html>
[/html]
Da notare l’utilizzo del tag <decorator:getProperty>:
- property=”body.id” indica a Sitemesh ti scrivere in output il valore dell’attributo id del tag body;
- writeEntireProperty=”true” indica a Sitemesh di includere tutto l’attributo, ovvero se nella pagina da decorare abbiamo:
<body id="xyz">verrà scritto in outputid="xyz"e non semplicementexyz; - per una migliore pulizia del codice viene utilizzato, come per la variabile hideBanner, il tag <c:set> che assegna il valore di questo attributo alla variabile bodyID, in modo da poterla utilizzare con la notazione di Expression Language delle JSP (abbreviata con EL) in questo modo: ${bodyID}.
Creare ora il file src/main/webapp/css/style.css:
[css]
/* Stile e layout di default */
body {
background-color: #000;
}
div#masthead, div#masthead h1, div#navigation, div#content {
margin: 0; padding: 0;
}
div#container {
background-color: #00f;
}
div#masthead {
background-color: #f00; color: #fff;
}
div#navigation {
background-color: #ff0;
}
div#navigation li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
div#content {
background-color: #fff;
margin: 0;
}
/* Layout speciali */
body#layout_2 div#navigation {
float: left;
width: 300px;
}
body#layout_2 div#navigation li {
display: block;
}
body#layout_2 div#content-wrap {
margin-left: 300px;
}
[/css]
Da notare:
- il file è diviso in due parti: nella prima viene definito lo stile e il layout di default per i vari elementi;
- nella seconda parte alcuni degli stili vengono sovrascritti (ecco perché vengono definiti dopo);
- gli stili “speciali” sono applicati solamente quando il tag <body> ha un attributo id=”layout_2″;
- ad ogni elemento del layout è stato assegnato un colore molto forte (e decisamente… orribile!), per evidenziarne la disposizione.
Si consiglia di inserire qualche paragrafo di testo nelle pagine index.html, page2.html e page3.html, ad esempio utilizzando uno dei tanti generatori di Lorem Ipsum (vedi linkografia). In questo modo sarà possibile testare in maniera più precisa le modifiche di stile.
Test delle pagine
Per verificare i diversi layout, aggiungiamo l’attributo id=”layout_2″ al tag <body> di src/main/webapp/page3.html poi eseguiamo il build del progetto con il comando di Maven:
mvn package
In allegato all’articolo abbiamo messo un archivio contenente il progetto, pronto da testare:
Progetto di esempio (clic per scaricare)
