Creating a drop-down list

How to

Create a drop-down list of items in your application.


Construct the drop-down list object in your class

// To allow other applications to reference 
// this object, you can place it in the class root
var myDropDownList:DropDown = new DropDown();

Initialize your drop-down list's attributes

// Set location
myDropDownList.x = 100;
myDropDownList.y = 100;

// Set width
myDropDownList.width = 300;

// Call event function when list item is selected
myDropDownList.addEventListener(Event.SELECT, onSelect); 

// Add list to stage
this.addChild( myDropDownList );

Create and apply your drop-down list's contents

// Create an array for objects
var arrSport:Array=[];

// Add objects with a label property
arrSport.push({label: "Hockey"});
arrSport.push({label: "Baseball"});
arrSport.push({label: "Football"});
arrSport.push({label: "Golf"});
arrSport.push({label: "Basketball"});

// Link array to list as a data provider
myDropDownList.dataProvider = new DataProvider(arrSport);

Create the functions that are called by your drop-down list's interaction events

private function onSelect (event:Event):void 
    trace("selected index: " +;
    var myObj:Object =;
    trace("Selected Item: " + myObj.label); 

Build requirements

You must include the following classes in the class:

import qnx.fuse.ui.listClasses.ListSelectionMode;
import qnx.fuse.ui.listClasses.DropDown;


When you create a drop-down list, you declare the DropDown variable and set its properties to whatever values your application requires. After you set up your list's properties, you can create an array of data to provide the list's contents and use the list's dataProvider property to apply the contents. To add functionality, you can add listener functions for the SELECT event to perform the actions that are defined in the functions, when the user selects an item from your list. You can also reference the currently selected item in your list elsewhere in the class by using your list's selectedIndex property.