Il componente TabNavigator di Flex

Tra i maggiori aspetti positivi di Flex va sicuramente annoverato il buon numero di componenti per la realizzazione di interfacce e sistemi di navigazione: sono infatti presenti molti oggetti che aiutano a creare controlli piuttosto comuni e semplici da utilizzare e che permettono di conferire alla propria applicazione diverse visualizzazioni.

Tra i componenti principali per la navigazione segnaliamo il TabNavigator, che permette di creare un classico menu appunto a “tab” (definibile anche “a schede”), un tipo di menu piuttosto diffuso quando si vuole offrire all’utente la possibilità di accedere a svariate sezioni e informazioni con pochi click.

Per prima cosa creiamo un nuovo Flex Project, quindi portiamoci nella visuale Design per avere accesso ai componenti. Dal pannello component selezioniamo la categoria Navigators, quindi il componente TabNavigator e trasciniamone un’istanza sull’area di lavoro.

Figura 1. Scelta del componente TabNavigator

Il componente, una volta posizionato nello stage sarà rappresentato come un quadrato bianco con sopra una tab con etichetta Tab 1; cliccando sul componente potremo vedere due pulsanti (+ e -). Con questi pulsanti come vedremo a breve sarà possibile aggiungere o rimuovere tab/schede dal menu (e di conseguenza le corrispondenti visualizzazioni).

Figura 2. Il componente posizionato sullo stage

Aggiungere oggetti ad una scheda

Possiamo considerare il componente come diviso in due parti: la prima è la parte superiore, dove vengono visualizzate le varie intestazioni, mentre la seconda parte contiene gli oggetti della scheda selezionata: in modalità design possiamo inserire gli oggetti semplicemente trascinandoli, mentre in modalità codice avremo una situazione di questo tipo:

Come possiamo vedere, la prima tab è di tipo Canvas e ha etichetta Tab1: ogni oggetto che vogliamo sia presente in questa scheda andrà quindi inserito tra i tag <mx:Canvas> e </mx:Canvas>, in questo modo:

Ovviamente spostando gli oggetti in modalità design tramite drag & drop otterremmo lo stesso risultato, quindi per l’inserimento di elementi quali i componenti di Flex è più comodo utilizzare la modalità Design e sfruttare invece la modalità Codice per gli elementi esterni.

Aggiungere nuove schede

Come detto, dalla modalità Design basta selezionare il componente e premere il pulsante + : si aprirà un nuovo pannello da cui potremo scegliere l’etichetta del nuovo tab e il tipo di contenitore, che di default è di tipo Canvas ma può essere selezionato tra vari layout, utili se vogliamo dare un’impostazione particolare ad alcune schede.

Figura 3. Il pannello di creazione di un nuovo tab

A livello di codice, le nuove schede saranno inserite consecutivamente e come già abbiamo visto i contenuti di ogni scheda saranno racchiusi tra i tag del suo contenitore: per esempio aggiungengo un tab con etichetta Tab 2 e contenitore di tipo HBox con a sua volta all’interno un ComboBox e un HSlider, il codice diventerà il seguente:

L’swf risulterà come di seguito: notiamo in particolare la differenza tra i due container Canvas (per la prima scheda) e HDividedBox (per la seconda)

Nell’swf possiamo notare come sia possibile navigare nel componente anche tramite tastiera: clicchiamo su una delle due schede, quindi proviamo a usare i tasti Page Up (sposta alla scheda precedente), Page Down (sposta alla scheda successiva), Home/Inizio (sposta alla prima scheda), End/Fine (sposta all’ultima scheda), le frecce direzionali (permettono di selezionare una scheda, ma senza aprirla) e Invio o barra spaziatrice (aprono la scheda selezionata).

Modificare le proprietà dei contenitori

Come abbiamo visto è possibile utilizzare un diverso contenitore per ogni scheda: qualora volessimo modificare una o più proprietà di un contenitore potremo selezionarlo in modalità design e nel dal pannello Proprietà avremo accesso alle sue opzioni, in questo caso comunque può essere preferibile operare via codice in quanto per molti container il numero di proprietà modificabili dal pannello è molto inferiore a quelle accessibili via codice.

Inserire un’icona nelle intestazioni

In alcuni casi la semplice etichetta testuale potrebbe non essere chiara, oppure potremmo voler semplicemente “abbellire” il nostro menu con l’inserimento di un’immagine: in questo caso è possibile utilizzare la proprietà icon dei vari contenitori, accessibile tramite codice. Per inserire un’immagine come icona è necessario che questa sia nella stessa cartella del file MXML dell’applicazione, il codice da utilizzare è di questo tipo:

Notiamo l’uso dell’istruzione @Embed, che si occuperà di incorporare l’immagine icona.png all’interno dell’swf.

Ovviamente è consigliabile immagini con sfondo trasparente per ottenere un miglior effetto visivo.

È possibile variare l’allineamento dell’etichetta rispetto all’icona, tuttavia per questa operazione bisogna necessariamente ricorrere ad Actionscript.

Con questo codice, una volta completata la creazione del componente (creationComplete) richiamiamo la funzione init, che va a ricavare la prima tab del componente (getTabAt(0)) e ne imposta l’allineamento dell’etichetta su destra (“right”). Sono possibili anche i valori “left” (sinistra), “top” (sopra) e “bottom” (sotto). Di seguito un codice che ci permette di vedere i diversi posizionamenti:

Naturalmente è possibile utilizzare soltanto l’icona, non utilizzando l’attributo label oppure lasciandolo vuoto.