Learning Flex – Lesson 8, Using Controls and Repeaters with Datasets

Flex has a group of list based controls that inherit from ListBase and allow the user to scroll through a list of items and select one or more of them. These include DataGrid, HorezontalList, List, ComboBox, TileList and Tree.

All of these use a dataProvider property to define the source of their data. This allows a level of abstraction between the data provider (or model) and the component (or view). This facilitates things like populating multiple components from the same data, switching data providers at runtime and having changes to the data reflected in all components that use it.

Horizontal and Tile List Components

Both of these list components display a list of items, the specific elements of which are defined by the developer. Horizontal lists will display a scroll bar along the bottom if required to view all items. A tile list displays items in a dynamically created set of rows and columns of equal sized tiles. The direction property can be used to force horizontal or vertical layout and scroll bars can be added to one axis.

Displaying data elements in a list control

If you just want to display a single text element from a data provider, this can be achieved by specifiying the element name in the labelField property of the list.

To combine data from several fields, you need to set the labelFunction property instead. This should be the name of a function you write that accepts a parameter of type Object and returns a String. An example would be –

private function listMultiString(item:object):String{
return item.name+" $"+item.price;
}

To display items in other ways, you’ll need to define an item renderer.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: