Created
June 27, 2012 18:44
-
-
Save skypanther/3005947 to your computer and use it in GitHub Desktop.
Titanium 2.1 changes demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment