Nelle interfacce delle applicazioni web moderne, i controlli nativi dei browser come select, checkbox e campi di testo, risultano spesso limitativi per le esigenze di interazione con l'utente. In alcuni casi, ad esempio, avere a disposizione un calendario a comparsa per la selezione delle date facilita l'utente rispetto a dover scegliere da tre menu a discesa, magari controllando il giorno della settimana sul calendario del sistema operativo.
Questi tipi di controlli web ricadono in jQuery UI sotto il nome di Widget. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso associato ad applicazioni del desktop, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l'inserimento dei dati da una pagina web.
Quali Widget?
Un'altra parte del discorso relativa all'utilizzo dei widget è: quali usare e quando?
In linea di principio, è importante utilizzare i widget quando strettamente richiesto, in modo da non sovraccaricare la pagina con eccessivo codice JavaScript in esecuzione, senza lasciarsi abbagliare dai luccichii degli effetti grafici.
In definitiva, non sempre i dati vanno divisi in tab o accordion, oppure non sempre mostrare un messaggio con una finestra modale può migliorare il feedback all'utente (chi di voi non ha mai visto alcuni messaggi di errore di Facebook, trovandoli eccessivamente tecnici).
Widget disponibili
jQuery UI comprende nativamente sei tipi di widget, completamente compatibili con i temi UI generati da Theme Roller (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione.
I widget che vedremo nelle prossime lezioni sono:
- Accordion
- Datepicker
- Dialog
- Progressbar
- Slider
- Tabs
Derivando dalle interazioni, tutti i widget ne prevedono una sintassi simile. È quindi possibile passare un oggetto al metodo che inzializza il controllo, come leggerla e modificarla successivamente:
//inizializzo un widget
$("#accordion").accordion({ active : 2 });
//leggo un'opzione
var active = $("#accordion").accordion("option","active");
// imposto un'opzione
$("#accordion").accordion("option","active",1);Oltre ad option, in generale i widget accettano altri tre metodi:
- destroy: rimuove il widget dall'elemento a cui era associato;
- disable: disabilita temporaneamente il widget;
- enable: abilita il widget nel caso in cui sia stato disabilitato.
Voglio di più!
In un capitolo successivo di questa guida vedremo come estendere jQuery UI con widget personalizzati. Questo processo è semplificato da una nomenclatura e una documentazione abbastanza rigorose, ma proprio per questo è necessario rispettare molte regole e non sempre si raggiunge la flessibilità voluta.