Nelle lezioni introduttive abbiamo visto come la struttura grafica dei widget e delle interazioni di jQuery UI sia in gran parte veicolata dall’inclusione di un file CSS compreso nel pacchetto di installazione.

Dietro a questo file CSS si nasconde un’idea particolarmente innovativa per quanto riguarda i framework UI in JavaScript: quella di tema grafico.

Nel nostro caso il tema grafico che abbiamo sempre utilizzato nei nostri esempi è chiamato smoothness e viene rilasciato insieme alla libreria di base.

La struttura di questo tema rispecchia il markup generato dai vari metodi e widget di UI, spesso molto complessi e verbosi e proprio per questo apparentemente ingestibili nel caso si volessero applicare personalizzazioni per uniformare i controlli alla nostra interfaccia.

In realtà il team di jQuery UI, in collaborazione con Filament Group, ha sviluppato un applicativo online chiamato Themeroller per gestire con semplicità quest’operazione.

Themeroller

Themeroller è un applicativo online raggiungibile all’indirizzo http://jqueryui.com/themeroller/ che permette di modificare il tema base smoothness secondo le proprie esigenze con un alto grado di personalizzazione.

Oltre a questo, mette a disposizione molti temi preconfezionati da scaricare direttamente oppure da usare come base per il propio tema.

Fate attenzione che cliccando sul link di download dei temi verrete reindirizzati all’utility di download di jQuery UI, perciò dovrete scaricare tutto il pacchetto ed estrarre la cartella del tema dala directory css.

Approfondimenti sui temi

La struttura e la nomenclatura che compongono un tema per jQuery UI sono rigidamente standardizzati, per garantire la compatibilità fra il markup generato dalla libreria e la formattazione disponibile via CSS.

Inoltre, ogni tema mette a disposizione classi specifiche per la visualizzazione e la strutturazione di icone, messaggi contestuali ed altre parti dell’interfaccia. A tal riguardo potete fare riferimento a questo articolo, oppure riferirvi direttamente alla documentazione ufficiale

I Video di HTML.it

Giovanni Simotti