Titanium Community Questions & Answer Archive

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

Reuse same window across multiple tabs in same tabgroup?

I am developing a tab-based app where the tabs are so similar that I think it makes sense to create one shared window and use it as the window across all tabs. For example, let's say tab 1 displays the NYT Business RSS feed, tab 2 displays the NYT Technology RSS feed, and tab 3 the Business RSS feed – and the display logic (table view) is the same for all. The only thing that is different is a parameter in the RSS URL (and window title).

  1. Is this shared window the correct approach in this situation or is it better to use separate windows for each tab?

  2. If the shared window approach is used, how do I properly determine which tab is active within the shared window .js code? Also, how can I access custom properties of the tab object? Below is what I currently have but isn't working:

var sharedWindow = Titanium.UI.createWindow({
    url:'sharedWindow.js'
});

var tab1 = Titanium.UI.createTab({
    customProperty: 'One',
    title:'Tab 1',
    window: sharedWindow
});

var tab2 = Titanium.UI.createTab({
    customProperty: 'Two',
    title:'Tab 2',
    window: sharedWindow
});

var tab3 = Titanium.UI.createTab({
    customProperty: 'Three',
    title:'Tab 3',
    window: sharedWindow
});

tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.addTab(tab3);

tabGroup.open();

sharedWindow.js

Titanium.UI.currentWindow.addEventListener('focus', function(){
    var test = Titanium.UI.currentTab.customProperty;
    Titanium.UI.currentWindow.title = test;
});
— asked June 12th 2010 by Slim McKinsley
  • shared
  • tab
  • tabgroup
  • window
0 Comments

2 Answers

  • There must be a built-in way to determine which tab was tapped. I find it hard to believe that you have to set a global variable on the focus event of the tab group and then retrieve this variable when inside the window. While this would work, it seems like unnecessary overhead to me.

    Could someone from Appcelerator please chime in – is this global variable method the only way to determine which tab was tapped or is there a better way? Also, could someone from Appcelerator confirm if a separate window object is required for each tab in a tab group, or can multiple tabs share the same window?

    Thank you!

    — answered June 14th 2010 by Slim McKinsley
    permalink
    0 Comments
  • My understanding is that you need different window instance for each tab (correct me if I am wrong). But it's prefectly fine to share the same .js code.

    My approach is to have a loop to create the and assign the tab windows by assigning the same .js url, then set parameter on tab 'focus' event. Like this e.g.:

    tabGroup.addEventListener('focus', function(e)
    {
    if (e.index == 4) {
    Ti.App.fireEvent('hide_char_indicator');
    } else {
    Ti.App.fireEvent('show_char_indicator');
    Ti.App.Properties.setInt('current_style',e.index+1);
    }
    });

    And in the shared .js code, you could pickup the parameter like this standard "global" variable approach:
    var current_style = Ti.App.Properties.getInt('current_style');

    Take a look at the app using the above approach to see how it works: itms://itunes.apple.com/us/app/id366482612?mt=8
    assuming you like Chinese (Kanji) calligraphic art :)

    — answered June 13th 2010 by Dave Lee
    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.