Packageqnx.ui.picker
Classpublic class Picker
InheritancePicker Inheritance UIComponent Inheritance flash.display.MovieClip
Implements IDataViewer

The Picker class is used to display complex data, such as dates and IP addresses.

The following figure shows a Picker instance in the closed state:

A closed picker.

A picker component is closed until the user taps the control. Once the picker component gets focus, the picker opens revealing the scrolling columns that contain the data:

An open picker.

The user can scroll through multiple lists of data at once, while selecting a value from each column. For example, you might implement a picker to enable a user to select his or her date of birth, where each column represents day, month and year.

View the examples



Public Properties
 PropertyDefined By
 Inheritedcontainment : String
Gets or sets a property that determines how a component is contained within a parent container.
UIComponent
  dataProvider : IDataProvider
Gets and sets the DataProvider for the Picker instance.
Picker
  defaultListWidth : int
Sets the default width (in pixels) for each of the columns in the picker.
Picker
  isOpen : Boolean
Gets or sets a value that determines if the picker is open, interactive, and by default showing all lists.
Picker
  rowCount : int
Gets or sets an integer that determines the number of rows the Picker will display.
Picker
  rowHeight : int
Gets or sets the row height property of the list items and the middle section of the picker (button bar).
Picker
  selectedIndices : Array
Gets or sets the selected index for each list in a Picker.
Picker
  selectedItems : Array
Gets or sets the group of selected items for each list in the Picker.
Picker
 Inheritedsize : Number
Gets or sets the size for this component (as a percentage of the container's size, or in pixels).
UIComponent
 InheritedsizeMode : String
Gets or sets the size mode for this component.
UIComponent
 InheritedsizeUnit : String
Gets or sets the unit of measure for the size property.
UIComponent
Public Methods
 MethodDefined By
  
Creates a Picker instance.
Picker
  
addItem(item:Object):void
Adds a column of data to the Picker, given an DataProvider instance.
Picker
  
addItemAt(item:Object, index:int):void
Adds a column of data to the Picker, given a DataProvider and an offset.
Picker
  
addItemsAt(items:Array, index:int):void
Adds columns of data to the Picker given an Array of DataProvider objects.
Picker
 Inherited
destroy():void
Call this method when you want to have your object collected by the garbage collector.
UIComponent
 Inherited
drawNow():void
Calls the draw() method.
UIComponent
  
getButtonSkin():Object
Returns the button skin class for the picker.
Picker
  
getItemAt(index:int):Object
Returns the data of the column instance at the specified index.
Picker
  
getListAt(index:int):List
Gets the List at a given index.
Picker
  
Returns the skin that is used as the background for the list.
Picker
  
getLists():Array
Returns an array of List instances used to populate the columns in the picker.
Picker
  
getListSkin():Object
Gets the skin object that is used by the list.
Picker
  
getListSkinAt(index:int):Object
Gets the list skin, given the index of the List.
Picker
  
Returns the selection skin.
Picker
 Inherited
invalidate(property:String, invalidateNow:Boolean = false):void
Marks the property as invalid and the draw() method is called on the next frame or the next render, whichever comes first.
UIComponent
  
removeAll():void
Removes all columns of data from the list.
Picker
  
removeItem(item:Object):void
Removes a column of data from the Picker, given the DataProvider instance that is used by the column.
Picker
  
removeItemAt(index:int):void
Removes a column of data from the Picker at the specified index.
Picker
  
replaceItem(item:Object, oldObject:Object):void
Replaces a column of data given a new DataProvider instance and the existing DataProvider instance to replace.
Picker
  
replaceItemAt(item:Object, index:int):void
Replaces a column of data given the new DataProvider instance and the index of the column to replace.
Picker
  
setButtonSkin(skin:Object):void
Sets the button skin for the picker.
Picker
  
setListBackgroundSkin(skin:Object):void
Sets the skin for the background list.
Picker
  
setListSkin(skin:Object):void
Sets the skin for the list.
Picker
  
setListSkinAt(skin:Object, listAtIndex:int = 0):void
Sets the list skin for the List (or column) instance at the given index.
Picker
  
setListWidth(listAtIndex:int = 0, listWidth:int = 100):void
Sets the width of a list given an index and a width in pixels.
Picker
 Inherited
setPosition(x:Number, y:Number):void
Sets the x and y position of the component.
UIComponent
  
setSelectionSkin(skin:Object):void
Sets the skin for the selection.
Picker
 Inherited
setSize(w:Number, h:Number):void
Sets the width and height of the component.
UIComponent
  
updateItem(value:Object, oldObject:Object):void
Updates a column of data given a new DataProvider instance and the existing DataProvider instance.
Picker
  
updateItemAt(item:Object, index:int):void
Updates a column of data given the new DataProvider instance and the index of the column to replace.
Picker
  
updateItemsAt(items:Array, index:int):void
Updates columns of data, given a new Array of DataProvider instances and the index at which to add the Array.
Picker
Protected Methods
 MethodDefined By
 Inherited
callLater(method:Function):void
Calls the specified method on the next frame or the next render, which ever happens first.
UIComponent
 Inherited
createInstance(linkage:Object):DisplayObject
Calling this method will attempt to create a DisplayObject instance based on the value of the linkage parameter.
UIComponent
 Inherited
draw():void
Called every time you set the width and height of the component.
UIComponent
 Inherited
isInvalid(property:String, ... properties):Boolean
Checks to see if the property is invalid and returns true if it is.
UIComponent
 Inherited
onAdded():void
Called when the instance is added to the stage.
UIComponent
 Inherited
onRemoved():void
Called when the instance is removed from the stage.
UIComponent
 Inherited
setEnabled(val:Boolean):void
Called when the enabled property changes.
UIComponent
 Inherited
validate(property:String):void
Lets the component know that the specified property has been validated.
UIComponent
Events
 Event Summary Defined By
  Dispatched when the DataProvider changes for the picker component.Picker
  Dispatched when the picker closes.Picker
  Dispatched when the picker opens.Picker
  Dispatched when the user selects an item from a column in the picker.Picker
Public Constants
 ConstantDefined By
  SIZE_LARGE : int = 5
[static] A constant indicating the large picker.
Picker
  SIZE_SMALL : int = 3
[static] A constant indicating the small picker.
Picker
Property Detail
dataProviderproperty
dataProvider:IDataProvider

Gets and sets the DataProvider for the Picker instance. This must be of type IDataProvider.

In the example below, the dataProvider property is set by passing in a DataProvider instance. Each item in the dataProvider property represents a column in the picker and should be of type IDataProvider.

            var i:int = 0;
            var hours:DataProvider = new DataProvider();
            for( i = 0; i<=11; ++i)
            {
                hours.addItem( { label:( i == 0 ) ? "12" : i });
            }
            
            var minutes:DataProvider = new DataProvider();
            for( i = 0; i<=59; ++i)
            {
                minutes.addItem( { label: (""+Math.floor(i/10))+(i%10)} );
            }
            
            var dp:DataProvider = new DataProvider();
            dp.addItem( hours );
            dp.addItem( minutes );
            dp.addItem( new DataProvider( [{label:"AM"},{label:"PM"}] ) );
            
            picker.dataProvider = dp;
         


Implementation
    public function get dataProvider():IDataProvider
    public function set dataProvider(value:IDataProvider):void
defaultListWidthproperty 
defaultListWidth:int

Sets the default width (in pixels) for each of the columns in the picker.

The default value is 100.


Implementation
    public function get defaultListWidth():int
    public function set defaultListWidth(value:int):void
isOpenproperty 
isOpen:Boolean

Gets or sets a value that determines if the picker is open, interactive, and by default showing all lists.

Setting isOpen() to true ensures that the picker will stay open and will not react to adjacent or nearby stage mouse events when you click off.


Implementation
    public function get isOpen():Boolean
    public function set isOpen(value:Boolean):void
rowCountproperty 
rowCount:int

Gets or sets an integer that determines the number of rows the Picker will display.

The value for this property must always be an odd number. This will allow the middle row to be centered within the button, with the adjacent cells above and below the selection.

The default value is 3.


Implementation
    public function get rowCount():int
    public function set rowCount(value:int):void

Throws
ArgumentError — Thrown if the rowCount is set to an even number.
rowHeightproperty 
rowHeight:int

Gets or sets the row height property of the list items and the middle section of the picker (button bar).

The default value is 40.


Implementation
    public function get rowHeight():int
    public function set rowHeight(value:int):void
selectedIndicesproperty 
selectedIndices:Array

Gets or sets the selected index for each list in a Picker.


Implementation
    public function get selectedIndices():Array
    public function set selectedIndices(value:Array):void
selectedItemsproperty 
selectedItems:Array

Gets or sets the group of selected items for each list in the Picker.


Implementation
    public function get selectedItems():Array
    public function set selectedItems(value:Array):void

Throws
ArgumentError — Thrown if one of the specified item is not currently in the DataProvider of the list.
Constructor Detail
Picker()Constructor
public function Picker()

Creates a Picker instance.

Method Detail
addItem()method
public function addItem(item:Object):void

Adds a column of data to the Picker, given an DataProvider instance.

var arrMonth_fr:Array = new Array();
arrMonth_fr.push({label: "Janvier"});
arrMonth_fr.push({label: "Fevrier"});
arrMonth_fr.push({label: "Mars"});
arrMonth_fr.push({label: "Avril"});
arrMonth_fr.push({label: "Mai"});
arrMonth_fr.push({label: "Juin"});
arrMonth_fr.push({label: "Juillet"});
arrMonth_fr.push({label: "Aout"});
arrMonth_fr.push({label: "Septembre"});
arrMonth_fr.push({label: "Octobre"});
arrMonth_fr.push({label: "Novembre"});
arrMonth_fr.push({label: "Decembre"});
var month_frDP:DataProvider=new DataProvider(arrMonth_fr);
picker.addItem(month_frDP);
        

Parameters

item:Object — The data that represents the column in the picker. Must be of type IDataProvider.

addItemAt()method 
public function addItemAt(item:Object, index:int):void

Adds a column of data to the Picker, given a DataProvider and an offset.

In the following example, the addItemsAt() method is called to set the DataProvider for the third column in the Picker.

var arrMonth_fr:Array = new Array();
arrMonth_fr.push({label: "1"});
arrMonth_fr.push({label: "2"});
arrMonth_fr.push({label: "3"});
arrMonth_fr.push({label: "4"});
arrMonth_fr.push({label: "5"});
arrMonth_fr.push({label: "6"});
arrMonth_fr.push({label: "7"});
arrMonth_fr.push({label: "8"});
arrMonth_fr.push({label: "9"});
arrMonth_fr.push({label: "10"});
arrMonth_fr.push({label: "11"});
arrMonth_fr.push({label: "12"});
var month_nums:DataProvider=new DataProvider(arrMonth_fr);
picker.addItemAt(month_nums, 2);
        

Parameters

item:Object — The DataProvider to add. Must be of type IDataProvider.
 
index:int — The offset value at which to add the column.


Throws
RangeError — Thrown if the specified index is less than 0 or greater than or equal to the length of the DataProvider.
addItemsAt()method 
public function addItemsAt(items:Array, index:int):void

Adds columns of data to the Picker given an Array of DataProvider objects.

Parameters

items:Array — The array of DataProvider instances to add. Each DataProvider must be of type IDataProvider.
 
index:int — The index, or offset, at which to add the array.


Throws
RangeError — Thrown if the specified index is less than 0, or greater than or equal to the length of the DataProvider.

See also

getButtonSkin()method 
public function getButtonSkin():Object

Returns the button skin class for the picker.

Returns
Object — skin The button skin. This can be the Class or the qualified class name of the button skin.
getItemAt()method 
public function getItemAt(index:int):Object

Returns the data of the column instance at the specified index.

Parameters

index:int — The index of the column for which to return the DataProvider.

Returns
Object — The DataProvider instance (of type IDataProvider) at the specified index.

Throws
RangeError — Thrown if the specified index is less than 0 or greater than or equal to the length of the DataProvider.
getListAt()method 
public function getListAt(index:int):List

Gets the List at a given index.

The following routine shows the getListAt() method being used to update the selected picker item with timer information:

private function updatePicker():void
{
        //hours col
        picker.getListAt(0).selectedIndex = countDownDate.hoursUTC;
        //minutes col
        picker.getListAt(1).selectedIndex = countDownDate.minutesUTC;
        //secs col
        picker.getListAt(2).selectedIndex = countDownDate.secondsUTC;
}
         

Parameters

index:int — An integer representing the index of the List.

Returns
List — The List at the given index.

Throws
RangeError — Thrown if the supplied index is not within the number of lists.
getListBackgroundSkin()method 
public function getListBackgroundSkin():Object

Returns the skin that is used as the background for the list.

Returns
Object — skin The DisplayObject that is used as the backgrdound of the picker. This can be the Class or the qualified class name of the button skin.
getLists()method 
public function getLists():Array

Returns an array of List instances used to populate the columns in the picker.

Returns
Array — An Array of List objects.
getListSkin()method 
public function getListSkin():Object

Gets the skin object that is used by the list. This is the default skin for all cells in picker columns.

Returns
Object — The Skin object. This can be the Class or the qualified class name of the skin.
getListSkinAt()method 
public function getListSkinAt(index:int):Object

Gets the list skin, given the index of the List.

Parameters

index:int — The index of the List

Returns
Object — The Skin object. This can be the Class or the qualified class name of the skin.
getSelectionSkin()method 
public function getSelectionSkin():Object

Returns the selection skin.

Returns
Object — The DisplayObject instance. This can be the Class or the qualified class name of the button skin.
removeAll()method 
public function removeAll():void

Removes all columns of data from the list.

removeItem()method 
public function removeItem(item:Object):void

Removes a column of data from the Picker, given the DataProvider instance that is used by the column.

The removeItem() method removes the DataProvider that is associated with the column. In the following listing, a DataProvider instance is passed into the removeItem() method to remove the associated column:

        picker.removeItem(month_frDP);
        

The DataProvider instance month_frDP was previously added to the Picker.

Parameters

item:Object — The DataProvider instance that is associated with the List instance (or column) to be removed. Must be of type IDataProvider.


Throws
ArgumentError — Thrown if the item could not be found in the current DataProvider.
removeItemAt()method 
public function removeItemAt(index:int):void

Removes a column of data from the Picker at the specified index.

Parameters

index:int — The index of the List (or column), to remove.


Throws
RangeError — Thrown if the specified index is less than 0 or greater than or equal to the length of the DataProvider.
replaceItem()method 
public function replaceItem(item:Object, oldObject:Object):void

Replaces a column of data given a new DataProvider instance and the existing DataProvider instance to replace.

The following listing creates a new DataProvider instance containing English month names. The new DataProvider instance is passed into the replaceItem() method along with the existing DataProvider instance (which contains French month names):

            var arrMonth_en:Array = new Array();
            arrMonth_en.push({label: "January"});
            arrMonth_en.push({label: "February"});
            arrMonth_en.push({label: "March"});
            arrMonth_en.push({label: "April"});
            arrMonth_en.push({label: "May"});
            arrMonth_en.push({label: "June"});
            arrMonth_en.push({label: "July"});
            arrMonth_en.push({label: "August"});
            arrMonth_en.push({label: "September"});
            arrMonth_en.push({label: "October"});
            arrMonth_en.push({label: "November"});
            arrMonth_en.push({label: "December"});
                        
            var month_enDP:DataProvider=new DataProvider(arrMonth_en);            
                    
            picker.replaceItem( month_enDP, month_frDP);
            

Parameters

item:Object — The new DataProvider instance. Must be of type IDataProvider.
 
oldObject:Object — The DataProvider instance to replace. Must be of type IDataProvider.

replaceItemAt()method 
public function replaceItemAt(item:Object, index:int):void

Replaces a column of data given the new DataProvider instance and the index of the column to replace.

Parameters

item:Object — The new DataProvider instance. Must be of type IDataProvider.
 
index:int — The index of the column to replace.


Throws
RangeError — Thrown if the specified index is less than 0 or greater than or equal to the length of the DataProvider.
setButtonSkin()method 
public function setButtonSkin(skin:Object):void

Sets the button skin for the picker.

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

skin:Object — The button skin to set.

setListBackgroundSkin()method 
public function setListBackgroundSkin(skin:Object):void

Sets the skin for the background list.

This method takes a DisplayObject class.

Parameters

skin:Object — The DisplayObject class to use as the background for the list.

setListSkin()method 
public function setListSkin(skin:Object):void

Sets the skin for the list.

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

skin:Object — The Skin object to set.

setListSkinAt()method 
public function setListSkinAt(skin:Object, listAtIndex:int = 0):void

Sets the list skin for the List (or column) instance at the given index.

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

skin:Object — The skin to set for the list.
 
listAtIndex:int (default = 0) — The index of the List.


Throws
RangeError — Thrown if the supplied index is not within the range of the number of lists.
 
Error — Thrown if there are no lists.
setListWidth()method 
public function setListWidth(listAtIndex:int = 0, listWidth:int = 100):void

Sets the width of a list given an index and a width in pixels.

Setting the width through this accessor method, rather than getting the column and setting it directly, ensures that the lists are properly laid out.

Parameters

listAtIndex:int (default = 0) — The index of the List for which to set the width.
 
listWidth:int (default = 100) — The width value which will be treated as a ratio with the width of the component. All sizes are added up ( for the columns ) and then calculated as a percentage of the overall width of the component.

setSelectionSkin()method 
public function setSelectionSkin(skin:Object):void

Sets the skin for the selection. The selection sits on top of the picker item like a focus window.

This method takes a DisplayObject class.

Parameters

skin:Object — A DisplayObject to use as the selection.

updateItem()method 
public function updateItem(value:Object, oldObject:Object):void

Updates a column of data given a new DataProvider instance and the existing DataProvider instance.

The following listing creates a new DataProvider instance containing English month names. The new DataProvider instance is passed into the updateItem() method along with the existing DataProvider instance (which contains French month names):

            var arrMonth_en:Array = new Array();
            arrMonth_en.push({label: "January"});
            arrMonth_en.push({label: "February"});
            arrMonth_en.push({label: "March"});
            arrMonth_en.push({label: "April"});
            arrMonth_en.push({label: "May"});
            arrMonth_en.push({label: "June"});
            arrMonth_en.push({label: "July"});
            arrMonth_en.push({label: "August"});
            arrMonth_en.push({label: "September"});
            arrMonth_en.push({label: "October"});
            arrMonth_en.push({label: "November"});
            arrMonth_en.push({label: "December"});
            
            
            var month_enDP:DataProvider=new DataProvider(arrMonth_en);            
            
            
            picker.updateItem(month_enDP, month_frDP);
         

Parameters

value:Object — The new DataProvider instance. Must be of type IDataProvider.
 
oldObject:Object — The existing DataProvider instance to update. Must be of type IDataProvider.

updateItemAt()method 
public function updateItemAt(item:Object, index:int):void

Updates a column of data given the new DataProvider instance and the index of the column to replace.

Parameters

item:Object — The new DataProvider instance. Must be of type IDataProvider.
 
index:int — The index of the column.


Throws
RangeError — Thrown if the specified index is less than 0 or greater than or equal to the length of the DataProvider.
updateItemsAt()method 
public function updateItemsAt(items:Array, index:int):void

Updates columns of data, given a new Array of DataProvider instances and the index at which to add the Array.

Parameters

items:Array — The Array of DataProvider instances that are used by the columns. The DataProvider instances must be of type IDataProvider.
 
index:int — The offset at which to update the columns.


Throws
RangeError — Thrown if the specified index is less than 0, or greater than or equal to the length of the DataProvider.

See also

Event Detail
change Event
Event Object Type: flash.events.Event
Event.type property = flash.events.Event.CHANGE

Dispatched when the DataProvider changes for the picker component.

close Event  
Event Object Type: flash.events.Event
Event.type property = flash.events.Event.CLOSE

Dispatched when the picker closes.

open Event  
Event Object Type: flash.events.Event
Event.type property = flash.events.Event.OPEN

Dispatched when the picker opens.

select Event  
Event Object Type: flash.events.Event
Event.type property = flash.events.Event.SELECT

Dispatched when the user selects an item from a column in the picker.

Constant Detail
SIZE_LARGEConstant
public static const SIZE_LARGE:int = 5

A constant indicating the large picker. The large picker size uses five rows of data. This is a recommended value only. To set the size of the Picker, use the rowCount property.

See also

rowCount
SIZE_SMALLConstant 
public static const SIZE_SMALL:int = 3

A constant indicating the small picker. The small picker size uses three rows of data. This is a recommended value only. To set the size of the Picker, use the rowCount property.

See also

rowCount
Examples
The following example shows a simple picker that displays the day, month, and year:
package
{
    import flash.display.Sprite;
    import flash.events.Event;
    
    import qnx.ui.data.DataProvider;
    import qnx.ui.picker.Picker;
    import qnx.ui.text.Label;
    
    [SWF(height="600", width="1024", 
    frameRate="30", backgroundColor="#FFFFFF")]
    public class PickerSample extends Sprite
    {
        private var calPicker:Picker;
        
        public function PickerSample()
        {
            initializeUI();
        }
        
        private function initializeUI():void
        {
            calPicker = new Picker();
            
            calPicker.width=400;
            calPicker.height=50;
            calPicker.x=calPicker.y=300;
            calPicker.dataProvider=createDataProvider();
            addChild(calPicker);
            
            calPicker.setListWidth(0,25);
            calPicker.setListWidth(1,50);
            calPicker.setListWidth(2,25);
            
            // Set to Jan 1, 2010
            
            calPicker.selectedIndices=[0,0,110];
            
            // Add listeners for open, close and select events
            
            calPicker.addEventListener(Event.OPEN,handleOpen);
            calPicker.addEventListener(Event.CLOSE,handleClose);
            calPicker.addEventListener(Event.SELECT,handleSelect);
            
            // A simple function that displays currently selected
            // item information in the console. 
            
            traceItems();
        }
        
        
        private function createDataProvider():DataProvider
        {
            // Create three arrays to handle days, months, years.
            
            var arrDay:Array=[];
            var arrMonth:Array=[];
            var arrYear:Array=[];
            
            // Populate the month array and create the
            // day DataProvider 
            
            for (var i:int=1; i<32; i++) {
                arrDay.push({label: i.toString()});
            }
            
            var dayDP:DataProvider=new DataProvider(arrDay);
            
            
            // Populate and month array and create the month
            // DataProvider
            
            arrMonth.push({label: "January"});
            arrMonth.push({label: "February"});
            arrMonth.push({label: "March"});
            arrMonth.push({label: "April"});
            arrMonth.push({label: "May"});
            arrMonth.push({label: "June"});
            arrMonth.push({label: "July"});
            arrMonth.push({label: "August"});
            arrMonth.push({label: "September"});
            arrMonth.push({label: "October"});
            arrMonth.push({label: "November"});
            arrMonth.push({label: "December"});
            
            var monthDP:DataProvider=new DataProvider(arrMonth);
            
            // Create the year DataProvider
            
            for (var l:int=1900; l<2011; l++) {
                arrYear.push({label: l.toString()});
            }
            
            var yearDP:DataProvider=new DataProvider(arrYear);
            
            // Add the day, month and year DataProviders to the main
            // array
            
            var dpp:Array = new Array();
            
            dpp.push(dayDP);
            dpp.push(monthDP);
            dpp.push(yearDP);
            
            var returnDataProvider:DataProvider = new DataProvider(dpp);
            return(returnDataProvider);
        
        }
        
        private function traceItems():void
        {
            for (var j:int = 0; j <calPicker.selectedItems.length; j++) {
                trace("Picker.selectedItems " +calPicker.selectedItems[j].label);
            }
            trace("Picker.selectedIndices "+calPicker.selectedIndices);
            
        }
        
        
        private function handleSelect(e:Event):void {
            traceItems();
        }
        
        private function handleOpen(e:Event):void {
            trace("Picker.open event captured");                
        }
        
    
        private function handleClose(e:Event):void {
            trace("Picker.close event captured");
        }
    }
}   
     

The following example uses a Picker to implement a clock. The user can interact with the picker, however the picker always returns to the correct system time after a brief period.

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.utils.Timer;
    import flash.utils.setInterval;
    
    import qnx.ui.data.DataProvider;
    import qnx.ui.picker.Picker;
    
    [SWF(height="600", width="1024", frameRate="30", backgroundColor="#FFFFFF")]
    public class PickerClock extends Sprite
    {
        private var picker:Picker;
        private var timer:Timer;
        public function PickerClock()
        {
            initializeUI();
            updatePicker();
            // create a timer to run every 6 seconds
            timer = new Timer(6000);
            timer.addEventListener(TimerEvent.TIMER,handleTimerTick);
            timer.start();
            // simple function that outputs the selected items
            traceItems();
            
        }
    
        private function initializeUI():void
        {
            // Create the picker and add the main DataProvider
            
            picker = new Picker();
            picker.x = 300;
            picker.y = 175;
            picker.dataProvider = createDataProvider();
            addChild(picker);
            
            
            // To customize column widths,
            // all widths are added up and then used for  
            // a ratio against the component set width
            picker.height=50;
            picker.width = 200;
            picker.setListWidth(0,25);
            picker.setListWidth(1,25);
            picker.setListWidth(2,25);
            picker.addEventListener(Event.OPEN,handleOpen);
            picker.addEventListener(Event.CLOSE,handleClose);
            picker.addEventListener(Event.SELECT,handleSelect);
            
            picker.isOpen = true;
        }
        
        
    
        private function handleTimerTick(e:TimerEvent):void
        {
            updatePicker();
        }
        
        private function createDataProvider():DataProvider
        {
            // Create three arrays to handle hours, mins, AM PM
            
            var arrHour:Array=[];
            var arrMin:Array=[];
            var arrAmPm:Array=[];
            
            //hours
            
            for (var i:int=1; i<13; i++) {
                arrHour.push({label: i.toString()});
            }
                var HourDP:DataProvider=new DataProvider(arrHour);
        
            //mins
            
            arrMin.push({label: "00"});
            arrMin.push({label: "01"});
            arrMin.push({label: "02"});
            arrMin.push({label: "03"});
            arrMin.push({label: "04"});
            arrMin.push({label: "05"});
            arrMin.push({label: "06"});
            arrMin.push({label: "07"});
            arrMin.push({label: "08"});
            arrMin.push({label: "09"});
            
            for (var k:int=10; k<60; k++) {
                arrMin.push({label: k.toString()});
            }
            
            var MinDP:DataProvider=new DataProvider(arrMin);
            
            arrAmPm.push({label: "AM"});
            arrAmPm.push({label: "PM"});
            var AmPmDP:DataProvider=new DataProvider(arrAmPm);
            
            // Populate the main array
            
            var dpp:Array = new Array();
            dpp.push(HourDP);
            dpp.push(MinDP);
            dpp.push(AmPmDP);
            
            var returnDataProvider:DataProvider = new DataProvider(dpp);
            return(returnDataProvider);
        }
        
        
        private function handleSelect(e:Event):void {
            traceItems();
        }
        
        private function handleOpen(e:Event):void {
            trace("Picker.open event captured");
        }
        
        private function handleClose(e:Event):void {
            trace("Picker.close event captured");
        }
        private function traceItems():void
        {
            for (var j:int = 0; j <picker.selectedItems.length; j++) {
                trace("Picker.selectedItems " +picker.selectedItems[j].label);
            }
            trace("Picker.selectedIndices "+picker.selectedIndices);
            
        }
        
        private function updatePicker():void
        {
            trace("PickerClock.updatepicker");
            var mins:Number = new Date().minutes;
            var hours:Number = new Date().hours;
            var ampm:Number = 0;
        
            //add 1 if hour is 1 am    
            if (hours == 0){
                picker.selectedIndices=[11, mins,ampm];    
            }
            else if (hours == 1){
                picker.selectedIndices=[0,mins,ampm];
            }
            else if (hours > 12){
                ampm = 1;
                hours = hours - 12;
                picker.selectedIndices=[hours - 1,mins,ampm];
            }                
            else
                picker.selectedIndices=[hours - 1,mins,ampm];
        }
        
        
        
    }
}