Windows Mobile Widget 開發
Download as PPTX, PDF•0 likes•678 views
本文件介绍了Windows Mobile 6.5的widget设计，包括基本步骤、与Web服务和数据库的交互、最佳实践，以及使用VB.NET、C#等语言进行开发的技巧。文中详细阐述了widget的特性、优缺点、设计与部署流程，及其在移动设备上的应用。通过Bing API等服务，widget能够为用户提供即时信息与交互功能。
![包裝成*.wgt檔案(壓縮檔)將Widget圖示檔,config.xml, Widget內容檔(*.htm)壓縮成*.zip的壓縮檔可以將上述三個檔案選取之後, 利用[檔案總管]的[傳送至 | 壓縮的(zipped)資料夾]功能進行壓縮如果Widget需要用到*.css, *.js. 或是其他的圖檔, 也要一起封裝到壓縮檔中將*.zip的壓縮檔的副檔名更改成*.wgt](https://image.slidesharecdn.com/windowsmobile6-5widget-090827191153-phpapp01/85/Windows-Mobile-Widget-15-320.jpg)
![設定裝置模擬器的共用資料夾執行裝置模擬器的[檔案 | 設定]功能共用資料夾選擇](https://image.slidesharecdn.com/windowsmobile6-5widget-090827191153-phpapp01/85/Windows-Mobile-Widget-17-320.jpg)
![設定裝置網路連線功能利用[裝置模擬器管理員]工具執行[連接]功能執行[連接底座]功能](https://image.slidesharecdn.com/windowsmobile6-5widget-090827191153-phpapp01/85/Windows-Mobile-Widget-18-320.jpg)
![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>](https://image.slidesharecdn.com/windowsmobile6-5widget-090827191153-phpapp01/85/Windows-Mobile-Widget-27-320.jpg)
![讀取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;處理方法](https://image.slidesharecdn.com/windowsmobile6-5widget-090827191153-phpapp01/85/Windows-Mobile-Widget-30-320.jpg)
![透過Web伺服器部署Widget啟動[IIS管理員], 設定[電腦名稱(本機電腦)| 內容]新增[MIME類型]副檔名 =>.wgt](https://image.slidesharecdn.com/windowsmobile6-5widget-090827191153-phpapp01/85/Windows-Mobile-Widget-46-320.jpg)
Windows Mobile Widget 開發
- 1. Windows Mobile 6.5 Widget王寧疆資深講師資策會數位教育研究所MCPD/MCT/MVP
- 4. 視需要安裝Mobile Web Forms網頁範本(http://blogs.msdn.com/webdevtools/archive/2007/09/17/tip-trick-asp-net-mobile-development-with-visual-studio-2008.aspx)開發Windows Mobile Widget使用HTML, Javascript, DHTML,CSS,XmlHttpRequest,AJAX等網頁開發技術開發認識Windows Mobile Widget一種利用HTML, Javascript, DHTML,CSS,XmlHttpRequest,AJAX等網頁開發技術製作, 可以在Windows Mobile 6.5平台執行的程式可以透過XML Web Service或WCF的幫助, 取得並呈現遠端伺服器的資料提供商業資料, 氣象預報, 即時股價, 即時新聞, 交通路況, 翻譯服務等資訊供行動裝置的使用者檢視其功能等同於Windows Vista的Gadget
- 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三部曲123設計包裝部署設計並開發Widget功能將.wgt檔案部署到Windows Mobile執行上傳至 Windows Marketplace 將相關檔案包裝成.wgt檔案
- 12. 認識設計Widget的技術名詞HTML:定義Widget內容的語法Javascript:類似C語言語法, 負責控制Widget的內容或效果DHTML:利用Javascript控制Widget顯示的內容和效果CSS:Cascading Style Sheet的縮寫, 負責設定Widget樣式的語法XmlHttpRequest:利用非同步技術和遠端伺服溝通的技巧AJAX:asynchronous JavaScript and XML的縮寫, 利用XmlHttpRequest技術更新Widget內容的技術
- 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.xmlWidget圖示可以是.PNG, .JPG, .GIF圖檔, 必須和config.xml, Widget內容檔(*.htm)放在同一個資料夾Widget圖示
- 15. 包裝成*.wgt檔案(壓縮檔)將Widget圖示檔,config.xml, Widget內容檔(*.htm)壓縮成*.zip的壓縮檔可以將上述三個檔案選取之後, 利用[檔案總管]的[傳送至 | 壓縮的(zipped)資料夾]功能進行壓縮如果Widget需要用到*.css, *.js. 或是其他的圖檔, 也要一起封裝到壓縮檔中將*.zip的壓縮檔的副檔名更改成*.wgt
- 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伺服器進行下載
- 21. Widget與Web服務利用遠端伺服器提供的服務提供Widget顯示的內容XML Web ServiceWCF服務Bing APIImage, Ad, Video, Spell, News, PhoneBook, Translation, InstantAnswer, RelatedSearch, …Google API…
- 25. Widget設計細節使用DHTML, DOM(Document Object Model), 與CSSDOM的物件階層使用XmlHttp協定處理呼叫結果讀取XML文件的內容
- 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=>Uninitialized1=>Loading2=>Loaded3=>Interactive4=>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}
- 36. Widget相關的事件Widget顯示狀態改變時會引發事件:onhide事件當Widget被其他執行中的程式蓋住時引發的事件收到onhide事件時, widget可以暫停目前的工作onshow事件當Widget顯示在使用者面前時引發的事件收到onshow事件時, widget可以恢復被暫停的工作, 並更新Widget顯示的資料
- 37. 處理Widget狀態改變的事件widget.onshow = function() {// 恢復執行工作 // 注意:不要呼叫alert函數顯示訊息};widget.onhide = function() {// 暫停工作};
- 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 );
- 43. Widget與安全性Widget受限於Sandbox安全管制機制一種隔離未受信任的程式的機制受管制的檔案存取功能未具備存取登錄資訊(registry)的能力未具備超連結至其他網頁的能力可以利用#, 超連結至同一個網頁的其他內容可以搭配下列的URL, 傳送SMS訊息, 電子郵件, 播打Skype網路電話, 或是播打一般的電話:sms: mailto: callto:tel:
- 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部署WidgetWindows Marketplace Developer Portalhttp://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預設會以同步的技巧執行
- 52. Javascript與執行效能最佳化調整載入Javascript檔案(*.js)的順序Widget載入不需要用到的Javascript檔案放在最後才執行載入只載入Widget需要用到的Javascript檔案使用DOM技巧取用Widget內容效率較差例如document.appendChild利用innerHtml, innerText, outerHtml, outerText屬性取用Widget內容效率較佳
- 53. Widget開發最佳做法 (四)妥善使用網路功能偵測Widget狀態的變化, 適時更新Widget顯示的內容在Widget被其他應用程式遮蓋時停止執行工作可以延長電池的續航力將常用的資料保留在Windows Mobile裝置的記憶體中提升資料取用的效率利用AJAX技巧和遠端的Web服務溝通避免等待提升Widget的反應速度
- 54. 使用IE8 script profiler行動裝置處理器的運算速度較程式設計師使用的工作電腦的運算速度慢IE8.0開發者工具列提供用來量測Javascript效能的工具IE8.0開發者工具列提供的功能有色彩標示的原始檔檢視功能階層式CSS樣式預覽功能HTML與CSS區段檢視中斷與偵錯支援Profile Javascript的執行效能
- 57. 參考資料Bing Developer Center http://www.bing.com/developersDeveloping Widgets for Windows Mobile 6.5http://msdn.microsoft.com/en-us/library/dd721906.aspxDiscovering Internet Explorer Developer Tool http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx