Titanium: can't switch tabs, close tabs, anything other than my current tab

Question

Everything I try just does nothing, no errors, message, really anything. So I have three tabs, the first being a login tab, each tab has its own .js code, so for example, the login has its own login.js. Now, I use the httpClient to authenticate back to our website, and now want to remove the login tab and display the other tabs, cannot get it to work for the life of me, I can now remove the login tab but cannot load ay of the other tabs. Driving me nuts because I am finding 20 examples but they either don't separate the tabs into their own .js files or the example just plain doesn't work for me. Help! This seems so basic but yet...

app.js

    // 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();


    // create base UI tab and root window
    //
    var scan = Titanium.UI.createWindow({  
        title:'Scan',
        backgroundColor:'#fff',
        url:'scan.js',
        mylabel:'Hello Scan'
    });

    var tab1 = Titanium.UI.createTab({  
        icon:'KS_nav_views.png',
        title:'Scan',
        window:scan
    });

    var login = Titanium.UI.createWindow({  
        title:'User Authentication',  
        tabBarHidden:true,  
        url:'login.js'  
    });  

    var loginTab = Titanium.UI.createTab({  
        title:"Login",  
        window:login  
    });  

    //
    // create controls tab and root window
    //
    var win2 = Titanium.UI.createWindow({  
        title:'Manual',
        backgroundColor:'#fff'
    });
    var tab2 = Titanium.UI.createTab({  
        icon:'KS_nav_ui.png',
        title:'Manual',
        window:win2
    });

    var label2 = Titanium.UI.createLabel({
        color:'#999',
        text:'I am Manual Window ',
        font:{fontSize:20,fontFamily:'Helvetica Neue'},
        textAlign:'center',
        width:'auto'
    });

    win2.add(label2);


    //
    //  add tabs
    //
    tabGroup.addTab(loginTab); 
    tabGroup.addTab(tab1);  
    tabGroup.addTab(tab2); 


    // open tab group
    tabGroup.open();

login.js

    var win = Titanium.UI.currentWindow;  
    var tabGroup = Ti.UI.currentWindow.tabGroup;

    var appUrl = "http://localhost:3001/ticket_agents/sign_in";

    var email = Titanium.UI.createTextField({  
        color:'#336699',  
        top:10,  
        left:10,  
        width:300,  
        height:40,  
        hintText:'Email',  
        keyboardType:Titanium.UI.KEYBOARD_DEFAULT,  
        returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,  
        borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED  
    });  
    win.add(email);  

    var password = Titanium.UI.createTextField({  
        color:'#336699',  
        top:60,  
        left:10,  
        width:300,  
        height:40,  
        hintText:'Password',  
        passwordMask:true,  
        keyboardType:Titanium.UI.KEYBOARD_DEFAULT,  
        returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,  
        borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED  
    });  
    win.add(password);  

    var loginBtn = Titanium.UI.createButton({  
        title:'Login',  
        top:110,  
        width:90,  
        height:35,  
        borderRadius:1,  
        font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}  
    });  


    var loginReq = Titanium.Network.createHTTPClient({  

         onload : function(e)  { 
            var json = this.responseText;  
            var response = JSON.parse(json); 
            Ti.API.info("Received text: " + this.responseText);
            if (response.id > 0)
            {
                alert("login Success");
                win.tabGroup.close();
                tabGroup.removeTab(loginTab);
                tabGroup.setActiveTab(2);
                tabGroup.open();
            }
            else
            {
                alert("Unknown login error");
            }
        },  

        onerror : function(e) {
            var response = this.responseText;
            Ti.API.debug(e.error);
            alert('error: ' + this.responseText);
        },
        timeout : 5000
    });

    loginBtn.addEventListener('click',function(e)  
    {  
        if (email.value != '' && password.value != '')  
        {  
            loginReq.open("POST",appUrl);  
            var params = {ticket_agent: {email: email.value, password: password.value, remember_me: 0} 
            }; 
            var authstr = 'Basic ' + Titanium.Utils.base64encode(email.value + ':' + password.value);
            loginReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            loginReq.setRequestHeader('Authorization', authstr);
            loginReq.send(JSON.stringify(params));  
        }  
        else  
        {  
            alert("Email/Password are required");  
        }  
    });  


    win.add(loginBtn);

I think that's all you'd need to see, the login.js has my latest attempt but I've tried things like tabGroup.open({url : 'app.js'}) and about three our four other option. Thanks.

Answer 1

You may want to add this eventListener to your app.js where the tabGroup is. You can then fire a "app:gotoTab" event from anywhere.

app.js

Ti.App.addEventListener('app:gotoTab', function(e) {
    tabGroup.setActiveTab(e.tab);
});

login.js

// tab index starts with 0, so 0 is your first tab
Ti.App.fireEvent('app:gotoTab', { tab: 0 });

Answer 2

You may want to redesign your UI. The Apple Human Interface Guidelines specifically say that you shouldn't programmatically switch tabs or add/remove tabs. They expect that a tabgroup should only be controlled by the user once you put it in front of them.

If the user needs to log in before they can use other features of your app you can present the a login window before the window with the tab group. Otherwise, you should replace the content of the login tab with something else after a successful login, perhaps with user profile information or some instructions.

Answer 3

Simply Copy paste this code Login.js

var win = Titanium.UI.currentWindow;  

    var appUrl = "http://localhost:3001/ticket_agents/sign_in";

    var email = Titanium.UI.createTextField({  
        color:'#336699',  
        top:10,  
        left:10,  
        width:300,  
        height:40,  
        hintText:'Email',  
        keyboardType:Titanium.UI.KEYBOARD_DEFAULT,  
        returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,  
        borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED  
    });  
    win.add(email);  

    var password = Titanium.UI.createTextField({  
        color:'#336699',  
        top:60,  
        left:10,  
        width:300,  
        height:40,  
        hintText:'Password',  
        passwordMask:true,  
        keyboardType:Titanium.UI.KEYBOARD_DEFAULT,  
        returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,  
        borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED  
    });  
    win.add(password);  

    var loginBtn = Titanium.UI.createButton({  
        title:'Login',  
        top:110,  
        width:90,  
        height:35,  
        borderRadius:1,  
        font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}  
    });  


    var loginReq = Titanium.Network.createHTTPClient({  

         onload : function(e)  { 
            var json = this.responseText;  
            var response = JSON.parse(json); 
            Ti.API.info("Received text: " + this.responseText);
            if (response.id > 0)
            {
                alert("login Success");
                tabGroup.setActiveTab(2);

            }
            else
            {
                alert("Unknown login error");
            }
        },  

        onerror : function(e) {
            var response = this.responseText;
            Ti.API.debug(e.error);
            alert('error: ' + this.responseText);
        },
        timeout : 5000
    });

    loginBtn.addEventListener('click',function(e)  
    {  
        if (email.value != '' && password.value != '')  
        {  
            loginReq.open("POST",appUrl);  
            var params = {ticket_agent: {email: email.value, password: password.value, remember_me: 0} 
            }; 
            var authstr = 'Basic ' + Titanium.Utils.base64encode(email.value + ':' + password.value);
            loginReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            loginReq.setRequestHeader('Authorization', authstr);
            loginReq.send(JSON.stringify(params));  
        }  
        else  
        {  
            alert("Email/Password are required");  
        }  
    });  


    win.add(loginBtn);

Hey Ross, You always remember window.close work on child Window perfectly.

In this application. You can use single Window base Application. If, In First Window Login Successfully then, you can OPEN Second child Window.

for more details you can use KICHEN Shink Example. this is very useful for You.