概述
下面我们就以一个可以实时更新的汇率查看程序来说明一下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即可）。
