How to get a transition for windows element like i

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();

Answer 2

the tabgroup is a global element. i'm not sure if it is possible to close it - apparently not. you can jump to a tab with

tabGroup.setActiveTab(id_of_your_tab);

you need to build your own bar if you have to hide it.

Also, is it possible to make a tabbed-view for views or scroll-views.

you can use a scrollview on your window:

var scrollView = Titanium.UI.createScrollView({
    contentWidth:'auto',
    contentHeight:'auto',
    top:0,
    showVerticalScrollIndicator:true,
    showHorizontalScrollIndicator:true
});
var view = Ti.UI.createView({
    backgroundColor:'#336699',
    borderRadius:10,
    width:300,
    height:2000,
    top:10
});
scrollView.add(view);
Titanium.UI.currentWindow.add(scrollView);

tableviews are also a common way to implement a scrollable view.

What other options can I use while making the App for an android device.

have a look at the titanium api. it displays which methods and views are available on android. you should also be aware of the multi density for android devices. so you need to provide youre images in multiple resolutions. have a look at the titanium guidelines.

hope it helps