Windows Mobile 6.5新功能Widget開(kāi)發(fā)詳解
Windows Mobile 6.5新功能Widget開(kāi)發(fā)詳解是本文要介紹的內(nèi)容，主要是來(lái)了解并學(xué)習(xí)Windows Mobile Widget的應(yīng)用。本文通過(guò)一個(gè)CurrencyConverter(外匯兌換)例子，講述Windows Mobile新功能Widget開(kāi)發(fā)的基本概念和步驟，同時(shí)講述了Widget如何調(diào)用WebService。最近比較關(guān)心匯率波動(dòng)，所以在Widget上實(shí)現(xiàn)一個(gè)匯率轉(zhuǎn)換器程序。
什么是Widget
Windows Mobile6.5引入了Widget功能。為Windows Mobile開(kāi)發(fā)提供了新的方式，使得開(kāi)發(fā)Windows Mobile程序變得更簡(jiǎn)便，Widget的規(guī)范請(qǐng)看下面鏈接：http://www.w3.org/TR/2008/WD-widgets-20081222/。Widget有三個(gè)關(guān)鍵文件如下圖。
Config.xml為配置文件，配置Widget的屬性，這些屬性包括名字，使用的html文件，是否訪問(wèn)網(wǎng)絡(luò)以及圖標(biāo)等等。
- <?xml version="1.0" encoding="utf-8" ?>
- <widget version="1.0" xmlns="http://www.w3.org/ns/widgets" id="">
- <name>Currency Converter</name>
- <content src="currency.htm" type="text/html" />
- <access network="true" />
- <icon src="currency.gif"/>
- <description>This is a currency converter widget!</description>
- </widget>
Currency.gif為圖標(biāo)文件，實(shí)際應(yīng)用中，該文件可以為png，ico等其他圖形格式。
Currency.htm為Widget的核心文件，開(kāi)發(fā)Widget的核心就是開(kāi)發(fā)該html文件，這里的html是指純html(RawHTML)，開(kāi)發(fā)者可以使用HTML來(lái)布局，使用CSS來(lái)定制樣式，使用JavaScript來(lái)控制業(yè)務(wù)邏輯。開(kāi)發(fā)widget使我想起幾年前做JavaScript的日子，那時(shí)候還沒(méi)有Ajax，ASP.net的服務(wù)器控件的交互性十分差，用戶(hù)老是投訴界面的操作性，只好手工編寫(xiě)大量的JavaScript來(lái)提高用戶(hù)體驗(yàn)。每次調(diào)試JavaScript只能在IE5上執(zhí)行，然后alert()出調(diào)試信息。開(kāi)發(fā)Widget，我還沒(méi)有找到很好的方法進(jìn)行調(diào)試，還是有點(diǎn)像以前開(kāi)發(fā)JavaScript那樣，使用alert()的方式進(jìn)行調(diào)試。
實(shí)現(xiàn)
HTML
- <html>
- <head>
- <title>Currency Converter</title>
- <script src="currency.js" type="text/javascript"></script>
- </head>
- <body>
- <table>
- <tr>
- <td>
- From
- </td>
- <td>
- <select id="FromBox">
- <option value="AUD" selected="selected">Australian Dollar(AUD)</option>
- <option value="CNY">Chinese Yuan(CNY)</option>
- <option value="HKD">Hong Kong Dollar(HKD)</option>
- <option value="USD">U.S. Dollar(USD)</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- To
- </td>
- <td>
- <select id="ToBox">
- <option value="AUD">Australian Dollar(AUD)</option>
- <option value="CNY" selected="selected">Chinese Yuan(CNY)</option>
- <option value="HKD">Hong Kong Dollar(HKD)</option>
- <option value="USD">U.S. Dollar(USD)</option>
- </select>
- </td>
- </tr>
- <tr>
- <td colspan=2>
- <input type="text" id="Result" readonly onclick="clickConvert()" />
- </td>
- </tr>
- </table>
- </body>
- </html>
這里的HTMl十分簡(jiǎn)單，只是顯示兩個(gè)下拉框來(lái)表示幣種，使用一個(gè)inputtext來(lái)顯示W(wǎng)ebservice查詢(xún)結(jié)果。
#p#
菜單
菜單指的是Windows Mobile的左右操作菜單，widget.menu為Windows Mobile特有，在PC上調(diào)試該菜單不能呈現(xiàn)。
- var menu = widget.menu;
- var menumenu1001 = menu.createMenuItem(1001);
- menu1001.text = "Convert";
- menu1001.onSelect = clickConvert;
- menu.setSoftKey(menu1001, menu.leftSoftKeyIndex);
上面代碼重寫(xiě)左邊菜單，顯示"Convert"，并且綁定事件方法clickConvert，效果圖如上。
調(diào)用WebService
該匯率轉(zhuǎn)換程序是通過(guò)查詢(xún)WebService來(lái)實(shí)現(xiàn)的，我使用的是http://www.webservicex.net/免費(fèi)的WebService。調(diào)用WebService的代碼如下：
- var xmlHttpRequest = null;
- function clickConvert() {
- if (window.XMLHttpRequest)
- {
- xmlHttpRequest = new XMLHttpRequest();
- }
- else if (window.ActiveXObject)
- {
- xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
- }
- var url = "http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate?FromCurrency="
- + document.getElementById("FromBox").value
- + "&ToCurrency="
- + document.getElementById("ToBox").value;
- xmlHttpRequest.open("GET", url, true);
- xmlHttpRequest.onreadystatechange = getData;
- xmlHttpRequest.send(null);
- }
- function getData() {
- if ((xmlHttpRequest.readyState == 4) &&( xmlHttpRequest.status == 200))
- {
- var myXml = xmlHttpRequest.responseXML;
- var xmlobject = null;
- var XMLText = null;
- if (window.ActiveXObject)
- {
- XMLText = myXml.childNodes[1].firstChild.nodeValue;
- }
- else
- {
- XMLText = myXml.childNodes[0].firstChild.nodeValue;
- }
- var result = document.getElementById("Result");
- result.value = document.getElementById("FromBox").value
- + " to "
- + document.getElementById("ToBox").value
- + " : "
- + XMLText;
- }
- }
先生成XMLHttpRequest的對(duì)象，組成需要訪問(wèn)的WebService的Url，通過(guò)GET的方式進(jìn)行訪問(wèn)。返回結(jié)果的處理是異步的，通過(guò)onreadystatechange屬性指定異步處理函數(shù)。在訪問(wèn)過(guò)程中，getData()會(huì)被回調(diào)幾次，需要判斷xmlHttpRequest的readyState和status來(lái)決定結(jié)果的返回。返回結(jié)果的讀取和WebService的接口有關(guān)，根據(jù)WebService的出口分析需要的數(shù)據(jù)。這樣一個(gè)調(diào)用WebService的過(guò)程就完成了。
調(diào)試
可以通過(guò)PC的IE進(jìn)行調(diào)試，但是由于IE上沒(méi)有Windows Mobile的菜單，所以需要做一點(diǎn)點(diǎn)特殊處理，例如我把名為Result的input框加入菜單的事件，那樣在IE上只要點(diǎn)擊該input框就可以進(jìn)行調(diào)試了。
- <input type="text" id="Result" readonly onclick="clickConvert()" />
理論上也可以使用FireBug來(lái)進(jìn)行調(diào)試，可是平臺(tái)相關(guān)性的在Firefox就不能用了。
構(gòu)建
構(gòu)建過(guò)程很簡(jiǎn)單，不需要編譯，只需要壓縮成zip格式的文件，把名字改成*.wgt或者*.widget就可以了。
我使用的7zip來(lái)進(jìn)行構(gòu)建，也可以寫(xiě)批處理文件進(jìn)行構(gòu)建，例如mark.bat文件，在批處理文件內(nèi)進(jìn)行壓縮。
部署
把*.wgt文件拷貝到SDcard。在Windows Mobile打開(kāi)SDCard。
點(diǎn)擊Yes進(jìn)行安裝。
運(yùn)行
安裝后在Start菜單看到新的Widget。
運(yùn)行結(jié)果如下。
目前為止一個(gè)調(diào)用WebService的Widget已經(jīng)完成了。是不是很簡(jiǎn)單呢，我們基于免費(fèi)WebService開(kāi)發(fā)其他Widget。
小結(jié)：Windows Mobile 6.5新功能Widget開(kāi)發(fā)詳解的內(nèi)容介紹完了，希望通過(guò)Windows Mobile Widget開(kāi)發(fā)內(nèi)容的學(xué)習(xí)能對(duì)你有所幫助！
