TabGroup to be added to Facebook style slide menu - iOS and Android

Hello,

I am new to Titanium Alloy.

1. I am creating a mobile application to work both in iOS and Android where I need to have to facebook like slide menu and a tabGroup.

2. I have been able to implement the facebook like slide menu using the project - [https://github.com/dharmik/Slider-Like-Facebook-working-in-both-android-and-iOS].

3. My problem is that in the index.js page of the project I need to have the code for the user to login using his email address and password. I don't need the tabGroup in index.js.

4. Once the user logs in, the user moves to a homeScreen.js page where the tabGroup needs to be shown. All the example projects I have found define the tabGroup in index.js.

Can any one please help me in this regard as I have been stuck for days now.

Titanium SDK version : 3.1.1.GA

My code s far is :

index.xml - It contains information for only user login.

<Alloy>
    <Window class="container">
        <View id ="view">
            <ImageView id="image" image="/images/loginPageImage.png"  top="20dp" width="Ti.UI.SIZE" height="Ti.UI.SIZE"/>
            <TextField id="email"/>
            <TextField id="password"/>
            <Button id="button" backgroundImage="/images/big_blue_button.png" onClick="doClick">Sign In</Button>
        </View>
    </Window>
</Alloy>

index.js

/**
 * This is the first screen to allow the user to enter his user name and  password.
 */
$.index.addEventListener('click', function() {
    $.email.blur();
    $.password.blur();
});
 
//The mainScreen has the facebook-style sliding menu controls.
function doClick(e) {  
   var mainScreen = Alloy.createController('mainScreen').getView();
   mainScreen.open();
}
 
// save a global reference to the tabgroup that can be 
// accessed in any controller
Alloy.Globals.tabgroup = $.index;
$.index.setActiveTab(1);
 
$.index.open();

/**function doClick(e) {  
   $.mainScreen.close();
}*/

// create menu view
var data = [];

var v1 = Ti.UI.createView({
    height : '100%',
    width : '320dp',
    left : '0%',
    zIndex:10
});

$.drawermenu.drawermenuview.add(v1);

var tableView = Ti.UI.createTableView({
    height : '100%',
    width : '100%',
    backgroundColor:'#404040',
    //separatorColor : 'white'
});
v1.add(tableView);

//// Account Section with SignIn row.
var accountSection = Ti.UI.createTableViewRow({
    height : '20dp',
    touchEnabled : false,
    width : '100%',
    backgroundColor : '#787878'
});

var accountSectionLabel = Ti.UI.createLabel({
    text : 'Account',
    color : 'white',
    left : '10dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'2mm', fontWeight:'bold'} 
});

accountSection.add(accountSectionLabel);


var signInRow = Ti.UI.createTableViewRow({
    height : '50dp',
    touchEnabled : false,
    width : '100%'
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var signInImageView = Ti.UI.createImageView({
                    image:'/images/sign-in.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
signInRow.add(signInImageView);

var signInRowLabel = Ti.UI.createLabel({
    text : 'Sign In',
    color : 'white',
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'}
});

signInRow.add(signInRowLabel);


/// Category section

var categorySection = Ti.UI.createTableViewRow({
    height : '20dp',
    width : '100%',
    touchEnabled : false,
    backgroundColor : '#787878'
});

var categorySectionLabel = Ti.UI.createLabel({
    text : 'Category',
    color : 'white',
    left : '10dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'2mm', fontWeight:'bold'} 
});

categorySection.add(categorySectionLabel);

//Restaurant row in Category section.
var restaurantRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var restaurantImageView = Ti.UI.createImageView({
                    image:'/images/restaurants.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
restaurantRow.add(restaurantImageView);

var restaurantRowLabel = Ti.UI.createLabel({
    text : 'Restaurants',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

restaurantRow.add(restaurantRowLabel);


//Health row in Category section.
var healthRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var healthImageView = Ti.UI.createImageView({
                    image:'/images/health.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
healthRow.add(healthImageView);

var healthRowLabel = Ti.UI.createLabel({
    text :'Health & Beauty',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

healthRow.add(healthRowLabel);

//Travel row in Category section.
var travelRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var travelImageView = Ti.UI.createImageView({
                    image:'/images/travel.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
travelRow.add(travelImageView);

var travelRowLabel = Ti.UI.createLabel({
    text :'Travel',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

travelRow.add(travelRowLabel);

//// Activities and Hobbies row in Category section.
var activitiesHobbiesRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var activitiesHobbiesImageView = Ti.UI.createImageView({
                    image:'/images/activities&hobbies.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
activitiesHobbiesRow.add(activitiesHobbiesImageView);

var activitiesHobbiesRowLabel = Ti.UI.createLabel({
    text :'Activities & Hobbies',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

activitiesHobbiesRow.add(activitiesHobbiesRowLabel);

//// Miscellaneous row in Category section.
var miscellaneousRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var miscellaneousImageView = Ti.UI.createImageView({
                    image:'/images/miscellaneous.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
miscellaneousRow.add(miscellaneousImageView);

var miscellaneousRowLabel = Ti.UI.createLabel({
    text :'Miscellaneous',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

miscellaneousRow.add(miscellaneousRowLabel);

//// Product row in Category section.
var productRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var productImageView = Ti.UI.createImageView({
                    image:'/images/product.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
productRow.add(productImageView);

var productRowLabel = Ti.UI.createLabel({
    text :'Products',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

productRow.add(productRowLabel);

/// About Us section

var aboutUsSection = Ti.UI.createTableViewRow({
    height : '20dp',
    width : '100%',
    touchEnabled : false,
    backgroundColor : '#787878'
});

var aboutUsSectionLabel = Ti.UI.createLabel({
    text : 'About Us',
    color : 'white',
    left : '10dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'2mm', fontWeight:'bold'} 
});

aboutUsSection.add(aboutUsSectionLabel);

//// Privacy policy row in About Us section.
var privacyPolicyRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var privacyPolicyImageView = Ti.UI.createImageView({
                    image:'/images/privacy-policy.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
privacyPolicyRow.add(privacyPolicyImageView);

var privacyPolicyRowLabel = Ti.UI.createLabel({
    text :'Privacy Policy',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

privacyPolicyRow.add(privacyPolicyRowLabel);

//// Terms and Conditions row in About Us section.
var termsConditionsRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var termsConditionsImageView = Ti.UI.createImageView({
                    image:'/images/t&c.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
termsConditionsRow.add(termsConditionsImageView);

var termsConditionsRowLabel = Ti.UI.createLabel({
    text :'Terms & Conditions',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

termsConditionsRow.add(termsConditionsRowLabel);

////Contact Us row in About Us section.
var contactUsRow = Ti.UI.createTableViewRow({
    height : '50dp',
    width : '100%',
    touchEnabled : false
});

// Customising the size of an image in a table row so that it shows up properly in Android.
 var contactUsImageView = Ti.UI.createImageView({
                    image:'/images/contact.png',
                    left: '5dp',
                    width:'35dp',
                    heigth:'35dp'
                });
contactUsRow.add(contactUsImageView);

var contactUsRowLabel = Ti.UI.createLabel({
    text :'Contact Us',
    color : 'white',
    touchEnabled : false,
    left : '40dp',
    touchEnabled : false,
    font:{fontFamily:'Arial',fontSize:'3mm', fontWeight:'bold'} 
});

contactUsRow.add(contactUsRowLabel);

data.push(accountSection);
data.push(signInRow);
data.push(categorySection);
data.push(restaurantRow);
data.push(healthRow);
data.push(travelRow);
data.push(activitiesHobbiesRow);
data.push(miscellaneousRow);
data.push(productRow);
data.push(aboutUsSection);
data.push(privacyPolicyRow);
data.push(termsConditionsRow);
data.push(contactUsRow);

tableView.setData(data);

tableView.addEventListener('click', function(e) {
    if (e.row.children[1].text == 'Sign In') {
        var signInScreen = Alloy.createController('signInScreen').getView();
        $.drawermenu.drawermainview.add(signInScreen);
        $.drawermenu.showhidemenu();
    } else if (e.row.children[1].text == 'Restaurants') {
        var restaurantScreen = Alloy.createController('restaurantScreen').getView();
        $.drawermenu.drawermainview.add(restaurantScreen);
        $.drawermenu.showhidemenu();
    } else if (e.row.children[0].text == 'Nothing') {
        $.drawermenu.showhidemenu();
    } else if (e.row.children[1].text == 'Health & Beauty') {
        var healthBeautyScreen = Alloy.createController('healthBeautyScreen').getView();
        $.drawermenu.drawermainview.add(healthBeautyScreen);
        $.drawermenu.showhidemenu();
    } else if (e.row.children[1].text == 'Travel') {
        var travelScreen = Alloy.createController('travelScreen').getView();
        $.drawermenu.drawermainview.add(travelScreen);
        $.drawermenu.showhidemenu();
    }else if (e.row.children[1].text == 'Activities & Hobbies') {
        var activityAndHobbyScreen = Alloy.createController('activityAndHobbyScreen').getView();
        $.drawermenu.drawermainview.add(activityAndHobbyScreen);
        $.drawermenu.showhidemenu();
    }else if (e.row.children[1].text == 'Miscellaneous') {
        var miscellaneousScreen = Alloy.createController('miscellaneousScreen').getView();
        $.drawermenu.drawermainview.add(miscellaneousScreen);
        $.drawermenu.showhidemenu();
    }else if (e.row.children[1].text == 'Products') {
        var productsScreen = Alloy.createController('productsScreen').getView();
        $.drawermenu.drawermainview.add(productsScreen);
        $.drawermenu.showhidemenu();
    }else if (e.row.children[1].text == 'Privacy Policy') {
        var privacyPolicyScreen = Alloy.createController('privacyPolicyScreen').getView();
        $.drawermenu.drawermainview.add(privacyPolicyScreen);
        $.drawermenu.showhidemenu();
    }else if (e.row.children[1].text == 'Terms & Conditions') {
        var termsConScreen = Alloy.createController('termsConScreen').getView();
        $.drawermenu.drawermainview.add(termsConScreen);
        $.drawermenu.showhidemenu();
    }else if (e.row.children[1].text == 'Contact Us') {
        var contactUsScreen = Alloy.createController('contactUsScreen').getView();
        $.drawermenu.drawermainview.add(contactUsScreen);
        $.drawermenu.showhidemenu();
    }
     else {
        $.drawermenu.showhidemenu();
    }
});

var homeScreen = Alloy.createController('homeScreen').getView();
$.drawermenu.drawermainview.add(homeScreen);

Ti.App.addEventListener('settingImg', function(data) {
    $.drawermenu.showhidemenu();
});

$.mainScreen.open();

//Accessing the tab group
 Alloy.Globals.tabgroup.setActiveTab(0);
 Alloy.Globals.tabgroup.open();