Cerchi articoli, tutorial e guide su Photoshop CS3, Flash CS3, Premiere Pro CS3, Actionscript 3, Flex 3 e Adobe AIR, Java e Microsoft Silverlight ? Il componente TileList, noto ormai da tempo agli sviluppatori Flex, rappresenta una novità per tutti coloro che utilizzano Flash CS3.
Disponibile dalla versione 3 di ActionScript, questo componente permette di visualizzare agevolmente liste di elementi sotto forma di matrice.
Nel seguente script utilizzeremo un TileList formato da 2 righe e 3 colonne per visualizzare una serie di immagini. Ogni volta che una cella verrà cliccata visualizzeremo, attraverso un trace, le relative informazioni.
// Importiamo le classi necessarie al funzionamento dello script
import fl.controls.TileList;
import fl.data.DataProvider;
import flash.display.Sprite;
import flash.events.Event;
//Definiamo il data Provider, ovvero la nostra sorgente dati.
var dp:DataProvider = new DataProvider();
dp.addItem({label:"Image 1", source:"http://www.helpexamples.com/flash/images/image1.jpg"});
dp.addItem({label:"Image 2", source:"http://www.helpexamples.com/flash/images/image2.jpg"});
dp.addItem({label:"Image 3", source:"http://www.helpexamples.com/flash/images/image3.jpg"});
dp.addItem({label:"Image 4", source:"http://www.helpexamples.com/flash/images/image1.jpg"});
dp.addItem({label:"Image 5", source:"http://www.helpexamples.com/flash/images/image2.jpg"});
dp.addItem({label:"Image 6", source:"http://www.helpexamples.com/flash/images/image3.jpg"});
dp.addItem({label:"Image 7", source:"http://www.helpexamples.com/flash/images/image1.jpg"});
dp.addItem({label:"Image 8", source:"http://www.helpexamples.com/flash/images/image2.jpg"});
dp.addItem({label:"Image 9", source:"http://www.helpexamples.com/flash/images/image3.jpg"});
dp.addItem({label:"Image 10", source:"http://www.helpexamples.com/flash/images/image1.jpg"});
// Inizializziamo il componente TileList
// NOTA: è necessario trascinare un componente TileList nella libreria
var myTileList:TileList = new TileList();
myTileList.dataProvider = dp; // Sorgente Dati
myTileList.columnWidth = 125; // Larghezza Colonna
myTileList.rowHeight = 150; // Altezza Righe
myTileList.columnCount = 3; // Numero Colonne
myTileList.rowCount = 2; // Numero Righe
myTileList.move(10,10); // Posizione x,y,
addChild(myTileList); // Aggiungiamo il componente alla DisplayList
// Registriamo l'event Listener CHANGE (ovvero al click su una cella)
myTileList.addEventListener(Event.CHANGE, changeHandler);
// Visualizziamo i dati relativi alla cella selezionata con il mouse
function changeHandler(evt:Event):void {
trace("Label: " + dp.getItemAt(evt.currentTarget.selectedIndex).label +
" - URL: " + dp.getItemAt(evt.currentTarget.selectedIndex).source)
}
AUGItaly Feed