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: affine all'AutoComplete Manager visto nell'articolo relativo ai componenti Astra per Flex, permette di creare dei suggerimenti alla compilazione dei campi;
- AlertManager: permette di creare delle finestre di alert in un'applicazione Flash (di diversi stili e quindi adatte sia come finestre di errore che come finestre informative);
- AudioPlayback: permette di creare una serie di controlli per la riproduzione di uno o più file audio;
- Carousel: permette di creare un sistema visuale di una lista di elementi, ad esempio immagini;
- BarChart, ColumnChart, LineChart, PieChart: una serie di componenti per la creazione di grafici;
- HBoxPane, VBoxPane, FLowPane, TilePane, BorderPane: una serie di contenitori utilizzabili per creare layout;
- Menu: permette di creare menu multilivello verticali o orizzontali;
- MenuBar: permette di creare dei menu "a schede" per passare tra diverse visualizzazioni, è affine al componente TabBar di Flex;
- Tree: permette di creare dei menu ad albero;
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: contiene il file MXP per l'installazione dei componenti;
- Documentation: contiene la documentazione relativa alle varie classi dei componenti per l'uso tramite Actionscript;
- Examples: contiene alcuni esempi di utilizzo dei componenti;
- Source: contiene le classi sorgenti dei componenti.
Estraiamo i file, quindi apriamo la cartella Build ed eseguiamo un doppio click sul file Astra.mxp: l'Adobe Extension Manager si occuperà di copiare i file necessari all'interno della nostra versione di Flash. Una volta completato il procedimento, apriamo Flash e portiamoci nel pannello "Componenti" (Window->Components oppure Ctrl+F7). Se l'installazione è andata a buon fine troveremo in questo pannello le categorie Yahoo!, Yahoo! Charts e 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.
