王寧疆 資深講師 資策會數位教育研究所 MCPD/MCT/MVP Windows Mobile 6.5 Widget 王寧疆 資深講師 資策會數位教育研究所 MCPD/MCT/MVP
大綱 認識Windows Mobile Widget 設計Widget的基本步驟 Widget與Web服務 閱讀即時新聞 自己動手做翻譯機 與環境互動 Widget與安全性 透過網站部署Widget Widget開發最佳做法
行動裝置程式開發新選擇 開發智慧型裝置應用程式 使用VB.NET, C#, C++語言開發
行動裝置程式開發新選擇(續) 開發行動裝置網頁 開發Windows Mobile Widget 使用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等網頁開發技術開發
認識Windows Mobile Widget 一種利用HTML, Javascript, DHTML, CSS, XmlHttpRequest, AJAX等網頁開發技術製作, 可以在Windows Mobile 6.5平台執行的程式 可以透過XML Web Service或WCF的幫助, 取得並呈現遠端伺服器的資料 提供商業資料, 氣象預報, 即時股價, 即時新聞, 交通路況, 翻譯服務等資訊供行動裝置的使用者檢視 其功能等同於Windows Vista的Gadget
Windows Mobile Widget的特性 與一般應用程式具有相同的外觀與操作體驗 受限於sandbox安全管制機制, 但是仍然可以使用裝置的部分功能 支援AJAX, JSON剖析器, 具備執行ActiveX控制項(例如Flash)的能力 能夠在所有的Windows Mobile 6.5裝置上正常執行
運作中的Mobile Widget Internet Cloud Computing
Windows Mobile Widget範例
Widget與網頁的差異 Widget是安裝在Windows Mobile的網頁 Widget的優點 Widget的缺點 Widget消耗的頻寬較傳統的網頁少, 因為網頁的基本內容(HTML, CSS, Javascript)已安裝在Windows Mobile中, 不需要從Web伺服器傳送到行動裝置 Widget更新顯示內容的速度較傳統的網頁快, 可以有效節省連線網路的花費 Widget支援功能表與螢幕鍵盤的整合, 與資料快取, 提升取用資料的速度 Widget的缺點 Widget必須部署到行動裝置, 網頁只要部署到Web伺服器
Widget vs 網頁 瀏覽網頁功能 網頁功能 最佳化 Mobile Browser Mobile Widget
設計Widget三部曲 1 2 3 設計 包裝 部署 上傳至 Windows Marketplace 將.wgt檔案 部署到 Windows Mobile執行 上傳至 Windows Marketplace 將相關檔案 包裝成.wgt 檔案
設計Widget的基本步驟 認識設計Widget的技術名詞 製作Widget內容 製作config.xml 包裝成*.wgt檔案(壓縮檔) 部署到Windows Mobile 6.5行動裝置 安裝與執行 製作包裝*.wgt的工具
認識設計Widget的技術名詞 HTML:定義Widget內容的語法 Javascript:類似C語言語法, 負責控制Widget的內容或效果 DHTML:利用Javascript控制Widget顯示的內容和效果 CSS:Cascading Style Sheet的縮寫, 負責設定Widget樣式的語法 XmlHttpRequest:利用非同步技術和遠端伺服溝通的技巧 AJAX:asynchronous JavaScript and XML的縮寫, 利用XmlHttpRequest技術更新Widget內容的技術
製作Widget內容 內容與格式類似HTML網頁文件 Widget.htm <html> <head> <title>Widget標題</title> </head> <body> Widget內容 </body> </html>
製作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圖示
包裝成*.wgt檔案(壓縮檔) 將Widget圖示檔, config.xml, Widget內容檔(*.htm)壓縮成*.zip的壓縮檔 可以將上述三個檔案選取之後, 利用[檔案總管]的[傳送至 | 壓縮的(zipped)資料夾]功能進行壓縮 如果Widget需要用到*.css, *.js. 或是其他的圖檔, 也要一起封裝到壓縮檔中 將*.zip的壓縮檔的副檔名更改成*.wgt
部署到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伺服器進行下載
設定裝置模擬器的共用資料夾 執行裝置模擬器的[檔案 | 設定]功能 共用資料夾 選擇
設定裝置網路連線功能 利用[裝置模擬器管理員]工具 執行[連接]功能 執行[連接底座]功能
安裝與執行 點選*.wgt檔案進行安裝, 安裝成功後會自動執行 點選
製作包裝*.wgt的工具 利用XmlTextWriter類別建立config.xml 建立副檔名為*.wgt的壓縮檔 簡化開發Widget的工作
Widget與Web服務 利用遠端伺服器提供的服務提供Widget顯示的內容 XML Web Service WCF服務 Bing API Image, Ad, Video, Spell, News, PhoneBook, Translation, InstantAnswer, RelatedSearch, … Google API …
示範:閱讀即時新聞 使用Bing API提供的即時新聞查詢功能
示範:自己動手做翻譯機 使用Bing API提供的翻譯功能
Widget與資料庫存取 透過Web服務存取資料庫中的記錄 必須使用IP連線到Web服務
Widget設計細節 使用DHTML, DOM(Document Object Model), 與CSS DOM的物件階層 使用XmlHttp協定 處理呼叫結果 讀取XML文件的內容
使用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
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>
使用XmlHttp協定 <script type="text/javascript"> var xmlhttp; var loadXMLDoc(url) { if (window.ActiveXObject) xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); if (xmlhttp) xmlhttp.onreadystatechange=xmlhttpChange; xmlhttp.open("GET","Web服務的網址",true); xmlhttp.send("資料"); } </script> 見下頁
處理呼叫結果 <script type="text/javascript"> function xmlhttpChange() 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> 見下頁
讀取XML文件的內容 <Customers diffgr:id="Customers1" msdata:rowOrder="0"> <CustomerID>ALFKI</CustomerID> <CompanyName>Alfreds Futterkiste</CompanyName> ... </Customers> <Customers diffgr:id="Customers2" msdata:rowOrder="1"> 結果 var objXmlDoc; objXmlDoc = new ActiveXObject("Msxml2.DOMDocument"); objXmlDoc.loadXML(xmlhttp.responseText); objNodeList = objXmlDoc.getElementsByTagName("Customers"); dataNodeList = objNodeList[0].childNodes; valueNode = dataNodeList.item(0); 客戶編號=valueNode.text; 處理方法
與環境互動 使用Widget API 使用功能表 Widget相關的事件 長效型記憶體支援 偵測螢幕的方向 偵測電源的狀態
使用Widget API 利用widget物件提供的功能 利用SystemState物件提供的功能 存取Widget相關的資訊 widget.name, widget.identifier, widget.description, widget.locale, widget.currentIcon, widget.authorName, widget.authorEmail, widget.authorURL, widget.version, widget.width, widget.height 取用相關的物件, 例如功能表 取用長效型記憶體 利用SystemState物件提供的功能 查詢裝置的狀態資訊 在狀態改變時收到通知
使用功能表 直接利用Windows Mobile提供的功能表功能, 不需要使用HTML, CSS等技術製作功能表 支援建立階層式的功能表 可以在widget執行的時候動態啟用/禁用功能表 利用widget.menu物件提供的功能建立功能表: append, clear, createMenuItem, getMenuItemById, remove, setSoftKey
建立功能表的做法 利用widget.menu.createMenuItem函數建立功能表 設定功能表的屬性: text:功能表顯示的文字 onSelect:功能表被點選時欲執行的動作 enabled:控制功能表啟用/禁用的屬性 呼叫widget.menu.setSoftKey函數指定功能表顯示的位置 widget.menu.leftSoftKeyIndex:顯示在左下角 widget.menu.rightSoftKeyIndex:顯示在右下角
建立功能表範例 function createMenu() { var RefreshMenu = 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
Widget相關的事件 Widget顯示狀態改變時會引發事件: onhide事件 onshow事件 收到onhide事件時, widget可以暫停目前的工作 onshow事件 當Widget顯示在使用者面前時引發的事件 收到onshow事件時, widget可以恢復被暫停的工作, 並更新Widget顯示的資料
處理Widget狀態改變的事件 widget.onshow = function() { // 恢復執行工作 // 注意:不要呼叫alert函數顯示訊息 }; widget.onhide = function() // 暫停工作
長效型記憶體支援 目的 特性 適用場合 儲存非暫時性的資料 資料存放在Widget獨立的儲存區中,不同的Widget不能夠存取 容量上限 4000位元組(以鍵值為單位) 資料會以未加密的方式儲存在裝置中 適用場合 儲存Widget下一次執行時欲使用的資料 儲存Widget升級後欲使用的資料
使用長效記憶體 使用方法 範例 函數名稱 說明 setPreferenceForKey 儲存字串資料 preferenceForKey 取用字串資料 // 儲存資料 widget.setPreferenceForKey("資料", "識別鍵值" ); // 讀取資料 var data = widget.preferenceForKey("識別鍵值");
偵測行動裝置的狀態 利用SystemObject物件提供的功能 CradlePresent:裝置是否連接到底座 PhoneHomeService:於電信網路註冊的狀態 PhoneRoaming:手機漫遊的狀態 PhoneSignalStrength:手機信號強度(百分比) PhoneOperatorName:電信業者的名稱 DisplayRotation:裝置螢幕旋轉的角度 PowerBatteryStrength:電池剩餘電量(百分比) PowerBatteryState:電池狀態 低電量, 充電中, …
偵測螢幕的方向 偵測螢幕是否旋轉的範例 var SystemState = widget.createObject("SystemState"); SystemState.DisplayRotation.addEventListener( "changed", function() { alert("Rotate!"); });
偵測電源的狀態 偵測電源狀態的範例 var systemState = widget.createObject("SystemState"); var batteryStrength = systemState.PowerBatteryStrength; alert("Battery strength:" + batteryStrength.value); batteryStrength.addEventListener( "changed", optimizeNetworkUsage );
Widget與安全性 Widget受限於Sandbox安全管制機制 未具備超連結至其他網頁的能力 一種隔離未受信任的程式的機制 受管制的檔案存取功能 未具備存取登錄資訊(registry)的能力 未具備超連結至其他網頁的能力 可以利用#, 超連結至同一個網頁的其他內容 可以搭配下列的URL, 傳送SMS訊息, 電子郵件, 播打Skype網路電話, 或是播打一般的電話: sms: mailto: callto: tel:
Widget與安全性(續) Widget擁有Cookie, 瀏覽歷史記錄, 和快取記憶體 每個Widget彼此獨立 允許跨越Domain呼叫Web服務(Cross Domain Data Access) 支援開發mash-up的必要功能 Windows Mobile 6.5 Widget是未簽署的程式 可以透過Windows Marketplace for Mobile進行部署
透過網站部署Widget 透過Web伺服器部署Widget 透過Windows Marketplace部署Widget
透過Web伺服器部署Widget 啟動[IIS管理員], 設定[電腦名稱(本機電腦) | 內容] 新增[MIME類型] 副檔名 => .wgt MIME類型 => application/x-widget-app 執行iisreset, 重新啟動IIS伺服器
透過Windows Marketplace部署Widget Windows Marketplace Developer Portal http://developer.windowsmobile.com 提供好用的搜尋功能 可以利用PC或行動裝置 進行下載 利用信用卡或手機費 率付費 24小時鑑賞期, 不滿意 可以退費 Windows Marketplace 電信業者 軟體業者 Application Store
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)
Widget開發最佳做法 (二) 在所有的Windows Mobile 6.5裝置上都有良好的使用者介面配置 判斷裝置的解析度 利用widget.width和widget.height 使用和螢幕解析度相容的圖形 減少使用者使用捲軸的機會 於使用者旋轉置時調整Widget的大小和位置
Widget開發最佳做法 (三) 提供良好的載入速度與互動性 請注意 在Widget載入完成後才執行建立動態內容的工作 執行耗時工作 利用非同步技巧執行, 避免等待過久 如果需要利用同步技巧執行, 請將工作切割成數個小部分, 每一部分的工作各自加上逾時控制 請注意 Javascript預設會以同步的技巧執行
Javascript與執行效能最佳化 調整載入Javascript檔案(*.js)的順序 使用DOM技巧取用Widget內容效率較差 Widget載入不需要用到的Javascript檔案放在最後才執行載入 只載入Widget需要用到的Javascript檔案 使用DOM技巧取用Widget內容效率較差 例如document.appendChild 利用innerHtml, innerText, outerHtml, outerText屬性取用Widget內容效率較佳
Widget開發最佳做法 (四) 妥善使用網路功能 偵測Widget狀態的變化, 適時更新Widget顯示的內容 將常用的資料保留在Windows Mobile裝置的記憶體中 提升資料取用的效率 利用AJAX技巧和遠端的Web服務溝通 避免等待 提升Widget的反應速度
使用IE8 script profiler 行動裝置處理器的運算速度較程式設計師使用的工作電腦的運算速度慢 IE 8.0開發者工具列提供用來量測Javascript效能的工具 IE 8.0開發者工具列提供的功能 有色彩標示的原始檔檢視功能 階層式CSS樣式預覽功能 HTML與CSS區段檢視 中斷與偵錯支援 Profile Javascript的執行效能
IE8 script profiler執行的畫面
複習 認識Windows Mobile Widget 設計Widget的基本步驟 Widget與Web服務 閱讀即時新聞 自己動手做翻譯機 與環境互動 Widget與安全性 透過網站部署Widget Widget開發最佳做法
參考資料 Bing Developer Center http://www.bing.com/developers Developing Widgets for Windows Mobile 6.5 http://msdn.microsoft.com/en-us/library/dd721906.aspx Discovering Internet Explorer Developer Tool http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx
下載-資策會台北中心 http://www.iiiedu.org.tw/taipei 資訊專區