接上文《基于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聯網相關的基本知識及簡單的例子，更復雜的內容我們以后接著學習。