Layout per le Pagine Web - Dipartimento di Informatica

Transcript

Layout per le Pagine Web
Dispense per il corso di Ingegneria del Web
Revisione 05/11
Giuseppe Della Penna ([email protected])
Dipartimento di Informatica
Università degli studi dell'Aquila
I Layout per le Pagine Web: Layout a Colonna Singola
Corso di Ingegneria del Web
Creazione di Layout
La creazione di un buon layout è un passo indispensabile per la creazione di un sito web usabile e
accattivante. Layout significa principalmente disposizione degli elementi: la grafica, i colori e tutto
ciò che contribuisce a renderlo "bello" sono dettagli diversi, che si possono applicare solo dopo
aver scelto come disporre gli elementi sulla pagina web.
In questa lezione vedremo degli scheletri di layout che potrete utilizzare per dare look molto
diversi ai vostri siti, pur partendo da una base comune e fortemente crossbrowser. Ci
concentreremo sui layout liquidi, cioè quelli che si possono adattare alle dimensioni della finestra
del browser, perché, come già accennato a lezione, si tratta dei layout più utili e usabili ma anche
dei più difficili da realizzare.
Layout a Colonna Singola
I layout a colonna singola sono tipicamente costituiti da un'intestazione (header), un corpo (body)
e un piè di pagina (footer) impilati verticalmente, come nello schema che segue.
Header
Body
Footer
Questi layout sono molto semplici da realizzare, anche senza l'ausilio di tecniche di
posizionamento. Vediamo comunque come possono essere descritti e migliorati utilizzando le
tecniche CSS a noi note.
Il testo che segue farà riferimento agli esempi di layout a colonna singola presenti tra il materiale online del
corso.
Layout con tabelle
Il primo esempio, Layout_1col_table.html, mostra il layout in oggetto realizzato usando una
tabella per separare le tre sezioni fondamentali. Distinguere header, body e footer è sempre utile
ai fini dell'attribuzione degli stili al rispettivo contenuto, ma come sappiamo l'uso delle tabelle per
il layout è assolutamente da evitare.
Layout con div
Il secondo esempio, Layout_1col_div_liquid.html, ha lo stesso aspetto del precedente ma le tre
sezioni sono contenute in delle div. Il CSS usato per le div, che non sono posizionate, è molto
semplice:
.header {
padding:0;
margin:0;
border:none;
height:50px;
}
Revisione 05/11
Pagina 2/16
I Layout per le Pagine Web: La tecnica dei CSS frames
.body {
padding:0;
margin:0;
border:none;
overflow:hidden;
}
.footer {
margin:0;
padding:0;
border:none;
height:30px;
}
L'azzeramento dei margini e l'eliminazione dell'overflow servono a garantire un corretto
allineamento delle tre div in ogni situazione. Tuttavia, Internet Explorer 6 visualizza questo layout
in modo lievemente scorretto.
La tecnica dei CSS frames
I
rimanenti
due
esempi,
Layout_1col_div_liquid_frame.html
e
Layout_1col_div_liquid_frame2.html, utilizzano una tecnica avanzata ma poco nota, realizzabile
con i CSS, detta dei CSS frames.
I frame erano un costrutto dell'HTML, ancora presente in un profilo specifico dell'XHTML ma
fortemente sconsigliato, che permetteva di suddividere la pagina in sotto-aree indipendenti,
ognuna scrollabile in maniera separata e collegata a un documento diverso. Con i CSS è possibile
ottenere un effetto simile pur utilizzando un solo documento come sorgente.
In particolare, l'utilità della tecnica dei CSS frames è nel fatto che rende possibile far scrollare il
corpo della pagina indipendentemente dalle altre parti. Negli esempi visti finora, infatti, se la
pagina è più lunga della finestra del browser, scrollandola si perde la visibilità dell'header. Inoltre,
per vedere il footer è necessario scorrere fino alla fine della pagina stessa. Nei due ultimi esempi
citati, invece, la barra di scorrimento appare solo per la parte del body o per il body e l'header
(entrambe le soluzioni sono valide a seconda del design che si desidera ottenere), mentre le
rimanenti sezioni sono fisse sulla pagina. Il codice CSS che realizza quest'effetto si basa
fortemente sull'uso della proprietà overflow dei CSS. Vediamo quello del primo esempio
(Layout_1col_div_liquid_frame.html).
body,html {
width:100%;
max-width:100%;
height:100%; /* IE */
max-height:100%; /* altri */
padding:0;
margin:0;
overflow:hidden; /* eliminiamo le scroll bars */
}
.header {
position: absolute;
margin:0;
top:0;
left:0;
overflow:hidden;
right: 0;
height:50px;
}
Revisione 05/11
Pagina 3/16
I Layout per le Pagine Web: Layout a due Colonne
.body {
overflow:auto; /* mostra le scroll bars */
position:fixed;
top:50px; /* scopre l'header */
bottom:30px; /* scopre il footer */
left:0;
right:0; /* si estende fino all'estrema destra */
}
.footer {
position:absolute;
bottom:0;
left:0;
right : 0;
top: auto;
overflow: hidden;
height:30px; }
/* Fix per IE6 */
* html body{
margin: 50px 0 30px 0;
}
* html .body{
height: 100%;
width: 100%;
}
* html .header, * html .footer{
width: 100%;
}
Per prima cosa si fa in modo che la pagina HTML si estenda in tutta e sola la superficie visibile del
browser impostando le proprietà width e height a 100%. L'impostazione percentuale garantisce un
layout completamente liquido. Si eliminano quindi le barre di scorrimento impostando overflow:
hidden.
L'header, che deve essere fisso, viene posizionato in maniera assoluta: in particolare, impostando
le proprietà left e right a zero, ci si assicura che il blocco si estenda dall'estrema sinistra
all'estrema destra del contenitore. Anche in questo caso, si imposta overflow: hidden per
eliminare le barre di scorrimento. Stessa procedura per il footer, che deve anch'esso rimanere
fisso in basso sulla pagina. Qui impostiamo bottom a zero per garantire che il blocco sia ancorato
in basso al suo contenitore, quindi in fondo alla finestra del browser.
Per realizzare il body usiamo infine il posizionamento fixed, impostando le coordinate del top e
del bottom in modo da lasciare scoperti l'header e il footer (in base alle loro altezze impostate con
le rispettive height). Impostiamo poi l'overflow a auto, in modo da mostrare se necessario le barre
di scorrimento in questa sezione.
La rimanente parte del foglio di stile, nonché alcune proprietà inserite nelle precedenti regole ed
evidenziate nel sorgente, servono ad ottenere la compatibilità con Internet Explorer 6 tramite
specifici trucchi (ad esempio l'uso del margine per simulare il posizionamento fixed). Il risultato è
quindi identicamente funzionale sia su IE che su Firefox!
Layout a due Colonne
I layout a due colonne sono i più comuni nelle applicazioni web attuali. Di solito la colonna di
sinistra è piccola, spesso a larghezza fissa, ed ospita menu e altre strutture di navigazione o
Revisione 05/11
Pagina 4/16
informative, mentre la colonna di destra, liquida, ospita il contenuto principale. Header e footer
possono essere posizionati in vario modo rispetto alle due colonne, come nei diagrammi di
esempio che seguono.
Header
Left
Body
Footer
Due colonne, barra sinistra allineata
col corpo
Header
Left
Body
Footer
Due colonne, barra sinistra su tutta la
pagina
Header
Left
Body
Footer
Due colonne, barra sinistra sotto
l'intestazione
Per illustrare questi layout faremo riferimento agli esempi di layout a due colonne presenti tra il materiale online
del corso.
Layout con tabelle
L'esempio realizzato con le tabelle (Layout_2col_table.html) è un "classico" in quanto questo tipo
di layout, prima dell'avvento dei CSS, poteva essere realizzato solo in questo modo. Adesso, lo
ripetiamo, non è più ammesso l'uso di tabelle per questi scopi. Veniamo quindi ai "veri" layout.
Layout con div posizionate
L'esempio Layout_2col_div_liquid_position.html mostra come realizzare questo tipo di layout
usando delle div posizionate in maniera assoluta. Vediamo il codice CSS:
body,html {
padding:0;
margin:0;
position:relative;
}
.header {
height:50px;
}
.body {
margin-left: 91px;
overflow:hidden;
}
.left {
position:absolute;
top:50px;
left:0;
bottom:0;
width: 90px;
z-index: 10;
}
.footer {
margin-left: 91px;
height:30px;
}
Da notare che impostiamo il posizionamento del body HTML su relativo, in modo da essere sicuri
che venga usato come riferimento per i blocchi in esso contenuti. L'header, il footer e il body non
sono posizionati, ma semplicemente scritti uno di seguito all'altro. Per l'header e il footer
impostiamo un'altezza fissa, mentre per il body e il footer impostiamo un ampio margine sinistro.
Revisione 05/11
Pagina 5/16
Questo ha l'effetto di "spostare" queste due sezioni verso destra, scoprendo l'area a sinistra della
pagina in cui posizioneremo la barra left. Infatti, la sezione left è posizionata in maniera assoluta,
al di sotto dell'header (top: 50px) e fino alla fine della pagina (bottom: 0), mentre la sua ampiezza è
fissata a una misura inferiore di un pixel rispetto al margine sinistro delle sezioni body e footer (per
lasciare un piccolo spazio vuoto, che può essere comunque omesso). Si noti la proprietà z-index
impostata per il left a un valore molto alto: infatti, spesso queste barre ospitano menu o altre
strutture a comparsa, che dovranno coprire (e quindi trovarsi al di sopra) il resto della pagina.
Layout con CSS frames
L'esempio Layout_2col_div_liquid_frame.html mostra lo stesso layout realizzato con CSS frames,
in modo che header, footer e colonna sinistra rimangano fisse durante lo scorrimento del
contenuto. In questo caso la colonna di sinistra è affiancata anche all'header, ma è possibile
affiancarla al solo body o al body e il footer cambiando opportunamente i margini e il
posizionamento degli elementi nel layout. Per il resto, la tecnica CSS Frames è applicata in maniera
simile a quanto visto sopra per i layout a una colonna. Vediamo un frammento del codice CSS.
.left {
position: absolute;
top:0;
left: 0;
width: 90px;
height: 100%;
overflow: hidden; /* eliminiamo le scroll bars */
z-index: 10;
}
.body {
position:fixed;
left:90px; /* scopre la left bar */
right:0; /* si estende fino all'estrema destra */
}
La colonna left è posizionata in maniera assoluta, con larghezza fissa, overflow nascosto (quindi
senza barre di scorrimento) e con l'altezza dell'intera finestra del browser. Il body è riposizionato
di conseguenza, spostandolo a sinistra tramite la proprietà left.
Layout con div floating
I layout a più colonne possono essere realizzati anche con un uso accorto dei floats. L'esempio
Layout_2col_div_liquid_float.html mostra infatti come realizzare lo stesso effetto con questa
tecnica. Per fare in modo che tutto funzioni bene anche sui browser meno compatibili, bisogna
usare qualche accorgimento. Vediamo il codice.
.header{
height:50px;
overflow: hidden;
}
.center{
float: left;
width: 100%;
}
Revisione 05/11
Pagina 6/16
.body{
margin-left: 91px;
overflow: hidden;
}
.left{
float: left;
width: 90px;
margin-left: -100%;
z-index: 10;
overflow: hidden;
}
.footer{
clear: left;
width: 100%;
height:30px;
overflow: hidden;
}
Si nota per prima cosa che abbiamo posto la sezione body all'interno di un'altra div di classe
center. Questo ci protegge da alcuni problemi di specifici browser. L'header è realizzato come negli
altri esempi. Le sezioni center e left, invece, sono entrambe float di tipo left, in modo da risultare
"affiancate". Il body mantiene il suo ampio margine sinistro, per tenere scoperto il left che ha
larghezza fissa. L'impostazione particolare del margine sinistro per la colonna left (-100%), in
associazione con l'ampiezza piena del center (100%) assicura invece che la colonna sia posizionata
sempre all'estrema sinistra dal meccanismo dei float, e non vada "a capo" quando l'ampiezza della
finestra è troppo piccola (caratteristica tipica dei float). Infine, il footer ha la proprietà clear: left
per risultare allineato al di sotto di left e center, senza sovrapposizioni.
L'unico neo di quest'approccio è che le parti float non possono essere dotate di altezza fissa, ma
si estendono solo fino a coprire il proprio contenuto. Per questo, nell'esempio, la colonna sinistra
lascia scoperta una porzione bianca della pagina (a questo si potrebbe ovviare, in certi casi,
impostando lo sfondo della pagina con lo stesso colore della colonna).
Layout con due colonne liquide
Gli esempi visti finora presentano una colonna a larghezza fissa e una liquida, come accade molto
di frequente. Tuttavia, è possibile rendere liquide anche entrambe le colonne, sebbene sia più
complesso.
Gli
esempi
Layout_2col_div_2liquid_position.html
e
Layout_2col_div_2liquid_float.html mostrano questo tipo di layout realizzato con posizionamento
e floats.
Nel caso del posizionamento (Layout_2col_div_2liquid_position.html), la chiave è l'uso di
ampiezze e margini espressi come percentuali. Vediamo un frammento del CSS:
.body {
margin-left: 20%;
overflow:hidden;
}
.left {
position:absolute;
top:50px;
left:0;
bottom:0;
width: 20%;
z-index: 10;
}
Revisione 05/11
Pagina 7/16
I Layout per le Pagine Web: Layout a Tre Colonne
Come si può notare, rispetto all'esempio in cui il left era di larghezza fissa, in questo caso la sua
ampiezza è specificata in forma relativa (percentuale) e non assoluta. Il margine sinistro del body
deve avere esattamente la stessa forma, per garantire che le due sezioni non si sovrappongano.
Lo stesso effetto si ottiene modificando con ampiezze/margini percentuali l'esempio float come
mostrato in Layout_2col_div_2liquid_float.html.
Layout a Tre Colonne
Veniamo infine ai layout a tre colonne. Si tratta di strutture in cui il contenuto principale è
affiancato da due colonne, solitamente a larghezza fissa, che contengono varie informazioni di tipo
navigazionale, riassuntivo o pubblicitario. Anche in questo caso, l'effettivo ordinamento delle varie
sezioni può presentare alcune variazioni, come mostrato dagli esempi che seguono.
Header
Left
Body
Header
Right
Footer
Tre colonne, barre sinistra e destra
allineate col corpo
Left
Body
Header
Right
Footer
Tre colonne, barra sinistra sotto l'intestazione
e barra destra allineata col corpo
Left
Body
Right
Footer
Tre colonne, barre sinistra e destra
sotto l'intestazione
Commenteremo ora gli schemi di layout a tre colonne singola presenti tra il materiale online del corso.
Come al solito, il file Layout_3col_table.html contiene un esempio di layout a tre colonne
realizzato con una tabella, e da evitare accuratamente. Veniamo invece alle tecniche utili nella
pratica.
Il file Layout_3col_div_liquid_position.html mostra un esempio di layout a tre colonne realizzato
tramite div posizionate. Come si può notare dal frammento di CSS riportato qui di seguito, le
variazioni rispetto al corrispondente esempio a due colonne sono minime.
.body {
margin-left: 91px;
margin-right: 91px;
overflow:hidden;
}
.left {
position:absolute;
top:50px;
left:0;
bottom:0;
width: 90px;
z-index: 10;
}
.right {
position:absolute;
top:50px;
right:0;
bottom:0;
width: 90px;
z-index: 10;
}
La colonna di sinistra è realizzata esattamente come nell'esempio a due colonne, mentre quella
di destra è programmata in maniera speculare: l'impostazione right:0 (invece di left:0) garantisce,
Revisione 05/11
Pagina 8/16
I Layout per le Pagine Web: Layout a Tre Colonne
infatti, che la div right sia ancorata alla parte destra della pagina. La parte body presenta, di
conseguenza, un margine destro oltre a quello sinistro già presente nell'esempio a due colonne, in
modo da "scoprire" la colonna di destra. Il resto dell'esempio resta invariato.
Lo stesso parallelismo si può fare per il layout a tre colonne realizzato con i float. Confrontiamo,
infatti, il seguente frammento di CSS, prelevato dall'esempio Layout_3col_div_liquid_float.html,
con quello corrispondente per il layout a due colonne.
.center{
float: left;
width: 100%;
}
.body{
margin-left: 91px;
margin-right: 91px;
overflow: hidden;
}
.left{
float: left;
width: 90px;
margin-left: -100%;
z-index: 10;
overflow: hidden;
}
.right{
float: left;
width: 90px;
margin-left: -90px;
z-index: 10;
overflow: hidden;
}
La parte left è invariata, mentre il body ha in più un margine destro equivalente all'ampiezza della
nuova colonna, come nell'esempio precedente. Da notare invece che la sezione right è un float
sinistro (e non destro, come si potrebbe pensare): infatti, il posizionamento della colonna
all'estrema destra della pagina in questo caso è garantito dalla caratteristica di "impilamento" dei
float, unito all'ordine di dichiarazione degli stessi nell'HTML (center,left,right) e soprattutto dallo
speciale margine sinistro (-90px) della colonna, corrispondente alla sua ampiezza. Si tratta di una
combinazione piuttosto "particolare", che però rende in maniera perfetta e risulta essere
crossbrowser.
Infine, vediamo l'esempio di layout a tre colonne con i CSS frames (file
Layout_3col_div_liquid_frame.html). Anche qui le modifiche da fare sono poche rispetto
all'esempio con due colonne, come risulta dal frammento di CSS che segue.
.left {
position: absolute;
top:0;
left: 0;
width: 90px;
height: 100%;
z-index: 10;
}
.right {
position: absolute;
top:0;
right: 0;
Revisione 05/11
Pagina 9/16
I Layout per le Pagine Web: Combinare Layout e Contenuti con i Template
width: 90px;
height: 100%;
z-index: 10;
}
.body {
position:fixed;
left:90px; /* scopre la left bar */
right:90px; /* scopre la right bar */
}
La colonna right viene ancorata a destra tramite la proprietà right:0, e per il resto è identica alla
left, mentre il body viene scostato dal margine destro quanto basta per mostrare la colonna
appena inserita, anche in questo caso impostando opportunamente la sua proprietà right.
Layout Disponibili in Rete
Conoscere gli scheletri di layout di base appena illustrati è utile per poter sviluppare un layout personale "da
zero", ma anche per capire e personalizzare (o rendere maggiormente crossbrowser) layout già disponibili.
Esistono, infatti, molti siti (come ad esempio Open Source Web Design, http://www.oswd.org/) dai quali poter
scaricare dei layout "preconfezionati", da utilizzare poi opportunamente per costruire i propri siti in maniera
dinamica.
Combinare Layout e Contenuti con i Template
Una volta stabilito quale layout dare al proprio sito, è naturale notare che molte parti di questo
layout sono sempre uguali in tutte le pagine del sito stesso, ad esempio l'intestazione, spesso i
menu, ecc. Queste parti possono anche variare di poco (come la voce selezionata nel menu, il
sottotitolo nell'intestazione, ecc.) ma sono sostanzialmente costanti.
Con i template è sicuramente più semplice realizzare il layout di ogni pagina, ma ripetere gli
elementi "fissi" del layout nel template di ogni pagina rende comunque il sito difficile da gestire:
basti pensare al numero di modifiche necessarie per cambiare una parte dell'intestazione.
Sfruttando meglio i template, però, possiamo migliorare notevolmente questa situazione,
rendendo anche il nostro layout modulare.
Per prima cosa, realizzeremo un template, chiamato outline, che rappresenta la parte di layout
comune a tutte le pagine del nostro sito. In questo template inseriremo delle direttive #include
(facendo riferimento a Freemarker) parametriche in tutti i punti in cui è necessario inserire
contenuto specifico per ogni pagina. Nel caso più comune, inseriremo una sola #include nella
sezione dedicata al contenuto. Vediamo un esempio di template outline per un semplice sito a una
colonna:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TITOLO DEL SITO</title>
<link rel="stylesheet" href="stile.css" type="text/css"/>
</head>
<body>
Revisione 05/11
Pagina 10/16
<div class="header">Simple Site</div>
<div class="body">
<#include content_tpl>
</div>
<div class="footer">Copyright © 2009 Corso di Ingegneria del
Web</div>
</body>
</html>
La direttiva <#include content_tpl> verrà utilizzata proprio per inserire, in questo template
generico, il contenuto specifico di ogni pagina.
Combinare gli elementi del Layout con Freemarker
Finora, quando una servlet della nostra applicazione voleva inviare al browser una pagina web
formattata secondo un suo specifico template, eseguivamo un codice simile a quello che segue
t = cfg.getTemplate(nome_template + ".ftl.html");
t.process(data, out);
Adesso, per fare in modo che il template specificato dalla servlet venga inserito all'interno
dell'outline, dovremo scrivere semplicemente del codice simile a quello che segue
t = cfg.getTemplate(nome_outline_template + ".ftl.html");
data.put("content_tpl", nome_template + ".ftl.html");
In pratica, carichiamo sempre il template di outline, e poi aggiungiamo al data model una
variabile che indica il nome del template specificato dalla servlet per il contenuto. In questo
modo, quando processeremo l'outline, la direttiva #include presente in esso causerà il
caricamento del template specificato nell'area di contenuto dell'outline stesso, restituendo come
risultato la combinazione dell'outline con i contenuti richiesti dalla nostra servlet.
Questa semplicissima soluzione, che può essere estesa per eseguire anche piccole modifiche
all'outline prima di processarlo, permette di mantenere il layout del sito separato dalla
formattazione degli specifici contenuti di ogni pagina, con enorme risparmio di tempo,
soprattutto in fase di modifica. Inoltre, la tecnica proposta permette di inserire il concetto di
outline in ogni applicazione che faccia già uso di template con poche modifiche.
Caso di Studio
Vediamo ora come caso di studio una semplice classe helper per l’uso di Freemarker, derivata da
quella realizzata nelle lezioni sui template, con funzionalità speciali mirate all’uso semplificato dei
layout standard. La nuova classe TemplateManager permette di specificare il template di outline
tramite il metodo setOutlineTemplate. A questo punto, le chiamate a processTemplate da parte
delle servlet vengono gestite, in maniera del tutto trasparente al resto del codice, inserendo ove
necessario il contenuto del template richiesto all'interno dell'outline. Vediamo il codice della
classe.
import
import
import
import
import
import
freemarker.template.*;
java.io.IOException;
java.io.PrintWriter;
java.util.HashMap;
java.util.Map;
javax.servlet.ServletContext;
Revisione 05/11
Pagina 11/16
import javax.servlet.ServletException;
public class TemplateManager {
private Configuration cfg;
//questa variabile è usata per gestire le informazioni
//sul template di outline
private Template outline;
//inizializziamo il template manager
public TemplateManager(ServletContext s) {
//Freemarker: creazione della configurazione
cfg = new Configuration();
//Freemarker: impostazione del path di caricamento dei template
//relativo al contesto della servlet
cfg.setServletContextForTemplateLoading(s, "templates");
//Freemarker: inizializzazione dell'object wrapper
cfg.setObjectWrapper(new DefaultObjectWrapper());
//Freemarker: impostazione dell'encoding dei template
cfg.setDefaultEncoding("ISO-8859-1");
//Freemarker: asegnazione dell'handler per gli errori nel template
//questo handler mostrerà messaggi di errore estesi per un facile
debugging
cfg.setTemplateExceptionHandler(
TemplateExceptionHandler.HTML_DEBUG_HANDLER);
//inizialmente, non abbiamo alcun template di outline
outline = null;
}
//questo metodo imposta il template utilizzato come outline,
//cioè all'interno del quale verranno inseriti gli altri contenuti
//generati dall servlet. A questo scopo, il template di outline
//dovrà includere, nel punto opportuno, il template indicato dalla
//variabile...
public void setOutlineTemplate(String template) throws ServletException {
if (template != null) {
try {
//carichiamo e immagazziniamo il template di outline
outline = cfg.getTemplate(template + ".ftl.html");
} catch (IOException e) {
//se il template richiesto è inesistente,
//disabilitiamo la gestione dell'outline
outline = null;
throw new ServletException("Errore nell'elaborazione del template", e);
}
} else {
//se il nome del template è nullo,
//disabilitiamo la gestione dell'outline
outline = null;
}
}
//questo metodo principale si occupa di chiamare Freemarker e
//compilare il template
//se è attivo un template di outline, quello richiesto viene inserito
//all'interno dell'outline
public void processTemplate(String template, Map<String, Object> data,
PrintWriter out) throws ServletException {
Template t;
Revisione 05/11
Pagina 12/16
I Layout per le Pagine Web: Modificare Dinamicamente un Layout con Javascript
try {
if (outline == null) {
//Freemarker: carichiamo il template indicato
t = cfg.getTemplate(template + ".ftl.html");
} else {
//un template di outline è stato specificato
//il template da eseguire è quindi sempre l'outline...
t = outline;
//...e il template specifico per questa pagina viene indicato
//all'outline tramite una variabile content_tpl.
//Si suppone che l'outline includa questo secondo template.
if (data == null) {
data = new HashMap();
}
data.put("content_tpl", template + ".ftl.html");
}
//Freemarker: associamo i dati al template e lo mandiamo in output
//gestiamo i possibili errori...
} catch (IOException e) {
throw new ServletException("Errore nell'elaborazione del template: " +
e.getMessage(), e);
} catch (TemplateException e) {
throw new ServletException("Errore nell'elaborazione del template: " +
e.getMessage(), e);
}
}
}
Si confronti, in particolare, il codice del nuovo metodo con quello del vecchio TemplateManager.
A questo punto, l'unica modifica da effettuare in tutte le servlet che producono output è
specificare il template di outline quando si inizializza il template manager. Questa operazione
potrebbe essere svolta automaticamente, ad esempio leggendo il nome del relativo file
direttamente dai parametri di configurazione del contesto. Un possibile codice da inserire, ad
esempio, nel metodo init delle servlet potrebbe essere il seguente:
public void init(ServletConfig config) throws ServletException {
super.init(config);
...
//inzializziamo il layer di presentazione (gestione template)
tpl = new TemplateManager(getServletContext());
//impostiamo il template usato per definire il layout dell'applicazione
tpl.setOutlineTemplate("outline");
}
Tutto il resto della nostra applicazione rimarrà invariato. L'unica modifica riguarda i templates
delle varie pagine, dai quali è necessario rimuovere la parte di HTML che adesso viene inserita
globalmente tramite il template di outline. In pratica, basta lasciare, in tutti i template, la sola
parte di HTML all'interno dell'elemento <body>.
Modificare Dinamicamente un Layout con Javascript
Un esempio molto avanzato di tecnica mista CSS+Javascript che esponiamo qui, sebbene
Javascript non sia stato ancora trattato, e che potrete capire meglio più avanti riguarda la
selezione dinamica dei fogli di stile per la creazione di layout adattativi.
Revisione 05/11
Pagina 13/16
Abbiamo visto, parlando dei CSS, che è possibile specificare fogli di stile alternativi in base al
media di rendering e/o alle preferenze dell'utente. Ma cosa succede se l'utente ha uno schermo a
bassa risoluzione, o può concedere alla finestra del browser solo una spazio limitato sul suo
desktop? Ad esempio, se la finestra del browser è molto stretta, il contenuto della colonna di
destra potrebbe essere invisibile senza scrolling orizzontale, oppure le colonne liquide potrebbero
restringersi troppo. Tutto questo dovrebbe essere evitato per avere un'accessibilità massima.
Tuttavia, soli CSS non sono in grado di colmare questa esigenza, ma con un po' di scripting si può
ottenere quello che vogliamo.
Il frammento di HTML che segue crea una pagina con due fogli di stile, uno dei quali, Layout1,
verrà modificato dinamicamente tramite script.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout di base: liquido a 3 colonne con DIV posizionate</title>
<link rel="stylesheet" href="demos.css" type="text/css"/>
<link id="selectcss" rel="stylesheet" href="Layout1.css" type="text/css"/>
<script type="text/javascript" src="dynamic_css.js"/>
<script type="text/javascript">
//<![CDATA[
setStyleForSize(1000,0,4000,4000,"Layout1.css");
//]]>
</script>
</head>
<body>
...
</body>
</html>
L'idea alla base di questo esempio è la seguente: è possibile scrivere fogli di stile diversi, che
alterino la posizione di certe componenti del layout e/o le nascondano selettivamente a seconda
dello spazio a disposizione, in modo da garantire sempre che le parti più importanti restino in
vista e abbiano lo spazio loro dovuto. Nell'esempio, abbiamo realizzato tre fogli di stile:
− un layout iniziale, a tre colonne (Layout1) adatto a un’estensione medio-grande del browser
(almeno 1000 pixel di ampiezza).
− un layout a due colonne (Layout2) in cui il contenuto delle tre colonne originarie è messo in
sequenza (dall'alto in basso) nella sola colonna di sinistra, adatto ad ampiezze del browser da
500 a 1000 pixel.
− un layout che non mostra alcuna colonna (solo contenuto, Layout3), adatto quando il
browser ha un ampiezza minore di 500 pixel.
I tre fogli, insieme alle rispettive geometrie ammissibili per il browser, sono passati al nostro
script dalle istruzioni Javascript visibili nella pagina, in particolare tramite il metodo
setStyleForSize. Questo metodo è presente nella libreria javascript descritta di seguito, che si
interfaccia col browser e rileva le sue dimensioni, nonché il suo eventuale ridimensionamento, e
seleziona di volta in volta il foglio di stile più appropriato, in base a delle regole da noi definite.
Provatelo!
Revisione 05/11
Pagina 14/16
//un array di fogli di stile con relativi vincoli d'uso
var _sheets = Array();
//il foglio di stile di default
var _defaultsheet = "";
function selectCSS() {
//prendiamo un riferimento al link del CSS usato nel documento
var csslink = document.getElementById("selectcss");
var selsheet;
var href="";
//logica di selezione
href=_defaultsheet;
for (i in _sheets) {
var sheet = _sheets[i];
//se la geometria del browser è compatibile con il foglio attuale
if (document.body.clientWidth<=sheet.wmax &&
document.body.clientWidth>=sheet.wmin
&& document.body.clientHeight<=sheet.hmax &&
document.body.clientHeight>=sheet.hmin ){
//vediamo se il foglio attuale è più "fine" di quello già selezionato
if (!selsheet ||
(selsheet.wmax-selsheet.wmin > sheet.wmax-sheet.wmin ||
selsheet.hmax-selsheet.hmin > sheet.hmax-sheet.hmin)) {
selsheet = sheet;
}
}
}
if (selsheet) href=selsheet.sheet;
//cambiamo il link al CSS del documento
if (csslink.href != href && href!="") csslink.href = href;
}
/*
Selezioniamo come stile di default quello assegnato inizialmente al
documento
*/
function initSelectCSS() {
var csslink = document.getElementById("selectcss");
if (csslink) setDefaultStyle(csslink.href);
}
function setDefaultStyle(sheet) {
_defaultsheet = sheet;
}
/*
L'utente usa questa API per indicare alla logica di selezione i fogli di
stile disponibili e i corripondenti vincoli
*/
function setStyleForSize(wmin,hmin,wmax,hmax,sheet) {
_sheets.push({"wmin": wmin, "hmin": hmin, "wmax":wmax, "hmax": hmax,
"sheet": sheet});
}
/*
Attiviamo la risposta automatica in base al verificarsi dell'evento resize
della finestra
*/
window.onload = function() {
initSelectCSS();
Revisione 05/11
Pagina 15/16
selectCSS();
window.onresize = selectCSS;
}
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported
License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a
letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.
Revisione 05/11
Pagina 16/16

Layout per le Pagine Web - Dipartimento di Informatica

Transcript

Documenti analoghi

Myspace Layout 150€ Album Artwork 200€ T-shirt Design

design - Colico

scarica il file - INSTANT WEBSITES

Layout cover per box dvd slim.indd

Diapositiva 1 - Università degli Studi della Basilicata

Corso di gestione del tempo/arte di dire no

Responsive Web Design Yes, We Can!

Scuola - Piemonte Immigrazione