DropDown

Returns a reference to the button of the DropDown component. This allows you to modify certain properties of the button, such as text formats.

If you want to set the skin of the button, make sure to use the setButtonSkin() method.

See also

setButtonSkin()

            var dd:DropDown = new DropDown();
            dd.dataProvider = DataProviderUtils.createDataProvider();
            addChild( dd );
            
            var button:LabelButton = dd.button;
            formatText( SkinStates.UP, button );
            formatText( SkinStates.DOWN, button );
            formatText( SkinStates.DOWN_SELECTED, button );
            formatText( SkinStates.SELECTED, button );
            formatText( SkinStates.DISABLED, button );
            formatText( SkinStates.DISABLED_SELECTED, button );
            
            function formatText( state:String, button:LabelButton ):void
            {
                var format:TextFormat;
                
                switch( state )
                {
                    case SkinStates.UP:
                        format = ThemeGlobals.getTextFormat( ThemeGlobals.BUTTON_FORMAT_OUT );
                        format.color = 0xFF0000;
                        break;
                    case SkinStates.DOWN:
                        format = ThemeGlobals.getTextFormat( ThemeGlobals.BUTTON_FORMAT_DOWN );
                        format.color = 0xFF000;
                        break;
                    case SkinStates.DOWN_SELECTED:
                        format = ThemeGlobals.getTextFormat( ThemeGlobals.BUTTON_FORMAT_DOWN );
                        format.color = 0x000000;
                        break;
                    case SkinStates.SELECTED:
                        format = ThemeGlobals.getTextFormat( ThemeGlobals.BUTTON_FORMAT_SELECTED );
                        format.color = 0x000000;
                        break;
                    case SkinStates.DISABLED:
                        format = ThemeGlobals.getTextFormat( ThemeGlobals.BUTTON_FORMAT_DISABLED );
                        format.color = 0x333333;
                        break;
                    case SkinStates.DISABLED_SELECTED:
                        format = ThemeGlobals.getTextFormat( ThemeGlobals.BUTTON_FORMAT_SELECTED_DISABLED );
                        format.color = 0x333333;
                        break;
                    default:
                        format = ThemeGlobals.getTextFormat( ThemeGlobals.BUTTON_FORMAT_OUT );
                }
                
                button.setTextFormatForState( format, state );
            }
        

Gets and sets the DataProvider for the DropDown list.

See also

DataProvider

Gets or sets the property that determines the parent for the drop down list.

The default value is the DropDown component itself.

Returns true if the list is open in the DropDown.

The default value is false.

Returns a reference to the list of the DropDown component. You can also use the setListSkin() method in order to update the skin of the list.

See also

setListSkin()

Gets or sets the prompt that appears in the drop down.

The prompt is shown as the default message in the drop down when the selectedIndex value is set to -1. For example, the String "Select an item" prompts the user to select an item from the drop down list. If no prompt is set, the selectedIndex value is set to 0 and the first item in the DataProvider is displayed in the drop down.

Gets or sets the number of visible rows in the drop down list.

Gets and sets the row height for the drop down list.

The row height represents ths height of each item in the list (in pixels).

Gets or sets the index of the currently selected item in the drop down.

Gets or sets the currently selected item.

In the included example, an event listener calls the function below to return information about the currently selected cell:

         private function onSelect(event:Event):void {
         
                 trace("selected index: " + event.target.selectedIndex);
         
                 var myObj:Object = new Object();
                 myObj = event.target.selectedItem;
                 trace("Selected Item: " + myObj.label);
         }
         

Determines if the drop down list will expand above or below the drop down button.

In the following image, the drop down list expands above the drop down button (the showListAbove property is set to true):

The default value is false.

Creates a new DropDown instance.

Adds an item to the list.

Parameters

Adds an item to the list at the specified index.

Parameters

Adds an array item at the specified index.

Parameters

See also

addItem()
addItemAt()

Closes the list of the DropDown component if it is open. Calling this method will not fire a Event.CLOSE event.

Returns the item in the DataProvider at the specified index.

Parameters

Returns

Opens the list of the DropDown component if it is closed. Calling this method will not fire a Event.OPEN event.

Removes all the items from the list.

Removes the item from the list.

Parameters

Removes an item from list at the specified index.

Parameters

Replaces an item, given the new item object and the old item.

Parameters

Replaces the item in the list at the specified index, given the new item.

Parameters

Sets the skin for the List background.

This method takes a DisplayObject class.

Parameters

Sets the skin for the drop down button.

You can pass in a qualified class name String, or the actual class. In either instance the class that is used must implement the ISkin interface.

Note: Do not pass in an instance of a skin class. This may cause unexpected behavior.

Parameters

Sets the CellRenderer for the List.

By default, the DropDown class uses the CellRenderer class to render the cells in the list. In the example below, the AlternatingCellRenderer class is passed in to the setListSkin method to provide alternating colors (grey and white) for the adjacent cells in the list.

         var myDDList:DropDown = new DropDown();
         myDDList.setPosition(100, 400);
         myDDList.prompt = "Intramurals";
         myDDList.showListAbove = true;
         myDDList.setListSkin(AlternatingCellRenderer);
         

You can pass in a qualified class name String, or the actual class. In either instance the class that is used must implement the ICellRenderer interface.

Note: Do not pass in an instance of a skin class. This may cause unexpected behavior.

Parameters

Updates the item in the list.

Parameters

Updates the item in the list at the specified index.

Parameters

Updates the items starting at the specified index with new items.

Parameters

See also

updateItem()
updateItemAt()

Dispatched when the drop down list is closed.

Dispatched when the drop down list is opened.

Dispatched when an item in the drop down list is selected.

The following example creates a simple DropDown instance. The dropdown uses event listeners to capture user interaction.

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    
    import qnx.ui.data.DataProvider;
    import qnx.ui.listClasses.DropDown;
    
    [SWF(height="600", width="1024", 
    frameRate="30", backgroundColor="#FFFFFF")]
    
    public class MyDropDownExample extends Sprite
    {
        public function MyDropDownExample()
        {
            initializeUI();
        }
        
        private function initializeUI():void
        {
            
            var arrMonth:Array=[];
            // add objects with a label property
            arrMonth.push({label: "Hockey"});
            arrMonth.push({label: "Baseball"});
            arrMonth.push({label: "Football"});
            arrMonth.push({label: "Golf"});
            arrMonth.push({label: "Basketball"});
                
            var myDDList:DropDown = new DropDown();            
            myDDList.setPosition(100, 100);    
            myDDList.prompt = "Intramurals";
    
            
            //set the dataProvider
            myDDList.dataProvider = new DataProvider(arrMonth);
            
            myDDList.addEventListener(Event.SELECT, onSelect);
            this.addChild(myDDList);
            
        }
        
        private function onSelect(event:Event):void {
            
            trace("selected index: " + event.target.selectedIndex);
            
            var myObj:Object = new Object();
            myObj = event.target.selectedItem;
            trace("Selected Item: " + myObj.label);
            
            
        }
        
    
    }
}