More Related Content Similar to Windows Mobile Widget 開發 (20) More from Chui-Wen Chiu (20) Windows Mobile Widget 開發2. 大綱 認識Windows Mobile Widget 設計Widget的基本步驟 Widget與Web服務 閱讀即時新聞 自己動手做翻譯機 Widget與資料庫存取 與環境互動 Widget與安全性 透過網站部署Widget Widget開發最佳做法 5. Windows Mobile Widget的特性 與一般應用程式具有相同的外觀與操作體驗 受限於sandbox安全管制機制, 但是仍然可以使用裝置的部分功能 支援AJAX, JSON剖析器, 具備執行ActiveX控制項(例如Flash)的能力 能夠在所有的Windows Mobile 6.5裝置上正常執行 8. Widget與網頁的差異 Widget是安裝在Windows Mobile的網頁 Widget的優點 Widget消耗的頻寬較傳統的網頁少, 因為網頁的基本內容(HTML,CSS,Javascript)已安裝在Windows Mobile中, 不需要從Web伺服器傳送到行動裝置 Widget更新顯示內容的速度較傳統的網頁快, 可以有效節省連線網路的花費 Widget支援功能表與螢幕鍵盤的整合, 與資料快取, 提升取用資料的速度 Widget的缺點 Widget必須部署到行動裝置, 網頁只要部署到Web伺服器 10. 設計Widget三部曲 1 2 3 設計 包裝 部署 設計並開發Widget功能 將.wgt檔案部署到Windows Mobile執行 上傳至 Windows Marketplace 將相關檔案包裝成.wgt檔案 14. <?xml version="1.0" encoding="utf-8"?> <widget version="1.0" xmlns="http://www.w3.org/ns/widgets" id="Url格式的id"> <name>Widget名稱</name> <content src="Widget.htm" type="text/html" /> <access network="true" /> <icon src="Widget.png" /> <description>Widget說明</description> </widget> 製作config.xml Widget圖示可以是.PNG, .JPG, .GIF圖檔, 必須和config.xml, Widget內容檔(*.htm)放在同一個資料夾 Widget圖示 16. 部署到Windows Mobile 6.5行動裝置 做法 將*.wgt檔案放到裝置模擬器的共用資料夾 利用AcitveSync或Windows Mobile Device Center(for Windows Vista)將*.wgt檔案複製到Windows Mobile 6.5裝置 將*.wgt壓縮檔複製到Web伺服器, 開啟Windows Mobile 6.5裝置的Internet Explorer瀏覽器, 連線到Web伺服器進行下載 26. 使用DHTML, DOM, CSS <html> <head> <script type="text/javascript"> function Demo() { document.getElementById("header").style.color="red"; } </script> </head> <body> <h1 id="header">My header</h1> </body> </html> My header 27. DOM的物件階層 <html> </head><script type="text/javascript"> function Demo() { document.all.lblOrderDropdown.innerText = "..."; document.forms[0].drpOrders.style.visibility = "hidden"; } </script></head> <body> <form> <span id="lblOrderDropdown">Select Order:</span> <select id="drpOrders"> </form> </body> </html> 28. 使用XmlHttp協定 <script type="text/javascript"> varxmlhttp; varloadXMLDoc(url) { if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); if (xmlhttp) { xmlhttp.onreadystatechange=xmlhttpChange; xmlhttp.open("GET","Web服務的網址",true); xmlhttp.send("資料"); } } } </script> 見下頁 29. 處理呼叫結果 0=>Uninitialized 1=>Loading 2=>Loaded 3=>Interactive 4=>Complete <script type="text/javascript"> function xmlhttpChange() { if (xmlhttp.readyState==4) { if (xmlhttp.status==200) {// 如果沒有發生錯誤 // ...處理結果... } else { alert("Problem retrieving XML data"); } } } </script> 見下頁 30. 讀取XML文件的內容 <Customers diffgr:id="Customers1" msdata:rowOrder="0"> <CustomerID>ALFKI</CustomerID> <CompanyName>AlfredsFutterkiste</CompanyName> ... </Customers> <Customers diffgr:id="Customers2" msdata:rowOrder="1"> ... </Customers> 結果 varobjXmlDoc; objXmlDoc = new ActiveXObject("Msxml2.DOMDocument"); objXmlDoc.loadXML(xmlhttp.responseText); objNodeList = objXmlDoc.getElementsByTagName("Customers"); dataNodeList = objNodeList[0].childNodes; valueNode = dataNodeList.item(0); 客戶編號=valueNode.text; 處理方法 32. 使用Widget API 利用widget物件提供的功能 存取Widget相關的資訊 widget.name,widget.identifier,widget.description, widget.locale,widget.currentIcon,widget.authorName,widget.authorEmail, widget.authorURL, widget.version, widget.width, widget.height 取用相關的物件, 例如功能表 取用長效型記憶體 利用SystemState物件提供的功能 查詢裝置的狀態資訊 在狀態改變時收到通知 33. 使用功能表 直接利用Windows Mobile提供的功能表功能, 不需要使用HTML, CSS等技術製作功能表 支援建立階層式的功能表 可以在widget執行的時候動態啟用/禁用功能表 利用widget.menu物件提供的功能建立功能表: append,clear,createMenuItem,getMenuItemById,remove,setSoftKey 35. 建立功能表範例 function createMenu() { varRefreshMenu = widget.menu.createMenuItem( 0 ); RefreshMenu.text ="Refresh"; RefreshMenu.onSelect = lskHandler; widget.menu.setSoftKey(RefreshMenu , widget.menu.leftSoftKeyIndex ); } function lskHandler() { // left soft key // handler code here } 38. 長效型記憶體支援 目的 儲存非暫時性的資料 特性 資料存放在Widget獨立的儲存區中,不同的Widget不能夠存取 容量上限 4000位元組(以鍵值為單位) 資料會以未加密的方式儲存在裝置中 適用場合 儲存Widget下一次執行時欲使用的資料 儲存Widget升級後欲使用的資料 39. 使用長效記憶體 使用方法 範例 // 儲存資料 widget.setPreferenceForKey("資料", "識別鍵值" ); // 讀取資料 var data = widget.preferenceForKey("識別鍵值"); 41. 偵測螢幕的方向 偵測螢幕是否旋轉的範例 varSystemState = widget.createObject("SystemState"); SystemState.DisplayRotation.addEventListener( "changed", function() { alert("Rotate!"); }); 42. 偵測電源的狀態 偵測電源狀態的範例 varsystemState = widget.createObject("SystemState"); varbatteryStrength = systemState.PowerBatteryStrength; alert("Battery strength:" + batteryStrength.value); batteryStrength.addEventListener( "changed", optimizeNetworkUsage ); 44. Widget與安全性(續) Widget擁有Cookie, 瀏覽歷史記錄, 和快取記憶體 每個Widget彼此獨立 允許跨越Domain呼叫Web服務(Cross Domain Data Access) 支援開發mash-up的必要功能 Windows Mobile 6.5 Widget是未簽署的程式 可以透過Windows Marketplace for Mobile進行部署 48. 透過Windows Marketplace部署Widget Windows Marketplace Developer Portal http://developer.windowsmobile.com 提供好用的搜尋功能 可以利用PC或行動裝置 進行下載 利用信用卡或手機費 率付費 24小時鑑賞期, 不滿意 可以退費 Windows Marketplace 軟體業者 電信業者 Application Store 49. Widget開發最佳做法 (一) 與一般裝置應用程式具備相同的風格與操作體驗 善用Windows Mobile的功能表 為Widget準備一個有意義的icon圖示 圖示可以是 ICO, PNG,JPEG,Gif等常用的圖檔格式 使用和Windows Mobile相同的配色 使用Windows Mobile系統定義的色彩, 例如:Highlight, CaptionText, 等等… 請參考:User-Defined System Colors(網址:http://msdn.microsoft.com/en-us/library/aa358804(VS.85).aspx) 50. Widget開發最佳做法 (二) 在所有的Windows Mobile 6.5裝置上都有良好的使用者介面配置 判斷裝置的解析度 利用widget.width和widget.height 使用和螢幕解析度相容的圖形 減少使用者使用捲軸的機會 於使用者旋轉置時調整Widget的大小和位置 51. Widget開發最佳做法 (三) 提供良好的載入速度與互動性 在Widget載入完成後才執行建立動態內容的工作 執行耗時工作 利用非同步技巧執行, 避免等待過久 如果需要利用同步技巧執行, 請將工作切割成數個小部分, 每一部分的工作各自加上逾時控制 請注意 Javascript預設會以同步的技巧執行 53. Widget開發最佳做法 (四) 妥善使用網路功能 偵測Widget狀態的變化, 適時更新Widget顯示的內容 在Widget被其他應用程式遮蓋時停止執行工作可以延長電池的續航力 將常用的資料保留在Windows Mobile裝置的記憶體中 提升資料取用的效率 利用AJAX技巧和遠端的Web服務溝通 避免等待 提升Widget的反應速度 54. 使用IE8 script profiler 行動裝置處理器的運算速度較程式設計師使用的工作電腦的運算速度慢 IE8.0開發者工具列提供用來量測Javascript效能的工具 IE8.0開發者工具列提供的功能 有色彩標示的原始檔檢視功能 階層式CSS樣式預覽功能 HTML與CSS區段檢視 中斷與偵錯支援 Profile Javascript的執行效能 56. 複習 認識Windows Mobile Widget 設計Widget的基本步驟 Widget與Web服務 閱讀即時新聞 自己動手做翻譯機 Widget與資料庫存取 與環境互動 Widget與安全性 透過網站部署Widget Widget開發最佳做法 57. 參考資料 Bing Developer Center http://www.bing.com/developers Developing Widgets for Windows Mobile 6.5http://msdn.microsoft.com/en-us/library/dd721906.aspx Discovering Internet Explorer Developer Tool http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx