Changing Active Tab From a Tab in Different URL?

Question

I have the following setup: On ApplicationTabGroup.js I have a tabgroup

var tabGroup = Ti.UI.createTabGroup(); with 2 tabs.

One of those tabs calls an external URL, here is the code

//Restaurant Window
    var restaurant = Titanium.UI.createWindow({
        tabBarHidden:true,
        color: '#FFF',
        url: 'restaurants.js',
        navBarHidden:false,
        statusBarStyle: Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK
    });


    var tab2 = Ti.UI.createTab({
        title:"x",
        color: '#FFF',
        backgroundColor:'#00c0f3',
        window: restaurant
    });

And I open that tab with an EventListener like this

tabGroup.setActiveTab(tab2).open();

The problem is that from restaurant.js I don't know how to get back to the first tab, or any other tab because the tabgroup in restaurant.js is not defined.

How can I navigate through tabs that are called in different URLs when the tabgroup is just defined in ApplicationTabGroup.js?

I am using - iOS7 - SDK 3.1.3 GA

Any tip in the right direction will be much appreciated!

Answer 1

You really should not use the url property for this very reason, as it makes a completely different JS context, instead you should wrap your tab window (restaurants.js) in a CommonJS style module.

But, if you dont want to make this modular, you should just be able to append the tabGroup as a property of the window like this:

var restaurant = Titanium.UI.createWindow({
    tabBarHidden:true,
    color: '#FFF',
    url: 'restaurants.js',
    navBarHidden:false,
    statusBarStyle: Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK
});
restaurant.myTabGroup = tabGroup;

Then you can navigate to a different tab like this, inside of your restaurants.js file:

// Set active tab to the third tab
Titanium.UI.currentWindow.myTabGroup.setActiveTab(3).open();

I would highly recommend going the module rout though.

Modules

EDIT: Here is an attempt at modularizing your window using parasitic inheritance. Take a look at this guide for more detail.

function MyWindow(parentTabGroup) {
    var restaurant = Titanium.UI.createWindow({
        tabBarHidden:true,
        color: '#FFF',
        navBarHidden:false,
        statusBarStyle: Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK
    });

    // Here is where you add all the controls and views you had put inside  
    // 'restaurant.js'.....
    // Also, if you have an event listener you can call the tab group
    button.addEventListener('click', function(e) {
         parentTabGroup.setActiveTab(3);
    });
    return restaurant;
}
module.exports = MyWindow;

So now you can create your window and add it to the tab group like this:

var MyWindow = require('MyWindow');
var mywin = new MyWindow(tabGroup);
var tab2 = Ti.UI.createTab({
    title:"x",
    color: '#FFF',
    backgroundColor:'#00c0f3',
    window: mywin
});