Lesson 8. Using Controls and Repeaters with Data Sets

What You Will Learn

In this lesson, you will:

• Populate a HorizontalList with a data set and display the information using a labelField, labelFunction, and itemRenderer

• Create an MXML component to be used as an itemRenderer

• Loop over a data set using a Repeater component

• Use the currentItem and currentIndex properties and the getrepeaterItem() method with a Repeater

• Reference controls built by a Repeater using array notation

• Instantiate a custom component in a Repeater

Approximate Time

This lesson takes approximately 2 hours to complete.

Lesson Files

Media Files:

None

Starting Files:

Lesson08/start/EComm.mxml

Completed Files:

Lesson08/complete/EComm.mxml

Lesson08/complete/views/ecomm/Cart.mxml

Lesson08/complete/views/ecomm/CategoryView.mxml

Lesson08/complete/views/ecomm/FoodList.mxml

Lesson08/complete/views/ecomm/GroceryDetail.mxml

Lesson08/complete/views/ecomm/TextAndPic.mxml

Lesson08/complete/as/ecomm.as

In this lesson, you will expand your skill set in working with data sets. You often get a data set from a back-end service in the form of a complex data structure, such as an object, an array, or an array of objects. Up to this point, you have learned few ways to display, manipulate, or loop over these data sets (although you did loop over XML data using a for each..in loop).

A data set is used with a HorizontalList to display grocery categories and a Repeater to display the grocery items from that category.

One of the focuses in this lesson is to supply a data set to list-based components, especially the HorizontalList and TileList components. These components enable you to display data for each object in the data set in various ways. You will also see that you can override the default behavior of these components, which enables only text to be displayed, by using an itemRenderer. This functionality enables you to define a component to display whatever kind of data you choose when using list-based controls.

Another focus of this lesson is using a Repeater component, which enables you to loop over the objects in a data set using MXML. During the looping you can instantiate components, including custom components using data from the data set. For instance, in one of the tasks in this lesson, you will loop over a custom component that displays grocery items from a certain category of groceries.