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 select from in its pop-up list.

To create an application with the ComboBox component:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Drag a ComboBox component from the Components panel to the Stage.
  3. Select the Transform tool and resize the component on the Stage.

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

  4. Select the combo box and, in the Property inspector, enter the instance name comboBox.
  5. In the Component inspector or 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 box. 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.

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

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

To create a ComboBox component using ActionScript:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Drag the ComboBox component from the Components panel to the current document's library.

    This adds the component to the library, but doesn't make it visible in the application.

  3. Select the first frame in the main Timeline, open the Actions panel, and enter the following code:
    this.createClassObject(mx.controls.ComboBox, "my_cb", 10);
    
    my_cb.addItem({data:1, label:"One"});
    my_cb.addItem({data:2, label:"Two"});
    

    This script uses the method UIObject.createClassObject() to create the ComboBox instance, and then uses ComboBox.addItem() to add list items to the ComboBox.

  4. Now add an event listener and event handler function to respond when a ComboBox item is selected:
    // Create listener object.
    var cbListener:Object = new Object();
    // Create event handler function.
    cbListener.change = function (evt_obj:Object) {
     trace("Currently selected item is: " + evt_obj.target.selectedItem.label);
    }
    // Add event listener.
    my_cb.addEventListener("change", cbListener);
    
  5. Select Control >Test Movie, and click an item in the combo box to see a message in the Output panel.