1 / 58

Windows Mobile 6.5 Widget

Windows Mobile 6.5 Widget. 王寧疆 資深講師 資策會數位教育研究所 MCPD/MCT/MVP. 大綱. 認識 Windows Mobile Widget 設計 Widget 的基本步驟 Widget 與 Web 服務 閱讀即時新聞 自己動手做翻譯機 Widget 與資料庫存取 與環境互動 Widget 與安全性 透過網站部署 Widget Widget 開發最佳做法. 行動裝置程式開發新選擇. 開發智慧型裝置應用程式 使用 VB.NET, C#, C++ 語言開發. 行動裝置程式開發新選擇 ( 續 ). 開發行動裝置網頁

jayme
Download Presentation

Windows Mobile 6.5 Widget

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Windows Mobile 6.5 Widget 王寧疆 資深講師 資策會數位教育研究所 MCPD/MCT/MVP

  2. 大綱 • 認識Windows Mobile Widget • 設計Widget的基本步驟 • Widget與Web服務 • 閱讀即時新聞 • 自己動手做翻譯機 • Widget與資料庫存取 • 與環境互動 • Widget與安全性 • 透過網站部署Widget • Widget開發最佳做法

  3. 行動裝置程式開發新選擇 • 開發智慧型裝置應用程式 • 使用VB.NET, C#, C++語言開發

  4. 行動裝置程式開發新選擇(續) • 開發行動裝置網頁 • 使用VB.NET, C#語言開發 • 視需要安裝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等網頁開發技術開發

  5. 認識Windows Mobile Widget • 一種利用HTML, Javascript, DHTML,CSS,XmlHttpRequest,AJAX等網頁開發技術製作, 可以在Windows Mobile 6.5平台執行的程式 • 可以透過XML Web Service或WCF的幫助, 取得並呈現遠端伺服器的資料 • 提供商業資料, 氣象預報, 即時股價, 即時新聞, 交通路況, 翻譯服務等資訊供行動裝置的使用者檢視 • 其功能等同於Windows Vista的Gadget

  6. Windows Mobile Widget的特性 • 與一般應用程式具有相同的外觀與操作體驗 • 受限於sandbox安全管制機制, 但是仍然可以使用裝置的部分功能 • 支援AJAX, JSON剖析器, 具備執行ActiveX控制項(例如Flash)的能力 • 能夠在所有的Windows Mobile 6.5裝置上正常執行

  7. 運作中的Mobile Widget Internet Cloud Computing

  8. Windows Mobile Widget範例

  9. Widget與網頁的差異 • Widget是安裝在Windows Mobile的網頁 • Widget的優點 • Widget消耗的頻寬較傳統的網頁少, 因為網頁的基本內容(HTML,CSS,Javascript)已安裝在Windows Mobile中, 不需要從Web伺服器傳送到行動裝置 • Widget更新顯示內容的速度較傳統的網頁快, 可以有效節省連線網路的花費 • Widget支援功能表與螢幕鍵盤的整合, 與資料快取, 提升取用資料的速度 • Widget的缺點 • Widget必須部署到行動裝置, 網頁只要部署到Web伺服器

  10. Widgetvs網頁 瀏覽網頁功能 網頁功能 最佳化 Mobile Browser Mobile Widget

  11. 設計Widget三部曲 1 2 3 設計 包裝 部署 • 設計並開發Widget功能 • 將.wgt檔案部署到Windows Mobile執行 上傳至 Windows Marketplace • 將相關檔案包裝成.wgt檔案

  12. 設計Widget的基本步驟 • 認識設計Widget的技術名詞 • 製作Widget內容 • 製作config.xml • 包裝成*.wgt檔案(壓縮檔) • 部署到Windows Mobile 6.5行動裝置 • 安裝與執行 • 製作包裝*.wgt的工具

  13. 認識設計Widget的技術名詞 • HTML:定義Widget內容的語法 • Javascript:類似C語言語法, 負責控制Widget的內容或效果 • DHTML:利用Javascript控制Widget顯示的內容和效果 • CSS:Cascading Style Sheet的縮寫, 負責設定Widget樣式的語法 • XmlHttpRequest:利用非同步技術和遠端伺服溝通的技巧 • AJAX:asynchronous JavaScript and XML的縮寫, 利用XmlHttpRequest技術更新Widget內容的技術

  14. 製作Widget內容 • 內容與格式類似HTML網頁文件 Widget.htm <html> <head> <title>Widget標題</title> </head> <body> Widget內容 </body> </html>

  15. 製作config.xml • Widget圖示可以是.PNG, .JPG, .GIF圖檔, 必須和config.xml, Widget內容檔(*.htm)放在同一個資料夾 <?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> Widget圖示

  16. 包裝成*.wgt檔案(壓縮檔) • 將Widget圖示檔,config.xml, Widget內容檔(*.htm)壓縮成*.zip的壓縮檔 • 可以將上述三個檔案選取之後, 利用[檔案總管]的[傳送至 | 壓縮的(zipped)資料夾]功能進行壓縮 • 如果Widget需要用到*.css, *.js. 或是其他的圖檔, 也要一起封裝到壓縮檔中 • 將*.zip的壓縮檔的副檔名更改成*.wgt

  17. 部署到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伺服器進行下載

  18. 設定裝置模擬器的共用資料夾 • 執行裝置模擬器的[檔案 | 設定]功能 共用資料夾 選擇

  19. 設定裝置網路連線功能 • 利用[裝置模擬器管理員]工具 • 執行[連接]功能 • 執行[連接底座]功能

  20. 安裝與執行 • 點選*.wgt檔案進行安裝, 安裝成功後會自動執行 點選

  21. 製作包裝*.wgt的工具 • 利用XmlTextWriter類別建立config.xml • 建立副檔名為*.wgt的壓縮檔 • 簡化開發Widget的工作

  22. Widget與Web服務 • 利用遠端伺服器提供的服務提供Widget顯示的內容 • XML Web Service • WCF服務 • Bing API • Image, Ad, Video, Spell, News, PhoneBook, Translation, InstantAnswer, RelatedSearch, … • Google API • …

  23. 示範:閱讀即時新聞 • 使用Bing API提供的即時新聞查詢功能

  24. 示範:自己動手做翻譯機 • 使用Bing API提供的翻譯功能

  25. Widget與資料庫存取 • 透過Web服務存取資料庫中的記錄 • 必須使用IP連線到Web服務

  26. Widget設計細節 • 使用DHTML, DOM(Document Object Model), 與CSS • DOM的物件階層 • 使用XmlHttp協定 • 處理呼叫結果 • 讀取XML文件的內容

  27. 使用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

  28. 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>

  29. 使用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> 見下頁

  30. 處理呼叫結果 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> 見下頁

  31. 讀取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相關的事件 • 長效型記憶體支援 • 偵測螢幕的方向 • 偵測電源的狀態

  33. 使用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物件提供的功能 • 查詢裝置的狀態資訊 • 在狀態改變時收到通知

  34. 使用功能表 • 直接利用Windows Mobile提供的功能表功能, 不需要使用HTML, CSS等技術製作功能表 • 支援建立階層式的功能表 • 可以在widget執行的時候動態啟用/禁用功能表 • 利用widget.menu物件提供的功能建立功能表: • append,clear,createMenuItem,getMenuItemById,remove,setSoftKey

  35. 建立功能表的做法 • 利用widget.menu.createMenuItem函數建立功能表 • 必須傳入功能表的ID當做參數 • 設定功能表的屬性: • text:功能表顯示的文字 • onSelect:功能表被點選時欲執行的動作 • enabled:控制功能表啟用/禁用的屬性 • 呼叫widget.menu.setSoftKey函數指定功能表顯示的位置 • widget.menu.leftSoftKeyIndex:顯示在左下角 • widget.menu.rightSoftKeyIndex:顯示在右下角

  36. 建立功能表範例 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 }

  37. Widget相關的事件 • Widget顯示狀態改變時會引發事件: • onhide事件 • 當Widget被其他執行中的程式蓋住時引發的事件 • 收到onhide事件時, widget可以暫停目前的工作 • onshow事件 • 當Widget顯示在使用者面前時引發的事件 • 收到onshow事件時, widget可以恢復被暫停的工作, 並更新Widget顯示的資料

  38. 處理Widget狀態改變的事件 widget.onshow = function() { // 恢復執行工作 // 注意:不要呼叫alert函數顯示訊息 }; widget.onhide = function() { // 暫停工作 };

  39. 長效型記憶體支援 • 目的 • 儲存非暫時性的資料 • 特性 • 資料存放在Widget獨立的儲存區中,不同的Widget不能夠存取 • 容量上限 4000位元組(以鍵值為單位) • 資料會以未加密的方式儲存在裝置中 • 適用場合 • 儲存Widget下一次執行時欲使用的資料 • 儲存Widget升級後欲使用的資料

  40. 使用長效記憶體 • 使用方法 • 範例 // 儲存資料 widget.setPreferenceForKey("資料", "識別鍵值" ); // 讀取資料 var data = widget.preferenceForKey("識別鍵值");

  41. 偵測行動裝置的狀態 • 利用SystemObject物件提供的功能 • CradlePresent:裝置是否連接到底座 • PhoneHomeService:於電信網路註冊的狀態 • PhoneRoaming:手機漫遊的狀態 • PhoneSignalStrength:手機信號強度(百分比) • PhoneOperatorName:電信業者的名稱 • DisplayRotation:裝置螢幕旋轉的角度 • PowerBatteryStrength:電池剩餘電量(百分比) • PowerBatteryState:電池狀態 • 低電量, 充電中, …

  42. 偵測螢幕的方向 • 偵測螢幕是否旋轉的範例 varSystemState = widget.createObject("SystemState"); SystemState.DisplayRotation.addEventListener( "changed", function() { alert("Rotate!"); });

  43. 偵測電源的狀態 偵測電源狀態的範例 varsystemState = widget.createObject("SystemState"); varbatteryStrength = systemState.PowerBatteryStrength; alert("Battery strength:" + batteryStrength.value); batteryStrength.addEventListener( "changed", optimizeNetworkUsage );

  44. Widget與安全性 • Widget受限於Sandbox安全管制機制 • 一種隔離未受信任的程式的機制 • 受管制的檔案存取功能 • 未具備存取登錄資訊(registry)的能力 • 未具備超連結至其他網頁的能力 • 可以利用#, 超連結至同一個網頁的其他內容 • 可以搭配下列的URL, 傳送SMS訊息, 電子郵件, 播打Skype網路電話, 或是播打一般的電話: • sms: mailto: callto:tel:

  45. Widget與安全性(續) • Widget擁有Cookie, 瀏覽歷史記錄, 和快取記憶體 • 每個Widget彼此獨立 • 允許跨越Domain呼叫Web服務(Cross Domain Data Access) • 支援開發mash-up的必要功能 • Windows Mobile 6.5 Widget是未簽署的程式 • 可以透過Windows Marketplace for Mobile進行部署

  46. 透過網站部署Widget • 透過Web伺服器部署Widget • 透過Windows Marketplace部署Widget

  47. 透過Web伺服器部署Widget • 啟動[IIS管理員], 設定[電腦名稱(本機電腦)| 內容] • 新增[MIME類型] • 副檔名 =>.wgt • MIME類型 =>application/x-widget-app • 執行iisreset, 重新啟動IIS伺服器

  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的大小和位置

More Related