Building a Better TileList: A Custom Scrollable TileList using Flex

I use a TileList component quite often when building Flex applications. Recently, I was asked to create a nice, smooth, horizontal scrolling effect for a TileList containing a 3x3 page grid of 40 or so images. After many unsuccessful attempts to cajole the TileList into the proper behavior, I decided to roll my own.

It seems the fundamental problem with the TileList, which extends from the ListBase class, is its management of item renderers. It gets confused when attempting an animation to change the horizontal scroll position using an AnimateProperty effect. It seems that item renderers get confused when moving items into view using an effect.

After futzing around with the offscreenExtraColumns and other properties, I still could not get the behavior I desired out of the standard TileList. So I built my own.

Now, I must state that the ScrollableTileList class that I created does have some limitations; it pre-loads an item renderer for each element in the dataProvider. This means that it isn't suited for very large lists or lists of unknown size which could grow large. But it works very well for lists that are of a known, somewhat small (~100 items) size. It is also left up to the item renderer to implement a selected property, which is used to highlight the selected item in the list. The current implementation does not have a default item renderer; you must supply one.

The ScrollableTileList is geared to swap directly in for a 'normal' TileList, so you'll see familiar properties like columnCount and rowCount. Another nice feature is more precise control over horizontal and vertical gaps between tiles, which is not well supported by the native TileList component.

I've provided a sample application that uses the ScrollableTileList here. The source code is included: Just right click on the demo and choose 'View Source' from the Flash menu.

Enjoy!

Comments

[Michael Weber]

Nice ... thank you very much!

[andropause]

our company will be having our team building activity next week and I am in-charge of choosing appropriate team building activities and this is definitely one of the activities I will include in our program.

The A-Frame team building activity looks very challenging. The team will really have to learn to work as a team in a synchronize and steady pattern to succeed in this game. The activity reflects cooperation issues in the workplace and when the team can manage to set aside their differences and work towards a common goal, then the A-frame team building activity is a success.

[Kendall]

I'm not good with flex...but I want to attempt the same thing with AS3...can I use this?