commonJS todo example, open window in current tab

You must Login before you can answer or comment on any questions.

I am trying to force myself to learn the commonJS method to update an old app and build a new one. The best place I have found to see a decent example is the TODO app floating around in several of these posts here on QA.

In the TODO application, I can't seem to find a way to open a window in the current tab(not a modal, just a regular window). I started modifying the code to fit my application as a start.

app.js

if (Ti.version < 1.8 ) {
    alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');
}
else {
    //add a single variable to the global scope to which we may choose to
    //intentionally add items to
    var globals = {};
 
    //create a private scope to prevent further polluting the global object
    (function() {
        var AppTabGroup = require('ui/AppTabGroup').AppTabGroup,
            HomeScreen = require('ui/HomeScreen').HomeScreen;
 
        // Initialize local storage
        //require('db').createDb();
 
        //create our global tab group   
        globals.tabs = new AppTabGroup(
            {
                title: 'Title',
                icon: 'images/KS_nav_ui.png',
                window: new HomeScreen({
                    title: 'Home',
                    backgroundColor: '#fff',
                    navBarHidden: true,
                    tabBarHidden: true,
                })
            }
        );
 
        globals.tabs.open();
    })();
}
AppTabGroup.js
exports.AppTabGroup = function() {
    var self = Ti.UI.createTabGroup();
 
    //loop through tab objects and add them to the tab group
    for (var i = 0, l = arguments.length; i < l; i++) {
        var tab = Ti.UI.createTab(arguments[i]);
        //on initialization, we track the current tab as the first one added
        if (i === 0) {
            self.currentTab = tab;
        }
        self.addTab(tab);
    }
 
    //track the current tab for the tab group
    self.addEventListener('focus', function(e) {
        self.currentTab = e.tab;
    });
 
    return self;
};
HomeScreen.js
exports.HomeScreen = function() {
    var self = Ti.UI.createWindow({
        modal: false,
        title: 'Title',
        backgroundColor: '#ffffff',
        tabBarHidden:true,
        navBarHidden:true
    });
 
    var yourCats = require('ui/yourCats').yourCats;
 
    var Btn = Ti.UI.createView({
        width:273,height:48,
        top:131,right:0,
        backgroundColor:'#fff'
    });
    Btn.addEventListener('click', function() {
        var categoryPage = new yourCats();
        //How can I open the category page in the current tab? 
        (how do I reference current tab).open(categoryPage);
    });
 
    self.add(Btn);
 
    return self;
};
See my comment in HomeScreen.js above. I need to open the categoryPage in the currentTab. If I just do new yourCats().open(); the window will open without sliding, like a typical tab1.open(yourCats);

1 Answer

Accepted Answer

Hi Andrew

Consider re-writing your CommonJS file so that you can access more than one property.

var currentTab;
 
function appTabGroup () {
    var self = Ti.UI.createTabGroup();
 
    //loop through tab objects and add them to the tab group
    for (var i = 0, l = arguments.length; i < l; i++) {
        var tab = Ti.UI.createTab(arguments[i]);
        //on initialization, we track the current tab as the first one added
        if (i === 0) {
            self.currentTab = tab;
        }
        self.addTab(tab);
    }
 
    //track the current tab for the tab group
    self.addEventListener('focus', function(e) {
        //self.currentTab = e.tab;
        currentTab = e.tab; // try this instead
    });
 
    return self;
}
function getCurrentTab () {
    return currentTab;
}
 
exports.AppTabGroup = appTabGroup;
exports.getCurrentTab = getCurrentTab;
I have not tested this on your code, but you should be able to get the basic idea, create a local variable inside the CommonJS file and then provide a 'getter' to return that variable.

— answered 10 months ago by Malcolm Hollingsworth
answer permalink
3 Comments
  • with this example, I am trying to access and usethe current tab like this:

    var yourCats = require('ui/yourCats').yourCats;
    var categoryPage = new yourCats();
     
    var currentTab = require('ui/AppTabGroup').getCurrentTab;
     
    //open the category page with the current tab
    currentTab.open(categoryPage);
    where am I going wrong?

    — commented 10 months ago by Andrew Woods

  • You are used to calling commonjs into the function, you need to pull out a bit. I am not near my dev machine to test this quick code so forgive any typos etc.

    var tabgroup = require('ui/AppTabGroup');
    Call your tab create as normal, then later;
    var currentTab = tabgroup.getCurrentTab();

    — commented 10 months ago by Malcolm Hollingsworth

  • That worked like a charm! Thanks!

    — commented 9 months ago by Andrew Woods

Your Answer

Think you can help? Login to answer this question!