Understanding device orientation modes

One of the great benefits for users with current smartphones is the ability to hold the device in any way possible and have the screen rotate to suit its orientation. Titanium allows you to fire event handlers based on orientation changes in your application.

In this recipe, we will create an event handler that fires whenever the orientation on the device is changed, and we will rearrange some UI components on our screen accordingly.

The complete source code for this recipe can be found in the /Chapter 11/Recipe 3 folder.

How to do it…

Open your app.js file, remove any existing code, and type the following:

//
// create root window
//
var win1 = Ti.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});

//set the allowed orientation modes for win1
//in this example, we'll say ALL modes are allowed
win1.orientationModes = [
    Ti.UI.LANDSCAPE_LEFT,
    Ti.UI.LANDSCAPE_RIGHT,
    Ti.UI.PORTRAIT,
    Ti.UI.UPSIDE_PORTRAIT...