Titanium Javascript Runtime Error

Question

Trying to create a mobile Android app in Titanium using drill down navigation.

Apparently it's having a problem with this section of code:

    // create the main menu container   
    var main_menu = Ti.UI.createTableView({
    style:Titanium.Android.TableViewStyle.GROUPED,
    scrollable:true   
    });

Error is this:

[ERROR] : TiExceptionHandler: (main) [1,257] - In app.js:21,42 [ERROR] : TiExceptionHandler: (main) [5,262] - Message: Uncaught TypeError: Cannot read property 'GROUPED' of undefined [ERROR] : TiExceptionHandler: (main) [4,266] - Source: style:Titanium.Android.TableViewStyle.GROUPED, [ERROR] : V8Exception: Exception occurred at app.js:21: Uncaught TypeError: Cannot read property 'GROUPED' of undefined

Was using code based of of this:

    // create the main menu container   
    var main_menu = Ti.UI.createTableView({
    style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
    scrollable:false   
    });

As it can be seen, I changed the "Titanium.UI.iPhone" to "Titanium.Android", which doesn't seem to be the proper syntax for Android platform.

Someone help?

Thanks.

Answer 1

If you check the docs, you can see that the "style" property is only available for iOS.

EDIT: For Android, there doesn't seem to be a grouped tableview style natively (which is why the option is only for iOS). One school of thought would say that you should use the UI elements available on the platform only and not try to make your cross platform app look exactly the same on both platforms. Another would say maybe you can do this (taken from here):

var win = Titanium.UI.currentWindow;
win.barColor = "FB9D3B";
win.backgroundColor = '#AEBCAD';

var isAndroid = false;
if (Titanium.Platform.name == 'android') {
    isAndroid = true;
}

// create table view data object
var data = [
    {title:"Row 1", color:'black', font:{fontWeight:'bold'}, hasChild:true, url:'row1.js'},
    {title:"Row 2", color:'black', font:{fontWeight:'bold'}, hasChild:true, url:'row2.js'},
];

if(false == isAndroid) {
    // create table view
    var tableViewOptions = {
        data:data,
        style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
        headerTitle:"Header for iOS",
        backgroundColor:'transparent',
        rowBackgroundColor:'white'
        };
}

if(true == isAndroid) {

    var tableHeader = Titanium.UI.createLabel({
        color:'#000',
        text:"Header for Android",
        font:{fontWeight:'bold'},
        top:20,
        left:30,
        width:300,
        height:20
    });

    win.add(tableHeader);

    var tableViewOptions = {
        data:data,
        backgroundColor:'white',
        rowBackgroundColor:'white',
        top:40,
        height:98,
        width:300,
        borderWidth:1,
        borderRadius:10
    };
}