基于OPhone的Widget聯(lián)網(wǎng)實例開發(fā)（1）
概述
下面我們就以一個可以實時更新的匯率查看程序來說明一下OPhone上的聯(lián)網(wǎng)Widget的具體開發(fā)過程。我們這個實例叫匯率通，可以查看目前主流的各種貨幣相互間的匯率關(guān)系。我們先看下整體的效果。
基礎(chǔ)知識簡介
為了實現(xiàn)Widget的聯(lián)網(wǎng)例子，我們需要了解兩方面的內(nèi)容，Ajax和DOM，下面就簡單介紹下其中我們這個例子需要用到的內(nèi)容。Ajax（AsynchronousJavaScriptandXML，異步JavaScript和XML）Ajax就是使用基于JavaScript的XMLHttpRequest對象，向Web服務(wù)器發(fā)送異步請求，獲取數(shù)據(jù)。#t#
（1）請求方式有兩種：
Get：從服務(wù)器查詢數(shù)據(jù)
Post：要向服務(wù)器發(fā)送數(shù)據(jù)
（2）XMLHttpRequest對象的方法有
open（"method","URL","async"）：設(shè)置請求方式
setRequestHeader:設(shè)置發(fā)送的請求的頭部信息，包括請求的內(nèi)容格式，長度等，最常用的是設(shè)置請求的格式，如setRequestHeader("Content-type","text/xml");
send()：發(fā)送請求
（3）XMLHttpRequest對象的屬性有
Onreadystatechange：狀態(tài)發(fā)生變化時觸發(fā)的事件處理
readyState：上面說得的狀態(tài)，有5種，0：未初始化1：載入中2：已載入3：交互中4：完成。我們可以在不同的狀態(tài)是采取不同的事件處理，比如在狀態(tài)2已載入是可以注冊一個onLoading（）函數(shù)，在狀態(tài)4是注冊onComplete（）
responseText：返回的文本，可以通過innerHTML的形式直接賦給html中某元素來顯示
responseXML：返回的xml格式的內(nèi)容
Status：請求的狀態(tài)，有好多，其中必須用到的是200，表示請求成功，請求的文檔或文件已經(jīng)找到，并且正確返回，我們也會關(guān)注請求失敗的一些狀態(tài)，最常見的比如404，表示沒有找到請求的文件
statusText：和上面status對應(yīng)的文本說明，比如200對應(yīng)OK，404對應(yīng)NotFound
好了，下面我們就來創(chuàng)建一個基本的Ajax請求及數(shù)據(jù)處理框架
基本內(nèi)容為首選創(chuàng)建一個XMLHttpRequest類型的對象，接著設(shè)置基本的參數(shù)，然后判斷請求的狀態(tài)，并提供回調(diào)函數(shù)以增強對數(shù)據(jù)的處理
我們可以創(chuàng)建一個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)建一個XMLHttpRequest的對象 globalReq =new XMLHttpRequest(); if (globalReq)
- { //以Get的方式向給定的url異步發(fā)送數(shù)據(jù)請求 globalReq.open('GET', url, true);
- // 設(shè)置發(fā)送請求的數(shù)據(jù)格式為xml globalReq.setRequestHeader("Content-type", "text/xml");
- // 異步回調(diào)函數(shù)跟蹤請求狀態(tài)的改變 globalReq.onreadystatechange = function()
- { //如果狀態(tài)不是4，即請求沒有完成，則不做處理，直接返回，直到完成了請求的全過程 if (globalReq.readyState != 4)
- { return; } //如果完成了此次請求過程，判斷返回的狀態(tài)是否表示成功，即是否為200 if (globalReq.status == 200)
- { //如果請求數(shù)據(jù)成功，則在回調(diào)函數(shù)onSuccess中對請求的xml格式數(shù)據(jù)進(jìn)行處理 onSuccess(globalReq.responseXML); }
- else { //如果請求數(shù)據(jù)失敗，則在回調(diào)函數(shù)onError中打印出失敗的原因 onError("Web data unavailable " + globalReq.statusText); } };
- // 發(fā)送請求 globalReq.send(null); } }
有了之前的介紹及代碼中的詳細(xì)注釋，我們對requestXML這個以Ajax形式請求xml數(shù)據(jù)的函數(shù)應(yīng)該能理解了，需要說明的是，因為我們是開發(fā)OPhone的JILWidget，因此沒有像桌面瀏覽器上用的這樣增加兼容性判斷，同時，我們只對請求完成后數(shù)據(jù)請求是否成功或失敗兩種狀態(tài)感興趣，因此只有onSuccess和onError兩個回調(diào)函數(shù)。
這樣，當(dāng)我們需要請求網(wǎng)絡(luò)xml數(shù)據(jù)時，就可以在html文件中包含上面這個network.js文件，然后傳進(jìn)請求的URL及成功和失敗調(diào)用的回調(diào)函數(shù)就行了。#p#
DOM（DocumentObjectModule文檔對象模型）
DOM是表示文檔、訪問和操作文檔元素的應(yīng)用程序接口（API），所有支持JavaScript的瀏覽器引擎都支持DOM，用DOM可以方便的操作html和xml文件中的元素。
（1）訪問方法有：getElementById（）：按id獲取元素
getElementsByName（）：按標(biāo)簽名獲取元素
（2）添加和刪除方法有：createElement（）：創(chuàng)建一個元素
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)容的修改實時更新的，不需要手動干預(yù)。
config.xml：程序配置文件，包含程序版本，高寬度，網(wǎng)絡(luò)連接等各種配置，開始時按默認(rèn)配置即可。
Default.png：默認(rèn)的背景圖片，我們會使用自己的背景。
Icon.png：在手機上顯示的程序圖標(biāo)。
CurrencyHand.css:界面布局顯示控制文件。
CurrencyHand.html:程序主界面，用來存放及展示各種元素，我們的四個界面都在這里顯示，其實也是標(biāo)準(zhǔn)的網(wǎng)頁程序。JIL開發(fā)工具自動為我們生成了對應(yīng)的框架，包括head和body部分，并且在head里已經(jīng)增加了對css和js兩個文件的鏈接引用。
CurrentHand.Js:javascript文件，主要用來控制程序的流程及實現(xiàn)相關(guān)的邏輯功能，如果有多個就是文件，我們可以創(chuàng)建一個js的文件夾，把對應(yīng)的js文件都整理在這個文件夾下
主體設(shè)計
我們希望把這個程序的界面設(shè)計成兩部分，上半部分是各種貨幣的選擇及兩兩貨幣間的匯率關(guān)系的顯示及可以輸入一定數(shù)額的來進(jìn)行貨幣的兌換，下半部分相當(dāng)于一個快速瀏覽欄，你可以把感興趣的貨幣間的匯率關(guān)系添加進(jìn)來，并且可以添加最多5組，來更好的比較某一個貨幣和其他多個貨幣的匯率關(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)建一個id為mainview的div塊，然后在里面放了一個表格，目前表格為一行三列，其中第一和第三列分別放置了圖片，初始值都為代表人民幣的中國國旗圖片。
（2）接著也刪除css文件里自動生成的內(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）增加圖片
因為我們用了自己添加景圖片，所以得在硬盤上的工程目錄文件夾下創(chuàng)建一個用來存放圖片的文件夾images，在里面放入一個我們制作好的背景圖片bg.png,
圖片的大小為320x480，因為不用默認(rèn)的背景圖片Default.png,所以刪除。
同時在images文件夾中添加各種貨幣對應(yīng)的國旗（其中港元為香港特別行政區(qū)區(qū)旗），一共有33種，如下圖所示（部分）
再回到JIL的左邊的packageexplorer窗口按F5快捷鍵刷新或右鍵點擊工程名后選擇Refresh，就可以看到更新后的目錄，增加了images文件夾。
完成后保存，右鍵點擊工程名后選擇RunAS->WidgetApplication，如圖所示，就可以在模擬器中看到國旗放置的效果了。（注：第一次啟動模擬器，速度會比較慢，打開后就不必關(guān)閉了，代碼修改后直接RunAs即可）。
