Dopo aver offerto nell'articolo precedente una panoramica sulle novità di jQuery UI 1.7, introduciamo in questo appuntamento uno degli aspetti più di questa release: l'introduzione di un tema grafico uniforme per i controlli, i titoli e le aree di interazione, nonché la possibilità di personalizzarlo attraverso un intuitivo strumento online chiamato Theme Roller sviluppato da Filament Group.
Seguendo la scia di questa fortunata collaborazione, il team di sviluppo ha presentato, a partire dalla release 1.6, una nuova strutturazione dei temi e una rinnovata interfaccia per Theme Roller ancora più ricca di opzioni e di temi di base da cui prendere spunto.
Insieme a questa revisione, è stato definito anche un Framework CSS di base utile per lo sviluppo di temi compatibili, ma anche per la gestione standardizzata delle classi CSS all'interno dei componenti.
Da notare, comunque, che il framework copre esclusivamente la presentazione cromatica, le icone e alcune opzioni strutturali dell'interfaccia grafica, tralasciando tutte le regole e le ottimizzazioni inserite nei framework CSS canonici.
Il framework CSS di jQuery UI
Per semplicità è possibile raggruppare le regole messe a disposizione dal framework CSS in:
- Helpers
- Interaction states/cues
- Icons
- Corners
Helpers
Le classi CSS ui-helper possono essere utilizzate per alcune operazioni comuni come modificare la proprietà display (.ui-helper-hidden), correggere il clear dei contenitori di elementi flottanti (.ui-helper-clearfix) o ancora per azzerare le proprietà di un elemento (.ui-helper-reset). Quest'ultima funzione risulta utile per ripulire i tag a quando usati come base per bottoni grafici.
State/cues
Attraverso le classi ui-state possiamo impostare sia lo stato di un elemento nell'interazione con il mouse sia arricchirne il significato nel complesso dell'interfaccia, mantenendo inalterata l'uniformità della resa grafica (esempio).
Nell'esempio precedente è da notare come alcune classi siano state studiate per presentare sia i controlli, sia elementi dell'interfaccia come barre e titoli. Molto interessante è anche la possibilità di indicare graficamente la priorità di alcuni elementi rispetto ad altri (esempio).
Icons
Una delle modifiche più vistose alla struttura dei temi di jQuery UI riguarda la gestione delle icone. Infatti, se prima venivano gestite attraverso singole immagini 16x16, ora viene utilizzata un'unica immagine e ogni icona è realizzata con la tecnica degli sprites. Questa tecnica riduce i ritardi nel caricamento delle icone e diminuisce il numero di richieste inviate al server, ottimizzando in generale le prestazione dell'interfaccia.
A sua volta l'utilizzo di sprites rende, come vedremo più avanti, più macchinosa la realizzazione delle icone all'interno dei menu e dei pulsanti, obbligando lo sviluppatore ad introdurre codice HTML supplementare.
Corners
Un ultimo gruppo di classi riguarda la realizzazione di angoli arrotondati, che possono coinvolgere tutti i vertici di un elemento oppure solo alcuni di essi. Da notare che queste classi sfruttano la proprietà border-radius nativa in Firefox e Safari, mentre in Internet Explorer gli angoli degli elementi non verranno smussati. Comprensibilmente la scelta degli sviluppatori è stata quella di fornire agli utenti con browser più avanzati una grafica migliore lasciando che l'interfaccia degradasse per gli altri utenti, come suggerito dall'approccio del progressive enhancement. Per chi avesse necessità di visualizzare gli angoli arrotondati anche su IE è comunque disponibile una soluzione basata su JavaScript e VML.
Bottoni e interazioni con jQuery UI
Per capire meglio le potenzialità del framework CSS di jQuery UI realizzeremo un pulsante applicando successivamente alcune interazioni JavaScript con jQuery.
Come HTML di base utilizzeremo un tag a, associandogli la classe .ui-helper-reset per azzerarne le proprietà di default:
<a href="#" class="ui-helper-reset">Accetta</a>
Poiché il framework CSS non gestisce direttamente le dimensioni e le proprietà spaziali degli elementi dovremo realizzare una classe personalizzata per questo scopo:
.my-button {
margin:0 4px 0 0;
padding: .4em 1em;
cursor:pointer;
position: relative; /* ci servirà più tardi per posizionare le icone */
text-align: center;
zoom: 1; /* per correggere gli errori di visualizzazione in IE */
}
A questo punto possiamo applicare gli stili del pulsante nello stato di default:
<a href="#" class="ui-helper-reset my-button ui-state-default ui-corner-all">Accetta</a>
Sebbene a questo punto la resa grafica del pulsante sia già buona, potremmo aggiungere un'icona per renderlo più intuitivo. Come detto prima le icone sono gestite con la tecnica degli sprites, quindi utilizziamo un tag span vuoto come contenitore ed aggiugiamo alcune regole CSS personalizzate:
<a href="#" class="ui-helper-reset my-button ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Accetta</a>
CSS:
.my-button .ui-icon {
position:absolute;
top:50%;
left:0;
margin-top:-8px;
margin-left:0;
}
Infine, con l'ausilio di jQuery applichiamo gli effetti per mouseover e click:
$(function () {
$('.my-button').hover(
function() {
$(this).addClass('ui-state-hover');
},
function () {
$(this).removeClass('ui-state-hover');
})
.bind("mousedown mouseup",
function (e) {
$(this).toggleClass("ui-state-active",(e.type == "mousedown"));
}
);
});
Ecco l'esempio completo con i vari passaggi.
Theme Roller
È inevitabile pensare che il codice necessario per realizzare un semplice bottone sia eccessivamente prolisso; tuttavia, a partire dalla stessa tecnica è possibile realizzare gruppi di bottoni da inserire nelle barre di controllo delle applicazioni web, sempre mantenendo inalterata l'unifomità degli stili. Potete trovare alcuni esempi in questa demo messa a disposizione dagli sviluppatori.
Oltre a questo va notato che la frammentazione delle regole CSS è funzionale alla modularità del framework, utile per lo sviluppo di nuovi widget compatibili con jQuery UI.
Partendo da queste considerazioni gli sviluppatori hanno realizzato Theme Roller, un'intuitiva applicazione web che permette di personalizzare l'aspetto dei temi a partire da un nutrito gruppo di esempi, per poi scaricarlo sotto forma di archivio compresso pronto all'uso.
Nella sua ultima versione Theme Roller è disponibile anche come bookmarklet per Firefox, un modo intelligente di aggiustare le impostazioni del tema direttamente in fase di sviluppo all'interno dell'applicazione per raggiungere risultati ottimali con facilità oppure per provare variazioni grafiche live.
Riferimenti:
Tutti gli esempi sono disponibili per il download.
