Windows Mobile 6.5 新功能widget開發

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

簡介

本文通過一個Currency Converter(外匯兌換)例子，講述Windows Mobile 新功能Widget開發的基本概念和步驟，同時講述了Widget如何調用WebService。

背景

最近比較關心匯率波動，所以在Widget上實現一個匯率轉換器程式。

什麼是Widget

Windows Mobile 6.5引入了Widget功能。為Windows Mobile開發提供了新的方式，使得開發Windows Mobile程式變得更簡便，Widget的規範請看下面連結：http://www.w3.org/TR/2008/WD-widgets-20081222/ 。Widget有三個關鍵檔案如。

Config.xml為設定檔，配置Widget的屬性，這些屬性包括名字，使用的html檔案，是否訪問網路以及表徵圖等等。

<?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為表徵圖檔案，實際應用中，該檔案可以為png，ico等其他圖形格式。

Currency.htm為Widget的核心檔案，開發Widget的核心就是開發該html檔案，這裡的html是指純html(Raw HTML)，開發人員可以使用HTML來布局，使用CSS來定製樣式，使用JavaScript來控制商務邏輯。開發widget使我想起幾年前做JavaScript的日子，那時候還沒有Ajax，ASP.net的伺服器控制項的互動性十分差，使用者老是投訴介面的操作性，只好手工編寫大量的JavaScript來提高使用者體驗。每次調試JavaScript只能在IE 5上執行，然後alert()出調試資訊。開發Widget，我還沒有找到很好的方法進行調試，還是有點像以前開發JavaScript那樣，使用alert()的方式進行調試。

實現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十分簡單，只是顯示兩個下拉框來表示幣種，使用一個input text來顯示Webservice查詢結果。

菜單

菜單指的是Windows Mobile的左右操作菜單，widget.menu為 Windows Mobile特有，在PC上調試該菜單不能呈現。

var menu = widget.menu;
var menu1001 = menu.createMenuItem(1001);
menu1001.text = "Convert";
menu1001.onSelect = clickConvert;
menu.setSoftKey(menu1001, menu.leftSoftKeyIndex);

上面代碼重寫左邊菜單，顯示"Convert"，並且綁定事件方法 clickConvert，如上。

調用WebService

該匯率轉換程式是通過查詢WebService來實現的，我使用的是http://www.webservicex.net/免費的WebService。調用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的對象，組成需要訪問的WebService的Url，通過GET的方式進行訪問。返回結果的處理是非同步，通過onreadystatechange 屬性指定非同步處理函數。在訪問過程中，getData()會被回調幾次，需要判斷xmlHttpRequest的readyState 和 status 來決定結果的返回。返回結果的讀取和WebService的介面有關，根據WebService的出口分析需要的資料。這樣一個調用WebService的過程就完成了。

調試

可以通過PC的IE進行調試，但是由於IE上沒有Windows Mobile的菜單，所以需要做一點點特殊處理，例如我把名為Result的input框加入菜單的事件，那樣在IE上只要點擊該input框就可以進行調試了。

<input type="text" id="Result" readonly onclick="clickConvert()" />

理論上也可以使用FireBug來進行調試，可是平台相關性的在Firefox就不能用了。

構建

構建過程很簡單，不需要編譯，只需要壓縮成zip格式的檔案，把名字改成*.wgt或者*.widget就可以了。

我使用的7zip來進行構建，也可以寫批次檔進行構建，例如mark.bat檔案，在批次檔內進行壓縮。

部署

把*.wgt檔案拷貝到SD card。在Windows Mobile開啟SD Card。

點擊 Yes 進行安裝。

運行

安裝後在Start 菜單看到新的Widget。

運行結果如下。

目前為止一個調用WebService的Widget已經完成了。是不是很簡單呢，我們基於免費WebService開發其他Widget。

關於JavaScript的WebService的開發，我參考了下面的文章，非常好。

Calling Cross Domain Web Services in AJAX

中文方面的資料可以參考郭靖的系列文章 http://www.shangducms.com/category/Windows-Mobile-65.aspx。

這周比較忙，寫了好幾天，終於寫完了，大家都 have a good weekend.

原始碼：CurrencyConverter.zip 請改名為Currency Converter.wgt。

運行環境：Windows Mobile 6.5

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More