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