Introducing Using Data Sets

In this lesson, you will learn two approaches to dealing with data sets. One is to loop over the data using a Repeater in MXML; the other is to use the data set as a dataProvider for a special collection of controls. From these basic two approaches you will find many options and learn to decide what your best choice is in different situations.

First, consider the group of list-based controls, which enable a user to scroll though a list of items and select one or more items from the list. All Flex list-based components inherit from the ListBase class and include the following:

• DataGrid

• HorizontalList

• List

• ComboBox

• TileList

• Tree

All these components take a data provider, which in most cases will be a data set. You have already used the Tree and List. In this lesson, HorizontalList and TileList will be discussed. DataGrids will be covered in a later lesson.

Another way to think of these components ties back to the architecture discussion on model-view-controller (MVC) of Lesson 7, "Creating Components with MXML." The components are the view on the model, which is the underlying data, and provides an abstraction between the data and the components used to display that data. This enables you to do the following (among other things):

• Populate multiple components from the same data model

• Switch data providers at run time

• Make a change to a model and have it immediately reflected in all components that use that data

Understanding HorizontalList and TileList Components

Both HorizontalList and TileList components display a list of items; the exact information displayed about each item is controlled by you. HorizontalList displays items horizontally (no surprise there, hopefully) and, if needed, places scroll bars along the bottom of the list to see all the items.

TileList lays out items in dynamically created rows and columns of equal-sized tiles. You can use the direction property to have the items laid out horizontally or vertically. If needed, a scroll bar can be added to one axis to see all the items.

You most likely will be displaying data that comes from an object. The question is, how do you choose what data from the object to display? Looking at some code will help clear this up.

First, assume that you want to display just one property of the object that contains text. To do that, you specify the property name in the labelField property of HorizontalList.

<mx:Script>    <![CDATA[      import mx.collections.ArrayCollection;       private var arrayData:Array=[          {name:"banana",cat:"fruit",cost:.99},          {name:"bread",cat:"bakery",cost:1.99},          {name:"orange",cat:"fruit",cost:.52},          {name:"donut",cat:"bakery",cost:.33},          {name:"apple",cat:"fruit",cost:1.05}];       private var dp:ArrayCollection=new ArrayCollection(arrayData);    ]]> </mx:Script> <mx:HorizontalList dataProvider="{dp}"    labelField="name"    columnWidth="100"    width="600"/> 

The code would create the display as shown here:

So by specifying the name property of the object, you display those property values in the list.

Implementing a labelFunction

Next is the situation in which you want to combine text from a number of the properties to display. To do this, you must write a function that specifies how to format the text and use the return statement. Instead of using the labelField property, you use the labelFunction property. In the function, you accept a parameter of data type Object. This parameter represents the object currently being displayed by the HorizontalList. Convention is to call this parameter item, but it is not necessary to use that parameter name. Because the function returns a String, you must data type the function as String. The following code shows an example of a labelFunction being used:

<mx:Script>    <![CDATA[       import mx.collections.ArrayCollection;      private var arrayData:Array=[         {name:"banana",cat:"fruit",cost:.99},         {name:"bread",cat:"bakery",cost:1.99},         {name:"orange",cat:"fruit",cost:.52},         {name:"donut",cat:"bakery",cost:.33},         {name:"apple",cat:"fruit",cost:1.05}];      private var dp:ArrayCollection=new ArrayCollection(arrayData);      private function multiDisplay(item:Object):String{         return item.cat+": "+item.name+" $"+item.cost;     }    ]]> </mx:Script> <mx:HorizontalList dataProvider="{dp}"    labelFunction="multiDisplay"    columnWidth="130"    width="850"/> 

This code would create the display as shown here:

For each item in the HorizontalList, the function is called. The current object being displayed is passed to the function, and the string is built and returned from the function and displayed.

Note

Even though the function is defined to accept a parameter (private function multiDisplay(item:Object):String), you do nothing to pass it in the labelFunction property (labelFunction="multiDisplay"). Flex automatically passes the correct object to the function.

Implementing an itemRenderer

By default, both HorizontalList and TileList permit only text to be displayed, as you have just seen in the example code. This default can be overridden by using an itemRenderer property. For this lesson, you can think of an itemRenderer as an MXML file you create to display an item's data in the way you choose, and not have the display limited to text only. For example, it is common to display some text and an image from the HorizontalList.

Note

There are actually a number of ways to implement an itemRenderer, and you will see more ways in Lesson 11, "Using DataGrids and Item Renderers."

When using an itemRenderer with the HorizontalList or the TileList, you specify an external file in the itemRenderer property, which can be either an MXML or AS file. This itemRenderer file is then used for each object in the dataProvider. For instance, if you have an array of 14 objects as a data provider, the itemRenderer would be used 14 times. In the itemRenderer, all the particular item's data being rendered is available in a variable called data.

In the following code example, the objects hold an image name instead of a price. This first code example contains the HorizontalList control.

<mx:Script>    <![CDATA[       import mx.collections.ArrayCollection;       private var arrayData:Array=[          {name:"banana",cat:"fruit",imgName:"banana.jpg"},          {name:"grape",cat:"fruit",imgName:"grape.jpg"},          {name:"strawberry",cat:"fruit",imgName:"strawberry.jpg"},          {name:"tomato",cat:"vegetable",imgName:"tomato.jpg"},          {name:"broccoli",cat:"vegetable",imgName:"broccoli.jpg"}];       private var dp:ArrayCollection=new ArrayCollection(arrayData);    ]]> </mx:Script> <mx:HorizontalList dataProvider="{dp}"    itemRenderer="Thumbnail"    width="600"/> 

The next code example is the itemRenderer. The <mx:VBox> tag was selected as the root tag of the renderer because the text should appear above the image; but, a renderer need not be a VBox.

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"    width="100"    height="120">      <mx:Label text="{data.name}"/>      <mx:Image source="{data.imgName}"/> </mx:VBox> 

The code would create the display as shown here: