Building a Better TileList: A Custom Scrollable TileList using Flex

by

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 3×3 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!

8 Comments

  1. bars or taverns near me on said:

    With havin so much content do you ever run into any problems of plagorism or copyright violation? My blog has a lot of completely unique content I’ve either authored myself or outsourced but it appears a lot of it is popping it up all over the web without my authorization. Do you know any solutions to help reduce content from being ripped off? I’d definitely appreciate it.

  2. Ashwin Jiwane on said:

    Can you please provide the updated link for the scrollable tilelist.

    • Avatar photo
      Doug Kadlecek on said:

      The code is back up. Enjoy.

      • Ashwin Jiwane on said:

        Where is the link for the custom component your mention in the blog? As i’m also struggle with smooth scroll animation part. Pl. suggest

  3. asmxml on said:

    page not found

    • Avatar photo
      Doug Kadlecek on said:

      Fixed. Thanks for the heads up.

  4. Michael Weber on said:

    Nice … thank you very much!

  5. Kendall on said:

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

Leave a Reply

Your email address will not be published. Required fields are marked