La barra di navigazione di Outlook e' un ottimo esempio di usabilità. Le varie sezioni sono organizzate in macroaree che scorrono lungo una barra verticale. Dentro ad ogni sezione, i dati sono organizzati in sottocategorie. Grazie al dynamic html, quest'effetto è ora alla portata di chiunque. Utilizzeremo Mootools per mostrare come sia possibile creare questa barra con una sola istruzione.
La parte più corposa del nostro codice, non risiede nel codice javascript, potente ma conciso, bensì nel codice html e css. Il menu di cui stiamo parlando prende il nome di accordion. I titoli delle macroaree: Mail, Note e Contacts, si chiamano invece toggler. Un toggler serve per aprire o chiudere l'area immediatamente sottostante. In questo video abbiamo deciso, per convenzione, di chiamare quest'area: elements.
Il disegno di questa graphical user interface (GUI) deve tener presente di alcune particolarità dal punto di vista CSS. Un'area più grande conterrà il corpo e la barra. La barra sarà collocata sulla sinistra grazie all'attributo float uguale a left. Nel foglio css descriveremo gli sfondi, le immagini che devono risiedere dietro a ogni toggler e dietro a tutta la barra.
#body{
overflow:hidden;
background:#D6D7E4;
margin:0px 0px 0px 0px;
font-size:8.5pt;
font-family:Tahoma;
}
#outlook_navigation_bar
{
width:250px;
height:500px;
background:url(img/item_bg.png);
float:left;
border-bottom:1px inset black;
}
#outlookBody{
width:800px;
height:500px;
background:url(img/ictv_logo.png) no-repeat center;
border-bottom:1px inset black;
}
.toggler
{
cursor:pointer;
background:url(img/hd_bg.png) repeat-x;
border-bottom:solid 1px #57566f;
}
Quando indichiamo un layer in particolare, ci riferiamo a quest'ultimo con l'attributo id, in modo da identificarlo precisamente. Un id e' rappresentato nel foglio di stile tramite il simbolo cancelletto o diesis. Se invece dobbiamo parlare di un elemento con caratteristiche che si ripetono, come i tre toggler o gli element, allora ci riferiremo a quest'ultimi come class. Un attributo class è' rappresentato nel foglio di stile da un simbolo punto, nel nostro esempio punto-toggler e' una classe di stile.
E' possibile definire anche il tipo di cursore che si vuole mostrare quando il mouse si colloca sopra ad una zona della nostra pagina. Ad esempio, abbiamo scelto che i toggler presentino una manina quando il mouse si trova sopra di essi.
Il foglio html si distingue in una grossa zona che contiene due componenti: il corpo della pagina e la barra di navigazione. Nella barra di navigazione andiamo ad inserire tre elementi con classe uguale a toggler. Subito sotto ad ognuno dei toggler inseriremo il rispettivo div con classe element.
<div class="toggler" >
<div style="background: url(img/mail_large.gif) no-repeat;">
<span>Mail</span>
</div>
</div>
<div id="mailbar" class="element">
Per rappresentare l'elenco di voci in ogni area utilizzeremo i tag "ul" e "li", tipici delle liste dei fogli html. Come abbiamo visto nel css, questi elementi sono descritti nei dettagli in ogni caratteristica di stile. Per non presentare elementi di numerazione o simboli che identificano i dati nella lista e' stato utilizzato l'attributo list-style-type uguale a none.
<ul>
<li style="background: url(img/mailbox.gif) no-repeat;">Mailbox</li>
<li style="background: url(img/inbox.gif) no-repeat;">Inbox</li>
<li style="background: url(img/drafts.gif) no-repeat;">Drafts</li>
<li style="background: url(img/outbox.gif) no-repeat;">Outbox</li>
<li style="background: url(img/junk.gif) no-repeat;">Junk Mail</li>
<li style="background: url(img/deleted.gif) no-repeat;">Deleted Items</li>
<li style="background: url(img/search.gif) no-repeat;">Search Folders</li>
<li style="background: url(img/sentitems.gif) no-repeat;">Sent Items</li>
</ul>
Se visualizziamo la pagina che abbiamo appena scritto, vedremo un foglio con un elenco delle diverse voci senza nessuna automazione. Lo scopo principale del foglio html era quello di disporre gli oggetti, a renderli intelligenti ci penserà il nostro javascript.
Il codice javascript che aiuterà ad automatizzare il nostro accordion e' molto semplice e nella sua versione base e' possibile scriverlo con una sola istruzione.
var outlookBar = new Accordion($$('.toggler'), $$('.element'));
Gli argomenti del plugin Accordion sono due: i toggler e i content. Utilizzando lo shortcut rappresentato dal doppio dollaro useremo quella caratteristica di MooTools che si chiama Selector. Con un selector possiamo recuperare tutti gli elementi di una pagina html che hanno delle caratteristiche comuni. La caratteristica è rappresentata dall'argomento del selector. Nel nostro caso andremo a inserire punto toggler per rappresentare tutti gli elementi con classe toggler e punto element per rappresentare tutti gli oggetti di classe element.
Se volessimo dare delle informazioni in più al nostro accordion, possiamo usare le proprieta' onActive e onBackground, in cui vanno descritte le funzioni che si devono applicare al toggler e all'element attivi e il comportamento che devono assumere una volta abbandonati.
Questa pagina e' molto semplice e comprensibile. Una volta che sapremo usare i nostri fogli di stile e funzioni come Accordion, i nostri siti assumeranno rapidamente l'aspetto tipico dei siti web 2.0.
