Search code examples
titaniumappceleratorappcelerator-mobiletitanium-mobile

Custom Tabbar in Titanium


Its mine 3rd day on Titanium SDK.

How can I add tab bar in my window from another .js file ? I mean I have write the code of tab bar in createTabbar.js and I want to add in my firstView.js .

Is it possible ? As I have seen many examples those have written tab bar code in app.js file so...

Thanks...


Solution

  • Solved :

    I have mainTab.js that holds/returns tab bar.

    mainTab.js :

    CustomTabbar = function makeTab ()
    {
        var tabGroup = Titanium.UI.createTabGroup();
    
        var win1 = Titanium.UI.createWindow
        ({  
            url:'TabClasses/Tab1/Tab1.js',
            navBarHidden:false,   
            title:'List 1'                 
        });
    
        var tab1 = Titanium.UI.createTab
        ({  
              icon:'KS_nav_views.png',
              window:win1
        });
    
        // create controls tab and root window
        var win2 = Titanium.UI.createWindow
        ({        
            url:'TabClasses/Tab2/Tab2.js',
            navBarHidden:false,
            title:'List 2'
        });
    
        var tab2 = Titanium.UI.createTab
        ({  
            icon:'KS_nav_ui.png',
            window:win2
        });
    
        // create controls tab and root window
        var win3 = Titanium.UI.createWindow
        ({            
            url:'TabClasses/Tab3/Tab3.js',
            navBarHidden:false,
            title:'List 3'
        });
    
        var tab3 = Titanium.UI.createTab
        ({  
            icon:'KS_nav_ui.png',
            window:win3
        });
    
        // create controls tab and root window
        var win4 = Titanium.UI.createWindow
        ({           
            url:'TabClasses/Tab4/Tab4.js',
            navBarHidden:false
        });
    
        var tab4 = Titanium.UI.createTab
        ({  
            icon:'KS_nav_ui.png',
            window:win4
        });
    
        //  add tabs
        tabGroup.addTab(tab1);
        tabGroup.addTab(tab2);
        tabGroup.addTab(tab3);
        tabGroup.addTab(tab4);
    
        tabGroup.open
        ({          
            transition: Titanium.UI.iPhone && Titanium.UI.iPhone.AnimationStyle.NONE
        });
    
        return tabGroup ;
    }
    

    Now in my login.js file I called mainTab.js like :

    Ti.include("mainTab.js");
    
    loginBtn.addEventListener('click',function(e)
    {
         if (loginSuccess)
         {
            win.close();
            var tabs = CustomTabbar();
         } 
    }
    

    As I am new to Titanium, if there is some better approach to do the same, please suggest me...