Spark DropDownList control

Adobe recommends

DropdownList labelDisplay tooltip

Russ Watson
Russ Watson on Flex4Examples.com shows how to add ToolTips to a DropDownList.

The DropDownList control pops up a list when the user selects the anchor. When the user selects an item from the drop-down list, the data item appears in the prompt area of the control.

The following image shows the DropDownList control:

A.
Prompt in a closed DropDownList

B.
Drop-down list in an open DropDownList

C.
Anchor in a closed DropDownList

Unlike the ComboBox control, the DropDownList control is not editable.

 Peter DeHaan has several examples of using the Spark DropDownList on flexexamples.com.

 StackOverflow shows how to adjust the height of an open DropDownList with a custom skin, and how to bind the data field to XML.

When the drop-down list is closed, clicking the anchor button opens it.

When the drop-down list is open:

  • Clicking the anchor button closes the drop-down list and commits the currently selected data item.

  • Clicking outside the drop-down list closes the drop-down list and commits the currently selected data item.

  • Clicking on a data item selects that item and closes the drop-down list.

  • If the requireSelection property is false, clicking on a data item while pressing the Control key deselects the item and closes the drop-down list.

For a complete list of keyboard command for the DropDownList control, see Spark DropDownList control user interaction.

For complete reference information, see the ActionScript 3.0 Reference for the Adobe Flash Platform.

Create a Spark DropDownList control

You define a DropDownList control in MXML by using the <s:DropDownList> tag. Specify an id value if you intend to refer to a component elsewhere in your MXML application, either in another tag or in an ActionScript block.

You specify the data for the DropDownList control by using the dataProvider property. However, because dataProvider is the DropDownList control’s default property, you do not have to specify a <s:dataProvider> child tag of the <s:DropDownList> tag, as the following example shows: 
<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDDSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:DropDownList width="140"> 
        <mx:ArrayCollection>
            <fx:String>Alabama</fx:String>
            <fx:String>Alaska</fx:String>
            <fx:String>Arizona</fx:String>
            <fx:String>Arkansas</fx:String>
            <fx:String>California</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</s:Application>
The executing SWF file for the previous example is shown below:

Set the prompt in the Spark DropDownList control

By default, the prompt area is empty when the control first loads. Selecting a data item in the drop-down list sets the prompt to the data item.

Use the prompt property to define the text to display when the DropDownList loads, as the following example shows: 

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDDSimplePrompt.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout paddingLeft="10"
            paddingTop="10"/>
    </s:layout>

    <s:DropDownList width="140"
        prompt="Select a state"> 
        <mx:ArrayCollection>
            <fx:String>Alabama</fx:String>
            <fx:String>Alaska</fx:String>
            <fx:String>Arizona</fx:String>
            <fx:String>Arkansas</fx:String>
            <fx:String>California</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</s:Application>
The executing SWF file for the previous example is shown below:

If you set the requireSelection property to true, the control ignores the prompt property. Instead, it sets the prompt area and the selectedIndex property to the first data item in the control.

Alternatively, you can set the selectedIndex property to any data item. The prompt area displays the data item specified by the selectedIndex property. In the following example, you set the selectedIndex property to 4 to select California by default when the application starts: 
<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDDSimpleSetSelectedIndex.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout paddingLeft="10"
            paddingTop="10"/>
    </s:layout>

    <s:DropDownList width="140"
        selectedIndex="4"> 
        <mx:ArrayCollection>
            <fx:String>Alabama</fx:String>
            <fx:String>Alaska</fx:String>
            <fx:String>Arizona</fx:String>
            <fx:String>Arkansas</fx:String>
            <fx:String>California</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</s:Application>
The executing SWF file for the previous example is shown below:

Handle Spark DropDownList events

The DropDownList control inherits the events of the ListBase class, and adds the following events:

  • close Dispatched when the drop-down list closes for any reason.

  • open Dispatched when the drop-down list opens for any reason.

Spark DropDownList control user interaction

A page in the DropDownList control is defined as the number of data items that fit in the drop-down list. Paging down through the data displayed by a six-line control shows records 0-5, 6-11, 12-17, and so on.

Keyboard navigation when DropDownList is closed

The DropDownList control has the following keyboard navigation features when the drop-down list is closed:

Key

Action

Alphanumeric keys

Displays the closest match in the item list. The DropDownList does not open.

Up Arrow

Moves selection up one item.

Down Arrow

Moves selection down one item.

Control + Down Arrow

Opens the drop-down list.

Page Up

Moves the selection up one page. If the selectedIndex is currently -1, do nothing.

Page Down

Moves the selection down one page. If you are at the end of the list, do nothing.

Home

Moves selection to the top of the drop-down list.

End

Moves selection to the bottom of the drop-down list.

Keyboard navigation when DropDownList is open

The DropDownList control has the following keyboard navigation features when the drop-down list is open:

Key

Action

Alphanumeric keys

Scrolls to and highlights the closest match in the item list.

Up Arrow

Moves selection up one item but does not commit the selection until the drop-down list closes.

Down Arrow

Moves selection down one item but does not commit the selection until the drop-down list closes.

Control + Up Arrow

Closes the drop-down list and commits the selection.

Escape

Closes the drop-down list but do not commit the selection.

Page Up

Moves the selection to the top of the data items currently displayed but does not commit the selection until the drop-down list closes.

Page Down

Moves the selection to the bottom of the data items currently displayed but does not commit the selection until the drop-down list closes.

Home

If selectedIndex = -1, do not change the currently selected data item. Otherwise, moves selection to the first data item in the drop-down list. Does not commit the selection until the drop-down list closes.

End

Moves selection to the last data item in the drop-down list. Does not commit the selection until the drop-down list closes.