Negli articoli precedenti abbiamo visto l'utilizzo dei componenti di layout e di alcune widget disponibili: in questo articolo vedremo invece l'utilizzo dei componenti di navigazione, che sono composti da:
- Menu: permette di creare menu verticali;
- MenuBar: permette di creare menu verticali o orizontali con uno o più sottolivelli;
- TabBar: consente la creazione di una serie di schede per passare tra diverse visualizzazioni (un po' come le tab dei browser permettono di passare tra i diversi siti aperti);
- Tree: permette di creare dei menu ad albero.
Utilizzo dei componenti di navigazione
I componenti di navigazione hanno un utilizzo più elaborato rispetto a quello relativo ai componenti di layout, dato che per essi è ovviamente possibile specificare determinate interazioni con l'utente e soprattutto, alcuni di essi, possono prevedere più livelli di profondità e più tipologie di utilizzo; in generale si tratta comunque di passaggi abbastanza semplici, spesso interamente gestibili dal pannello proprietà, per quanto sia solitamente consigliabile sfruttare ActionScript per utilizzare tutte le opzioni del componente.
Il componente Menu
Iniziamo analizzando il componente Menu, che è poi quello più "basilare", poiché crea una lista di opzioni in verticale, senza la possibilità di creare categorie e sottocategorie. È quindi un tipo di menu dove ogni singola voce non può avere sotto-opzioni e ha assegnata un'azione.
L'uso è molto semplice: apriamo il pannello Componenti e portiamoci nella categoria Yahoo!.
Selezioniamo il componente Menu e trasciniamone un'istanza sullo stage. A questo punto diamo un nome istanza al nostro menu, per esempio AstraMenu. Apriamo quindi il pannello delle azioni e inseriamo questo codice:
import com.yahoo.astra.fl.controls.Menu;
import com.yahoo.astra.fl.data.XMLDataProvider;
// creiamo l'XML delle opzioni del menu
var colori:XML =
<root>
<astraMenuitem label="Rosso" />
<astraMenuitem label="Arancio" />
<astraMenuitem label="Giallo" />
<astraMenuitem label="Verde" />
<astraMenuitem label="Blu" />
</root>
// associamo l'XML al menu
astraMenu.dataProvider = new XMLDataProvider(colori);
// mostriamo il menu
astraMenu.show();
Come possiamo notare, la lista delle voci è impostabile tramite un oggetto di tipo XML.
Ora non ci resta che aggiungere un listener per impostare la funzione da eseguire quando viene premuto un tasto del menu.
import com.yahoo.astra.fl.events.MenuEvent;
astraMenu.addEventListener(MenuEvent.ITEM_CLICK, onItemClicked);
function onItemClicked(event:MenuEvent):void{
trace("Hai scelto l'opzione " + event.label);
}
Poiché il componente Menu è pensato principalmente per menu a comparsa, quando selezioneremo una delle opzioni, questo verrà chiuso. Possiamo riaprirlo in ogni momento usando il comando nomeistanza.show(), l'ideale ovviamente è associare questo evento a un'azione dell'utente, come per esempio la pressione di un pulsante.
Il componente MenuBar in azione
Il componente MenuBar
Si tratta di una sorta di "estensione" del componente Menu, poiché, ad esempio, permette l'utilizzo di una o più sottocategorie, inoltre non viene chiuso di default quando un'opzione non viene cliccata (viene chiusa solo la categoria selezionata).
L'utilizzo è pressoché identico a quanto visto per il componente Menu: trasciniamo un'istanza del componente MenuBar e disponiamola sullo stage, diamole nome istanza astraMenuBar e inseriamo questo codice nelle azioni:
// creiamo l'XML del menu
var menus:XML =
<menus>
<menu label="colors">
<menuitem label="red" />
<menuitem label="orange" />
<menuitem label="yellow" />
<menuitem label="green" />
<menuitem label="blue" />
<menuitem label="purple" />
</menu>
<menu label="cars">
<menuitem label="american">
<menuitem label="cadillac" />
<menuitem label="buick" />
<menuitem label="pontiac" />
<menuitem label="chevrolet" />
<menuitem label="ford" />
</menuitem>
<menuitem label="japanese">
<menuitem label="toyota" />
<menuitem label="honda" />
<menuitem label="nissan" />
</menuitem>
</menu>
<menu label="apples">
<menuitem label="gala" />
<menuitem label="granny smith" />
<menuitem label="fuji" />
</menu>
</menus>
// associamo le voci alla menuBar
astraMenuBar.dataProvider = menus;
Il componente Menu in azione
È anche possibile personalizzare le voci del MenuBar utilizzando delle icone, per questo sarà necessario inserire nell'XML usato come fonte dati le opzioni icon e selectedIcon: tali opzioni dovranno avere come valore il nome della classe degli elementi grafici che vogliamo utilizzare come icone (tali elementi dovranno essere presenti nella libreria come MovieClip).
Ecco, ad esempio, come creare una categoria food contenente la sottocategoria fruit, quest'ultima conterrà il menu apples e ognuna delle voci di questo menu sarà rappresentata dall'icona di una mela (più o meno trasparente a seconda del fatto che sia o non sia selezionata).
<menu label="food">
<menuitem label="fruit">
<menuitem label="apples">
<menuitem label="gala" icon="MenuAppleIcon" selectedIcon="MenuAppleSelectedIcon" group="apple" />
<menuitem label="granny smith" icon="MenuAppleIcon" selectedIcon="MenuAppleSelectedIcon" group="apple" />
<menuitem label="fuji" icon="MenuAppleIcon" selectedIcon="MenuAppleSelectedIcon" group="apple" />
</menuitem>
</menuitem>
</menuitem>
Il componente MenuBar con l'utilizzo delle icone per la categoria "Fruit - Apple"
È anche possibile personalizzare l'aspetto grafico della MenuBar, si può scegliere se agire tramite elementi della libreria oppure tramite ActionScript; quest'ultima via permette di cambiare anche più stili durante l'esecuzione del filmato, tuttavia è un po' laboriosa.
Il componente TabBar
Il componente TabBar, del framework Astra per Flash, ricalca in gran parte il comportamenteo dell'omonimo componente che si trova incluso di default in Flex; scopo di questo componente è creare una sorta di menu a "schede" (o tab, appunto) come quelli che possiamo riscontrare nelle versioni più recenti di gran parte dei browser Web. Solitamente un TabBar viene associato a uno o più elementi sullo stage, in modo tale che alla pressione di una delle schede venga modificata la visualizzazione di altri elementi: è una soluzione adottata frequentemente anche nelle interfacce di molti software, tra cui lo stesso Flash.
L'utilizzo del componente TabBar non differisce particolarmente da quanto visto per i componenti Menu e MenuBar, tuttavia l'assegnazione della fonte di dati è più semplice e si può eseguire dal pannello Proprietà, oppure tramite ActionScript usando un array e la proprietà dataProvider del componente.
Ad esempio, con il seguente codice è possibile creare e posizionare un'istanza del componente TabBar:
import com.yahoo.astra.fl.controls.TabBar;
import fl.data.DataProvider;
var tabData:Array = [ "Scheda uno", "Schda due", "Scheda tre" ];
var tabBar:TabBar = new TabBar();
tabBar.dataProvider = new DataProvider( tabData );
tabBar.selectedIndex = 0;
this.addChild( tabBar );
Notiamo la proprietà dataProvider che associa l'array tabData (contenenti le voci delle schede) al componente, abbiamo usato inoltre l'opzione selectedIndex che permette di scegliere quale scheda selezionare all'avvio del filmato.
Una proprietà molto interessante di questo componente è autoSizeTabsToTextWidth, che può essere:
- true: la larghezza di ogni intestazione verrà adattata alla lunghezza della stringa in esso contenuta
- false: tutte le schede avranno una larghezza fissa e il testo inserito al loro interno, qualora fosse troppo lungo, sarà tagliato
Il componente TabBar in funzione
Ovviamente questo componente diventa utile quando associato ad altri elementi: possiamo rilevare il cambiamento di scheda grazie all'evento change e impostare di conseguenza le azioni da far svolgere ad altri elementi presenti nel filmato. Combinando il componente TabBar con i componenti Yahoo Astra Layout si possono ottenere sistemi di navigazione molto intuitivi con pochissimo sforzo.
Il componente Tree
L'ultimo componente di navigazione che andiamo ad analizzare è il componente Tree; come si può facilmente intuire, lo scopo di questo componente è creare menu gerarchici ad albero, l'esempio più classico sono le cartelle di un sistema operativo: così come all'interno di ogni cartella del sistema operativo possiamo avere delle sotto-cartelle e/o dei file, così all'interno di ogni voce/categoria del menu Tree è possibile avere dei link oppure altre sotto-categorie.
Poiché la struttura di un menu ad albero può essere piuttosto complessa, e avere molti livelli di annidamento, anche in questo caso, come per il componente MenuBar, è necessario utilizzare una lista XML come fonte di dati per il menu.
Altra analogia con il MenuBar è la possibilità di personalizzare le icone di categorie e file.
Vediamo come, con pochi passi, sia possibile inserire un componente Tree nel proprio filmato: per prima cosa posizioniamo un'istanza del componente sullo stage, quindi scriviamo il seguente codice:
import com.yahoo.astra.fl.controls.treeClasses.*;
var datiMenuXML =
<node label="Root">
<node label="Folder 1">
<node label="File 1"/>
<node label="File 2"/>
</node>
<node label="Folder 2">
<node label="File 3"/>
<node label="File 4"/>
</node>
</node>
astraMenuTree.dataProvider = new TreeDataProvider( datiMenu );
Il componente Tree in funzione
La personalizzazione grafica di questo componente è molto semplice: basterà impostare nella libreria i movieclip relativi alle icone delle cartelle (chiusa e aperta) e dei file, assengnando ad ognuno di essi un identificativo per l'esportazione per ActionScript, useremo quindi questo indicativo nel nostro codice:
astraMenuTree.setRendererStyle("closedBranchIcon", folderClosedIcon);
astraMenuTree.setRendererStyle("openBranchIcon", folderOpenIcon);
astraMenuTree.setRendererStyle("leafIcon", fileIcon);
Per ricavare il click dell'utente su una voce del menu è possibile usare l'evento ListEvent.ITEM_CLICK.
