Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
2013/05/19 - Titanium 入門實戰 3
Next
Download to read offline and view in fullscreen.

22

Share

Download to read offline

20110525[Taipei GTUG] titanium mobile簡介

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

20110525[Taipei GTUG] titanium mobile簡介

  1. 1. Titanium Mobile
  2. 2. Justin Lee
  3. 3. Mobile App
  4. 4. JAVA Objective-C
  5. 5. HTML5+CSS+JS HTML5+CSS+JS+JS API Java, Obj-C+Native API
  6. 6. 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.htmlrender windowlabel
  7. 7. web
  8. 8. Titanium Mobile
  9. 9. JavaScriptvar win = Titanium.UI.createWindow({ backgroundColor:#fff});var label = Titanium.UI.createLabel({ text: Hello World!});win.add(label);win.open();
  10. 10. Titanium Javascript Titanium API JS to Native Bridge Native API
  11. 11. UI API Phone API
  12. 12. 50%
  13. 13. Java Objective-C Titanium API
  14. 14. SDK•Titanium Mobile SDK (1.6.2)•iOS SDK or Android SDKDeveloper Tool•Titanium Developer (1.2.2)•Titanium Studio (RC1)•textmate, vim...
  15. 15. iOS Mac{
  16. 16. Titanium Developer
  17. 17. Titanium Studio Breakpoint+Debugger
  18. 18. Titanium javascript DOM JQuery UI Javascript window view div AddEventListener execution context
  19. 19. Hello World! Titanium
  20. 20. 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
  21. 21. 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();
  22. 22. http://goo.gl/0be5C
  23. 23. Titanium
  24. 24. http://goo.gl/Fj3pl UI GPS XML
  25. 25. 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});
  26. 26. 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();
  27. 27. 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); }); ...}
  28. 28. 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)); } });}
  29. 29. Google’s secret Weather APIhttp://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>
  30. 30. 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();
  31. 31. 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); }); }}
  32. 32. getCurrentWeather();updateInterval = setInterval(getCurrentWeather, 300000);
  33. 33. 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();});
  34. 34. <!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
  35. 35. 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);}
  36. 36. 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);}
  37. 37. 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(); });}
  38. 38. 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(); }); };}
  39. 39. 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); } }); }
  40. 40. 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);
  41. 41. if(Titanium.Platform.osname === android){ Titanium.Android.currentActivity.addEventListener(resume, function(e) { Ti.API.info("resumed"); getCurrentWeather(); });}
  42. 42. !== “Write Once, Run Everywhere”
  43. 43. http://www.cultofmac.com/self-evidently-bad-app-idea-scale-for-ipad
  44. 44. Titanium Mobile SDKhttp://goo.gl/Se1dFKitchen Sinkhttp://goo.gl/5v6dJhttp://goo.gl/Fj3pl
  45. 45. Titanium Mobile 6/9 http://www.lis186.com/?p=2140
  46. 46. Hiring!We’reTitanium SDK Developer Titanium Evangelist http://ti.herxun.co/?page_id=66
  • PatrickLau5

    Dec. 25, 2016
  • zihcingsyu

    Aug. 9, 2016
  • ssusera6679f

    May. 18, 2016
  • wenshyansu

    Aug. 5, 2015
  • YiChengKuo1

    Feb. 2, 2015
  • shinobiwei

    Feb. 2, 2015
  • tboydar

    Nov. 19, 2013
  • tigerhisao

    Oct. 26, 2013
  • MarkVen

    Jul. 30, 2012
  • dodocomo

    Mar. 16, 2012
  • QHZoro

    Feb. 26, 2012
  • killtw

    Feb. 19, 2012
  • autospot

    Feb. 5, 2012
  • leolo

    Dec. 16, 2011
  • OmeworkRoots

    Oct. 6, 2011
  • Reany

    Jul. 23, 2011
  • paperli

    Jun. 14, 2011
  • williamyeh

    Jun. 7, 2011
  • clayliao

    Jun. 3, 2011
  • mediakid

    Jun. 3, 2011

Views

Total views

26,010

On Slideshare

0

From embeds

0

Number of embeds

18,554

Actions

Downloads

255

Shares

0

Comments

0

Likes

22

×