基于OPhone的Widget联网实例开发（2）

接上文《基于OPhone的Widget联网实例开发》

2.添加货币选择栏

（1）在html文件中的table里再添加一行三列，代码如下

<tr> <td align="right" > <select id=  
"currency_left" onchange="getLeftOption(this)  
" > <option value="CNY">人民币<option> 
<option value="USD">美元option> ...省略...   
<option value="EUR">欧元option>   
select> td> <td width="50" font-size="0.6em">兑换td> 
<td align="left" >   
<select id="currency_right" onchange="getRightOption(this)" > 
<option value="CNY">人民币  
option> <option value="USD">美元option> 
 <option value="JPY">日元option> ...省略... <option value="EUR">欧元  
option> select> td> tr>    

上面代码的意思主要是创建一行三列，第一和第三列放置货币选择栏

（2）在css里添加对应的代码

#currency_left,#currency_right { font-size: 0.8em; }    

设置货币选择栏的字体大小

接着就可以保存，Run AS运行，看下效果了：

3.添加货币金额输入栏

（1）在html中table里再增加一行三列

<tr> <td align="right" > 
<INPUT id="num_left" type="text" value="1" size="8" > 
td><td width="50"> 
<img id="arrowimg" src="images/forward.png"   
align="center" onclick="calculateCurrency()"> 
img> td> <td align="left" >   
<INPUT id="num_right" type="text" value="1" size="8" disabled="true">   
td> tr>    

也是创建一行三列，其中第二列放置一个向后的箭头#t#

第一和第三列放置输入框，并且设置第三列的输入框禁止输入，这样只能按箭头的方向由左边输入金额，右边显示兑换后的金额。

（2）最后把上面的箭头图片拷到硬盘上这个工程目录下的images文件夹中，然后回到JIL中按F5刷新（和上一步是添加背景图片bg.png的操作一样）。

接着就可以保存，Run AS运行，看下效果了：

这样界面上半部分的布局我们就完成了，下面我们在js里添加对应的事件处理。#p#

添加事件处理

1.添加network.js的调用

首先在硬盘上的工程目录下创建一个名为js的文件夹，把我们之前创建的那个network.js文件拷进去，并且把CurrencyHand.js这个文件也移进去，F5刷新，可以看到现在的工程目录下增加了js文件夹

同时修改html中的head部分原来关于CurrencyHand.js文件的链接，并增加对network.js的链接，修改后如下

这样就可以调用network.js中已经写好的请求xml数据的函数了。

2.了解请求的数据形式

在开始请求数据前，我们首先看一下我们要请求的数据的内容及格式

我们使用一个公共的网站来获取实时的更新数据，这个网址为

这是欧洲中央银行（ECB:European Central Bank）提供的数据链接，是以欧元为基准的，和其他各种货币间的实时更新的汇率关系。内容和格式为：

xml version="1.0" encoding="UTF-8"?> - <gesmes:Envelope xmlns:gesmes=  
http://www.gesmes.org/xml/2002-08-01
 xmlns="http://www.ecb.int/vocabulary/2002-08-01/eurofxref">   
<gesmes:subject>Reference rates  
gesmes:subject> - <gesmes:Sender> <gesmes:name>European Central Bank  
gesmes:name> gesmes:Sender> - <Cube> -   
<Cube time="2009-12-22">   
<Cube currency="USD" rate="1.4279" />   
<Cube currency="JPY" rate="130.83" />   
<Cube currency="BGN" rate="1.9558" />   
<Cube currency="CZK" rate="26.266" /> 
 <Cube currency="DKK" rate="7.4420" /> 
 <Cube currency="EEK" rate="15.6466" />   
<Cube currency="GBP" rate="0.89305" /> 
 <Cube currency="HUF" rate="274.28" />   
<Cube currency="LTL" rate="3.4528" /> 
 <Cube currency="LVL" rate="0.7080" /> 
 <Cube currency="PLN" rate="4.1770" />   
<Cube currency="RON" rate="4.2193" />   
<Cube currency="SEK" rate="10.4295" /> 
 <Cube currency="CHF" rate="1.4987" />   
<Cube currency="NOK" rate="8.3650" />   
<Cube currency="HRK" rate="7.2830" /> 
 <Cube currency="RUB" rate="43.6041" />   
<Cube currency="TRY" rate="2.1798" />   
<Cube currency="AUD" rate="1.6259" /> 
 <Cube currency="BRL" rate="2.5468" /> 
 <Cube currency="CAD" rate="1.5109" /> 
 <Cube currency="CNY" rate="9.7498" />   
<Cube currency="HKD" rate="11.0744" />   
<Cube currency="IDR" rate="13543.20" /> 
 <Cube currency="INR" rate="66.8200" />   
<Cube currency="KRW" rate="1685.05" /> 
 <Cube currency="MXN" rate="18.4699" /> 
 <Cube currency="MYR" rate="4.9100" />   
<Cube currency="NZD" rate="2.0294" />   
<Cube currency="PHP" rate="66.389" /> 
 <Cube currency="SGD" rate="2.0076" />   
<Cube currency="THB" rate="47.492" /> 
 <Cube currency="ZAR" rate="11.0340" /> 
 Cube> Cube> gesmes:Envelope>    
 

#p#3.实现事件处理函数

好了，知道了网址和其提供的数据格式后，接下来我们就可以使用Ajax的形式请求数据，并通过DOM的方式从中解析出我们需要的某些项数据。

下面修改CurrencyHand.js文件，首先删除里面自动生成的代码

我们在html里注册了三个事件，货币选择栏有两个事件getLeftOption(this)，getRightOption(this)，表示货币金额兑换的箭头有一个事件calculateCurrency()，下面我们就来实现这三个事件

（1）首先定义一些变量，添加表示URL及左右货币名称和汇率比例的变量，

var gUrl = 'http://www.ecb.int/stats/eurofxref/eurofxref-daily.xml';   
var leftCurrency="CNY"; var rightCurrency="CNY"; var currencyRate=0;    

设左右货币的初始名为ＣＮＹ，人民币。

（2）然后就 可以实现左边那个选择栏注册的事件

function getLeftOption(object)   
{ var valueOption=object.options  
[object.options.selectedIndex].  
value; leftCurrency=valueOption;  
 document.getElementById("flag_left").  
setAttribute("src", "images/" +   
leftCurrency+ "1.png");   
requestXML(gUrl, iterateXML, showStatus); }    
 

getLeftOption(object)函数首先获左取选取栏选取的货币名称，并改变和货币对应的左边的国旗，最后就是调用我们在network.js里定义的那个请求xml数据的函数requestXML，并且传进的参数中URL为gUrl，数据请求成功的回调函数为iterateXML，失败的回调函数为showStatus。

首先看下失败的回调函数showStatus，

function showStatus(text) { alert(text); }    

函数很简单，就是显示出失败的原因。

（3）下面重点看下数据请求成功的回调函数iterateXML，在这个函数里主要对返回的xml文件进行DOM解析

function iterateXML(xmlDoc)   
{ var leftRate=0; var rightRate=0; var items=xmlDoc.getElementsByTagName  
("Cube"); for (var i = 2; i < items.length; i++)   
{ var itemCurrency = items[i].getAttribute("currency"); if(itemCurrency==leftCurrency)   
{ leftRate=items[i].getAttribute("rate"); }   
if(itemCurrency==rightCurrency)   
{ rightRate=items[i].getAttribute("rate"); }  
 if(leftCurrency=="EUR") { leftRate=1; }  
 if(rightCurrency=="EUR") { rightRate=1; } }  
 currencyRate=rightRate/leftRate;   
document.getElementById("num_left").  
value=1; document.getElementById("num_right").  
value= currencyRate; }    

这个函数主要用来解析汇率数据，我们由之前的数据文件看到，汇率信息存储在由Cube表示的标签中，所以我们获得所有Cube名字的标签，然后分别从这些标签里读出左右货币名的汇率，由于这些汇率是以欧元为基准的，因此欧元并没有在Cube标签集中，因此对选择了欧元的货币的汇率进行单独处理。然后计算，获得两个货币间的汇率关系，并把结果在界面上显示出来。

同理，右边选择栏的事件函数内容类似

function getRightOption(object) { ...省略... }   

（4）接下来还有箭头上注册的兑换函数

function calculateCurrency()   
{ var moneySum=document.getElementById("num_left").value;   
document.getElementById("num_right").value=currencyRate*moneySum; }    

这个函数也很简单，就是读出左边输入的金额数目，然后和汇率相乘，就是兑换成的右边货币的金额。

这样我们就实现了界面上半部分对应的功能，

保存，Run As，看下效果吧，

和联网相关的功能我们就实现了，我们可以从远程的网站服务器上读取我们所需的数据，并且用DOM的方式对数据进行提取。

虽然界面的下半部分我们还没有实现，但那只是一些界面元素的布局及显示，核心的联网读取数据我们通过界面上半部分的功能已经实现了，因此限于篇幅，快速浏览栏部分就不再介绍实现了，不过有了前面的介绍，下半部分也应该好实现了，只是元素的布局显示及对应的事件处理而已。

总结

我们首先介绍了联网的Widget的作用，并且简单介绍了相关的Ajax和DOM的基本知识，并完成了可以请求xml数据的函数，如果在JIL上请求xml数据，则可以直接使用。最后通过一个实时查看汇率的实例对如何在OPhone是开发需要联网获取数据的Widget进行了具体的介绍。

以上我们只是简单的介绍了Widget联网相关的基本知识及简单的例子，更复杂的内容我们以后接着学习。