Windows Mobile 6.5新功能Widget开发详解

移动开发
Windows Mobile 6.5新功能Widget开发详解是本文要介绍的内容,主要是来了解并学习Windows Mobile Widget的应用,具体来看本文。

Windows Mobile 6.5新功能Widget开发详解是本文要介绍的内容,主要是来了解并学习Windows Mobile Widget的应用。本文通过一个CurrencyConverter(外汇兑换)例子,讲述Windows Mobile新功能Widget开发的基本概念和步骤,同时讲述了Widget如何调用WebService。最近比较关心汇率波动,所以在Widget上实现一个汇率转换器程序。

什么是Widget

Windows Mobile6.5引入了Widget功能。为Windows Mobile开发提供了新的方式,使得开发Windows Mobile程序变得更简便,Widget的规范请看下面链接:http://www.w3.org/TR/2008/WD-widgets-20081222/。Widget有三个关键文件如下图。

Windows Mobile 6.5 新功能widget开发  - GameStart - Program  Management

Config.xml为配置文件,配置Widget的属性,这些属性包括名字,使用的html文件,是否访问网络以及图标等等。

  1. <?xml version="1.0" encoding="utf-8" ?> 
  2. <widget version="1.0" xmlns="http://www.w3.org/ns/widgets" id=""> 
  3.     <name>Currency Converter</name> 
  4.     <content src="currency.htm" type="text/html" /> 
  5.     <access network="true" /> 
  6.     <icon src="currency.gif"/> 
  7.     <description>This is a currency converter widget!</description> 
  8. </widget>  

Currency.gif为图标文件,实际应用中,该文件可以为png,ico等其他图形格式。

Currency.htm为Widget的核心文件,开发Widget的核心就是开发该html文件,这里的html是指纯html(RawHTML),开发者可以使用HTML来布局,使用CSS来定制样式,使用JavaScript来控制业务逻辑。开发widget使我想起几年前做JavaScript的日子,那时候还没有Ajax,ASP.net的服务器控件的交互性十分差,用户老是投诉界面的操作性,只好手工编写大量的JavaScript来提高用户体验。每次调试JavaScript只能在IE5上执行,然后alert()出调试信息。开发Widget,我还没有找到很好的方法进行调试,还是有点像以前开发JavaScript那样,使用alert()的方式进行调试。

实现

HTML

  1. <html> 
  2. <head> 
  3.     <title>Currency Converter</title> 
  4.     <script src="currency.js" type="text/javascript"></script> 
  5. </head> 
  6. <body> 
  7. <table> 
  8.     <tr> 
  9.         <td> 
  10.         From   
  11.         </td> 
  12.         <td> 
  13.             <select id="FromBox"> 
  14.               <option value="AUD" selected="selected">Australian Dollar(AUD)</option> 
  15.               <option value="CNY">Chinese Yuan(CNY)</option> 
  16.               <option value="HKD">Hong Kong Dollar(HKD)</option> 
  17.               <option value="USD">U.S. Dollar(USD)</option> 
  18.             </select> 
  19.         </td> 
  20.     </tr> 
  21.     <tr> 
  22.         <td> 
  23.         To   
  24.         </td> 
  25.         <td> 
  26.             <select id="ToBox"> 
  27.               <option value="AUD">Australian Dollar(AUD)</option> 
  28.               <option value="CNY" selected="selected">Chinese Yuan(CNY)</option> 
  29.               <option value="HKD">Hong Kong Dollar(HKD)</option> 
  30.               <option value="USD">U.S. Dollar(USD)</option> 
  31.             </select> 
  32.         </td> 
  33.     </tr> 
  34.     <tr> 
  35.         <td colspan=2> 
  36.         <input type="text" id="Result" readonly onclick="clickConvert()" />   
  37.         </td> 
  38.     </tr> 
  39. </table> 
  40. </body> 
  41. </html>  

这里的HTMl十分简单,只是显示两个下拉框来表示币种,使用一个inputtext来显示Webservice查询结果。

 

Windows Mobile 6.5 新功能widget开发  - GameStart - Program  Management

 

#p#

菜单

菜单指的是Windows Mobile的左右操作菜单,widget.menu为Windows Mobile特有,在PC上调试该菜单不能呈现。

  1. var menu = widget.menu;  
  2. var menumenu1001 = menu.createMenuItem(1001);  
  3. menu1001.text = "Convert";  
  4. menu1001.onSelect = clickConvert;  
  5. menu.setSoftKey(menu1001, menu.leftSoftKeyIndex); 

上面代码重写左边菜单,显示"Convert",并且绑定事件方法clickConvert,效果图如上。

调用WebService

该汇率转换程序是通过查询WebService来实现的,我使用的是http://www.webservicex.net/免费的WebService。调用WebService的代码如下:

  1. var xmlHttpRequest = null;  
  2.  
  3. function clickConvert() {  
  4.     if (window.XMLHttpRequest)   
  5.     {  
  6.         xmlHttpRequest = new XMLHttpRequest();  
  7.     }  
  8.     else if (window.ActiveXObject)   
  9.     {  
  10.         xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
  11.     }  
  12.       
  13.     var url = "http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate?FromCurrency="   
  14.                 + document.getElementById("FromBox").value   
  15.                 + "&ToCurrency="  
  16.                 + document.getElementById("ToBox").value;  
  17.     xmlHttpRequest.open("GET", url, true);  
  18.     xmlHttpRequest.onreadystatechange = getData;  
  19.     xmlHttpRequest.send(null);  
  20. }  
  21.  
  22. function getData() {  
  23.     if ((xmlHttpRequest.readyState == 4) &&( xmlHttpRequest.status == 200))  
  24.     {  
  25.  
  26.         var myXml = xmlHttpRequest.responseXML;  
  27.         var xmlobject = null;  
  28.         var XMLText = null;  
  29.         if (window.ActiveXObject)  
  30.         {  
  31.             XMLText = myXml.childNodes[1].firstChild.nodeValue;   
  32.         }  
  33.         else  
  34.         {  
  35.             XMLText = myXml.childNodes[0].firstChild.nodeValue;  
  36.         }  
  37.         var result = document.getElementById("Result");  
  38.         result.value = document.getElementById("FromBox").value  
  39.                                + " to "  
  40.                                + document.getElementById("ToBox").value  
  41.                                + " : "  
  42.                                + XMLText;  
  43.     }   

先生成XMLHttpRequest的对象,组成需要访问的WebService的Url,通过GET的方式进行访问。返回结果的处理是异步的,通过onreadystatechange属性指定异步处理函数。在访问过程中,getData()会被回调几次,需要判断xmlHttpRequest的readyState和status来决定结果的返回。返回结果的读取和WebService的接口有关,根据WebService的出口分析需要的数据。这样一个调用WebService的过程就完成了。

调试

可以通过PC的IE进行调试,但是由于IE上没有Windows Mobile的菜单,所以需要做一点点特殊处理,例如我把名为Result的input框加入菜单的事件,那样在IE上只要点击该input框就可以进行调试了。

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

理论上也可以使用FireBug来进行调试,可是平台相关性的在Firefox就不能用了。

构建

构建过程很简单,不需要编译,只需要压缩成zip格式的文件,把名字改成*.wgt或者*.widget就可以了。

Windows Mobile 6.5 新功能widget开发  - GameStart - Program  Management

我使用的7zip来进行构建,也可以写批处理文件进行构建,例如mark.bat文件,在批处理文件内进行压缩。

 

Windows Mobile 6.5 新功能widget开发  - GameStart - Program  Management

 

 

 

部署

把*.wgt文件拷贝到SDcard。在Windows Mobile打开SDCard。

Windows Mobile 6.5 新功能widget开发  - GameStart - Program  Management
Windows Mobile 6.5 新功能widget开发  - GameStart - Program  Management

点击Yes进行安装。

运行

安装后在Start菜单看到新的Widget。

Windows Mobile 6.5 新功能widget开发  - GameStart - Program  Management

运行结果如下。

Windows Mobile 6.5 新功能widget开发  - GameStart - Program  Management

目前为止一个调用WebService的Widget已经完成了。是不是很简单呢,我们基于免费WebService开发其他Widget

小结:Windows Mobile 6.5新功能Widget开发详解的内容介绍完了,希望通过Windows Mobile Widget开发内容的学习能对你有所帮助!

责任编辑:zhaolei 来源: 博客园
相关推荐

2011-09-08 10:29:27

Windows MobWidget

2010-05-23 10:29:29

Widget开发

2011-09-08 10:18:09

Windows MobWidgets

2009-06-23 10:06:03

2011-04-25 16:40:21

开发环境搭建Windows Mob

2009-05-18 09:06:37

微软WMWindows Mob

2013-08-19 16:27:08

Windows 8.1

2012-08-22 15:45:29

Windows Ser

2011-04-25 17:17:55

Gesture APIWindows Mob

2009-05-19 10:44:23

微软Windows mob移动OS

2009-06-04 14:18:44

Windows Mob工具包

2009-02-18 21:16:16

2010-03-26 09:13:00

Windows Mob系统更新

2009-02-17 10:41:38

Windows Mob操作高清照片

2010-02-02 17:04:38

Windows MobWindows Mob下载

2009-06-01 08:48:44

微软Windows Mob移动OS

2009-03-12 08:34:54

2009-04-28 09:47:44

WM6.5Windows Mob智能手机

2010-07-13 09:02:19

Widget开发

2011-09-09 20:14:58

Android Wid
点赞
收藏

51CTO技术栈公众号