[TIMOB-19199] Android: Picker has 'selectionOpens' property to contro…

[ashcoding]

…l expanded behavior

Jira: https://jira.appcelerator.org/browse/TIMOB-19199

[ashcoding]

New property selectionOpens for Picker.
Test Code:-

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Fruit',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Fruit',
    window:win1
});

var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'Pick a fruit',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

win1.add(label1);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Veggies',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Veggies',
    window:win2
});

var label2 = Titanium.UI.createLabel({
    color:'#999',
    text:'Pick a veggie',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

win2.add(label2);



//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  


/*
    Code below adds a picker to the ActionBar with different options
    for each tab. In order to have different picker options on each
    tab, the picker is redrawn when you switch tabs but it maintains 
    the selection you chose previously.
*/
var activeTab = 0,
    selectedPickerRow = {
        tab0: 0,
        tab1: 0
    };
function doPickerChange(e) {
    if(activeTab === 0) {
        selectedPickerRow.tab0 = e.rowIndex;
        label1.text = 'You chose: ' + ((e.rowIndex) ? 'Banana' : 'Apple');
    } else {
        selectedPickerRow.tab1 = e.rowIndex;
        label2.text = 'You chose: ' + ((e.rowIndex) ? 'Beans' : 'Corn');
    }
}

tabGroup.addEventListener("open", function () {
    var activity = tabGroup.getActivity();
    activity.onCreateOptionsMenu = function (e) {
        var item, 
            settings,
            data = [],
            menu = e.menu, 
            picker = Ti.UI.createPicker({
                                // Changes for TIMOB-19199
                                // By default, this is set to true. Change this to false to see the changes.
                selectionOpens : false
            });
        menu.clear();
        if (activeTab === 0) {
            data.push(
                Ti.UI.createPickerRow({
                    title: 'Apple',
                    value: '0'
                }));
            data.push(
                Ti.UI.createPickerRow({
                    title: 'Banana',
                    value: '1'
                }));
            picker.add(data);
            picker.addEventListener('change', doPickerChange);
            item = menu.add({
                title: "Apple",
                showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
            });
            item.actionView = picker;
            picker.setSelectedRow(0, selectedPickerRow.tab0, false); //  column, row, [animated]
        } else {
            data.push(
                Ti.UI.createPickerRow({
                    title: 'Corn',
                    value: '0'
                }));
            data.push(
                Ti.UI.createPickerRow({
                    title: 'Beans',
                    value: '1'
                }));
            picker.add(data);
            picker.addEventListener('change', doPickerChange);
            item = menu.add({
                title: "Corn",
                showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
            });
            item.actionView = picker;
            picker.setSelectedRow(0, selectedPickerRow.tab1, false); //  column, row, [animated]
        }
    };
    activity.invalidateOptionsMenu();
});

function redrawMenu() {
    var activity = tabGroup.getActivity();
    activity.invalidateOptionsMenu();
}
tabGroup.addEventListener("focus", function (e) {
    activeTab = e.index;
    redrawMenu();
});


// open tab group
tabGroup.open();

[hieupham007]

Please create TiC constant for "selectionOpens"

[hieupham007]

Code reviewed and functionally tested. This works for expanding the picker, but when set to true, Tim's issue regarding graphical glitch still persist.

[ashcoding]

Comment on TiC addressed.

With regards to the usage of this. In Tim's scenario (if I'm not mistaken), it is not suppose to be expanded when it is initially started. It is only selected. Thus, with this fix, a person can set the selection without having it expanded. I think this solves his issue of having it expanded from the start. This also happens to solve the glitch issue for him as it is not expanded and appearing at the top.

I think this should address the issue for the user. @hieupham007, do you think we should look more into glitch or would this fix be suffice for now?

[hieupham007]

This does not solve it from the start, since the default value is "true". We can either disable this option completely (i.e "false" all the time), or look into this weird glitch.

[hieupham007]

Any update on this?

[ashcoding]

I'll set this default to false.

[ashcoding]

@hieupham007 Updated it to be false by default.

[ashcoding]

Just a note, Travis CI build is failing due to a separate unrelated Grunt issue. Other then that, it is compiling correctly. See this Travis CI build log for more info https://travis-ci.org/appcelerator/titanium_mobile/builds/75535697#L8500

[hieupham007]

Looks good. Merging