La raccolta di componenti Yahoo Astra per Flash include non solo componenti di "utilità" come l'autoComplete o l'alertManager, o elementi utili come "widget" quali ad esempio l'audioPlayback e il Carousel, ma anche componenti di layout simili a quelli presenti di default in Flex, come ad esempio l'HBoxPane e il VBoxPane.
I componenti di layout servono principalmente per disporre degli elementi all'interno di un "contenitore", così da stabilire uno spazio in cui delimitarli e disporli, potendone poi adattare la disposizione in base ad eventuali ridimensionamenti del contenitore. I componenti di tipo Layout disponibili nel set Yahoo! Astra sono i seguenti:
- BorderPane: un contenitore senza scroll che permette di disporre gli elementi su più righe e colonne;
- FlowPane: un contenitore scrollabile che dispone gli elementi in maniera affine ai classici flussi di testo;
- HBoxPane: un contenitore scrollabile che dispone gli elementi su una riga orizzontale;
- TilePane: un contenitore scrollabile che dispone gli elementi in più caselle; l'elemento più largo stabilisce la diensione di tutte le caselle, in pratica crea una sorga di griglia;
- VBoxPane: simile all'HBoxPane, ma con la disposizione degli elementi in verticale.
Ricordiamo che tutti i componenti del framework Yahoo Astra sono disponibili solamente nei progetti Flash Actionscript 3, non appariranno infatti nel pannello Componenti se apriamo o creiamo un Fla in Actionscript 2.
Uso dei componenti di layout
I componenti di layout sono i più semplici da utilizzare, in quanto non prevedono di per sé interazione con l'utente o particolari azioni, funzionano semplicemente da contenitori che semplificano la disposizione degli elementi in essi contenuti; in Flex il loro utilizzo è reso molto semplice dalla possibilità di trascinarvi direttamente gli elementi da disporre al loro interno, ma in Flash non c'è questa possibilità e quindi il loro utilizzo passa principalmente per Actionscript, tramite il quale è possibile aggiungere elementi al contenitore.
Vediamo allora come utilizzare questi componenti: l'utilizzo è pressoché identico per tutti i componenti, anche se con un paio di eccezioni e ovviamente diverse proprietà per personalizzare la disposizione degli elementi.
Per prima cosa creiamo un nuovo progetto Actionscript 3 e apriamo il pannello Componenti, quindi espandiamo la categoria Yahoo! Layout e trasciniamo sullo stage un'istanza di uno dei componenti, ad esempio l'HBoxPane, infine diamogli un nome istanza dal pannello Proprietà, per esempio layout e settiamone le dimensioni.
A questo punto possiamo creare gli elementi da aggiungere al componente e settarne le proprietà; in questo esempio utilizzeremo più istanze di uno stesso clip.
Creiamo allora un nuovo movieclip, scegliamo di esportarlo tramite Actionscript e diamogli identificativo clip.
Non ci rimane che aggiungere alcune istanze di questo elemento al componente, compito per cui è sufficiente usare il classico comando addChild di Actionscript 3.
for(var i=0; i<10; i++){
var c = new clip()
layout.addChild(c)
}
Il componente HBoxPane in azione
Per farci un'idea di come si comportino gli altri componenti della categoria layout, potremo semplicemente sostituire l'HBoxPane con un altro componente, dandogli sempre nome istanza layout. Ecco ad esempio il risultato che otterremo con il VBoxPane.
Il componente VBoxPane in azione
Ecco invece il risultato dato dal TilePane.
Il componente TilePane in azione
Come abbiamo visto per inserire elementi all'interno di un layout basta utilizzare il comando addChild: l'unico componente che si comporta in maniera differente è il BorderPane, che prevede una proprietà configuration in cui è possibile specificare alcuni parametri extra per ogni elemento.
Tale configurazione avviene usando un oggetto di tipo Array. La sintassi sarà di questo tipo:
import com.yahoo.astra.layout.modes.*
var config:Array = new Array()
for(var i=0; i<10; i++){
var c = new clip()
config.push({target: c, constraint: BorderConstraints.TOP})
}
layout.configuration = config;
Cambiando il valore della proprietà constraint potremo cambiare la disposizione degli elementi.
Il componente BorderPane in azione
Per ogni elemento è anche possibile specificare il parametro includeInLayout, che può avere valore true (default) o false. Nel caso di valore false, l'oggetto verrà praticamente tenuto "fuori" dal flusso normale del layout e potremo quindi posizionarlo liberamente, questo è utile per la creazione di strutture complesse dove magari vogliamo mantenere alcuni elementi con una posizione fissa e alcuni elementi floattanti, come può essere ad esempio una barra di caricamento.
Ogni componente offre diverse proprietà per personalizzare ulteriormente la visualizzazione, ad esempio stabilire la distanza tra gli elementi o lo spazio dai margini del componente. Possiamo anche variare le proprietà del componente HBoxPane in questo modo:
layout.paddingLeft = 10
layout.paddingTop = 5
layout.horizontalGap = 5
Ogni componente può infine essere personalizzato tramite skin, che possiamo impostare tramite il comando setStyle("skin","nomeskin").
