Titanium 2.1 changes demo

app.js

// tested on Titanium 2.1.0.v20120621224153 on iOS and Android 2.2 

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Map Routes',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Routes',
    window:win1
});

var map = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    region: {
        latitude: 42.3366, longitude: -71.1689,
        latitudeDelta: 0.001, longitudeDelta: 0.004
    }
});
map.addRoute({
    name: '1',
    points: [
        {latitude: 42.3353, longitude: -71.1705 },
        {latitude: 42.3383, longitude: -71.1690 },
        {latitude: 42.3358, longitude: -71.1670 },
        {latitude: 42.3353, longitude: -71.1705 }
    ],
    color: 'red',
    width: 4
});
map.addRoute({
    name: '2',
    points: [
        {latitude: 42.3363, longitude: -71.1682 },
        {latitude: 42.3370, longitude: -71.1686 },
        {latitude: 42.3369, longitude: -71.1692 },
        {latitude: 42.3366, longitude: -71.1695 },
        {latitude: 42.3361, longitude: -71.1690 },
        {latitude: 42.3368, longitude: -71.1685 }
    ],
    color: 'red',
    width: 4
});
win1.add(map);
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'CanCancelEvents',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'CancelEvents',
    window:win2
});

var status = Ti.UI.createLabel({
	text: ' ', textAlign: 'center',
	zIndex: 1,
	right: 0, bottom: 0, left: 0,
	height: 60,
	backgroundColor: 'black',
	color: 'white'
});
win2.add(status);

var scroll = Ti.UI.createScrollView({
	scrollType: 'vertical',
	contentHeight: 3010,
	canCancelEvents: true,
	bottom: 60
});
var width = 150, height = 90;
for (var i = 0; i < 30; i++) {
	scroll.add(Ti.UI.createLabel({
		draggable: true,
		text: 'Drag Me Horizontally ' + (i + 1), textAlign: 'center',
		color: '#000',
		top: i * 100 + 10,
		width: width, height: height,
		backgroundColor: '#eee'
	}));
}
scroll.addEventListener('touchstart', curry('Touch Start'));
scroll.addEventListener('touchmove', curry('Touch Move'));
scroll.addEventListener('touchcancel', curry('Touch Cancel'));
scroll.addEventListener('touchend', curry('Touch End'));
win2.add(scroll);

function curry(eventName) {
	return function (evt) {
		if (evt.source && evt.source.draggable) {
			status.text = eventName + ' at { x: ' + (evt.x | 0) + ', y: ' + (evt.y | 0) + ' }';
			var global = evt.source.convertPointToView({ x: evt.x, y: evt.y }, scroll);
			evt.source.left = global.x - width / 2;
		}
	}
}


var win3 = Titanium.UI.createWindow({  
    title:'Gradients',
    backgroundColor: '#fff'
/*
	// Force-closes app, see https://jira.appcelerator.org/browse/TIMOB-9819
    , backgroundGradient: {
        type: 'linear',
        startPoint: { x: '0%', y: '0%' },
        endPoint: { x: '100%', y: '100%' },
        colors: [ { color: '#fff', offset: 0.0}, { color: '#444', offset: 0.5 }, { color: '#fff', offset: 1.0 } ]
    }
*/
});
var tab3 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Gradients',
    window:win3
});

var linearGradient = Ti.UI.createView({
    top: 10,
    width: 100,
    height: 100,
    backgroundGradient: {
        type: 'linear',
        startPoint: { x: '0%', y: '50%' },
        endPoint: { x: '100%', y: '50%' },
        colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.25 }, { color: 'red', offset: 1.0 } ]
    }
});
win3.add(linearGradient);
//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
tabGroup.addTab(tab3);  


// open tab group
tabGroup.open();