Quantcast
Channel: Learning Appcelerator Titanium » Tutorials
Viewing all articles
Browse latest Browse all 10

Using windows in Titanium

$
0
0

The most basic element of a Titanium application is the Window. The application must have at least one window, but can have several. Each window is thought off as the ‘container’ (similar to a wrapper div in XHTML/HTML) element which can exist by itself of contain several child elements, such as views & a tabGroup etc.

How to create a window in Titanium:

var win = Titanium.UI.createWindow({
    title:'My First Window',
    backgroundColor:'#fff',
});
win.open();

How to get the current window in Titanium, you can only this when you are in a .js file that was used to create a window using the URL parameter on Titanium.UI.createWindow():

var currentWin = Titanium.UI.currentWindow;

How to close the current window:

Titanium.UI.currentWindow.close();

How to open a window in fullscreen mode:

var window = Titanium.UI.createWindow({
   backgroundColor:'blue'
});
window.open({fullscreen:true});

Hiding UI elements on window creation:

var window2 = Titanium.UI.createWindow({
    backgroundImage: 'loading.png',
    statusBarHidden:true,
    tabBarHidden:true,
    navBarHidden:true,
    modal:true,
});

Creating a window from another js file (relative for the Resources folder):

var win = Titanium.UI.createWindow({
  url: 'myJsFile.js'
})

Setting the currentWindow as the parent:

var detailWindow = Ti.UI.createWindow( {
        title : "window one",
        layout : 'vertical',
        url: 'window1.js',
        _parent: Titanium.UI.currentWindow
    });

Animating windows:
In the below example, the window2 view will be animated from the right-to-left over window1. Windows can be also opened or closed with an animation.

var window2 = Titanium.UI.createWindow({
    url:'myJsFile.js'
});
var t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT;
window1.animate({view:window2,transition:t});

Modal Windows on the iPad/iPhone:

var window = Titanium.UI.createWindow();
window.open({
    modal:true,
    modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
    modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
})

Note to Android users:
(Android only.) Boolean indicates if the application should exit when the Android back button is pressed while the window is being shown. You can only set this as a createWindow({…}) option. Setting it after window creation will no effect.
To indicate that a particular window should cause an application to exit when the back button is pressed, pass exitOnClose: true as one of the creation arguments, as shown here:

var win = Titanium.UI.createWindow({
    title: 'My Root Window',
    exitOnClose: true
});

Sources:


Viewing all articles
Browse latest Browse all 10

Trending Articles