I temi non sono un concetto nuovo. Probabilmente ne avete già creati alcuni utilizzando gli stili e le classi di Cascading Style Sheet (CSS) per formattare l’aspetto dei vostri siti web. Usare un framework standardizza l’approccio e riduce la quantità di lavoro e di codice da scrivere.

jQuery UI è ora lo standard industriale per l’implementazione dei temi. Ci sono altre scelte, come Dojo (accoppiato con Dijit) o Ext JS, ma jQuery UI combina i temi con l’uso di widget, che sono gli elementi con cui gli utenti interagiscono data pickers o pulsanti. Sezionando il funzionamento interno dei file che compongono un tema jQuery UI, ciò che si trova non è altro che CSS e JavaScript. Ma è il processo di pensiero e la standardizzazione che sono andati in questo uso di CSS e JavaScript che rende jQuery UI una piattaforma così eccellente per costruire l’aspetto di un sito web.

Temi di jQuery UI

La piattaforma jQuery UI consiste di due sub-frameworks: un widget framework, che contiene la Widget Factory e un set di widget di uso comune, e il framework CSS. La Widget Factory fornisce la base per tutti i widget di jQuery UI, compresi i widget comuni inclusi nell’insieme dei widget. Quando si creano i widget, utilizzare uno dei widget comuni dall’insieme come punto di partenza o crearne uno da zero. Una volta che sai dove sono i widget comuni, apri uno di essi nel tuo editor preferito e visualizza il codice. Da lì, modificate questo codice e generate un widget personalizzato (usando uno degli altri widget come punto di partenza) o createne uno con una struttura simile.

La struttura delle cartelle dei temi di jQuery UI

Prima di continuare a guardare i vari file e il loro contenuto, scarica uno dei temi dalla piattaforma jQuery UI (vedi Argomenti correlati per un link). Il file ZIP scaricato contiene tre cartelle: css, js, e development-bundle. La cartella development-bundle contiene una cartella chiamata themes, che è dove sono tenuti i temi jQuery UI in sviluppo. La cartella themes a sua volta contiene una cartella con il nome del tema selezionato/scaricato (come UI lightness) e una cartella chiamata base. Questa cartella contiene un punto di partenza per i propri temi. Viene sempre scaricata, indipendentemente dal tema selezionato.

La cartella css contiene una cartella con il nome del tema scaricato. Questa cartella del tema contiene un file CSS che incorpora il markup CSS per tutti i componenti o i widget. La cartella development-bundle, tuttavia, contiene anche una cartella themes/ (dove è il nome effettivo del tema scelto) che contiene i singoli file CSS per ogni componente o widget. Questa struttura rende più facile trovare e modificare le modifiche nei propri temi. La figura 1 mostra la struttura della cartella dei temi.

Figura 1. Struttura della cartella themes

Vedi immagine a dimensione intera

Non tutti i file della cartella sono elencati nella Figura 1, ma quelli importanti sono qui. Il file jquery.ui.all.css importa i file jquery.ui.base.css e jquery.ui.theme.css, rendendo facile l’importazione dei file usando solo il file jquery.ui.all.css. Il file jquery.ui.base.css importa il file jquery.ui.core.css e tutti gli altri file di componenti e widget dalla stessa cartella (non mostrata nella Figura 1.). Il file jquery.ui.core.css contiene classi comuni condivise da tutti i file widget. Fornisce le classi CSS di base per tutti i widget jQuery UI (all’interno del tema) così come visibilità e posizionamento comuni per i widget. L’ultimo importante file è il file jquery.ui.theme.css, che fornisce l’aspetto comune e il comportamento condiviso da tutti i widget nel tema e dal tema stesso.

Il file jquery.ui.theme.css ha tre diversi tipi di stili:

• Container – Questo stile definisce il tema contenitore, come ui-widget, ui-widget-content o ui-widget-header.
• Stati – Questo tipo di stile è usato dai widget jQuery UI per definire l’aspetto del widget quando l’utente interagisce con esso. Le classi includono ui-state-default, ui-state-hover e ui-state-active.
• Cues – Quando succede qualcosa nell’applicazione (non per azione dell’utente), queste classi cambiano l’aspetto del widget. Le classi includono ui-state-highlight, ui-state-error e ui-state-disabled.

Widget comuni

Questa sezione guarda il codice di esempio che usa alcuni widget comuni per costruire un’applicazione di esempio. Questo esempio contiene un widget cursore, un pulsante che apre una finestra di dialogo e una finestra di dialogo che visualizza il valore corrente del cursore ogni volta che viene aperto. La figura 2 fornisce un’istantanea dell’applicazione.

Figura 2. Un’applicazione di esempio che usa widget comuni

Vedi l’immagine a grandezza naturale

L’elenco 1 fornisce il file indice HTML.

L’elenco 1. Applicazione di esempio che usa widget comuni

L’elenco 2 mostra il file JavaScript associato (index.js).

L’elenco 2. Il file JavaScript associato per l’applicazione di esempio

L’impostazione iniziale ha luogo nell’intestazione con il seguente codice:

Dopo il collegamento nel CSS, i file JavaScript sono inclusi.

I tre widget in questa applicazione sono definiti usando le dichiarazioni <div> per la maggior parte (tranne il pulsante, che ha già un tag in HTML). Questi widget sono definiti nel seguente codice:

<div style="margin-bottom:10px;"></div><button>Display Value</button><div></div>

Infine, ritarda la costruzione effettiva dei widget nel codice JavaScript fino a quando la pagina non è stata caricata completamente dal browser, come mostrato nel listato 3.

Lista 3. Costruzione dei widget

Ogni widget già menzionato è costruito con questo codice. La finestra di dialogo e il pulsante sono entrambi funzioni assegnate a eventi specifici. Per esempio, all’evento click del pulsante viene detto che deve aprire la finestra di dialogo quando viene cliccato. Per quanto riguarda la finestra di dialogo, le viene detto di cambiare il suo testo per indicare il valore corrente del cursore, cosa che fa ogni volta che viene aperta.

Ci sono due modi per cambiare l’aspetto di un widget. Potete passare dei valori al costruttore, insieme a qualsiasi parametro del costruttore richiesto per il widget. Per esempio:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Oppure puoi chiamare i metodi sul widget dopo che è stato creato, come segue.

$("#dlg_popup").dialog({ draggable: false });

La maggior parte dei widget comuni hanno molte opzioni associate che possono essere impostate. Inoltre, se si sceglie di ignorare queste opzioni, i widget le impostano su valori predefiniti, permettendo di impostare e modificare ciò che è necessario.

Eventi dei widget

Perché i widget sono fondamentalmente oggetti JavaScript, possono essere impostati con eventi che scattano durante la vita dell’applicazione web. Quando questi eventi si attivano, vengono catturati dal codice JavaScript fornito dal tuo sito web o gestiti all’interno dei widget (l’impostazione predefinita).

L’implementazione del comportamento predefinito dei widget è ben documentata dal team di jQuery UI per ogni widget comune. È possibile iniettare il proprio codice, tuttavia, per gestire uno o più eventi di un widget scelto. Ecco un esempio di codice per impostare la ricezione di un evento:

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... }});

Questo particolare esempio si aggancia all’evento drag, che si attiva quando la finestra di dialogo viene trascinata. L’ellissi (…) mostrata nell’esempio è dove il codice individuale può essere posizionato per gestire e implementare il codice dell’evento.

Metodi dei widget

I metodi (come in ogni linguaggio familiare) sono associati al widget e permettono l’esecuzione di funzionalità pre-scritte su un particolare widget per fargli eseguire una specifica azione. Ecco un esempio di chiamata al metodo di un widget:

$("#dlg_popup").dialog("moveToTop");

Concettualmente, opzioni e metodi sono diversi. Si noti, tuttavia, che il valore di un’opzione può essere cambiato o recuperato usando un’implementazione simile al metodo, come mostrato nel seguente esempio.

$("#dlg_popup").dialog("option", "autoOpen", false);

Cambio di temi

Il codice può essere incluso nei file HTML e JavaScript che danno la possibilità di cambiare tema al volo usando un menu a discesa. Il listato 4 mostra le modifiche al codice sorgente HTML per fare un tale cambiamento.

Lista 4. Cambiare temi al volo

Il listato 5 mostra il codice sorgente JavaScript.

Lista 5. Codice sorgente JavaScript per cambiare i temi al volo

$(document).ready(function(){ $('#switcher').themeswitcher();...});

La figura 3 mostra l’applicazione di esempio dopo queste modifiche.

Figura 3. L’applicazione di esempio dopo le modifiche al codice

Vedi l’immagine a grandezza naturale

Esegui nuovamente la pagina HTML nel tuo browser e visualizza i risultati. Ora puoi fare clic sull’elenco a discesa per cambiare il tema. Il tema selezionato viene scaricato in background se necessario.

Anche se l’uso dello strumento di cambio tema va bene per siti non di produzione (per testare e visualizzare i risultati), non è una buona idea per siti di produzione. Lo strumento si basa su un server di terze parti per ospitare i temi, e non sarai sicuro dei risultati che l’utente vedrà.

Un altro modo per testare i temi di jQuery UI è usare lo strumento ThemeRoller, che è disponibile solo per Mozilla Firefox (vedi Argomenti correlati per un link). Dopo aver installato lo strumento (come bookmarklet in Firefox), apri la galleria e seleziona i temi per visualizzarli. Scegli un tema e clicca sul link di download. Una volta scaricato, estrai la cartella del tema, mettila nella tua cartella jQuery UI e punta i tuoi file HTML ad essa.

Questo strumento è molto più utile che per cambiare semplicemente i temi, però. Ti permette anche di costruire temi personalizzati più facilmente che se dovessi lanciarli a mano.

Creazione di temi unici

Utilizzando il sito ThemeRoller (che gira nei browser più popolari; vedi Argomenti correlati per un link), si possono apportare modifiche ad un tema jQuery esistente (come punto di partenza) per creare un tema unico. Facendo così si elimina la necessità di creare il tema da zero. Significa anche che non è richiesta esperienza in CSS, e lo strumento permette di visualizzare al volo le modifiche ai temi e ai widget esistenti. La figura 4 mostra il sito ThemeRoller (da non confondere con il bookmarklet ThemeRoller, che gira in Firefox).

Figura 4. Il sito ThemeRoller

Vedi l’immagine a grandezza naturale

Cliccando sulla galleria è possibile selezionare uno dei temi esistenti. Facendo ciò, si cambiano gli stili CSS e le immagini che i widget di esempio utilizzano per riflettere il cambiamento. Facendo clic sul pulsante Modifica associato a un tema ti porta alla scheda “Roll Your Own”, dove puoi apportare modifiche agli stili CSS associati al tema. Se non scegli un tema da modificare e inizi dalla scheda “Roll Your Own” senza un tema selezionato, stai semplicemente costruendo un tema da zero.

Infine, cliccando su Scarica tema si scarica il tema selezionato come tema personalizzato contenente tutte le tue modifiche al tema. Nota che jQuery UI e i suoi temi supportano molte caratteristiche CSS3, il che significa che tutti i principali browser sono supportati (tranne le versioni precedenti di Windows Internet Explorer).

La scheda “Roll Your Own” di ThemeRoller è ben organizzata in modo che tu possa trovare e modificare rapidamente ciò che stai cercando. La scheda contiene le seguenti sezioni importanti (tra le altre):

• Impostazioni font – Permette modifiche generali al font usato in tutto il tema.
• Raggio d’angolo – Controlla l’arrotondamento (o la mancanza) degli angoli per i vari widget.
• Intestazione/barra degli strumenti – Fornisce l’aspetto delle intestazioni usate nei vari widget.
• Content – Fornisce le impostazioni per controllare il corpo principale dei widget.
• Clickable – Controlla vari stati che i widget utilizzano.

Cliccando tra le opzioni, noterai alcune cose interessanti sulla costruzione di questi temi. Per esempio, i temi jQuery UI sfruttano le texture. Per vederle in uso, clicca su Header/Toolbar in ThemeRoller. Poi clicca sul pulsante colorato al centro. Viene rivelata una paletta a discesa che contiene dei motivi tra cui scegliere. La texture selezionata è combinata con la tua scelta del colore di sfondo per produrre il motivo che usano le intestazioni e le barre degli strumenti. Questo è solo un uso delle texture. Ce ne sono altri nei temi di jQuery UI. Per esempio, modificare la texture in “Clickable: default state” per vedere come il cambiamento influisce sui pulsanti nel tema selezionato.

Una caratteristica interessante dei temi di jQuery UI è l’uso di evidenziazioni ed errori (conosciuti anche come spunti visivi). ThemeRoller fornisce un controllo completo su come questi spunti visivi vengono mostrati agli utenti. La texture, il colore dello sfondo, gli angoli del contorno, il colore del testo e persino il colore dell’icona possono essere cambiati (se un’icona è visualizzata nel cue). I nomi di questi stili sono visualizzati in ThemeRoller, quindi usa semplicemente questi nomi nei tuoi siti web per avere questi stili applicati come necessario al testo mostrato agli utenti.

Modificare le varie impostazioni produce cambiamenti all’URL nel tuo browser. Il listato 6 fornisce un URL come esempio.

Il listato 6. Esempio di URL di ThemeRoller

Salva e poi ripristina questo URL per tornare e fare ulteriori modifiche alle impostazioni. Per esempio, copia l’URL dopo aver fatto le modifiche e incollalo da qualche parte per tenerlo al sicuro. Ora, chiudi il tuo browser (o la scheda del browser che contiene il sito ThemeRoller) e riaprilo usando l’URL copiato. Come puoi vedere, tutte le tue modifiche sono tornate, pronte per ulteriori modifiche.

Conclusione

Si può dire molto di più sugli interni di jQuery UI, ma si dovrebbero avere le basi necessarie per iniziare a sperimentare con i temi di jQuery UI. Hai visto la struttura delle cartelle e dei file che ti permetteranno di modificare un tema. Puoi vedere o usare questi file come punto di partenza per creare i tuoi temi quando sei pronto.

Questo articolo ha anche trattato ThemeRoller e le pagine web associate che supportano la modifica di temi esistenti e la creazione di nuovi temi da zero. Infine, hai esplorato il processo di salvataggio e ripristino delle modifiche del tema sul sito web di ThemeRoller.

Risorse scaricabili

• PDF di questo contenuto

• piattaforma jQuery UI: Scarica jQuery UI per testare e seguire questo articolo e gli esempi che fornisce.
• ThemeRoller: Controlla il sito ThemeRoller, che ti permette di testare i temi esistenti dalla piattaforma jQuery UI, personalizzare i temi esistenti o creare temi personalizzati.
• developerWorks Zona di sviluppo web: Trova articoli che coprono varie soluzioni basate sul web. Vedi la biblioteca tecnica di sviluppo Web per una vasta gamma di articoli tecnici e suggerimenti, tutorial, standard e Redbooks IBM.
• Versioni di valutazione dei prodotti IBM: Scarica e metti le mani sugli strumenti di sviluppo delle applicazioni e sui prodotti middleware di DB2, Lotus, Rational, Tivoli e WebSphere.
• developerWorks su Twitter: Iscriviti oggi per seguire i tweet di developerWorks.