JavaScript  »  Articoli  »  JQuery 

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.

• Modulo base
• Modulo con jQuery UI

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.

Altri articoli

Altre guide

Altre newsletter