接上文《基于OPhone的Widget聯(lián)網(wǎng)實(shí)例開發(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里添加對(duì)應(yīng)的代碼

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

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

接著就可以保存，Run AS運(yùn)行，看下效果了：

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)建一行三列，其中第二列放置一個(gè)向后的箭頭#t#

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

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

接著就可以保存，Run AS運(yùn)行，看下效果了：

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

添加事件處理

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

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

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

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

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

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

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

這是歐洲中央銀行（ECB:European Central Bank）提供的數(shù)據(jù)鏈接，是以歐元為基準(zhǔn)的，和其他各種貨幣間的實(shí)時(shí)更新的匯率關(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.實(shí)現(xiàn)事件處理函數(shù)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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