Using the ComboBox component

You can use a ComboBox component in any form or application that requires a single choice from a list. For example, you could provide a drop-down list of states in a customer address form. You can use an editable combo box for more complex scenarios. For example, in a driving directions application you could use an editable combo box for a user to enter her origin and destination addresses. The drop-down list would contain her previously entered addresses.

ComboBox parameters

The following are authoring parameters that you can set for each ComboBox component instance in the Property inspector or in the Component Inspector panel:

editable determines if the ComboBox component is editable (true) or only selectable (false). The default value is false.

labels populates the ComboBox component with an array of text values.

data associates a data value with each item in the ComboBox component. The data parameter is an array.

rowCount sets the maximum number of items that can be displayed at one time without using a scroll bar. The default value is 5.

You can write ActionScript to set additional options for ComboBox instances using the methods, properties, and events of the ComboBox class. For more information, see ComboBox class.

Creating an application with the ComboBox component

The following procedure explains how to add a ComboBox component to an application while authoring. In this example, the combo box presents a list of cities to choose from in its drop-down list.

To create an application with the ComboBox component, do the following:

  1. Drag a ComboBox component from the Components panel to the Stage.
  2. Select the Transform tool and resize the component on the Stage.

    The combo box can only be resized on the Stage while authoring. Typically, you would only change the width of a combo box to fit its entries.

  3. Select the combo box and, in the Property inspector, enter the instance name comboBox.
  4. In the Component Inspector panel or the Property inspector, do the following:
    • Enter Minneapolis, Portland, and Keene for the label parameter. Double-click the label parameter field to open the Values dialog. Then click the plus sign to add items.
    • Enter MN.swf, OR.swf, and NH.swf for the data parameter.

      These are imaginary SWF files that, for example, you could load when a user selects a city from the combo box.

  5. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code:
    form = new Object();
    form.change = function (evt){
      trace(evt.target.selectedItem.label);
    }
    comboBox.addEventListener("change", form);
    

    The last line of code adds a change event handler to the ComboBox instance. For more information, see ComboBox.change.