This article uses a Currency Converter (foreign Currency exchange) example to describe the basic concepts and steps of the new Windows Mobile function Widget development. It also describes how widgets call WebService.
BackgroundRecently, I have been concerned about exchange rate fluctuations, So I implemented an exchange rate converter program on the Widget.
What is a Widget?Windows Mobile 6.5 introduces the Widget feature. Provides a new way for Windows Mobile development, making it easier to develop Windows Mobile programs, Widget specifications see the following link: http://www.w3.org/TR/2008/WD-widgets-20081222. Widgets have three key files, for example.
Config. xml is the configuration file used to configure the properties of the Widget, including the name, html file used, whether to access the network, and icons.
<?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 is an icon file. In actual application, this file can be in png, ico, and other graphic formats.
Currency.htm is the core file of the Widget. The core of the Development Widget is to develop the html file. Here, html refers to pure html (Raw HTML). developers can use HTML for layout, use CSS to customize styles and JavaScript to control business logic. Developing widgets reminds me of the days when I made JavaScript a few years ago. At that time, no Ajax was available. The server controls of ASP.net were very interactive, and users complained about the operability of interfaces, we had to manually write a lot of JavaScript to improve the user experience. Each JavaScript debugging can only be executed on IE 5, and alert () generates debugging information. I haven't found a good way to debug widgets yet, But I still use alert () for debugging as I used to develop JavaScript.
Implement HTML<title>Currency Converter</title>
<script src="currency.js" type="text/javascript"></script>
<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>
Here, HTMl is very simple. It only displays two drop-down boxes to indicate the currency, and one input text is used to display the Webservice query results.
Menu
The menu refers to the left and right operation menus of Windows Mobile. The widget. menu is unique to Windows Mobile and cannot be displayed after debugging on a PC.
var menu = widget.menu;
var menu1001 = menu.createMenuItem(1001);
menu1001.text = "Convert";
menu1001.onSelect = clickConvert;
menu.setSoftKey(menu1001, menu.leftSoftKeyIndex);The above code overwrites the left menu and displays "Convert", and binds the event Method clickConvert, as shown above.
Call WebServiceThis exchange rate conversion program is implemented by querying WebService. I use http://www.webservicex.net/free webservice. The following code calls 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;
}
}The XMLHttpRequest object is a Url of the WebService to be accessed and accessed through GET. The processing of returned results is asynchronous, And the asynchronous processing function is specified through the onreadystatechange attribute. During the access process, getData () is called back several times. You need to judge the readyState and status of xmlHttpRequest to determine the returned result. The reading of the returned results is related to the WebService interface, and the data is analyzed according to the WebService exit. The WebService call process is complete.
DebuggingDebugging can be performed through IE in the PC. However, since there is no Windows Mobile menu on IE, some special processing is required. For example, I add the input box named Result to the menu event, in this way, you only need to click the input box on IE for debugging.
<input type="text" id="Result" readonly onclick="clickConvert()" />In theory, you can also use FireBug for debugging, but the platform relevance cannot be used in Firefox.
Build
The building process is very simple. You don't need to compile it. You just need to compress it into a zip file and change the name to *. wgt or *. widget.
I use 7zip for building, or you can write a batch file for building, such as the mark. bat file, and compress it in the batch file.
DeploymentCopy the *. wgt file to the SD card. Open SD Card on Windows Mobile.
Click Yes to install.
RunAfter installation, the new Widget is displayed in the Start Menu.
The running result is as follows.
So far, a Widget that calls WebService has been completed. Isn't it easy? We develop other widgets based on free WebService.
For the development of JavaScript WebService, I have referred to the following article, which is very good.
Calling Cross Domain Web Services in AJAX
For Chinese information, see Guo Jing's series of articles: http://www.shangducms.com/category/windows-mobile-65.aspx.
This week is very busy. After writing it for several days, we have finally finished writing it. Everyone has a good weekend.
Source code: CurrencyConverter.zip, please change it to Currency Converter. wgt.
Running Environment: Windows Mobile 6.5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
