Creating a picker

How to

Create a picker list of items in your application.

Solution

Construct the picker object in your class

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

Initialize your picker's attributes

// Set location
picker.x = 300;
picker.y = 175;

// Set height
picker.height = 50;

// Set width
picker.width = 200;

picker.setListWidth(0,25);
picker.setListWidth(1,25);
picker.setListWidth(2,25);

// Call event functions when list is clicked or scrolled
picker.addEventListener(Event.SELECT,handleSelect);
picker.keepOpen = true;

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

Create and apply your picker's contents

// Create three arrays to handle hours, minutes, AM, PM
var arrHour:Array=[];
var arrMin:Array=[];
var arrAmPm:Array=[];

// Add hours 1 to 12
for (var i:int=1; i<13; i++) 
{
    arrHour.push({label: i.toString()});
}
// Create hour data provider
var HourDP:DataProvider=new DataProvider(arrHour);

// Add minutes 0 to 59
for (var k:int=0; k<60; k++) 
{
    arrMin.push({label: k.toString()});
}
// Create minute data provider
var MinDP:DataProvider=new DataProvider(arrMin);
		
// Add AM and PM
arrAmPm.push({label: "AM"});
arrAmPm.push({label: "PM"});
// Create AM/PM data provider
var AmPmDP:DataProvider=new DataProvider(arrAmPm);
			
// Populate the main array
var dpp:Array = new Array();
dpp.push(HourDP);
dpp.push(MinDP);
dpp.push(AmPmDP); 

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

Create the functions that are called by your picker's interaction events

private function handleSelect(e:Event):void 
{
    for (var j:int = 0; j <picker.selectedItems.length; j++) 
	{
	    trace("Picker.selectedItems " +picker.selectedItems[j].label);
	}
	trace("Picker.selectedIndices "+picker.selectedIndices);
}

Build requirements

You must include the following classes in the class:

import flash.events.Event;
import qnx.fuse.ui.picker.Picker; 
import qnx.ui.data.DataProvider;

Discussion

When you create a picker, you declare the Picker variable and set its properties to whatever values your application requires. After you set your picker's properties, you can create an array of data to provide the picker's contents and use the picker's dataProvider property to apply the contents. To add functionality, you can add listener functions for SELECT events to perform the actions that are defined in the functions, when the user interacts with your picker. You can also reference the currently selected combination in your picker elsewhere in the class by using your picker's selectedIndices property.