Creating an application with the List

The following example describes how to add a List component to an application while authoring. In this example, the List consists of labels that identify car models and data fields that contain prices.

To add a simple List component to an application:

Create a new Flash file (ActionScript 3.0) document.
Drag a List component from the Components panel to the Stage.
In the Property inspector, do the following:
- Enter the instance name aList.
- Assign a value of 200 to the W (width).
Use the Text tool to create a text field below aList and give it an instance name of aTf.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.List;
import flash.text.TextField;

aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;

// Create these items in the Property inspector when data and label
// parameters are available.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;

aList.addEventListener(Event.CHANGE, showData);

function showData(event:Event) {
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}

This code uses the addItem() method to populate aList with three items, assigning each one a label value, which appears in the list, and a data value. When you select an item in the List, the event listener calls the showData() function, which displays the data value for the selected item.

Select Control > Test Movie to compile and run this application.

The following example also creates a List of car models and their prices. It uses a data provider to populate the List, however, rather than the addItem() method.

To populate a List instance with a data provider:

Create a new Flash file (ActionScript 3.0) document.
Drag a List component from the Components panel to the Stage.
In the Property inspector, do the following:
- Enter the instance name aList.
- Assign a value of 200 to the W (width).
Use the Text tool to create a text field below aList and give it an instance name of aTf.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.List;
import fl.data.DataProvider;
import flash.text.TextField;

aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;

var cars:Array = [
{label:"1956 Chevy (Cherry Red)", data:35000},
{label:"1966 Mustang (Classic)", data:27000},
{label:"1976 Volvo (Xcllnt Cond)", data:17000},
];
aList.dataProvider = new DataProvider(cars);
aList.allowMultipleSelection = true;

aList.addEventListener(Event.CHANGE, showData);

function showData(event:Event) {
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}

Select Control > Test Movie to see the List with its items.

The following example creates a List of color names and when you select one, it applies the color to a MovieClip.

To use a List component to control a MovieClip instance:

Create a Flash file (ActionScript 3.0) document.
Drag the List component from the Components panel to the Stage and give it the following values in the Property inspector:
- Enter aList for the instance name.
- Enter 60 for the H value.
- Enter 100 for the X value.
- Enter 150 for the Y value.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

aList.addItem({label:"Blue", data:0x0000CC});
aList.addItem({label:"Green", data:0x00CC00});
aList.addItem({label:"Yellow", data:0xFFFF00});
aList.addItem({label:"Orange", data:0xFF6600});
aList.addItem({label:"Black", data:0x000000});

var aBox:MovieClip = new MovieClip();
addChild(aBox);

aList.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event) {
    drawBox(aBox, event.target.selectedItem.data);
};

function drawBox(box:MovieClip,color:uint):void {
            box.graphics.beginFill(color, 1.0);
            box.graphics.drawRect(225, 150, 100, 100);
            box.graphics.endFill();        
}

Select Control > Test Movie to run the application.
Click colors in the List to see them displayed in a MovieClip.

The following example uses ActionScript to create a simple list that it populates using the addItem() method.

To create a List component instance using ActionScript:

Create a new Flash file (ActionScript 3.0) document.
Drag the List component from the Components panel to the Library panel.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.List;

var aList:List = new List();
aList.addItem({label:"One", data:1});
aList.addItem({label:"Two", data:2});
aList.addItem({label:"Three", data:3});
aList.addItem({label:"Four", data:4});
aList.addItem({label:"Five", data:5});
aList.setSize(60, 40);
aList.move(200,200);
addChild(aList);
aList.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event):void {
    trace(event.target.selectedItem.data);
}

Select Control > Test Movie to run the application.