Login and Tabgroup

Accepted Answer

here is an iphone solution

// this sets the background color of the master
// UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#fff');

// create tab group
var tabGroup;

var win = Titanium.UI.createWindow({
    title:'TabViewLogin',
    tabBarHidden:true,
});


var username = Titanium.UI.createTextField({
    color:'#336699',
    top:10,
    left:10,
    width:300,
    height:40,
    hintText:'Username',
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(username);

var password = Titanium.UI.createTextField({
    color:'#336699',
    top:60,
    left:10,
    width:300,
    height:40,
    hintText:'Password',
    passwordMask:true,
    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:{fontWeight:'bold',fontSize:14}
});
win.add(loginBtn);
win.open();

Titanium.App.addEventListener('logout', function(e) {
    win.open();
    tabGroup.close();
});

loginBtn.addEventListener('click',function(e)
{
    if ( tabGroup == undefined ) {
        tabGroup = Titanium.UI.createTabGroup();
        //
        // create base UI tab and root window
        //
        var win1 = Titanium.UI.createWindow({  
            title:'Tab 1',
            backgroundColor:'#fff'
        });
        var tab1 = Titanium.UI.createTab({  
            icon:'KS_nav_views.png',
            title:'Tab 1',
            window:win1
        });

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

        win1.add(label1);

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

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

        win2.add(label2);

        var button = Ti.UI.createButton({
            title: "Logout",
            style: Ti.UI.iPhone.SystemButtonStyle.DONE

        });

        button.addEventListener('click',function(e)
        {
            Ti.App.fireEvent('logout');
        });

        win1.setRightNavButton(button);        
        win2.setRightNavButton(button);        

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

    } 

    // open tab group
    win.close();
    tabGroup.open();

});

— answered November 14th 2010 by Aaron Saunders
permalink

3 Comments

Very nice post, thanks a lot, Aaron!

— commented November 4th 2011 by Matteo Traina
I was looking for something like this and it seems to work quite well, thanks Aaron!! Not sure about android yet but I'm sure it won't be that painful.

— commented April 24th 2013 by Tracy Hayman
hello Aaron, thanks for sharing this wonderful code but i have a question. In my code, i have the cloud create user (below) inside my login button event listener:
```
Cloud.Users.login({
    login: userNameField.value,
    password: passwordField.value,
}, function (e) {
    if (e.success) {
        var user = e.users[0];
        alert('Welcome');
    } else {
      alert('error :' + e.message);
         }
      });
});
```
how can the login button event listener allow both the tab and the cloud create user. Like for example in your code, authentication is not allowed, i would like you to kindly explain to me how to do authentication before directing user to the tabGroup. Thanks.

— commented October 4th 2013 by U. O

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

2 Answers

Accepted Answer