Question

I’ve been looking over some of the Titanium Appcelerator tutorials on the appcelerator Vimeo channel, more specifically this one: A Cross-Platform Navigation Controller. I have found it fairly easy to integrate this with a basic app, but I am having some trouble getting it to work with tabGroups.

The issue is that when creating the tabs and placing the into the tabGroup, it seems that the tabGroup window itself does not get placed onto the stack in the navigation controller. Here is the code for that controller. Basically, this means that if I click through to a new window from the tabGroup, I don’t get a ‘back button’ to the original window. If I click further in, however, subsequence windows do have this ‘back button’ functionality’.

Any idea what could be causing this? The basic overview of the code is below, and the NavigationController code is as linked above. Thanks ahead of time for any help.

app.js:

(function() {
    var NavigationController = require('NavigationController');
    var windowObject = require('iPhoneWindow');
    new windowObject(new NavigationController()).open();
});

iPhoneWindow.js:

exports.iPhoneWindow = function(navController) {
    var NewsView = require('newsView');
    var instance = Ti.UI.createTabGroup({
        backgroundColor: '#FFF'
    });

    var newsTab = Ti.UI.createTab({
        window: new NewsView(navController),
        title: 'News'
    });

    instance.addTab(newsTab);

    return instance;
};

newsView.js:

exports.newsView = function(navController) {
    var instance = Ti.UI.createWindow({
        title: 'News',
        backgroundColor: '#000';
    });
    var button = Ti.UI.createButton({
        title: 'newsButton',
        height: 60,
        width: 180,
        top: 150
    });
    button.addEventListener('click', function() {
        navController.open(new exports.newsView(navController));
    });
    instance.add(button);

    return instance;
};

Answer 1

You don’t need to use that cross platform navigation controller with a TabGroup – each tab comes with its own navigation stack, that on iOS devices will automatically give you a navigation controller with all the trimmings. To open windows on a stack, you’ll need to instead get the active tab, and open the window on that – so pass in your tabgroup to the newsView instead:

exports.newsView = function(tabGroup) {
    var instance = Ti.UI.createWindow({
        title: 'News',
        backgroundColor: '#000';
    });
    var button = Ti.UI.createButton({
        title: 'newsButton',
        height: 60,
        width: 180,
        top: 150
    });
    button.addEventListener('click', function() {
        tabGroup.activeTab.open(new exports.newsView(tabGroup));
    });
    instance.add(button);

    return instance;
};