Accessibility

Table of Contents

  1. Introduction
  2. Building the Application
  3. Create the Application Object
  4. Create a Data Array, Create an Array of Objects
  5. Add a TabNavigator Container for Global Navigation
  6. Add an HBox and Panel Containers for Main Views
  7. Add a ViewStack, LinkBar, and Panel Containers for Secondary Views
  8. Add a Form Container
  9. Add a TileList and Populating It with an Array of Objects
  10. Create a LineChart Component
  11. Complete Code Listing for containers.mxml
  12. Where to Go from Here

Learning Flex Basics (Part 3) : Working with Containers

Add a TileList and Populating It with an Array of Objects

For the second view in the first main view, you use a TileList control, which lays out items from a dataProvider in rows or columns. In other respects, the TileList is similar to the List and ComboBox controls you have used previously. The MouseOver and MouseDown behaviors are built in (and you can modify them), and you can use the change event to fire an event handler.

  1. Inside the Panel with the title "Tile," add a TileList control with a dataProvider bound to myArrayOfObjects, width and height both set to 100%, and the change event set to setStatus(event.target.selectedItem):

    <mx:TileList dataProvider="{myArrayOfObjects}" 
change="setStatus(event.target.selectedItem)" width="100%" height="100%"/>

  2. Inside the script block at the top of the application, add function block for the setStatus() function; the function takes a parameter called item of type Object, and returns nothing:

    function setStatus(item:Object):Void
    	{
    		
    	}

  3. Inside the function block, add a single line that sets the status property of the surrounding Panel to "Revenue: "+item.revenue+" Volume: "+item.volume:

    tilePanel.status="Revenue: "+item.revenue+" Volume: "+item.volume;

    Note: Remember that the item passed to the function is the original data item associated with the repeated object where the event occurred.

  4. Save the file and browse it. Click the tiled items in the TileList to see the associated data displayed in the Panel container status area.
Page 9 of 12
Previous Page
Next Page