Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using Data-Driven Controls > TileList control

TileList control

The TileList control displays a tiled list of items. The items are tiled in vertical columns or horizontal rows. The TileList control is particularly useful in combination with a custom item renderer for displaying a list of images and other data. The default item renderer for the TileList control is TileListItemRenderer, which, by default, displays text of the data provider's label field and any icon. For more information about custom item renderers, see Using Item Renderers and Item Editors.

For complete reference information, see TileList in Adobe Flex 2 Language Reference.

Subtopics

About the TileList control

The contents of a TileList control can look very similar to the contents of a Tile container in which a Repeater object repeats components. However, performance of a TileList control can be better than the combination of a Tile container and a Repeater object because the TileList control only instantiates the objects that fit in its display area. Scrolling in a TileList can be slower than it is when using a Repeater object. For more information about the Repeater object, see Dynamically Repeating Controls and Containers.

The TileList control displays a number of items laid out in equally sized tiles. It often contains a scroll bar on one of its axes to access all items in the list depending on the direction orientation of the list. The user can select one or more items from the list depending on the value of the allowMultipleSelection property.

The TileList control lays out its children in one or more vertical columns or horizontal rows, starting new rows or columns as necessary. The direction property determines the primary direction of the layout. The valid values for the direction property are and horizontal (default) and vertical for a layout. In a horizontal layout the tiles are filled in row by row with each row filling the available space in the control. If there are more tiles than fit in the display area, the horizontal control has a vertical scroll. In a vertical layout, the tiles are filled in column by column in the available vertical space, and the control may have a horizontal scroll bar.

The following image shows a TileList control:

The TileList control has the following default sizing properties:

For complete reference information, see TileList in Adobe Flex 2 Language Reference.

Creating a TileList control

You use the <mx:TileList> tag to define a TileList control. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

The TileList control shares many properties and methods with the List control; see List control for information on how to use several of these shared properties. The TileList control uses a list-based data provider. For more information, see About data providers.

You specify the data for a TileList control using the dataProvider property of the <mx:TileList> tag, as the following example shows:

<?xml version="1.0"?>
<!-- dpcontrols/TileListDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   initialize="initData();" >
   <mx:Script>
   <![CDATA[
      import mx.controls.Button;
      import mx.collections.*;
      private var listArray:Array=[
         {label: "item0", data: 0},{label: "item1", data: 1},
         {label: "item2", data: 2},{label: "item3", data: 3},
         {label: "item4", data: 4},{label: "item5", data: 5},
         {label: "item6", data: 6},{label: "item7", data: 7},
         {label: "item8", data: 8}];
      [Bindable]
      public var TileListdp:ArrayCollection;
      
      private function initData():void {
         TileListdp = new ArrayCollection(listArray);
      }
   ]]>
   </mx:Script>

   <mx:TileList dataProvider="{TileListdp}"
      itemRenderer="mx.controls.Button"/>
</mx:Application>

In this example, you populate the data provider with an ArrayCollection that contains an Array of strings defining labels and data values. You then use the itemRenderer property to specify a Button control as the item renderer. The Button controls display the data provider label values. The TileList control displays nine Button controls with the specified labels.

The next example is the TileListDemo.mxml file from the Flex Explorer sample application; this example shows the MXML code for a catalog application that displays a set of product images in a TileList control. The item renderer for the TileList control is an MXML component named Thumbnail. In this example, you define the item renderer to contain three controls: an Image control and two Label controls. These controls examine the data object passed to the item renderer to determine the content to display. For more information about custom item renderers, see Using Item Renderers and Item Editors.

<?xml version="1.0"?>
<!-- dpcontrols/TileListDemo.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   backgroundAlpha="0" creationComplete="srv.send()">

   <mx:HTTPService id="srv" url="assets/catalog.xml" useProxy="false"/>

   <mx:TileList dataProvider="{srv.lastResult.catalog.product}" 
      height="100%" width="100%" itemRenderer="Thumbnail" 
      rowHeight="130" columnWidth="175"/>
</mx:Application>

The Thumbnail.mxml MXML component that is used as the item renderer in the product catalog application is identical to the one in HorizontalList control. For more information about custom item renderers, see Using Item Renderers and Item Editors.

TileList control user interaction

The user clicks individual list items to select them, and holds down the Control and Shift keys while clicking to select multiple items.

All mouse or keyboard selections broadcast a change event. For mouse interactions, the TileList control broadcasts this event when the mouse button is released. When the user drags the mouse over the items and then outside the control, the control scrolls up or down.

Keyboard navigation

The TileList control has the following keyboard navigation features:

Flex 2.01