TiMVC - How to structure tab based app

Hello!

I'm trying to wrap my head around using TiMVC for a tab based app. Basically, I guess I'm wondering if anybody has an example app using TiMVC where the main structure/navigation of the app is tab based rather than list based.

In the demo code that ships with TiMVC, the first screen is a list and it navigates off to other routes.

If I'm creating an app whose main screen is a tab view with 4 tabs, is there a way to do that with 4 separate routes/controller actions? Or do I consider every tab view in my app a single route that loads up 4 functionally different pieces of code? If it's the latter, that seems to muddy up my structure.

Thanks for any ideas!

It's worth noting that native tabs will manage their own tab windows. You can use TiMVC to load the window for a tab or a window that contains a tab group. Please see the "tabgroup" action in the "example" Controller (/controllers/example.js - example/tabgroup) from the TiMVC sample zip file. This action loads 3 tabs each via a route.

/**
     * tabgroup action -- loads a tab group ui with the default layout and /mvc/views/example/tabgroup.js view file
     * @param {Object} r json request object sent by routing window
     */
    this.tabgroup = function(r){
 
        var tabs = [];
 
        var tabWin1 = self.App.util.createWindow('Tab Window 1','tab/window1',{});
        tabs.push({title:"Tab 1",window:tabWin1});
 
        var tabWin2 = self.App.util.createWindow('Tab Window 2','tab/window2',{});
        tabs.push({title:"Tab 2",window:tabWin2});
 
        var tabWin3 = self.App.util.createWindow('Tab Window 3','tab/window3',{});
        tabs.push({title:"Tab 3",window:tabWin3});
 
        var tabGroup = Titanium.UI.createTabGroup({id:'tabGroup1'});
        for(var i=0;i<tabs.length;i++){
            tabGroup.addTab(Titanium.UI.createTab({
                title:tabs[i].title,
                window:tabs[i].window
            }));
        }
 
        tabGroup.setActiveTab(1);
        tabGroup.open();
        Ti.App.addEventListener('closeTabs',function(e){
            tabGroup.close();
        });
 
    }

As you know TiMVC will allow you to reuse actions, layouts and views. It's up to you if you want to use Tabs, Menues, Dashboards, etc for your application windows as TiMVC is not limited to any one view.

I am also attempting to learn this framework, which looks very promising. To add on to Mike's question, If creating an app where a TabGroup with individual windows are each its own root, how would you suggest going about creating drill downs in each of the tabs windows.

IE: I created the tab group in the main/home action which creates the tabs and opens the tab group. I have tab 1 with the route "employees/list" which runs the action "list" that loads the view "views/employees/list.js" that creates a table view of all employees. Clicking on employee will go to the route "employees/show" which runs the action "show" that loads the view "views/employees/show" that drills down from employee/list to employee/show showing the employee information. The employee/show will essentially be a new window that is loaded in tab 1.

I have not wrapped my head around the routing in order to achieve this. If I create the new window using self.App.util.createWindow and then attempt to open the window with self.App.openWindow() it will try to load the window in the navgroup which errors and is not the result I am trying to achieve.

Any suggestions?