
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Il componente che consente di avere le stesse funzioni viste con il TabNavigator, con in più l’opportunità di mantenere separata la parte delle intestazioni dalla parte visuale
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.
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.
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.
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.
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.
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.
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.
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:
<mx:TabBar x=”10″ y=”19″ dataProvider=”viewstack1″>
</mx:TabBar>
<mx:ViewStack x=”172″ y=”178″ id=”viewstack1″ width=”200″ height=”200″>
<mx:Canvas label=”Scheda uno” width=”100%” height=”100%”>
<mx:Button x=”10″ y=”10″ label=”Button”/>
</mx:Canvas>
<mx:VDividedBox label=”Scheda due”>
<mx:HSlider/>
<mx:DateField height=”80″/>
</mx:VDividedBox>
</mx:ViewStack>
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:
TabBar con due schede
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.
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:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”400″ >
<mx:TabBar x=”10″ y=”19″ dataProvider=”viewstack1″>
</mx:TabBar>
<mx:ViewStack x=”172″ y=”178″ id=”viewstack1″ width=”200″ height=”200″>
<mx:Canvas label=”Scheda uno” icon="@Embed('icona.png')"
width=”100%” height=”100%” backgroundColor=”#FFFFFF”>
<mx:Button x=”10″ y=”10″ label=”Button”/>
</mx:Canvas>
<mx:VDividedBox label=”Scheda due”>
<mx:HSlider/>
<mx:DateField height=”80″/>
</mx:VDividedBox>
</mx:ViewStack>
</mx:Application>
Situazione con dueschede, di cui la prima provvista di icona
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.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”400″ backgroundColor=”white”>
<mx:Script>
<![CDATA[
private function init():void {
import mx.controls.tabBarClasses.Tab
var len:uint = tab_bar.numChildren;
for (var t:uint=0; t<len; t++) {
var tab:Tab = tab_bar.getChildAt(t) as Tab
tab.labelPlacement = tab.label;
}
}
]]>
</mx:Script>
<mx:TabBar x=”10″ y=”19″ id=”tab_bar” dataProvider=”viewstack1″ creationComplete=”init()”>
</mx:TabBar>
<mx:ViewStack x=”172″ y=”178″ id=”viewstack1″ width=”200″ height=”200″>
<mx:Canvas label=”left” icon=”@Embed(‘icona.png’)” width=”100%” height=”100%”>
</mx:Canvas>
<mx:Canvas label=”right” icon=”@Embed(‘icona.png’)” width=”100%” height=”100%”>
</mx:Canvas>
<mx:Canvas label=”top” icon=”@Embed(‘icona.png’)” width=”100%” height=”100%”>
</mx:Canvas>
<mx:Canvas label=”bottom” icon=”@Embed(‘icona.png’)” width=”100%” height=”100%”>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
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).
TabBar con differenti allineamenti per le etichette
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.
<mx:Script>
<![CDATA[
private function init():void {
import mx.controls.tabBarClasses.Tab
var colori:Array = [“red”, “haloOrange”, “yellow”, “haloGreen”, “haloBlue”];
var len:uint = tab_bar.numChildren;
for (var t:uint=0; t<len; t++) {
var tab:Tab = tab_bar.getChildAt(t) as Tab
tab.labelPlacement = tab.label;
tab.setStyle(“fillColors”,[colori[t],”white”])
}
}
]]>
</mx:Script>
Notiamo nell’esempio come ogni tab, quando non selezionata, ha un suo colore specifico.
TabBar con differenti colori
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)
<mx:Style>
@font-face{
src:locale(“Newtown”);
fontFamily: Newtown;
fontWeight:bold
}
</mx:Style>
Il parametro fontFamily che abbiamo specificato indica con quale stringa dovremo farvi riferimento dalla proprietà fontFamily dell’oggetto TabBar:
<mx:TabBar fontFamily=”Newtown” rotation=”90″ x=”172″ y=”27″ id=”tab_bar” dataProvider=”viewstack1″ creationComplete=”init()”>
Di seguito due risultati di TabBar ruotate rispetivamente di 30 e 90 gradi.
TabBar con differenti colori
TabBar con differenti colori
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.
Se vuoi aggiornamenti su Il componente TabBar inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Clonezilla è un software gratuito utilissimo per salvare e ripristinare l’intera immagine di un sistema operativo o semplicemente di una […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Impariamo ad utilizzare Takamaka, una blockchain Java Full Stack, per scrivere codice Java installabile ed eseguibile su una blockchain
Usi creativi degli strumenti di trasformazione e distorsione
Usiamo il celebre framework e alcuni plugin per estendere a tutti i browser il supporto di alcune proprietà dei CSS3
Come creare un’applicazione per la gestione di un negozio di commercio elettronico con il framework PHP Laravel. Una guida completa che, partendo dalla configurazione di un ambiente di sviluppo basato su Laravel, descrive nel dettaglio tutti i passaggi necessari per pubblicare un e-commerce con cui promuovere e vendere i propri prodotti online