[TIMOB-84] API - Pickers

Description

The purpose of this API is to create native pickers. We will support four APIs:

Titanium.UI.createDatePicker

Titanium.UI.createPicker

Titanium.UI.createModalDatePicker

Titanium.UI.createModalPicker

Date Picker

// create date picker
var datePicker = Titanium.UI.createDatePicker({
    id:htmlElementId
    value:value, 
    mode:mode, 
    maxDate:maxDate, 
    minDate:minDate, 
    minuteInterval:interval, 
});

// add change listener for date picker
datePicker.addEventListener('change', function(e)
{
    e.value // date value (should be a properly constructed JS Date Object)
});

// set date value
datePicker.setValue(new Date(), {animated:true});

API Arguments

id : the location of where the date picker should appear. If not specified, it should appear in the default location (bottom, I believe)

value : initially selected date. Should be a JS Date object.

mode : iPhone supports the following modes: Titanium.UI.DatePicker.MODE_TIME, Titanium.UI.DatePicker.DATE, Titanium.UI.DatePicker.MODE_DATE_AND_TIME

minDate : optional. the minimum date in the picker. should be a JS Date object

maxDate : optional. the maximum date in the picker - should be a JS Date object

minuteInterval : You can use this property to set the interval displayed by the minutes wheel (for example, 15 minutes). The interval value must be evenly divided into 60; if it is not, the default value is used. The default and minimum values are 1; the maximum value is 30.

Picker

// create multi-dimensional array for data (also supports selected attribute for initial value)
var data = [];

// support title attribute
var col1 = [
    {title:'foo', selected:true},
    {title:'bar'}
];

// support html attribute (also supports selected attribute for initial value)
var col2 = [
    {html:'<div><img src="foo.png"/> pick me</div>', selected:true},
    {html:'<div><img src="bar.png"/> pick me too</div>'}
];

// add columns to array
data.push(col1);
data.push(col2);

// create date picker
var picker = Titanium.UI.createPicker({
    id:htmlElementId,
    data:data, 
    showSelectionIndicator:true
 });

// add change listener for date picker
picker.addEventListener('change', function(e)
{
    e.column // the column of the new value
    e.row // the row of the new value
    e.selectedValue[0] // current value of the selected row - col 1
    e.selectedValue[1] // current value of the selected row - col 2 (this would be valid for the # of available columns)
});


// set data for a particular colunm
picker.setColumnData(col,data);

// set data for entire picker
picker.setData(data);

// get the current value of first column
var val = picker.getSelectedRow(col);  // returns index of selected value of first column's array

// select a row
picker.selectRow(row,col,{animated:true});

API Arguments

id : the location of where the picker should appear. If not specified, it should appear in the default location (bottom, I believe)

data : multi-dimensional array of data for the picker.

showSelectionIndicator : optional. default is true. determines whether selected indicator is visible (may be iPhone only)

Modal Pickers

createModalPicker and createModalDatePicker will be the same with the following exceptions:

• id is not a valid attribute
• these pickers will support both hide() and show() methids