Question

Hi Im new to titanium which allow developer to create cross platform apps. I need to create a navigation group that works with both android and iOS. is there any clear solution ( as Ti.UI.iPhone.createNavigationGrou() only works on iphone,

Thank you

Answer 1

I have the following NavigationController that lives in the android and iphone folders:

android

var NavigationController = function() {
    var self = this;

    self.open = function(windowToOpen) {
        //make "heavyweight" and associate with an Android activity
        windowToOpen.navBarHidden = windowToOpen.navBarHidden || false;

        if(!self.rootWindow) {
            windowToOpen.exitOnClose = true;
            self.rootWindow = windowToOpen;
        }

        windowToOpen.open();
    };

    self.close = function(windowToClose) {
        windowToClose.close();
    };

    return self;
};

module.exports = NavigationController;

iphone

var NavigationController = function() {
    var self = this;

    function createNavGroup(windowToOpen) {
        self.navGroup = Ti.UI.iPhone.createNavigationGroup({
            window : windowToOpen
        });
        var containerWindow = Ti.UI.createWindow();
        containerWindow.add(self.navGroup);
        containerWindow.open();
    };

    self.open = function(windowToOpen) {
        if(!self.navGroup) {
            createNavGroup(windowToOpen);
        }
        else {
            self.navGroup.open(windowToOpen);
        }
    };

    self.close = function(windowToClose) {
        if(self.navGroup) {
            self.navGroup.close(windowToClose);
        }
    };

    return self;
};

module.exports = NavigationController;

Then, you can just use it (you will automatically get the correct one based on your runtime):

var NavigationController = require('NavigationController')
var MyView = require("ui/MyView");

var controller = new NavigationController();
var myView = new MyView(controller);
controller.open(myView);

You can continue opening windows and they go on the stack. Notice I passed the controller into the first view. You keep doing that:

controller.open(new SecondView(controller));

The back button will automatically push things off your stack. If you need to do it programatically, just tell the controller to close it:

controller.close(myView);