Enviar búsqueda
Cargar
20130614 Titanium簡介@政大資科
•
5 recomendaciones
•
3,276 vistas
Justin Lee
Seguir
Tecnología
Arte y fotografía
Denunciar
Compartir
Denunciar
Compartir
1 de 48
Recomendados
20111130 titanium mobile
20111130 titanium mobile
Hiroshi Oyamada
Prototyping Web Metaphors 20090418
Prototyping Web Metaphors 20090418
Charles (XXC) Chen
思考的藝術(全)
思考的藝術(全)
Chunpai Niu
[ECX] 淘寶買家購物行為研究發現 渡劫 / 淘寶 用戶體驗研究專家
[ECX] 淘寶買家購物行為研究發現 渡劫 / 淘寶 用戶體驗研究專家
悠識學院
使用者經驗演講簡報2013 07-19 - 複製
使用者經驗演講簡報2013 07-19 - 複製
National Cheng-Chi University
《網站分析實戰》 Ch5書摘-你的網站在偷懶嗎?
《網站分析實戰》 Ch5書摘-你的網站在偷懶嗎?
Wanju Wang
Pinkoi 把手機版網站變好用了
Pinkoi 把手機版網站變好用了
Adam Wang
Enterprise UX: The Journey and Opportunity Ahead
Enterprise UX: The Journey and Opportunity Ahead
Catherine Courage
Recomendados
20111130 titanium mobile
20111130 titanium mobile
Hiroshi Oyamada
Prototyping Web Metaphors 20090418
Prototyping Web Metaphors 20090418
Charles (XXC) Chen
思考的藝術(全)
思考的藝術(全)
Chunpai Niu
[ECX] 淘寶買家購物行為研究發現 渡劫 / 淘寶 用戶體驗研究專家
[ECX] 淘寶買家購物行為研究發現 渡劫 / 淘寶 用戶體驗研究專家
悠識學院
使用者經驗演講簡報2013 07-19 - 複製
使用者經驗演講簡報2013 07-19 - 複製
National Cheng-Chi University
《網站分析實戰》 Ch5書摘-你的網站在偷懶嗎?
《網站分析實戰》 Ch5書摘-你的網站在偷懶嗎?
Wanju Wang
Pinkoi 把手機版網站變好用了
Pinkoi 把手機版網站變好用了
Adam Wang
Enterprise UX: The Journey and Opportunity Ahead
Enterprise UX: The Journey and Opportunity Ahead
Catherine Courage
Android vs iPhone - Differences in UI Patterns and Design
Android vs iPhone - Differences in UI Patterns and Design
Jeremy Johnson
經營電子商務(網路自有平台)究竟要搞定哪些系統
經營電子商務(網路自有平台)究竟要搞定哪些系統
Tim Lin
David龔 說故事試聽講義 - Europe 2 雞與蛋 20150402
David龔 說故事試聽講義 - Europe 2 雞與蛋 20150402
換位思考
網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計
Charles (XXC) Chen
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
Chris Wu
創新產品如何利用情境影片創造價值與傳遞體驗
創新產品如何利用情境影片創造價值與傳遞體驗
NTUST
User Centered Design in short
User Centered Design in short
silvana churruca
A Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UX
Annie Wang
产品研发设计 优秀作品1-healthy whale
产品研发设计 优秀作品1-healthy whale
Chiyu Zan
Designing for Multi-touchpoint Experiences
Designing for Multi-touchpoint Experiences
Jamin Hegeman
How Emotions Drive Customer Experience Webinar
How Emotions Drive Customer Experience Webinar
Gavin McMahon
Lean Analytics for Intrapreneurs (Lean Startup Conf 2013)
Lean Analytics for Intrapreneurs (Lean Startup Conf 2013)
Lean Analytics
Facebook Audience
Facebook Audience
Chen Liwei
Google Analytics 使用者行為分析 @ Front-End Developers Taiwan Party - 9
Google Analytics 使用者行為分析 @ Front-End Developers Taiwan Party - 9
Hans Shih
如何規劃社群經營策略與內容行銷(老查)
如何規劃社群經營策略與內容行銷(老查)
Peggy Li
跨領域教師實務工作坊 5-2設計思考五步驟
跨領域教師實務工作坊 5-2設計思考五步驟
Shih-Chung Jessy Kang
Introducing design thinking
Introducing design thinking
Zaana Jaclyn
Chinese web design patterns: how and why they’re different (Chui Chui Tan)
Chinese web design patterns: how and why they’re different (Chui Chui Tan)
cxpartners
Trends in interactive design 2013
Trends in interactive design 2013
Prophets Agency
People Don't Care About Your Brand
People Don't Care About Your Brand
Slides That Rock
2023/04/19 學習中的AI 如何幫助孩子有效學習
2023/04/19 學習中的AI 如何幫助孩子有效學習
Justin Lee
2014/01/12 旅人的府城漫步
2014/01/12 旅人的府城漫步
Justin Lee
Más contenido relacionado
Destacado
Android vs iPhone - Differences in UI Patterns and Design
Android vs iPhone - Differences in UI Patterns and Design
Jeremy Johnson
經營電子商務(網路自有平台)究竟要搞定哪些系統
經營電子商務(網路自有平台)究竟要搞定哪些系統
Tim Lin
David龔 說故事試聽講義 - Europe 2 雞與蛋 20150402
David龔 說故事試聽講義 - Europe 2 雞與蛋 20150402
換位思考
網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計
Charles (XXC) Chen
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
Chris Wu
創新產品如何利用情境影片創造價值與傳遞體驗
創新產品如何利用情境影片創造價值與傳遞體驗
NTUST
User Centered Design in short
User Centered Design in short
silvana churruca
A Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UX
Annie Wang
产品研发设计 优秀作品1-healthy whale
产品研发设计 优秀作品1-healthy whale
Chiyu Zan
Designing for Multi-touchpoint Experiences
Designing for Multi-touchpoint Experiences
Jamin Hegeman
How Emotions Drive Customer Experience Webinar
How Emotions Drive Customer Experience Webinar
Gavin McMahon
Lean Analytics for Intrapreneurs (Lean Startup Conf 2013)
Lean Analytics for Intrapreneurs (Lean Startup Conf 2013)
Lean Analytics
Facebook Audience
Facebook Audience
Chen Liwei
Google Analytics 使用者行為分析 @ Front-End Developers Taiwan Party - 9
Google Analytics 使用者行為分析 @ Front-End Developers Taiwan Party - 9
Hans Shih
如何規劃社群經營策略與內容行銷(老查)
如何規劃社群經營策略與內容行銷(老查)
Peggy Li
跨領域教師實務工作坊 5-2設計思考五步驟
跨領域教師實務工作坊 5-2設計思考五步驟
Shih-Chung Jessy Kang
Introducing design thinking
Introducing design thinking
Zaana Jaclyn
Chinese web design patterns: how and why they’re different (Chui Chui Tan)
Chinese web design patterns: how and why they’re different (Chui Chui Tan)
cxpartners
Trends in interactive design 2013
Trends in interactive design 2013
Prophets Agency
People Don't Care About Your Brand
People Don't Care About Your Brand
Slides That Rock
Destacado
(20)
Android vs iPhone - Differences in UI Patterns and Design
Android vs iPhone - Differences in UI Patterns and Design
經營電子商務(網路自有平台)究竟要搞定哪些系統
經營電子商務(網路自有平台)究竟要搞定哪些系統
David龔 說故事試聽講義 - Europe 2 雞與蛋 20150402
David龔 說故事試聽講義 - Europe 2 雞與蛋 20150402
網路、行銷、使用者經驗設計
網路、行銷、使用者經驗設計
從技術角度看 RWD - Technical Approaches to RWD
從技術角度看 RWD - Technical Approaches to RWD
創新產品如何利用情境影片創造價值與傳遞體驗
創新產品如何利用情境影片創造價值與傳遞體驗
User Centered Design in short
User Centered Design in short
A Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UX
产品研发设计 优秀作品1-healthy whale
产品研发设计 优秀作品1-healthy whale
Designing for Multi-touchpoint Experiences
Designing for Multi-touchpoint Experiences
How Emotions Drive Customer Experience Webinar
How Emotions Drive Customer Experience Webinar
Lean Analytics for Intrapreneurs (Lean Startup Conf 2013)
Lean Analytics for Intrapreneurs (Lean Startup Conf 2013)
Facebook Audience
Facebook Audience
Google Analytics 使用者行為分析 @ Front-End Developers Taiwan Party - 9
Google Analytics 使用者行為分析 @ Front-End Developers Taiwan Party - 9
如何規劃社群經營策略與內容行銷(老查)
如何規劃社群經營策略與內容行銷(老查)
跨領域教師實務工作坊 5-2設計思考五步驟
跨領域教師實務工作坊 5-2設計思考五步驟
Introducing design thinking
Introducing design thinking
Chinese web design patterns: how and why they’re different (Chui Chui Tan)
Chinese web design patterns: how and why they’re different (Chui Chui Tan)
Trends in interactive design 2013
Trends in interactive design 2013
People Don't Care About Your Brand
People Don't Care About Your Brand
Más de Justin Lee
2023/04/19 學習中的AI 如何幫助孩子有效學習
2023/04/19 學習中的AI 如何幫助孩子有效學習
Justin Lee
2014/01/12 旅人的府城漫步
2014/01/12 旅人的府城漫步
Justin Lee
20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享
20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享
Justin Lee
2013/05/19 Sketching with code@JSDC2013
2013/05/19 Sketching with code@JSDC2013
Justin Lee
[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介
Justin Lee
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
Justin Lee
App使用者經驗設計
App使用者經驗設計
Justin Lee
20120524 App開發流程與小工具分享@UI Cafe
20120524 App開發流程與小工具分享@UI Cafe
Justin Lee
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
Justin Lee
Android 4.0 UI Design Tips
Android 4.0 UI Design Tips
Justin Lee
UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢
Justin Lee
2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Justin Lee
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
Justin Lee
2011/06/21 Microsoft Developer Day 2011—Design Decade
2011/06/21 Microsoft Developer Day 2011—Design Decade
Justin Lee
20110525[Taipei GTUG] titanium mobile簡介
20110525[Taipei GTUG] titanium mobile簡介
Justin Lee
HP19 Mobile Design: 為行動使用者設計
HP19 Mobile Design: 為行動使用者設計
Justin Lee
Sketching User Experience—Video Sketching
Sketching User Experience—Video Sketching
Justin Lee
How I Use Google Technology to Enhance Travel Experience
How I Use Google Technology to Enhance Travel Experience
Justin Lee
20100915 學習撰寫 Google Chrome Extension
20100915 學習撰寫 Google Chrome Extension
Justin Lee
談如何發展具有破壞力的創新構想
談如何發展具有破壞力的創新構想
Justin Lee
Más de Justin Lee
(20)
2023/04/19 學習中的AI 如何幫助孩子有效學習
2023/04/19 學習中的AI 如何幫助孩子有效學習
2014/01/12 旅人的府城漫步
2014/01/12 旅人的府城漫步
20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享
20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享
2013/05/19 Sketching with code@JSDC2013
2013/05/19 Sketching with code@JSDC2013
[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
App使用者經驗設計
App使用者經驗設計
20120524 App開發流程與小工具分享@UI Cafe
20120524 App開發流程與小工具分享@UI Cafe
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
Android 4.0 UI Design Tips
Android 4.0 UI Design Tips
UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢
2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/06/21 Microsoft Developer Day 2011—Design Decade
2011/06/21 Microsoft Developer Day 2011—Design Decade
20110525[Taipei GTUG] titanium mobile簡介
20110525[Taipei GTUG] titanium mobile簡介
HP19 Mobile Design: 為行動使用者設計
HP19 Mobile Design: 為行動使用者設計
Sketching User Experience—Video Sketching
Sketching User Experience—Video Sketching
How I Use Google Technology to Enhance Travel Experience
How I Use Google Technology to Enhance Travel Experience
20100915 學習撰寫 Google Chrome Extension
20100915 學習撰寫 Google Chrome Extension
談如何發展具有破壞力的創新構想
談如何發展具有破壞力的創新構想
20130614 Titanium簡介@政大資科
1.
Titanium Mobile簡介 李易修 用Javascript打造原生行動應用程式
2.
李易修 (阿修) • 旅⼈人⼀一番
UX Lead & Co-funder • 台灣使⽤用者經驗設計協會(UiGathering) 創會成員及理事 • http://www.lis186.com • twitter: lis186
3.
Titanium的javascript環境 沒有DOM,不用JQuery 所有的UI由Javascript建立 window相當於瀏覽器視窗 view相當於div 事件處理同樣是用AddEventListener 維持一個execution context
4.
牛刀小試 Hello World! Titanium
5.
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 檔案及目錄結構 原生專案 起始檔 設定檔 android專用檔案 iphone專用檔案 原始碼和其他資料檔
6.
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(); Hello World!
7.
http://www.tisnippet.com/
8.
UI元件的使用
9.
Titanium.UI.TabGroup 共有的元件
10.
特有的元件 Titanium.UI.iPad.Popover
11.
模擬特有的元件 TabbedBar Button
12.
區分不同裝置 Titanium.Platform.osname //iphone, ipad, android Titanium.Platform.version
13.
為不同螢幕最佳化
14.
解析度(Resolution) 320x480 240x320 480x800 480x854 1280x800 240x400 240x432 320x480 640x960 768x102
15.
密度(Density) http://www.engadget.com/2010/06/22/iphone-4-review/
16.
Retina Display
17.
為不同螢幕準備素材 normalretina hdpi Android mdpi ldpi iOS
18.
從大做到小
19.
為不同螢幕準備素材 Starred.png Starred@2x.png iOS Android ⽤用檔名區分 ⽤用路徑區分 res-long-port-hdpi res-long-port-mdpi res-long-port-ldpi
20.
長度單位 var view =
Titanium.UI.createView({ width: 100, //Pixel height: '100dp',//Density independence }); win.add(view); win.open();
21.
處理不同方向 Titanium.Gesture.addEventListener('orientationchange', function (e)
{ switchLayout(e.orientation); });
22.
http://goo.gl/0be5C
23.
Titanium開發實戰 現在天氣怎麼樣?
24.
功能:顯示這裡現在的天氣 你可以學到: 建⽴立UI 取得GPS資訊 讀取遠端資料 儲存資訊 顯⽰示網⾴頁 使⽤用各平台特有功能 現在天氣怎麼樣? 原始碼: http://goo.gl/Fj3pl
25.
var win =
Titanium.UI.createWindow({ backgroundColor:'#fff' }); var locationLabel = Titanium.UI.createLabel({ color:'#000', text:'內湖區', font:{fontSize: 30, fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto', height: 'auto', left: 15, top: 75 }); var weatherIcon = Titanium.UI.createImageView({ image: 'images/mostly_cloudy.gif', width: 80, height: 80, left: 15, top: 120 }); 建立UI 75px 15px 絕對定位
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(); 建立UI (續)
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); }); ... } 取得經緯度座標 iOS 3.2以上需要這行。 取座標
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.
http://api.worldweatheronline.com/free/v1/weather.ashx? key={api_key}&q={latitude},{longitude}&format=json World Weather Online
API http://www.worldweatheronline.com/free-weather.aspx { "data":{ "current_condition":[ { "cloudcover":"75", "humidity":"94", "observation_time":"12:09 AM", "precipMM":"0.0", "pressure":"1004", "temp_C":"24", "temp_F":"75", "visibility":"5", "weatherCode":"353", "weatherDesc":[ { "value":"Light rain shower" } ], "weatherIconUrl":[ { "value":"http://www.worldweatheronline.com/images/ wsymbols01_png_64/wsymbol_0009_light_rain_showers.png" } ], "winddir16Point":"ESE", "winddirDegree":"110", "windspeedKmph":"7", "windspeedMiles":"4" } ],
30.
更新天氣 function updateWeather(lat, lng) { if(PlatformOS
=== 'android') { indicator.message = '讀取天氣資訊中'; } indicator.show(); var xhr = Titanium.Network.createHTTPClient(); xhr.onload = function() { indicator.hide(); var data = JSON.parse(this.responseText).data; Ti.API.info(data); }; api_key = 'x5rdbt7d466du33m3rngxs2c'; var url = 'http://api.worldweatheronline.com/free/v1/weather.ashx?key='+api_key +'&format=json&q='+lat+','+lng; Ti.API.info(url); xhr.open('GET', url); xhr.send(); }
31.
更新天氣xhr.onload = function() { indicator.hide(); var
data = JSON.parse(this.responseText).data; var condition = data.current_condition[0].weatherDesc[0].value; var temp_f = data.current_condition[0].temp_F; var temp_c = data.current_condition[0].temp_C; var icon = data.current_condition[0].weatherIconUrl[0].value; var humidity = data.current_condition[0].humidity; var tempUnit = Titanium.App.Properties.getString('tempUnit', 'c'); if(tempUnit === 'c') { temperatureLabel.text = temp_c + '°C'; if(PlatformOS === 'iphone' || PlatformOS === 'ipad') { Titanium.UI.iPhone.appBadge = temp_c; } }else if(tempUnit === 'f') { temperatureLabel.text = temp_f + '°F'; if(PlatformOS === 'iphone' || PlatformOS === 'ipad') { Titanium.UI.iPhone.appBadge = temp_f; } } weatherIcon.image = icon; detailLabel.text = condition + 'n'; detailLabel.text += humidity + 'n'; };
32.
包裝一下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); }); } }
33.
getCurrentWeather(); updateInterval = setInterval(getCurrentWeather,
300000); 每五分鐘更新一次 別忘了第一次
34.
建立設定頁面—相同的部份 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(); }); iOS內建特效 依平台不同調整轉場效果
35.
<!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 用WebView來簡化文字段落編排
36.
建立設定頁面—iPhone部份 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); } iOS系統按鈕
37.
建立設定頁面—Android部份 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); }
38.
依照平台UI慣例切換頁面—iPhone部份 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(); }); } iOS內建特效 利用Property儲存溫度單位
39.
依照平台UI慣例切換頁面—Android部份 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(); }); }; }
40.
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'); } }); } 利用iOS background service更新badge custom property
41.
function updateWeather(lat, lng) { var
xhr = Titanium.Network.createHTTPClient(); 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); bgjob.js custom property
42.
if(Titanium.Platform.osname === 'android') { Titanium.Android.currentActivity.addEventListener('resume',
function(e) { Ti.API.info("resumed"); getCurrentWeather(); }); } Android從背景resume後更新天氣
43.
44.
結論
45.
跨平台 !== “Write
Once, Run Everywhere” 別忘了為各平台最佳化
46.
有了好工具,仍然需要好點子 http://www.cultofmac.com/self-evidently-bad-app-idea-scale-for-ipad
47.
http://goo.gl/Fj3pl 範例:現在天氣怎麼樣 Kitchen Sink http://goo.gl/5v6dJ
48.
謝謝!