接上文《基于OPhone的Widget聯(lián)網(wǎng)實例開發(fā)》

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>    

上面代碼的意思主要是創(chuàng)建一行三列，第一和第三列放置貨幣選擇欄

（2）在css里添加對應(yīng)的代碼

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

設(shè)置貨幣選擇欄的字體大小

接著就可以保存，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>    

也是創(chuàng)建一行三列，其中第二列放置一個向后的箭頭#t#

第一和第三列放置輸入框，并且設(shè)置第三列的輸入框禁止輸入，這樣只能按箭頭的方向由左邊輸入金額，右邊顯示兌換后的金額。

（2）最后把上面的箭頭圖片拷到硬盤上這個工程目錄下的images文件夾中，然后回到JIL中按F5刷新（和上一步是添加背景圖片bg.png的操作一樣）。

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

這樣界面上半部分的布局我們就完成了，下面我們在js里添加對應(yīng)的事件處理。#p#

添加事件處理

1.添加network.js的調(diào)用

首先在硬盤上的工程目錄下創(chuàng)建一個名為js的文件夾，把我們之前創(chuàng)建的那個network.js文件拷進(jìn)去，并且把CurrencyHand.js這個文件也移進(jìn)去，F(xiàn)5刷新，可以看到現(xiàn)在的工程目錄下增加了js文件夾

同時修改html中的head部分原來關(guān)于CurrencyHand.js文件的鏈接，并增加對network.js的鏈接，修改后如下

這樣就可以調(diào)用network.js中已經(jīng)寫好的請求xml數(shù)據(jù)的函數(shù)了。

2.了解請求的數(shù)據(jù)形式

在開始請求數(shù)據(jù)前，我們首先看一下我們要請求的數(shù)據(jù)的內(nèi)容及格式

我們使用一個公共的網(wǎng)站來獲取實時的更新數(shù)據(jù)，這個網(wǎng)址為

這是歐洲中央銀行（ECB:European Central Bank）提供的數(shù)據(jù)鏈接，是以歐元為基準(zhǔn)的，和其他各種貨幣間的實時更新的匯率關(guān)系。內(nèi)容和格式為：

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.實現(xiàn)事件處理函數(shù)

好了，知道了網(wǎng)址和其提供的數(shù)據(jù)格式后，接下來我們就可以使用Ajax的形式請求數(shù)據(jù)，并通過DOM的方式從中解析出我們需要的某些項數(shù)據(jù)。

下面修改CurrencyHand.js文件，首先刪除里面自動生成的代碼

我們在html里注冊了三個事件，貨幣選擇欄有兩個事件getLeftOption(this)，getRightOption(this)，表示貨幣金額兌換的箭頭有一個事件calculateCurrency()，下面我們就來實現(xiàn)這三個事件

（1）首先定義一些變量，添加表示URL及左右貨幣名稱和匯率比例的變量，

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

設(shè)左右貨幣的初始名為ＣＮＹ，人民幣。

（2）然后就 可以實現(xiàn)左邊那個選擇欄注冊的事件

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)函數(shù)首先獲左取選取欄選取的貨幣名稱，并改變和貨幣對應(yīng)的左邊的國旗，最后就是調(diào)用我們在network.js里定義的那個請求xml數(shù)據(jù)的函數(shù)requestXML，并且傳進(jìn)的參數(shù)中URL為gUrl，數(shù)據(jù)請求成功的回調(diào)函數(shù)為iterateXML，失敗的回調(diào)函數(shù)為showStatus。

首先看下失敗的回調(diào)函數(shù)showStatus，

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

函數(shù)很簡單，就是顯示出失敗的原因。

（3）下面重點看下數(shù)據(jù)請求成功的回調(diào)函數(shù)iterateXML，在這個函數(shù)里主要對返回的xml文件進(jìn)行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; }    

這個函數(shù)主要用來解析匯率數(shù)據(jù)，我們由之前的數(shù)據(jù)文件看到，匯率信息存儲在由Cube表示的標(biāo)簽中，所以我們獲得所有Cube名字的標(biāo)簽，然后分別從這些標(biāo)簽里讀出左右貨幣名的匯率，由于這些匯率是以歐元為基準(zhǔn)的，因此歐元并沒有在Cube標(biāo)簽集中，因此對選擇了歐元的貨幣的匯率進(jìn)行單獨處理。然后計算，獲得兩個貨幣間的匯率關(guān)系，并把結(jié)果在界面上顯示出來。

同理，右邊選擇欄的事件函數(shù)內(nèi)容類似

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

（4）接下來還有箭頭上注冊的兌換函數(shù)

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

這個函數(shù)也很簡單，就是讀出左邊輸入的金額數(shù)目，然后和匯率相乘，就是兌換成的右邊貨幣的金額。

這樣我們就實現(xiàn)了界面上半部分對應(yīng)的功能，

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

和聯(lián)網(wǎng)相關(guān)的功能我們就實現(xiàn)了，我們可以從遠(yuǎn)程的網(wǎng)站服務(wù)器上讀取我們所需的數(shù)據(jù)，并且用DOM的方式對數(shù)據(jù)進(jìn)行提取。

雖然界面的下半部分我們還沒有實現(xiàn)，但那只是一些界面元素的布局及顯示，核心的聯(lián)網(wǎng)讀取數(shù)據(jù)我們通過界面上半部分的功能已經(jīng)實現(xiàn)了，因此限于篇幅，快速瀏覽欄部分就不再介紹實現(xiàn)了，不過有了前面的介紹，下半部分也應(yīng)該好實現(xiàn)了，只是元素的布局顯示及對應(yīng)的事件處理而已。

總結(jié)

我們首先介紹了聯(lián)網(wǎng)的Widget的作用，并且簡單介紹了相關(guān)的Ajax和DOM的基本知識，并完成了可以請求xml數(shù)據(jù)的函數(shù)，如果在JIL上請求xml數(shù)據(jù)，則可以直接使用。最后通過一個實時查看匯率的實例對如何在OPhone是開發(fā)需要聯(lián)網(wǎng)獲取數(shù)據(jù)的Widget進(jìn)行了具體的介紹。

以上我們只是簡單的介紹了Widget聯(lián)網(wǎng)相關(guān)的基本知識及簡單的例子，更復(fù)雜的內(nèi)容我們以后接著學(xué)習(xí)。