Skip navigation

Understanding tab groups

Understanding tab groups: Titanium Mobile App Development Essential Training
Understanding tab groups: Titanium Mobile App Development Essential Training

Join for an in-depth discussion in this video Understanding tab groups, part of Titanium Mobile App Development Essential Training.

Resume Transcript Auto-Scroll
Skill Level Beginner
3h 3m
Duration
262,092
Views
Show More Show Less

Q: I'm having trouble getting the code in the Chapter 5 "Opening windows from rows" movie to work for Android.

A: There is a difference in the way Android treats a generic object that serves as data for a table. As well, there is no "hasDetail" property for Android table rows. The solution is to:
 
1.) Rename all the "hasDetail" properties to "hasChild"

2.) Instead of using generic objects in the data array, use Titanium Table
Row objects.
 
As a general note: In order to attach custom properties to rows in Android, Titanium Table Row objects *must* be used. That isn't made clear in the Android docs, especially if the app won't fail if you don't do this as evidenced by the old code. New code is included here that should take care of this issue.
 
This is how your code should read:
 
// 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();

var win = Titanium.UI.createWindow({
    title:"Tours",
    backgroundColor:"#FFFFFF",
    //navBarHidden:true, //Hide the nav bar for the window
    tabBarHidden:true //Hide the tab bar for the window
});
//Remember, we are hiding this tab through the property tabBarHidden above
var tab = Titanium.UI.createTab({
    icon:"KS_nav_views.png",
    title:"Tours",
    window:win
});

var data = [
    Ti.UI.createTableViewRow({title:"Backpack Cal", leftImage:"images/01-backpack-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"California Calm", leftImage:"images/02-calm-cal-thumb.png", className:"tableRow", hasChild:true, customData:"This is custom row data"}),
    Ti.UI.createTableViewRow({title:"California Hotsprings", leftImage:"images/03-hotsprings-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"Cycle California", leftImage:"images/04-cycle-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"From Desert to Sea", leftImage:"images/05-desert-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"Kids California", leftImage:"images/06-kids-cal-thumb.png", className:"tableRow", hasChild:true, customData:"This is custom row data"}),
    Ti.UI.createTableViewRow({title:"Nature Watch", leftImage:"images/07-nature-watch-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"Snowboard Cali", leftImage:"images/08-snowboard-cal-thumb.png", className:"tableRow",hasChild:true,js:"external.js",dataToPass:"This data was passed in from the main window"}),
    Ti.UI.createTableViewRow({title:"Taste of California", leftImage:"images/09-taste-cal-thumb.png", className:"tableRow"})
];


var tableView = Titanium.UI.createTableView({
    data:data
});

tableView.addEventListener("click",function(e){
    //Check the row's hasDetail property
    var w;
    if(e.source.hasChild){
        if(e.source.js){//Does the row have a pointer to an external js file?
            //It does: Load that file
            w = Titanium.UI.createWindow({
                title:e.source.title,//Take the title from the row
                backgroundColor:"#FFFFFF",
                dataToPass:e.source.dataToPass,
                url:e.source.js//The url property of a window will load an external .js file for window contents (be sure that external file is properly formatted!)
            });
        }else{
            //It doesn't: Create a window from scratch
            w = Titanium.UI.createWindow({
                title:e.source.title,//Take the title from the row
                backgroundColor:"#FFFFFF"
            });
            //Create some views for our window
           
            var label = Titanium.UI.createLabel({
                text:"A newly opened window from the " + e.source.title + " row",
                width:"auto",
                height:"auto",
                textAlign:"center"

Skills covered in this course
Developer Mobile Apps Mobile Web Web Titanium

Continue Assessment

You started this assessment previously and didn't complete it. You can pick up where you left off, or start over.

Start Your Free Trial Now

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now