Titanium Community Questions & Answer Archive

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

iPad, splitview and tabgroup

Im trying to get a split view window to work with TabGroup. I can pass in the splitview object to the window param in Titanium.UI.createTab and it does work for opening up the split view. However the tab group disappears when you are on the splitview tab.

Is this even possible? I havent found any examples of both splitview and tabgroup.

— asked June 29th 2010 by Richard Luther
  • ipad
  • splitview
  • splitwindow
  • tabgroup
1 Comment
  • I'm looking for the same answer, did you figure anything out?

    — commented August 2nd 2010 by Christy Thomas

4 Answers

  • Hey Richard…I had the same problem and just got it working. It's sort of "hacky" as the two views aren't really made to work together. But it works like a charm.

    (I'm only including the code that matters) i left out the JS files for 2 of the pages and just placed the one that is necessary to achieve tabgroup and split view together.

    app.js

    // this sets the background color of the master UIView (when there are no windows/tab groups on it)
    Titanium.UI.setBackgroundColor('#000');
    var appTitle = "title";
    // create tab group
    var tabGroup = Titanium.UI.createTabGroup({
        barColor: '#00b3ef'
    });
    //
    // create home tab and root window
    //
    tabGroup.addTab(Titanium.UI.createTab({  
        icon: 'KS_nav_views.png',
        title: 'Home',
        window: Titanium.UI.createWindow({  
            title: appTitle,
            backgroundColor:'#fff',
            url: 'main_windows/home.ti.js'
        })
    }));
    //
    // create users tab and root window
    //
    tabGroup.addTab(Titanium.UI.createTab({  
        icon: 'KS_nav_ui.png',
        title: 'Users',
        window: Titanium.UI.createWindow({  
            title: appTitle,
            backgroundColor:'#fff',
            navBarHidden: true,
            url: 'main_windows/users.ti.js'
        })
    }));
    //
    // create feeds tab and root window
    //
    tabGroup.addTab(Titanium.UI.createTab({  
        icon:'KS_nav_ui.png',
        title:'Feeds',
        window: Titanium.UI.createWindow({  
           title: appTitle,
            backgroundColor:'#fff',
            navBarHidden: true,
            url: 'main_windows/feed.ti.js'
        })
    }));
    // open tab group
    tabGroup.open();
    

    feed.ti.js

    MainWindows = {};
    MainWindows.navigation = Ti.UI.createWindow({
        title:'Filters',
        backgroundColor:'#fff',
        barColor: '#00b3ef',
        width: 320
    });
    MainWindows.userFeed = Ti.UI.createWindow({
        title:'Title',
        backgroundColor:'#fff',
        barColor: '#00b3ef'
    });
    
    // create navigation group
    MainWindows.masterNav = Ti.UI.iPhone.createNavigationGroup({
        window:MainWindows.navigation
    });
    MainWindows.detailNav = Ti.UI.iPhone.createNavigationGroup({
        window:MainWindows.userFeed
    });
    
    // create splitwindow view
    MainWindows.splitView = Titanium.UI.iPad.createSplitWindow({
        masterView:MainWindows.masterNav,
        detailView:MainWindows.detailNav
    });
    MainWindows.splitView.addEventListener('visible', function(e){
        //
        if (e.view == 'detail'){
            e.button.title = "Filters";
            MainWindows.userFeed.leftNavButton = e.button;
        }
        //
        else if (e.view == 'master'){
            MainWindows.userFeed.leftNavButton = null;
        }
    });
    MainWindows.open =  function(){
        Ti.UI.currentWindow.add(MainWindows.splitView);
        MainWindows.splitView.open();
    };
    MainWindows.open();
    
    — answered March 16th 2011 by Alex Kudryk
    permalink
    0 Comments
  • Double Post

    — answered March 16th 2011 by Alex Kudryk
    permalink
    0 Comments
  • thanks Alex!
    It works for fine for me :)

    — answered June 1st 2011 by Favio Minaya
    permalink
    0 Comments
  • Helped me too! Forgot to add the splitView to the current window.

    — answered July 12th 2011 by Shawn Berg
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.