Saturday, January 22, 2011

AS3 TileList component

In this tutorial we will learn how to create a TileList component.

A TileList is basically a grid of pictures. It can be only scrolled in one direction, and each cell has a label that can be edited. Here's how the simplest TileList looks like:


To create a TileList, firstly import the necessary classes. TileList for the component, ScrollBarDirection for the scroll bar and DataProvider to store the URLs and labels to our pictures.

import fl.controls.TileList;
import fl.controls.ScrollBarDirection;
import fl.data.DataProvider;

Next step, define the tile list and add it to stage:

var myTList:TileList = new TileList();
addChild(myTList);

Now, setting the properties of our TileList. Here are my preferences for the example above:

myTList.move(10,10);
myTList.columnWidth = 200;
myTList.rowHeight = 130;
myTList.columnCount = 1;
myTList.rowCount = 4;
myTList.width = 280;
myTList.height = 280;
myTList.direction = ScrollBarDirection.HORIZONTAL;

Then, adding content to the list. We can do that by using a dataProvider:

myTList.dataProvider = new DataProvider([{label:"Cat one", source:"http://www.newgrounds.com/dump/draw/339a74f8071f1b259453624e34a00895.jpg"},
 {label:"Cat two", source:"http://www.newgrounds.com/dump/draw/44e45c25c50747dba0d1a5f2859eb10f.jpg"},
 {label:"Cat three", source:"http://www.newgrounds.com/dump/draw/598b5ee98e29201f20488e10d5e9338e.jpg"}
 ]);

We can add lists using the addItem() method:

myTList.addItem({label:"Cat four", source:"http://www.newgrounds.com/dump/draw/2645ec8e90e95b2ea3db6c9ce82f3976.jpg"});

Here's the full code:

import fl.controls.TileList;
import fl.controls.ScrollBarDirection;
import fl.data.DataProvider;

var myTList:TileList = new TileList();
addChild(myTList);

myTList.move(10,10);
myTList.columnWidth = 200;
myTList.rowHeight = 130;
myTList.columnCount = 1;
myTList.rowCount = 4;
myTList.width = 280;
myTList.height = 280;
myTList.direction = ScrollBarDirection.HORIZONTAL;

myTList.dataProvider = new DataProvider([{label:"Cat one", source:"http://www.newgrounds.com/dump/draw/339a74f8071f1b259453624e34a00895.jpg"},
 {label:"Cat two", source:"http://www.newgrounds.com/dump/draw/44e45c25c50747dba0d1a5f2859eb10f.jpg"},
 {label:"Cat three", source:"http://www.newgrounds.com/dump/draw/598b5ee98e29201f20488e10d5e9338e.jpg"}
 ]);

myTList.addItem({label:"Cat four", source:"http://www.newgrounds.com/dump/draw/2645ec8e90e95b2ea3db6c9ce82f3976.jpg"});

Thanks for reading!

No comments:

Post a Comment