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.
Aggiungiamo un Xtheme-selector
Rinominiamo il nostro file esempio.html dell'articolo precedente in theme.html e il suo Javascript in theme.js. Per rendere la nostra pagina capace di cambiare aspetto, dovremo inserire una finestra o una semplice combo box che ci aiutino a scatenare l'evento di scelta del tema da parte dell'utente. Non avendo visto gli elementi form di Ext o le Window (che analizzeremo nei prossimi articoli), procederemo in maniera ibrida e immediata creando del codice HTML che faremo interpretare da Ext in modalità non-obtrusive (il Javascript non-obtrusive è, in poche parole, codice di scripting applicato una volta che il DOM della pagina è stato creato, in maniera da lasciare pulita la nostra pagina HTML e scorporare lo strato della logica da quello della visualizzazione, secondo i più moderni e funzionali pattern di sviluppo).
Pertanto procederemo con la creazione di una semplice zona (nell'esempio è il div con id="exttheme") che conterrà successivamente una combo box all'interno del nostro file HTML di esempio:
<div style="width:100%;height:100%;" > … <div id="content"></div> </div> <div id="exttheme" style="float:left"></div>
Rendere intelligente la combo box e applicare i temi
Ora che abbiamo una combo box, la rendiamo ‘intelligente', attraverso il nostro file di scripting Javascript. Pertanto aggiungeremo il seguente codice:
var themeData = new Ext.data.SimpleStore({
fields: ['display', 'value'],
data: [
['Default (Blue)', ''],
['Gray', '../ext/resources/css/xtheme-gray.css']
]
});
comboTheme = new Ext.form.ComboBox({
store: themeData,
renderTo:'exttheme',
displayField:'display',
typeAhead: true, mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
resizable:false,
listWidth: 230,
width: 230,
valueField: 'value',
value: '' });
comboTheme.on('select',
function(combo){
Ext.util.CSS.swapStyleSheet('theme', combo.getValue());
}
, this);
Lanciando in un qualsiasi browser il file theme.html vedremo la nostra GUI a schede, con una combobox che ci permette di cambiare a runtime tra lo stile grigio chiaro e quello blue di default come in questa pagina.
Come si realizzano e dove si possono scaricare i temi
Personalizzando le directory che abbiamo visto prima di iniziare a creare il nostro esempio, possiamo realizzare nuovi temi abbastanza velocemente, ma se le capacità grafiche dovessere venir meno ai nostri progetti, possiamo contare sulla community Ext e sui thread aperti nella sezione ‘plugin e extra'. Ad esempio, sottoscrivendo il seguente topic potremo essere sempre aggiornati sui nuovi xthemes in condivisione nel forum. I themes saranno sempre disponibili in file zip che contengono una cartella "css" e una "images", in maniera che sovrascrivendo queste cartelle a quelle del nostro file system Ext, avremo i nuovi themes. Questa pratica di sovrascrittura in "resources", è valida anche per plugin ed esempi, in questo modo familiarizzeremo con le nuove funzionalità e installazioni senza compromettere mai né il nostro codice, né il core system di Ext.
Cosa sono i layout
Risolto il problema della personalizzazione passiamo a quello dell'organizzazione dei contenuti. Ext ci viene incontro in questa complessa problematica con un semplice attributo chiamato appunto ‘layout' che possiamo utilizzare nella definizione dei nostri pannelli. In pratica: immaginiamo di voler costruire un layer con titolo ‘UNO' che contiene due elementi ‘uno.uno' e ‘uno.due', che si mostrano alternandosi a fronte del click sul loro titolo. Per far questo dovremmo scrivere svariate righe di Javascript e di CSS, tenendo conto del browser e della versione, etc, etc.; con Ext basterà scrivere:
var panelUNO = new Ext.Panel({
title:'UNO',
layout:'accordion',
items: [
new Ext.Panel({title:‘uno.uno',html:'primo'}),
new Ext.Panel({title:‘uno.due',html:'due'})
]
});
E avremo il nostro pannello cross-browser e con i suoi dinamismi già pronti, semplicemente grazie alla riga con scritto: layout:'accordion'.
I layout disponibili in Ext sono diversi e coprono tutte le esigenze che possono emergere in ambito web e di disegno applicativo. Il sito di Ext ci viene in soccorso grazie a un esempio (presente anche nel file system del pacchetto che scarichiamo dal web) chiamato layout-browser. Qui possiamo vedere pressoché tutti i layout disponibili e una valida applicazione che utilizza a sua volta un layout di tipo border.
In breve possiamo riassumere i layout più utili in questo elenco:
- Absolute: i contenuti hanno una posizione fissa nella pagina
- Accordion: i contenuti sono in una lista con caratteristiche di apertura del pannello corrente e chiusura degli altri.
- Border: i contenuti possono essere collocati in zone (nord, sud, est, ovest, centro)
- Card: i contenuti si alternano a seconda di eventi (ad esempio un wizard).
- Column: i contenuti sono organizzati in colonne
- Fit: i contenuti occupano tutta la pagina (è il layout di default)
- Form: i contenuti sono adatti ad essere presentati in forma di modulo form
Come sempre, un esempio ci verrà in aiuto.
Estendiamo l'esempio con un layout per ogni tab
Copiamo il nostro esempio dei temi in un altro file di nome layout.html e iniziamo a lavorare su quello. L'HTML rimarrà uguale e identico, tranne il Javascript che viene incluso, che non sarà più theme.js ma layout.js, in modo da tenere i nostri due esempi separati.
Estendiamo i diversi contenuti HTML che avevamo settato nell'attributo ‘html' dei vari tab, aggiungendo l'attributo layout e i contenuti che vogliamo esporre. Otterremo un codice simile a questo:
items:[{
title: 'Io contengo dei pannelli accordion',
frame:true,layout:'accordion',
items: [
new Ext.Panel({title:'Primo accordion',frame:true,
html:'Contenuto del primo accordion'}),
new Ext.Panel({title:'Secondo accordion',frame:true,
html:'Contenuto del secondo accordion'}),
new Ext.Panel({title:'Terzo accordion',frame:true,
html:'Contenuto del primo accordion'}),
new Ext.Panel({title:'Quarto accordion',frame:true,
html:'Contenuto del secondo accordion'})
]
},{
title: 'Io contengo tre pannelli con layout border',
frame:true, layout:'fit',layout:'border',
items: [
{title: 'Footer',region: 'south',frame:true,
html:'Contenuto del pannello di sotto'},
{title: 'Navigation',region:'west',frame:true,
html:'Contenuto del pannello di sinistra'},
{title: 'Main Content',region:'center',
frame:true,collapsible:false,
html:'Contenuto del pannello centrale'}
]
},{
title: 'Io contengo un esempio di Card layout',
frame:true,
id:'card-panel',
layout:'card',
activeItem: 0, // index or id
bbar: ['->', {id: 'card-prev',
text: '« Precedente',
handler: cardNav.createDelegate(this, [-1]),
disabled: true},{id: 'card-next',
text: 'Successivo »',
handler: cardNav.createDelegate(this, [1])
}],
items: [{id: 'card-0',html: 'Contenuto del primo pannello!'},
{id: 'card-1',html: 'Contenuto del secondo'},
{id: 'card-2',html: 'Terzo pannello!'}]
}]
L'esempio completo è visibile in questa pagina.
È anche disponibile un pacchetto zip contenente tutto quanto visto nel corso dell'articolo.
Conclusioni e anticipazioni
Con questo articolo, abbiamo voluto fornire una panoramica su temi e layout e due esempi completi e funzionanti che possono essere riutilizzati per i propri siti. In questo abbiamo preso ulteriormente confidenza con la struttura JSON tipica delle strutture Ext, inoltre siamo pronti ad affrontare nei prossimi articoli l'utilizzo più approfondito degli elementi che compongono le interfacce Ext.
