Using the TileList Control

I'm experimenting using the mx:TileList control in Flex 2.0. This control is likely to be one of the primary components in displaying information about products. My primary references for this tutorial are the Flex 2 Developer's Guide (the TileList control is under the section on Using Data-Driven Controls) and the Flex 2 Language Reference section on class TileList.

The Flex 2 Developer's Guide just has a brief section on how to use the TileList control. For such a powerful and key component, the write up and examples are quite skimpy. The TileList control "displays a tiled list of items. The items are tiled in vertical columns or horizontal rows." The TileList control uses an item renderer to determine how to display the item. There is a default item renderer used by TileList, but the default item renderer can display only text and an icon (see the example in the Flex 2 Language Reference). Most of the time you will want to create a custom item renderer to control how each item is displayed in the TileList. Each item in the TileList occupies the same width and height.

In my example of using the TileList control, I am displaying a list of book items. Each book item occupies a single row and the list scrolls vertically. Per the developer's guide "The TileList control lays out its children in one or more vertical columns or horizontal rows, starting new rows or columns as necessary." I intentionally set the width of my TileList so that only one book item would occupy a row. The power of the TileList is that it can accommodate an unknown number of items. In my example, if you select a different category, the TileList control resizes as necessary.

The width, height, rowHeight and columnWidth attributes are key to determining how many items are displayed horizontally and vertically. I had to play with this several times before I got the look I wanted.

A TileList needs a data provider to determine what to display. In my example, I am using ColdFusion to provide an array of Book objects. Flex sends the category selected to a ColdFusion CFC method that uses the category to get from amazon.com up to 10 books. CF then creates a Book object for each book found, adds the Book object to an array, and returns the array of Book objects to Flex. This technique is similar to my tutorial on exchanging an array of objects between CF and Flex.

When Flex receives the array of Book objects, it converts the array into an ArrayCollection (view source on the example and see function handleBookResult). The ArrayCollection object is the data provider for the TileList control. Note that I have an ActionScript Book class that is related to my CF Book class.

The TileList control uses a custom item renderer to determine what information to display for each Book object and how to display that data. My custom item renderer is named ThumbNail.mxml. The ThumbNail component is a horizontal box which displays the book's cover image, the title, and price. In the ThumbNail.mxml file I refer to the object's fields that provide the actual values with the expression {data.fieldName} for example {data.title} for the title. The field names match the instance variable names in my Book class.

In future examples of using the TileList control I'll explore how a user can interact with the items being displayed.