Il componente TabBar

Abbiamo visto come il componente TabNavigator offra un metodo semplice ma al tempo stesso piuttosto versatile per creare dei sistemi di navigazione “a schede” con buone possibilità di personalizzazione sia per quanto riguarda le intestazioni, sia per quanto concerne la disposizione dei contenuti di ogni scheda.

Flex mette a disposizione un altro componente che consente di avere praticamente le stesse funzioni viste con il TabNavigator, con in più però l’opportunità di mantenere separata la parte con le intestazioni dalla parte visuale: si tratta del componente TabBar, che in cooperazione col componente Viewstacker permette di ottenere comportamenti uguali o simili a quelli visti con il TabNavigator, lasciando però maggiori libertà per il layout data la separazione tra le due componenti.

Il componente TabBar

Avviamo un nuovo Flex Project, quindi portiamoci nella visuale Design per avere accesso ai componenti. Dal pannello components selezioniamo la categoria Navigators, quindi il componente TabBare trasciniamone un’istanza sull’area di lavoro.

Figura 1. Scelta del componente TabBar

Una volta posizionato sullo stage, notiamo come il componente TabBar risulti rappresentato come un rettangolo trasparente con solo il bordo bianco, senza alcuna tab (differentemente da quanto avveniva con il TabNavigator che presentava invece già una tab presente); quando il componente è selezionato possiamo vedere i tasti “+” e “-” per l’aggiunta e la rimozione di voci dal menu.

Figura 2. Il componente posizionato sullo stage

Aggiungere nuove voci

Potremmo pensare che per aggiungere una nuova voce basti selezionare il componente e premere il pulsante + come per il componente TabNavigator: se proviamo a farlo otteniamo però il seguente errore.

Figura 3. Il pannello di errore mostrato

Cosa significa? Semplicemente Flex ci informa che per poter inserire una nuova voce all’interno della TabBar è necessario avere a disposizione sullo stage almeno un’istanza del componente ViewStack, che di fatto costituirà l’area di visualizzazione delle schede. La mancanza di tale componente impedirebbe il funzionamento della TabBar, quindi non possiamo aggiungere voci senza prima inserire un ViewStack sullo stage; portiamoci allora nuovamente nel pannello Componenti, selezioniamo il componente ViewStack (anch’esso presente nella categoria Navigators) e posizioniamolo a piacere sullo stage. Possiamo decidere di assegnare un id al componente dal pannello proprietà oppure lasciare che sia Flex ad assegnarli un id predefinito.

Figura 4. Scelta del componente ViewStack

Il componente, una volta posizionato sullo stage, appare in maniera analoga alla TabBar, ovvero un rettangolo con bordo bianco; quando selezionato mostra i pulsanti “+” e “-” e due frecce, una a sinistra e una a destra.

Dopo aver inserito il componente ViewStack, se proviamo nuovamente ad aggiungere una voce al TabBar apparirà il pannello illustrato in figura.

Figura 5. Aggiunta di una voce alla TabBar

Le opzioni inerenti New view label e View type sono le stesse già viste per il TabNavigator: la prima imposta l’etichetta usata dal TabBar mentre la seconda imposta il tipo di contenitore che verrà usato per la visuale corrispondente nel ViewStack. In questo caso, essendo intestazione e parte visuale separate, dovremo scegliere dalla combo ViewStackID quale sia il componente che mostrerà le varie schede.

Attenzione: non è possibile associare alcune tabelle a un viewstack e alcune a un altro. Ovviamente potremo utilizzare ad esempio due TabBar e due ViewStack, ma l’associazione tra essi deve essere univoca e quindi a ogni TabBar potrà corrispondere solamente un ViewStack.

Aggiungere oggetti ad una scheda

Una volta create una o più visuali potremo andare ad inserire i rispettivi oggetti nel componente ViewStack: nella modalità di design possiamo cliccare sulle intestazioni della TabBar per spostarci tra le visuali corrispondenti, quindi usare il drag & drop per inserire gli oggetti nel ViewStack.

In modalità codice avremo una situazione di questo tipo:

Ovviamente trattandosi di due componenti separati abbiamo una maggior divisione: possiamo notare come il componente TabBar di fatto abbia come proprietà (oltre alle dimensioni) soltanto dataProvider: questo perchè le informazioni sulle etichette da mostrare le ricava dal componente ViewStack.

Tale componente è codificato come un tag che contiene a sua volta diversi sottotag (corripsondenti alle varie visuali), nel nostro esempio <mx:Canvas> e <mx:VDividedBox>, che a loro volta includono poi i vari oggetti (la prima scheda presenta solo un bottone, la seconda un componente HSlider e un DateField).

Con il codice visto sopra, la situazione in visuale Design sarà di questo tipo:

Modificare le proprietà dei contenitori

La modifica per le proprietà dei vari contenitori funziona esattamente come nel componente TabNavigator, basterà selezionare il contenitore desiderato dal componente ViewStack e applicare le modifiche.

Inserire un’icona nelle intestazioni

Anche per l’inserimento di icone nelle intestazioni possiamo utilizzare lo stesso metodo visto per il TabNavigator: basterà operare sui tag dei contenitori presenti nel ViewStack, in questo modo:

Un aspetto per cui dobbiamo cambiare leggermente rispetto al TabNavigator è l’allineamento delle etichette rispetto all’icona: anche in questo caso bisogna utilizzare Actionscript, ma il codice varia rispetto a quanto visto con il TabNavigator.

Molto semplicemente la differenza è che in questo caso utilizziamo direttamente il metodo getChildAt, mentre per il TabNavigator avevamo dovuto usare getTabAt.

Con questo codice, una volta completata la creazione del componente (creationComplete) richiamiamo la funzione init, che va a ricavare le tab del componente (getChildAt(t) all’interno del ciclo) e ne imposta l’allineamento dell’etichetta in base al valore dell’etichetta stessa (notiamo che come nomi abbiamo usato left, right, top e bottom ovvero i possibili valori di allineamento).

Dare diversi stili alle intestazioni

Un’altra possibilità molto interessante che possiamo sfruttare partendo dallo script appena visto è l’associazione di diversi stili alle intestazioni, ovvero l’assegnazione di diverse proprietà ad ognuno dei tab; questo permette di cambiare ad esempio il colore di sfondo di ogni tab della TabBar; basterà modificare la funzione init come di seguito.

Notiamo nell’esempio come ogni tab, quando non selezionata, ha un suo colore specifico.

Ruotare la TabBar

Avere separate le intestazioni dall’area di visualizzazione ci permette di creare effetti e situazioni più o meno “particolari”, per esempio potremmo voler ruotare la TabBar (ad esempio per metterla in verticale accanto all’area di visualizzazione); per questo possiamo utilizzare la proprietà rotation, ma sarà indispensabile prima includere i font nelle label, altrimenti dopo la rotazione queste non risulterebbero visibili.

Per questo possiamo sfruttare i tag <mx:Style>, ad esempio con il seguente codice viene incluso nel file un font non di sistema (Newtown)

Il parametro fontFamily che abbiamo specificato indica con quale stringa dovremo farvi riferimento dalla proprietà fontFamily dell’oggetto TabBar:

Di seguito due risultati di TabBar ruotate rispetivamente di 30 e 90 gradi.

Possiamo quindi concludere dicendo che i componenti TabNavigator e TabBar seppur molto simili risultano anche abbastanza nettamente divisi: per l’uso più “classico”, ovvero con le instazioni subito sopra l’area di visualizzazione, il TabNavigator è più rapido da utilizzare, ma se vogliamo una maggior libertà per il nostro layout, magari per creare qualche effetto “particolare”, il componente TabBar risulta decisamente più efficace.