Embed Size (px)
DESCRIPTION
Citation preview
Windows Mobile 6.5 Widget
王寧疆資深講師資策會數位教育研究所
MCPD/MCT/MVP
大綱認識 Windows Mobile Widget設計 Widget 的基本步驟Widget 與 Web 服務閱讀即時新聞自己動手做翻譯機Widget 與資料庫存取與環境互動Widget 與安全性透過網站部署 WidgetWidget 開發最佳做法
行動裝置程式開發新選擇1. 開發智慧型裝置應用程式
• 使用 VB.NET, C#, C++ 語言開發
行動裝置程式開發新選擇( 續 )2. 開發行動裝置網頁
• 使用 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)
3. 開發 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 CloudComputing
Windows Mobile Widget 範例
Widget 與網頁的差異Widget 是安裝在 Windows Mobile 的網頁Widget 的優點
Widget 消耗的頻寬較傳統的網頁少 , 因為網頁的基本內容 (HTML, CSS, Javascript) 已安裝在 Windows Mobile 中 , 不需要從 Web伺服器傳送到行動裝置Widget 更新顯示內容的速度較傳統的網頁快 , 可以有效節省連線網路的花費Widget 支援功能表與螢幕鍵盤的整合 , 與資料快取 , 提升取用資料的速度
Widget 的缺點Widget 必須部署到行動裝置 , 網頁只要部署到 Web 伺服器
Widget vs 網頁
Mobile Browser
Mobile Widget
瀏覽網頁功能 網頁功能最佳化
設計 Widget 三部曲1 2 3
設計 包裝 部署
設計並開發Widget 功
能
上傳至 Windows
Marketplace
將 .wgt 檔案部署到Windows Mobile 執
行
將相關檔案包裝
成 .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>
<?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 圖示
包裝成 *.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 ServiceWCF 服務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), 與 CSSDOM 的物件階層使用 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(){ if (xmlhttp.readyState==4) { if (xmlhttp.status==200) { // 如果沒有發生錯誤 // ...處理結果 ... } else { alert("Problem retrieving XML data"); } }}</script>
見下頁見下頁
0=>Uninitialized1=>Loading2=>Loaded3=>Interactive4=>Complete
0=>Uninitialized1=>Loading2=>Loaded3=>Interactive4=>Complete
讀取 XML 文件的內容<Customers diffgr:id="Customers1" msdata:rowOrder="0"> <CustomerID>ALFKI</CustomerID> <CompanyName>Alfreds Futterkiste</CompanyName> ...</Customers><Customers diffgr:id="Customers2" msdata:rowOrder="1"> ...</Customers>
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 物件提供的功能存取 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 函數建立功能表
必須傳入功能表的 ID 當做參數設定功能表的屬性 :
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 事件當 Widget 被其他執行中的程式蓋住時引發的事件收到 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 受限於 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 與安全性 ( 續 )
透過網站部署 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小時鑑賞期 , 不滿意
可以退費
軟體業者
Application Store
電信業者
Windows Marketplace
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) 的順序
Widget載入不需要用到的 Javascript 檔案放在最後才執行載入只載入 Widget 需要用到的 Javascript 檔案
使用 DOM 技巧取用 Widget 內容效率較差
例如 document.appendChild
利用 innerHtml, innerText, outerHtml, outerText 屬性取用 Widget 內容效率較佳
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 與安全性透過網站部署 WidgetWidget 開發最佳做法
參考資料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
資訊專區
下載 - 資策會台北中心
