7 Answers

• The code snippet below incorporates a TabGroup and a NavigationGroup. The first tab navigator overlays the tab group completely, whereas the second tab has a navigator embedded in the tab group.

  var tabGroup = Titanium.UI.createTabGroup();
  
  // First tab, main window
  
  var mainWinTab1 = Titanium.UI.createWindow({
      title: 'Window 1'
  });
  var data = [{title: 'item one'}, {title: 'item two'}, {title: 'item three'}];
  var table = Titanium.UI.createTableView({
      data: data
  }); 
  mainWinTab1.add(table);
  
  // First tab, navigator
  
  var navTab1 = Titanium.UI.iPhone.createNavigationGroup({
      window: mainWinTab1
  });
  var baseWinTab1 = Titanium.UI.createWindow({
      navBarHidden: true
  });
  baseWinTab1.add(navTab1);
  
  // First tab, subwindow
  
  table.addEventListener('click', function(e){
      tabGroup.animate({bottom: -50, duration: 500});
  
      var subWinTab1 = Titanium.UI.createWindow({
          title: e.row.title
      });
      navTab1.open(subWinTab1);
  
      subWinTab1.addEventListener('close', function(e){
          tabGroup.animate({bottom: 0, duration: 500});
      });
  });
  
  // Second tab, main window
  
  var mainWinTab2 = Titanium.UI.createWindow({
      title: 'Window 2'
  });
  var data = [{title: 'item a'}, {title: 'item b'}, {title: 'item c'}];
  var table = Titanium.UI.createTableView({
      data: data
  }); 
  mainWinTab2.add(table);
  
  // Second tab, navigator
  
  var navTab2 = Titanium.UI.iPhone.createNavigationGroup({
      window: mainWinTab2
  });
  
  var baseWinTab2 = Titanium.UI.createWindow({
      navBarHidden: true
  });
  baseWinTab2.add(navTab2);
  
  // Second tab, subwindow
  
  table.addEventListener('click', function(e){
      var subWinTab2 = Titanium.UI.createWindow({
          title: e.row.title
      });
      navTab2.open(subWinTab2);
  });
  
  // Tab group
  
  var tab1 = Titanium.UI.createTab({  
      icon: 'KS_nav_ui.png',
      title: 'Full nav',
      window: baseWinTab1
  });
  tabGroup.addTab(tab1);  
  
  var tab2 = Titanium.UI.createTab({  
      icon: 'KS_nav_views.png',
      title: 'Embedded nav',
      window: baseWinTab2
  });
  tabGroup.addTab(tab2);  
  
  tabGroup.open();
  

• I've got a similar question. My first window is a plain window, with a navigation group. I can then navigate to a new window, which is a tab group.

  navGroup.open(tabGroup);
  

  For each window I create when adding to the tab group:

  for (var i = 0; i < tabWindows.length; i++) {
              tabWindows[i].topTabGroup = topTabGroup;
              tabWindows[i].navGroup = navGroup;
              tabWindows[i].navBarHidden = false;
  }
  

  For each window in my tab groups, I add a button:

  var backButton = Titanium.UI.createButton({title:'Back'});
  Titanium.UI.currentWindow.leftNavButton = backButton;
  
  backButton.addEventListener('click', function() {
      try {
          currentWin.navGroup.close(currentWin.topTabGroup);        
      } catch(e) {
          alert(e);
      }
  });
  

  As you can see, each window has a reference to the navGroup, and I can call navGroup.close() to navigate through the nav Group.

  However, the only problem is that the navigation toolbar for the tab group AND the navigation group show up at the same time… is there a way to get a reference to the tab group's nav bar to hide it?

• hi florian

  Can you please be a bit more clear on your point….i can understand that you have a table view embedded on a tab group tab,and you want the table view rows to navigate to separate windows on click event…..so what is the problem that you face?

• Thanks for your reply.
  The thing is: I want to combine a TabGroup AND a NavigationGroup within one window.
  I don´t know if I get things wrong here… couldn´t get this thing to work.

• Florian,

  When you open a sub window in a tab, a back button is automatically displayed in the left part of the title bar of the sub window. As far as I know, this is functionnally equivalent to the navigation group.
  If that's correct, you don't need to use both. The Tab Group would be enough.

  My 2 cents.

• I have the similar problem guys. My app starts with a TabGroup. One of the tabs displays a table with rows. When I click on a row, I'd like to open a new window, displaying more detailed info on this row. And then I want to able to go back to my tab.

  If I try to put the TabGroup as a first window in the NavGroup, it shows the tab group fine, but when I try to drill down to the child window, it doesn't show up. Ideas??

• Add Button to Tab Group Toolbar/Navbar

  This may be an alternative. The code:

  var btnEdit = Ti.UI.createButton({
      systemButton: Ti.UI.iPhone.SystemButton.EDIT
  });
  btnEdit.addEventListener('click',function(e){
      // button was clicked
  });
  tabWin.rightNavButton = btnEdit;
  

  You can also add a left button by doing:

  tabWin.leftNavButton = btnEdit;
  

  Reading these two questions: one and two helped me figure this out.

  The buttons will then display like:

  

  Note that this works for iPhones, not just iPads (haven't tested on Android). All the button options are listed here. Also, note that you can do similar things with the icons on the tab bar using these button styles.