概述

下面我們就以一個(gè)可以實(shí)時(shí)更新的匯率查看程序來說明一下OPhone上的聯(lián)網(wǎng)Widget的具體開發(fā)過程。我們這個(gè)實(shí)例叫匯率通，可以查看目前主流的各種貨幣相互間的匯率關(guān)系。我們先看下整體的效果。

基礎(chǔ)知識(shí)簡(jiǎn)介

為了實(shí)現(xiàn)Widget的聯(lián)網(wǎng)例子，我們需要了解兩方面的內(nèi)容，Ajax和DOM，下面就簡(jiǎn)單介紹下其中我們這個(gè)例子需要用到的內(nèi)容。Ajax（AsynchronousJavaScriptandXML，異步JavaScript和XML）Ajax就是使用基于JavaScript的XMLHttpRequest對(duì)象，向Web服務(wù)器發(fā)送異步請(qǐng)求，獲取數(shù)據(jù)。#t#

（1）請(qǐng)求方式有兩種：

Get：從服務(wù)器查詢數(shù)據(jù)

Post：要向服務(wù)器發(fā)送數(shù)據(jù)

（2）XMLHttpRequest對(duì)象的方法有

open（"method","URL","async"）：設(shè)置請(qǐng)求方式

setRequestHeader:設(shè)置發(fā)送的請(qǐng)求的頭部信息，包括請(qǐng)求的內(nèi)容格式，長度等，最常用的是設(shè)置請(qǐng)求的格式，如setRequestHeader("Content-type","text/xml");

send()：發(fā)送請(qǐng)求

（3）XMLHttpRequest對(duì)象的屬性有

Onreadystatechange：狀態(tài)發(fā)生變化時(shí)觸發(fā)的事件處理

readyState：上面說得的狀態(tài)，有5種，0：未初始化1：載入中2：已載入3：交互中4：完成。我們可以在不同的狀態(tài)是采取不同的事件處理，比如在狀態(tài)2已載入是可以注冊(cè)一個(gè)onLoading（）函數(shù)，在狀態(tài)4是注冊(cè)onComplete（）

responseText：返回的文本，可以通過innerHTML的形式直接賦給html中某元素來顯示

responseXML：返回的xml格式的內(nèi)容

Status：請(qǐng)求的狀態(tài)，有好多，其中必須用到的是200，表示請(qǐng)求成功，請(qǐng)求的文檔或文件已經(jīng)找到，并且正確返回，我們也會(huì)關(guān)注請(qǐng)求失敗的一些狀態(tài)，最常見的比如404，表示沒有找到請(qǐng)求的文件

statusText：和上面status對(duì)應(yīng)的文本說明，比如200對(duì)應(yīng)OK，404對(duì)應(yīng)NotFound

好了，下面我們就來創(chuàng)建一個(gè)基本的Ajax請(qǐng)求及數(shù)據(jù)處理框架

基本內(nèi)容為首選創(chuàng)建一個(gè)XMLHttpRequest類型的對(duì)象，接著設(shè)置基本的參數(shù)，然后判斷請(qǐng)求的狀態(tài)，并提供回調(diào)函數(shù)以增強(qiáng)對(duì)數(shù)據(jù)的處理

我們可以創(chuàng)建一個(gè)network.js的文件，把下面的代碼拷進(jìn)去

/** * Make a request for an XML document.   
* * @param url * the url for the 'GET' call   
* @param onSuccess * a call-back for successful completion of request * @param onError   
* a call-back for request failure */ var globalReq; function requestXML(url, onSuccess, onError)   
{ //創(chuàng)建一個(gè)XMLHttpRequest的對(duì)象 globalReq =new XMLHttpRequest(); if (globalReq)   
{ //以Get的方式向給定的url異步發(fā)送數(shù)據(jù)請(qǐng)求 globalReq.open('GET', url, true);   
// 設(shè)置發(fā)送請(qǐng)求的數(shù)據(jù)格式為xml globalReq.setRequestHeader("Content-type", "text/xml");  
 // 異步回調(diào)函數(shù)跟蹤請(qǐng)求狀態(tài)的改變 globalReq.onreadystatechange = function()   
{ //如果狀態(tài)不是4，即請(qǐng)求沒有完成，則不做處理，直接返回，直到完成了請(qǐng)求的全過程 if (globalReq.readyState != 4)   
{ return; } //如果完成了此次請(qǐng)求過程，判斷返回的狀態(tài)是否表示成功，即是否為200 if (globalReq.status == 200)   
{ //如果請(qǐng)求數(shù)據(jù)成功，則在回調(diào)函數(shù)onSuccess中對(duì)請(qǐng)求的xml格式數(shù)據(jù)進(jìn)行處理 onSuccess(globalReq.responseXML); }   
else { //如果請(qǐng)求數(shù)據(jù)失敗，則在回調(diào)函數(shù)onError中打印出失敗的原因 onError("Web data unavailable " + globalReq.statusText); } };   
// 發(fā)送請(qǐng)求 globalReq.send(null); } }    
 

有了之前的介紹及代碼中的詳細(xì)注釋，我們對(duì)requestXML這個(gè)以Ajax形式請(qǐng)求xml數(shù)據(jù)的函數(shù)應(yīng)該能理解了，需要說明的是，因?yàn)槲覀兪情_發(fā)OPhone的JILWidget，因此沒有像桌面瀏覽器上用的這樣增加兼容性判斷，同時(shí)，我們只對(duì)請(qǐng)求完成后數(shù)據(jù)請(qǐng)求是否成功或失敗兩種狀態(tài)感興趣，因此只有onSuccess和onError兩個(gè)回調(diào)函數(shù)。

這樣，當(dāng)我們需要請(qǐng)求網(wǎng)絡(luò)xml數(shù)據(jù)時(shí)，就可以在html文件中包含上面這個(gè)network.js文件，然后傳進(jìn)請(qǐng)求的URL及成功和失敗調(diào)用的回調(diào)函數(shù)就行了。#p#

DOM（DocumentObjectModule文檔對(duì)象模型）

DOM是表示文檔、訪問和操作文檔元素的應(yīng)用程序接口（API），所有支持JavaScript的瀏覽器引擎都支持DOM，用DOM可以方便的操作html和xml文件中的元素。

（1）訪問方法有：getElementById（）：按id獲取元素

getElementsByName（）：按標(biāo)簽名獲取元素

（2）添加和刪除方法有：createElement（）：創(chuàng)建一個(gè)元素

appendChild（）：添加子元素

removeChild（）：刪除子元素

（3）操作屬性方法：getAttribute（）：獲取屬性值

setAttribute（）：設(shè)置屬性值

創(chuàng)建工程

首先打開JIL開發(fā)工具，選擇File->New->WidgetProject，創(chuàng)建以CurrencyHand為工程名的工程，并記住工程的保存路徑。創(chuàng)建完后如下圖所示。

JIL默認(rèn)生成的內(nèi)容

主要有：

bin/CurrencyHand.wgt:最終的發(fā)布文件,并且隨著程序內(nèi)容的修改實(shí)時(shí)更新的，不需要手動(dòng)干預(yù)。

config.xml：程序配置文件，包含程序版本，高寬度，網(wǎng)絡(luò)連接等各種配置，開始時(shí)按默認(rèn)配置即可。

Default.png：默認(rèn)的背景圖片，我們會(huì)使用自己的背景。

Icon.png：在手機(jī)上顯示的程序圖標(biāo)。

CurrencyHand.css:界面布局顯示控制文件。

CurrencyHand.html:程序主界面，用來存放及展示各種元素，我們的四個(gè)界面都在這里顯示，其實(shí)也是標(biāo)準(zhǔn)的網(wǎng)頁程序。JIL開發(fā)工具自動(dòng)為我們生成了對(duì)應(yīng)的框架，包括head和body部分，并且在head里已經(jīng)增加了對(duì)css和js兩個(gè)文件的鏈接引用。

CurrentHand.Js:javascript文件，主要用來控制程序的流程及實(shí)現(xiàn)相關(guān)的邏輯功能，如果有多個(gè)就是文件，我們可以創(chuàng)建一個(gè)js的文件夾，把對(duì)應(yīng)的js文件都整理在這個(gè)文件夾下

主體設(shè)計(jì)
我們希望把這個(gè)程序的界面設(shè)計(jì)成兩部分，上半部分是各種貨幣的選擇及兩兩貨幣間的匯率關(guān)系的顯示及可以輸入一定數(shù)額的來進(jìn)行貨幣的兌換，下半部分相當(dāng)于一個(gè)快速瀏覽欄，你可以把感興趣的貨幣間的匯率關(guān)系添加進(jìn)來，并且可以添加最多5組，來更好的比較某一個(gè)貨幣和其他多個(gè)貨幣的匯率關(guān)系。#p#

布局界面的上半單元

1.添加代表兩種貨幣的國旗（其中港元為香港特別行政區(qū)區(qū)旗）

（1）刪除掉html文件中的原來的body部分，用下面的代碼代替

<body> <div id="mainview" > <table> <tr> <td><img id="flag_left" src="images/CNY1.png"   
align="right">td> <td width="50"> 
td> <td><img id="flag_right"   
src="images/CNY1.png" align="left"> 
td> tr> table> div> body>    
 
<body> <div id="mainview" >   
<table> <tr> <td><img id="flag_left" src="images/CNY1.png" align="right"> 
td> <td width="50">td> <td> 
<img id="flag_right"   
src="images/CNY1.png" align="left"> 
td> tr> table> div> body> 

上面代碼的意思主要是創(chuàng)建一個(gè)id為mainview的div塊，然后在里面放了一個(gè)表格，目前表格為一行三列，其中第一和第三列分別放置了圖片，初始值都為代表人民幣的中國國旗圖片。

（2）接著也刪除css文件里自動(dòng)生成的內(nèi)容，用下面的代碼代替

body{ height: 100%; background-image:url  
(images/bg.png);   
background-repeat:no-repeat; } #mainview   
{ margin-left:5px; margin-top:50px; }  

首先在body部分設(shè)定了背景圖，接著設(shè)定div塊距頂部和左邊的距離。

（3）增加圖片

因?yàn)槲覀冇昧俗约禾砑泳皥D片，所以得在硬盤上的工程目錄文件夾下創(chuàng)建一個(gè)用來存放圖片的文件夾images，在里面放入一個(gè)我們制作好的背景圖片bg.png,

圖片的大小為320x480，因?yàn)椴挥媚J(rèn)的背景圖片Default.png,所以刪除。

同時(shí)在images文件夾中添加各種貨幣對(duì)應(yīng)的國旗（其中港元為香港特別行政區(qū)區(qū)旗），一共有33種，如下圖所示（部分）

再回到JIL的左邊的packageexplorer窗口按F5快捷鍵刷新或右鍵點(diǎn)擊工程名后選擇Refresh，就可以看到更新后的目錄，增加了images文件夾。

完成后保存，右鍵點(diǎn)擊工程名后選擇RunAS->WidgetApplication，如圖所示，就可以在模擬器中看到國旗放置的效果了。（注：第一次啟動(dòng)模擬器，速度會(huì)比較慢，打開后就不必關(guān)閉了，代碼修改后直接RunAs即可）。