More Related Content
Similar to 20110525[Taipei GTUG] titanium mobile簡介 (20)
More from Justin Lee (20)
20110525[Taipei GTUG] titanium mobile簡介
- 13. window window
webview label
DOM parser window
JavaScript interpreter label
CSS parser
HTML renderer
SVG renderer hello world!
Canvas renderer
history manager
SQLLite engine
index.html
render
window
label
- 16. JavaScript
var win = Titanium.UI.createWindow({
backgroundColor:'#fff'
});
var label = Titanium.UI.createLabel({
text: 'Hello World!'
});
win.add(label);
win.open();
- 17. Titanium
Javascript
Titanium API
JS to Native Bridge
Native API
- 21. Java Objective-C Titanium API
- 23. SDK
•Titanium Mobile SDK (1.6.2)
•iOS SDK or Android SDK
Developer Tool
•Titanium Developer (1.2.2)
•Titanium Studio (RC1)
•textmate, vim...
- 27. Titanium javascript
DOM JQuery
UI Javascript
window
view div
AddEventListener
execution context
- 29. HowIsTheWeather/
build/
android/
...
iphone/
...
CHANGELOG.txt
LICENSE
LICENSE.txt
manifest
README
Resources/
android/
...
app.js
iphone/
...
KS_nav_ui.png
KS_nav_views.png
tiapp.xml
- 30. Hello World!
var win = Titanium.UI.createWindow({
backgroundColor:'#fff'
});
var label = Titanium.UI.createLabel({
text: 'Hello World!',
textAlign: 'center'
});
label.addEventListener('click', function(e){
Titanium.API.info('label clicked!');
});
win.add(label);
win.open();
- 34. var win = Titanium.UI.createWindow({
backgroundColor:'#fff'
});
var locationLabel = Titanium.UI.createLabel({
color:'#000',
text:' ',
font:{fontSize: 30, fontFamily:'Helvetica Neue'},
75px
textAlign:'center',
width:'auto',
height: 'auto',
left: 15,
15px
top: 75
});
var weatherIcon = Titanium.UI.createImageView({
image: 'images/mostly_cloudy.gif',
width: 80,
height: 80,
left: 15,
top: 120
});
- 35. var temperatureLabel = Titanium.UI.createLabel({
color:'#000',
text:'28°C',
font:{fontSize: 90, fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto',
height: 'auto',
right: 15,
top: 100
});
var detailLabel = Titanium.UI.createLabel({
color:'#000',
text: ' n 62%n n 10 / ',
font:{fontSize: 24, fontFamily:'Helvetica Neue'},
textAlign:'left',
width:'auto',
height: 'auto',
left: 20,
top: 220
});
win.add(locationLabel);
win.add(weatherIcon);
win.add(temperatureLabel);
win.add(detailLabel);
win.open();
- 36. if (Titanium.Geolocation.locationServicesEnabled === false)
{
Titanium.UI.createAlertDialog({title:' ',
message:' 啓 '}).show();
}
else
{
Ti.Geolocation.purpose = "get current position";
Titanium.Geolocation.accuracy = Titanium.Geolocation.ACCURACY_THREE_KILOMETERS;
Titanium.Geolocation.distanceFilter = 1000;
Titanium.Geolocation.getCurrentPosition(function(e)
{
if (e.error)
{
Titanium.API.info("error: " + JSON.stringify(e.error));
return;
}
var latitude = e.coords.latitude;
var longitude = e.coords.longitude;
Ti.API.info(longitude+','+latitude);
});
...
}
- 37. function updateLocationName(lat, lng)
{
Titanium.Geolocation.reverseGeocoder(lat, lng, function(e)
{
if (e.success) {
var places = e.places;
if (places && places.length) {
locationLabel.text = places[0].city;
} else {
locationLabel.text = "";
}
Ti.API.debug("reverse geolocation result = "+JSON.stringify(e));
}
else {
Ti.UI.createAlertDialog({
title:'Reverse geo error',
message:evt.error
}).show();
Ti.API.info("Code translation: "+translateErrorCode(e.code));
}
});
}
- 38. Google’s secret Weather API
http://www.google.com/ig/api?hl={locale}&weather=,,,{lat},{lng}
http://www.google.com/ig/api?hl=zh-tw&weather=,,,25060808,121485606
<?xml version="1.0"?>
<xml_api_reply version="1">
<weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0" >
<forecast_information>
<city data=""/>
<postal_code data=""/>
<latitude_e6 data="25060808"/>
<longitude_e6 data="121485606"/>
<forecast_date data="2010-09-15"/>
<current_date_time data="2010-09-14 23:00:00 +0000"/>
<unit_system data="SI"/>
</forecast_information>
<current_conditions>
<condition data=" "/>
http://img0.gmodules.com/
<temp_f data="79"/>
<temp_c data="26"/>
<humidity data=" 87%"/>
<icon data="/ig/images/weather/cloudy.gif"/>
<wind_condition data=" / "/>
</current_conditions>
<forecast_conditions>
<day_of_week data=" "/>
<low data="26"/>
<high data="35"/>
<icon data="/ig/images/weather/thunderstorm.gif"/>
<condition data=" "/>
</forecast_conditions>
...
</weather>
</xml_api_reply>
- 39. function updateWeather(lat, lng)
{
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function()
{
Ti.API.info('weather xml ' + this.responseXML + ' text ' + this.responseText);
//var doc = this.responseXML.documentElement; encoding bug on Android
var doc = Titanium.XML.parseString(this.responseText).documentElement;
var condition = doc.evaluate("//weather/current_conditions/condition").item
(0).getAttribute('data');
Ti.API.info(condition);
...
temperatureLabel.text = temp_c + '°C';
weatherIcon.image = icon;
detailLabel.text = condition + 'n';
detailLabel.text += humidity + 'n';
detailLabel.text += wind_condition.split(' ')[0] + 'n';
detailLabel.text += wind_condition.split(' ')[1] + 'n';
};
var url = 'http://www.google.com/ig/api?hl=zh-tw&weather=,,,'+parseInt(lat*1000000,
10)+','+parseInt(lng*1000000, 10);
Ti.API.info(url);
xhr.open('GET', url);
xhr.send();
- 40. function getCurrentWeather()
{
if (Titanium.Geolocation.locationServicesEnabled === false)
{
Titanium.UI.createAlertDialog({title:' ', message:' 啓 '}).show();
}
else
{
Ti.Geolocation.purpose = " ";
Titanium.Geolocation.accuracy = Titanium.Geolocation.ACCURACY_BEST;
Titanium.Geolocation.distanceFilter = 1000;
Titanium.Geolocation.getCurrentPosition(function(e)
{
if (e.error)
{
Titanium.API.info("error: " + JSON.stringify(e.error));
Titanium.UI.createAlertDialog({title:' ', message: e.error.message}).show();
detailLabel.text = ' ';
return;
}
var latitude = e.coords.latitude;
var longitude = e.coords.longitude;
Ti.API.info(longitude+','+latitude);
updateLocationName(latitude, longitude);
updateWeather(latitude, longitude);
});
}
}
- 42. var settingWin = Titanium.UI.createWindow({
backgroundColor: '#999'
});
var aboutWebview = Titanium.UI.createWebView({
url: 'about.html',
...
});
settingWin.add(aboutWebview);
var doneButton = Titanium.UI.createButton({
title: ' ',
...
});
settingWin.add(doneButton);
doneButton.addEventListener('click', function(e){
if(Titanium.Platform.osname === 'iphone')
{
settingWin.close({transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT});
mainWin.open();
}else if(Titanium.Platform.osname === 'android')
{
mainWin.open();
settingWin.close();
}
getCurrentWeather();
});
- 43. <!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>About</title>
<meta name="description" content="About the app">
<meta name="viewport" content="width=320"/>
<meta name="author" content="lis186">
<link rel="stylesheet" href="screen.css">
</head>
<body>
<h1> </h1>
<img src='appicon.png'>
<p> 1.0</p>
<p>Powered by Titanium Mobile.</p>
</body>
</html>
about.js
- 44. if(Titanium.Platform.osname === 'iphone')
{
var unitTabbedBar = Titanium.UI.createTabbedBar({
labels:['°C', '°F'],
style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
...
});
unitTabbedBar.addEventListener('click', function(e){
if(e.index === 0)
{
Titanium.App.Properties.setString('tempUnit', 'c');
}else if (e.index === 1){
Titanium.App.Properties.setString('tempUnit', 'f');
}
});
settingWin.add(unitTabbedBar);
var settingButton = Titanium.UI.createButton({
...
style: Titanium.UI.iPhone.SystemButton.INFO_DARK
});
mainWin.add(settingButton);
}
- 45. if(Titanium.Platform.osname === 'android')
{
var cButton = Titanium.UI.createButton({
title: '°C',
...
});
var fButton = Titanium.UI.createButton({
title: '°F',
...
});
cButton.addEventListener('click', function(e){
Titanium.App.Properties.setString('tempUnit', 'c');
cButton.enabled = false;
fButton.enabled = true;
});
fButton.addEventListener('click', function(e){
Titanium.App.Properties.setString('tempUnit', 'f');
cButton.enabled = true;
fButton.enabled = false;
});
settingWin.add(cButton);
settingWin.add(fButton);
}
- 46. if(Titanium.Platform.osname === 'iphone')
{
mainWin.add(settingButton);
settingButton.addEventListener('click', function(e){
settingWin.open({
transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT
});
var tempUnit = Titanium.App.Properties.getString('tempUnit', 'c');
if(tempUnit === 'c')
{
unitTabbedBar.index = 0;
}else if(tempUnit === 'f')
{
unitTabbedBar.index = 1;
}
mainWin.close();
});
}
- 47. if(Titanium.Platform.osname === 'android')
{
Titanium.Android.currentActivity.onCreateOptionsMenu = function(e) {
Titanium.API.info("create menu");
var menu = e.menu;
var refreshMenuItem = menu.add({ title: ' ' });
var settingMenuItem = menu.add({ title: ' ' });
refreshMenuItem.addEventListener("click", function(e) {
getCurrentWeather();
});
settingMenuItem.addEventListener("click", function(e) {
indicator.hide();
settingWin.open();
var tempUnit = Titanium.App.Properties.getString('tempUnit', 'c');
if(tempUnit === 'c')
{
cButton.enabled = false;
fButton.enabled = true;
}else if(tempUnit === 'f')
{
cButton.enabled = true;
fButton.enabled = false;
}
mainWin.close();
});
};
}
- 48. if(Titanium.Platform.osname === 'iphone')
{
var service;
Titanium.App.addEventListener('pause',function(e)
{
Ti.API.info('pause');
service = Titanium.App.iOS.registerBackgroundService({
url: 'bgjob.js',
tempUnit: Titanium.App.Properties.getString('tempUnit', 'c')
});
Titanium.API.info("registered background service = "+service);
});
Titanium.App.addEventListener('resumed',function(e)
{
Ti.API.info('resumed');
if(service != null){
getCurrentWeather();
service.stop();
service.unregister();
Ti.API.info('Stop background service');
}
});
}
- 49. function updateWeather(lat, lng)
{
var xhr = Titanium.Network.createHTTPClient(); bgjob.js
xhr.onload = function()
{
var tempUnit = Titanium.App.currentService.tempUnit;
...
if(tempUnit === 'c')
{
Titanium.UI.iPhone.appBadge = temp_c;
Ti.API.info('Update badge:' + temp_c);
}else if(tempUnit === 'f')
{
Titanium.UI.iPhone.appBadge = temp_f;
Ti.API.info('Update badge:' + temp_f);
}
};
var url = 'http://www.google.com/ig/api?hl=zh-tw&weather=,,,'+
parseInt(lat*1000000, 10)+','+parseInt(lng*1000000, 10);
Ti.API.info(url);
xhr.open('GET', url);
xhr.send();
}
function getCurrentWeather()
{
...
}
...
Ti.API.info('starting background service');
var updateInterval = setInterval(getCurrentWeather, 300000);