Uno dei fattori che ha contribuito alla diffusione e al successo delle moderne applicazioni web è il loro elevato livello di interattività: i tempi in cui le pagine web veicolavano solo testi e immagini sono ormai lontani.
Nel tempo, fra gli sviluppatori, si sono affermate varie soluzioni, sotto forma di framework per la creazione di interfacce ricche e dinamiche, per ottenere questi elevati livelli di interattività; una di queste è ExtJS, con il suo approccio prettamente basato su JavaScript, mentre per chi sviluppa con Mootools 1.2 è disponibile MochaUI, che si appoggia all'elemento canvas per realizzare la struttura grafica delle finestre e dei controlli.
jQuery UI
Sul fronte jQuery, nonostante la diffusione di questo framework, fino a qualche tempo fa non erano disponibili soluzioni all-in-one, ma le feature puramente legate all'interfaccia grafica erano sviluppate secondo la logica dei plugin di terze parti, questo soprattutto dopo che la compatibilità dei componenti Interface Elements si è fermata alla versione 1.1.2 di jQuery.
Il lato debole di questo approccio era evidentemente la frammentarietà del codice sotto un punto di vista progettuale (soprattutto nel debug) e della coerenza sintattica nei nomi e nei parametri da usare. Inoltre non era possibile definire degli standard per gli stili grafici, csa che costringeva lo sviluppatore finale alla scrittura (o riscrittura) di buona parte del CSS per uniformare colori e icone.
A questo problema ha risposto con una certa efficacia il progetto jQuery UI che però nelle sue prime versioni ha sofferto di qualche problema di stabilità, nonché di alcune sbavature nelle routine degli effetti grafici che rendevano le animazioni "scattose" rispetto ad altre librerie come MooTools.
Con l'uscita delle versioni 1.3 di jQuery e 1.6RC6 di jQuery UI, il codice ha ora raggiunto la maturità necessaria per poter essere utilizzato in un ambiente di produzione, fornendo insieme ad una serie di effetti e componenti UI anche un framework CSS per la gestione dei temi.
In particolare il team di sviluppo si è concentrato sull'ottimizzazione del codice esistente, riscrivendo praticamente da zero alcuni plugin, modificando il codice HTML generato e la struttura delle classi richiamate dinamicamente.
Tavolo di prova: jQuery UI 1.6RC6
Nota bene: Il contenuto di questo articolo è basato sulla release 1.6RC6 che da pochissimi giorni è stata promossa a release ufficiale con l'identificazione 1.7. Riferimenti: jQuery UI 1.7 Is The New 1.6, jQuery UI 1.7.
Nonostante al momento non sia ancora stato rilasciato un changelog completo, alcune novità della versione 1.6 sono apprezzabili anche per gli sviluppatori meno esperti. Tuttavia, prima di approfondirle, vediamo un esempio che rende l'idea di alcune delle feature messe a disposizione per arricchire l'interazione dell'utente con le pagine web.
Applicando ai campi del modulo e alla finestre di dialogo i widget e le interazioni di jQuery UI non solo rendiamo più intuitiva l'interazione con l'utente, ma abbiamo la possibilità di gestire al meglio la resa grafica dell'interfaccia a prescindere del browser in uso.
Una nota a margine: poiché la versione attuale è una release candidate potrebbero esserci alcune "sbavature" nel codice JS e CSS. Nel caso precedente il controllo dinamico dello slider si sovrapponeva al calendario; per correggere l'errore basta inserire nel CSS questo codice:
.ui-datepicker { z-index:3; }
Widget
Tutto il codice dei widget è stato rivisto e standardizzato sia per quanto riguarda i metodi interni, sia relativamente alla gestione degli argomenti passati ai metodi pubblici. Partendo da questo assunto il codice base necessario al funzionamento dei plugin è:
$('#mioId').nomewidget({opzioni...}); // inizializzo un widget
$('#mioId').nomewidget('azione'); // richiamo un'azione ('open','close'...)
$('#mioId').nomewidget('option','value'); // restituisce il valore di un'opzione
$('#mioId').nomewidget('option','value','valore'); // imposta il valore di un'opzione
Questa struttura è valida sia per l'utilizzo dei componenti esistenti, sia nel caso vogliate realizzare e ridistribuire codice di vostra produzione. Inoltre, poiché nella maggior parte dei casi i metodi dei widget restituiscono un oggetto jQuery, è possibile concatenare effetti ed interazioni come in questo esempio:
$('#tabs').tabs().find(".ui-tabs-nav").sortable();
In questo modo rendiamo le linguette del widget Tabs ordinabili (esempio).
L'idea di estendibilità della libreria di widget è alla base di una sua sostanziale revisione che va oltre la pura semplificazione, ma rivela la volontà di fornire una UI di base estendibile e personalizzabile, capace di offrire strumenti avanzati allo sviluppatore senza legarlo a percorsi obbligati nella realizzazione dell'interfaccia utente.
In questo senso un primo lavoro è stato fatto ottimizzando il widget Datepicker, reso più pulito nella sua implementazione di default eliminando le select dei mesi e i controlli di azzeramento (clear) e chiusura, mentre Slider è stato profondamente rivisto ripulendo l'HTML di base ed affidandosi ad uno controllo molto semplice che da la possibilità di orientare il widget sia orizzontalmente che verticalmente. In quest'ultimo caso è già presente un'implementazione avanzata del widget che ne estende le funzionalità.
L'ultimo widget utilizzato nel modulo di esempio, Dialog, ha anch'esso subito alcune migliorie (e l'aggiunta di un layout grafico di base che richiama Facebook), tuttavia è vittima di alcuni bug legati al dragging che ne limitano la fluidità nell'animazione.
Un altro widget che ha subito un esteso lavoro di riscrittura nonostante la continuità nelle funzioni è Tabs, mentre Accordion presenta finalmente un'animazione fluida al pari di altre librerie, anche se la miglioria è legata alla generale revisione degli effetti grafici di jQuery (esempio).
La panoramica sui widget si chiude con l'unica aggiunta alla libreria rispetto alla serie 1.5: Progress Bar, un componente tanto semplice quanto utile in ambiti come i moduli di registrazione o di pagamento (esempio).
Interazioni ed effetti
Effetti e interazioni rappresentano sia una solida base su cui costruire i widget, sia un potente complemento per la realizzazione di un'interfaccia utente complessa.
Strumenti come Selectable e Sortable, seppur ormai largamente diffusi, sono senza dubbio molto utili ed estremamente efficaci nell'interazione dell'utente con gli elementi della pagina. Da ricordare che se volete preservare gli eventi associati ai nodi interni degli elementi selezionabili dovrete filtrarli attraverso l'opzione cancel:
$("#selectable").selectable({cancel :'a'});
Un altro problema nel quale potreste imbattervi è che all'evento click (senza tasto Ctrl) è associata la selezione del singolo elemento ma non la sua deselezione. In realtà la deselezione avviene se l'utente clicca nel contenitore degli elementi selezionabili, ma poiché quest'opzione è poco intuitiva, fino alla risoluzione del problema è buona norma fornire all'utente un'azione Deseleziona tutto simile a questa:
<a href="javascript:void(0)" onClick="$('#selectable .ui-selected').removeClass('ui-selected');">Deseleziona tutto</a>
Una parte di codice che stata completamente rivista è quella relativa a Droppable, con l'aggiunta di un'opzione greedy in grado di filtrare il target in cui viene rilasciato un elemento anche in tag annidati (esempio).
L'unica parte delle librerie UI che forse non ha subito grosse modifiche è quella relativa agli effetti grafici avanzati, che comunque sono stati sottoposti ad un esteso processo di revisione e bugfix e godono delle migliorie apportate in generale alla fludità di tutti gli effetti jQuery.
In conclusione, nell'attesa dell'uscita della versione definitiva prevista a breve, jQuery UI dimostra finalmente di essere un progetto maturo per ambienti di produzione, sostenuto da un team di sviluppo attivo e da collaborazioni interessanti (soprattutto Filament Group che gestisce il motore dei temi e lo sviluppo di widget avanzati).
Riferimenti:
Tutti gli esempi visti sono disponibili per il download.
