Question

I am trying to make a Demo in Appcelerator here is the code for it.

var tabGroup = Titanium.UI.createTabGroup();

var main_win = Titanium.UI.createWindow({  
     title:'Tab 1',
     backgroundColor:'#fff'
});

var win1 = Titanium.UI.createWindow({  
     title:'Tab 1',
     backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({ 
     title:'Tab 1',
     window:win1
});
var label1 = Titanium.UI.createLabel({
     text:'I am Window 1',
     win:win1
});
win1.add(label1);

var win2 = Titanium.UI.createWindow({  
     title:'Tab 2',
     backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
     title:'Tab 2',
     window:win2
});

var label2 = Titanium.UI.createLabel({
     text:'I am Window 2',
});
win2.add(label2);


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



main_win.open();

var button1 = Titanium.UI.createButton({
     title:"hello"
});
main_win.add(button1);
var button2 = Titanium.UI.createButton({
     title:"hello"
});
win1.add(button2);

button1.addEventListener('click', function(e) {
     tabGroup.open();
});

button2.addEventListener('click', function(e) {
     main_win.show();
     tabGroup.close();
});

Now button2 is not working in the desired way. I want to switch back to window_1 i.e the main window. What is going wrong with the code.

EDIT

I want to have a window (Can be a view/window or something else.) namely main_win which has a button named button1. When I click on button1 it moves to another view which shows me two tabbed views namely win1 and win2 associated with tab1 and tab2. Clicking on tab1 will show win1 and clicking on tab2 will show win2. Both win1 and win2 have a button say button2 clicking on which would send us back to the main_win. Also I want the transition to be like we are getting from scrollview by default.

Answer 1

I always just think about tabGroups as windows. It isn’t documented, but you can use the exitOnClose property on tabGroups in Android. Please see if the following code does what you need. Titanium SDK 1.7.5 targeting Android 2.2

var main_win = Titanium.UI.createWindow({
    title : 'main_win',
    backgroundColor : '#fff'
});
var button1 = Titanium.UI.createButton({
    title : "open tabGroup",
    height:35,
    width:120
});
button1.addEventListener('click', function(e) {
    tabGroup.open();
});
main_win.add(button1);

var win1 = Titanium.UI.createWindow({
    title : 'Tab 1',
    backgroundColor : '#fff'
});
var tab1 = Titanium.UI.createTab({
    title : 'Tab 1',
    window : win1
});
var label1 = Titanium.UI.createLabel({
    text : 'I am Window 1',
    win : win1
});
win1.add(label1);
var button2 = Titanium.UI.createButton({
    title : "< back",
    top:5,
    left:5,
    height: 35,
    width: 80
});
win1.add(button2);
button2.addEventListener('click', function(e) {
    tabGroup.close();
});

var win2 = Titanium.UI.createWindow({
    title : 'Tab 2',
    backgroundColor : '#fff'
});
var tab2 = Titanium.UI.createTab({
    title : 'Tab 2',
    window : win2
});
var label2 = Titanium.UI.createLabel({
    text : 'I am Window 2',
});
win2.add(label2);
var button3 = Titanium.UI.createButton({
    title : "< back",
    top:5,
    left:5,
    height: 35,
    width: 80
});
win2.add(button3);
button3.addEventListener('click', function(e) {
    tabGroup.close();
});

var tabGroup = Titanium.UI.createTabGroup({
    exitOnClose: false
});
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

main_win.open();