JavaScript  »  Articoli  »  Ext.js 

Dopo aver effettuato una rapida panoramica su Ext nell'articolo precedente, possiamo finalmente diventare operativi e affrontare due argomenti che ci serviranno a progettare al meglio le nostre interfacce fin da subito: temi e layout.

Lo scopo di questo articolo consiste nell'aiutare i lettori a liberarsi dell'annoso problema di come integrare stili differenti per ogni utente, o di come organizzare i contenuti delle proprie pagine in modo che siano cross-browser. 

Fino a pochi mesi fa (nel mondo informatico, ormai, pochi mesi sono un anno), quando Ext e framework simili non erano diffusi, non era semplice esporre i contenuti delle nostre pagine applicando stylesheet differenti, o rendere i nostri utenti capaci di poter scegliere il tema di colori e di immagini che preferivano per personalizzare la propria navigazione. Ora invece impareremo che possiamo scegliere un set di temi che ci aggradano o crearne facilmente di nuovi e rendere il nostro sito o la nostra applicazione più vicini alle esigenze di chi le utilizza in pochissimo tempo.

Oltre a quello della personalizzazione, poi, si presentava costantemente il problema dell'organizzazione dei contenuti in maniera professionale e cross-browser, senza dover realizzare stylesheet ad hoc per ogni browser o senza scrivere centinaia di righe Javascript per identificare il browser che sta mostrando una determinata pagina.

Un tema, cos'è e come si applica

Nelle interfacce Ext, prende il nome di Xtheme l'aggregazione di stylesheet e immagini utili a cambiare l'aspetto di pannelli, finestre, griglie e quant'altro sia presente nella nostra applicazione. Ext viene rilasciato con il suo caratteristico layout azzurro (default) e con un altro grigio chiaro (xtheme-gray).  Per comprendere al meglio in cosa consista un tema e come lo si applichi, partiremo da una semplice interfaccia e l'arricchiremo della possibilità di scegliere quale tema si preferisce. Come semplice GUI di partenza riprendiamo l'esempio della volta scorsa, visibile qui e scaricabile qui.

Alla fine dell'articolo, il lettore sarà in grado di scrivere e personalizzare interfacce come quella in questo esempio.

Dove si trovano i file degli Xtheme

L'interfaccia che avevamo costruito viene esposta con il default-Xtheme. Se esploriamo il file system in cui si trova la nostra directory Ext, troviamo “resources”, una delle directory più importanti del framework. Dentro a “resources” abbiamo due cartelle che aiutano i lettori più curiosi a capire come sono strutturati i themes: "css" e "images". Dentro a "css" troviamo tutti i file di stylesheet che vengono inclusi da Ext per la visualizzazione default, tramite ext-all.css. Oltre a questi troviamo i file xtheme-*.css che contengono le informazioni utili a cambiare lo stile del nostro applicativo. Come abbiamo detto precedentemente, quindi, nella versione base troviamo solo xtheme-gray.css. Se guardiamo dentro alla directory "images", troviamo una serie di cartelle corrispondenti ai diversi xtheme presenti nella nostra installazione; nel caso della versione base di cui stiamo parlando avremo solo due directory: "default" e "gray". Qui troviamo il set di immagini che occorre ai file di stylesheet per modificare l'aspetto dei vari applicativi.

Altri articoli

Altre guide

Altre newsletter