Poco tempo fa abbiamo accennato ai componenti Astra per Flex; Yahoo non ha rilasciato del materiale solo per Flex, difatti esistono anche dei componenti Astra per Flash, più numerosi e probabilmente più interessanti per l'uso "comune" di quelli disponibili per Flex.
In questo articolo introdurremo questo set di componenti, anch'esso realizzato in Actionscript 3 e utilizzabile quindi con Flash CS3 e Flash CS4 (per quest'ultimo tuttavia Yahoo non ha ancora dichiarato esplicitamente la piena compatibilità).
Il set di componenti per Flash è piuttosto numeroso, ecco cosa avremo a disposizione:
- AutoComplete
- AlertManager
- AudioPlayback
- Carousel
- BarChart, ColumnChart, LineChart, PieChart
- HBoxPane, VBoxPane, FLowPane, TilePane, BorderPane
- Menu
- MenuBar componente TabBar
- Tree
Vediamo allora come installare questo set di componenti e come utilizzare i vari strumenti che lo compongono; teniamo presente che ogni componente può essere utilizzato in maniera visuale (posizionandone quindi una o più istanze sullo stage) oppure tramite Actionscript 3.
Download e installazione dei componenti
I componenti Astra per Flash sono scaricabili dalla pagina dedicata al Flash Developer Center di Yahoo; una volta scaricato il file ZIP troveremo al suo interno diverse directory:
- Build
- Documentation
- Examples
- Source
Estraiamo i file, quindi apriamo la cartella Build ed eseguiamo un doppio click sul file Astra.mxp Yahoo!, Yahoo! Charts Yahoo! Layout
Il componente AutoComplete
Non ci addentriamo nelle caratteristiche di questo componente dato che principalmente sono le stesse viste della versione Flex, vediamo quindi semplicemente l'utilizzo.
Dal pannello Componenti selezioniamo la categoria Yahoo, quindi il componente AutoComplete e trasciniamone un'istanza sullo stage. A questo punto dal pannello Proprietà possiamo impostare il Data Provider per il componente, ovvero l'elenco dei termini che verranno utilizzati come suggerimenti, oltre ad altre opzioni come per esempio il numero massimo di caratteri.
Oltre al posizionamento sullo stage è possibile istanziare il componente via Actionscript, in questo modo:
// importa le classi per DataProvider e AutoComplete
import fl.data.DataProvider;
import com.yahoo.astra.fl.controls.AutoComplete;
// creiamo l'array di termini
var airports:Array = [{label:"SFO"}, {label:"XNA"}, {label:"SJC"}];
// creiamo un'istanza del componente e la aggiungiamo sullo stage
var autoComplete:AutoComplete = new AutoComplete();
addChild(autoComplete);
// associamo la lista degli aeroporti al componente
autoComplete.dataProvider = new DataProvider(airports);
È ovviamente possibile una soluzione "ibrida", piazzando il componente sullo stage e associando poi solo la lista di termini tramite Actionscript
// importiamo le classi necessarie
import fl.data.DataProvider;
import com.yahoo.astra.fl.controls.AutoComplete;
// creiamo la lista dei termini
var airports:Array = [{label:"SFO"}, {label:"XNA"}, {label:"SJC"}];
// associamo la lista dei termini al componente
autoComplete.dataProvider = new DataProvider(airports);
Le proprietà del componente AutoComplete utilizzabili via Actionscript sono disponibili nella Class Reference del set di componenti.
Il componente AlertManager
Il componente AlertManager permette la creazione di finestre di stato, che possono essere personalizzate in maniera più o meno massiccia e quindi passare anche dal classico uso di finestra di "informazione" (solitamente relativa a un errore) possono essere utilizzate come finestre di opzione o altro, grazie anche alla possibilità di utilizzare un'immagine a piacere come icona della finestra.
Poiché le finestre di alert solitamente sono scatenate da un qualche evento, il suo utilizzo è praticamente solo tramite Actionscript, per quanto sia possibile eseguire il procedimento di istanziazione del componente anche tramite stage; in questo caso per prima cosa trasciniamo un'istanza del componente AlertManager (sempre dalla categoria Yahoo) sullo stage, quindi diamogli un nome istanza (ad esempio alert). Il nome istanza verrà usato come riferimento per la creazione della finestra, che avverrà tramite Actionscript, in questo modo:
alert = AlertManager.createAlert(this, "Esempio di Alert box con componente Astra");
Il comando CreateAlert offre diversi parametri opzionali, ad esempio per creare una finestra con titolo "Titolo della finestra" e bottoni "Ok" e "Annulla" possiamo usare questo comando:
alert = AlertManager.createAlert(this, "Esempio di Alert box con componente Astra", "Titolo della finestra",["Ok","Annulla"]);
Se volessimo eseguire l'istanziazione del componente tramite Actionscript e non tramite stage, invece di trascinare il componente dal pannello Componenti basterà usare questo codice:
import com.yahoo.astra.fl.managers.AlertManager;
var alert = AlertManager.createAlert(this, "Esempio di Alert box con componente Astra", "Titolo della finestra",["Ok","Annulla"]);
Notiamo che in questo caso, non avendo la clip alert sullo stage, anche la variabile di riferimento per la finestra creata viene impostata tramite Actionscript.
