【IT168技术文档】
简介
本文通过一个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，效果图如上。
