Building an Address Book > Adding Components

Linking Components to ActionScript Code

After we place the components in our movie, we must link them to ActionScript using the Property inspector. At the very least, this means giving each component a unique identifier known as an "instance name". From ActionScript, we use the instance name to identify and control the component. We can also use the Property inspector to supply data for a component and to specify the function it should call when activated, as shown below.

Our address book's components and the parameters they define are listed below.

For specific instructions on setting the instance name and properties of a component, refer to the Introduction to Components Tutorial (Help > Tutorials).

The addButton_pb Component
Label: Add Contact
The Label parameter specifies the text to display on a button. We set it to "Add Contact".

Click Handler: enterEditMode
The Click Handler parameter specifies the function to invoke when the user clicks a button. We set it to "enterEditMode". (We'll see how the functions work later.)

The removeButton_pb Component
Label: Remove Contact
Click Handler: doRemoveContact

The editButton_pb Component
Label: Edit Contact
Click Handler: enterEditMode

The sortAZButton_pb Component
Label: Sort A-Z
Click Handler: sortListBox

The sortZAButton_pb Component
Label: Sort Z-A
Click Handler: sortListBox

The contactListBox_lb Component
Labels: <None>
The Labels parameter specifies the on-screen text of items in a ListBox. In our application, we specify Labels through ActionScript in the function populateListBox(). Therefore, this parameter is left empty.

Data: <None>
The Data parameter specifies values for items in a ListBox. In our application, we specify Data through ActionScript in the function populateListBox(). Therefore, this parameter is left empty.

Select Multiple: false
The Select Multiple parameter specifies whether multiple items may be simultaneously selected in a ListBox. We use the default, false, to prevent multiple item selection.

Change Handler: populateDetailsPane
The Change Handler parameter specifies the function to invoke when an item is selected in the ListBox (either by the user or by ActionScript). We set the Change Handler for contactListBox_lb to "populateDetailsPane". Each time a contact is selected in the ListBox, the populateDetailsPane() function displays the associated content in the "contact details" pane.

The phoneComboBox_cb Component
Labels: [home, work, cell]
The Labels parameter specifies the on-screen text of items in a ComboBox. We set this list to "home", "work", and "cell".

All other parameters for the phoneComboBox_cb are left at the default value. We do not need to associate any data with our ComboBox labels because we use the index order of each item as its value. The "home" item is at index 0, so we assume its value is 0; "work" is at index 1 so its value is 1; and "cell" is at index 2 so its value is 2. We'll use these index values later to store the user's choice for phone type.