使用 Adobe AIR 和 Dojo 开发基于 Ajax 的 Mashup 应用 - 转贴

时间：2022-05-02 20:44:53

使用 Adobe AIR 和 Dojo 开发基于 Ajax 的 Mashup 应用

级别： 初级

刘 庆 (liuqcdl@cn.ibm.com)

2007 年 10 月 18 日

本教程介绍了 Adobe AIR（Adobe Integrated Runtime）的基本知识以及如何运用 Web 开发技术结合 AIR 去开发桌面应用。通过几个例子详细介绍了在具体开发中遇到的各种问题，以及如何将 AIR 和 Dojo 框架结合起来，利用 REST 风格的 Web 服务接口开发一个基于 Ajax 的 Mashup 桌面应用程序。

开始之前

Adobe AIR（Adobe Integrated Runtime）是 Adobe 公司在 RIA（Rich Internet Applications）领域内全新的解决方案，它允许你利用现有的 Web 开发技能（包括 Flash，Flex，HTML，JavaScript，Ajax）优势，建立和配置跨平台（或跨操作系统）的桌面 RIA 应用。AIR 被媒体誉为 2007 年最值得关注的技术，和 Ajax 技术一样，将会引起广泛的关注。

关于本教程

本教程采用介绍知识和开发实际例子相结合的方式，在解决实际问题的过程中穿插介绍 AIR 的相关知识。并在介绍 AIR 的过程中，讲述了如何将 AIR 和目前广泛使用的 Dojo 框架结合起来，从而利用 Dojo 强大的工具开发基于 Ajax 的 Mashup 桌面应用。

目标

通过本教程的学习，您不仅可以了解 AIR 的基础知识，而且完全具备将 AIR 和传统 Web 开发技术和开发框架（如：Dojo）结合起来利用 REST 风格的 Web 服务去开发基于 Ajax 的桌面 RIA 应用的能力。在此过程中，您还将学习到最新的 Dojo 0.9 的 Ajax 开发以及利用 Dojo 处理 JSON 和 XML 格式数据的知识。

先决条件

要学习本教程，您需要有一定的 Web 编程经验，熟悉 JavaScript 并对 Ajax 技术和 Dojo 框架有一定的了解。

代码示例和安装要求

本文所有示例均在 Windows XP SP2 系统中测试完成。您需要一台能流畅运行 Windows XP 系统的机器，除此之外您还需要一些工具才能试用本教程中的代码。所有这些工具都可以免费下载（参见 参考资源）：

Ø         Java SDK 1.4.2 或更高版本的 JRE 或 JDK；

Ø         AIR 运行时环境 Adobe Integrated Runtime Beta1；

Ø         Adobe AIR SDK Beta1；

Ø         Dojo 0.9；

AIR 简介

Adobe Integrated Runtime（AIR） 是一个跨操作系统的运行时环境，您可以使用已经掌握的现有 Web 开发技能（如 Flash，Flex，HTML，JavaScript，Ajax 等）去构建和部署富互联网（Rich Internet）桌面应用。不必使用 VB/VC，不用购买 InstallAnywhere；仅使用现有流行的 Web 开发技术就可以让我们做出一个带有安装程序，能够安装、卸载、运行在本机，并能够和互联网的服务融为一体的桌面应用程序，这是不是一件很让人兴奋的事情呢？

比如，AIR 应用程序能用下列一个或一组技术来开发：

Ø         Flash/Flex/ActionScript

Ø         HTML/JavaScript/CSS/Ajax

Ø         PDF

由于技术方案选择的多样性，所以最终的 AIR 应用程序可以是下列组成结构中的一种：

Ø         基础内容是 Flash/Flex（SWF）的应用程序；

Ø         基础内容是 Flash/Flex（SWF）并附带有 HTML/JS/CSS 或 PDF 内容的应用程序；

Ø         基础内容是 HTML/JS/CSS 的应用程序；

Ø         基础内容是 HTML/JS/CSS 并附带 Flash/Flex（SWF）或 PDF 内容的应用程序；

由于上述第二种技术组合（即 HTML/JavaScript/CSS/Ajax）是我们大多数 Web 开发人员最常使用的技术组合，所以我们的教程将主要使用这种技术方案，这决定了最终的 AIR 示例应用程序也将是第三种结构（即基础内容是 HTML/JS/CSS 的应用程序）。

在对 AIR 的整体情况有一个总体把握之后，我们将从安装配置开发环境开始来编写并部署第一个 Hello World 程序。

Hello World！第一个 AIR 应用

安装配置开发环境

在 10 月 2 日我们庆祝国庆节日的时候，AIR 推出了其 Beta2 的版本，和 Beta1 相比，基本功能变化不大，但是在和 Dojo 0.9 的结合使用过程中会有一些异常，所以本例均在 AIR Beta1 版本下测试运行。AIR 开发环境的配置比较简单：

Ø         下载 安装 JRE 或者 JDK；

Ø         下载 安装 AIR 的运行时环境；

Ø         下载 AIR 的开发工具 SDK，并配置环境变量。

对于第一步，可能大家会比较疑惑，为什么开发 AIR 程序还需要 JDK 或者 JRE 呢？这是因为 AIR 的命令行工具要使用 JRE 的原因。第二步把 Windows 版本的安装程序下载并安装就可以了。对于第三步，我们将 SDK 的压缩包解压之后，比如放在 D 盘根目录下，其目录结构将如下 图 1 所示：

图 1. SDK 的目录结构

那么，我们就将 D:/RIASDK/bin/ 目录添加到系统的 Path 环境变量中，重启一下机器，让新的环境变量生效。设置环境变量后，我们就可以在命令行里面直接使用 AIR 的 SDK 提供的命令行工具对程序进行调试，或者程序完成后打包发布桌面应用程序。

安装配置好开发环境之后，下面就可以接着学习如何用 HTML / JavaScript 等 Web 的开发技术开发 AIR 桌面应用。

用 HTML 和 JavaScript 开发 AIR Hello World!

由于使用的是大家早已熟练的 HTML 和 JavaScript，所以我们只要有一个文本编辑器就可以进行开发，比如 Windows 自带的记事本或者 EditPlus 之类的工具软件。本文为了方便编辑 JavaScript，使用的是 Eclipse，但这并不是必需的。在下面的例子中，您只需要一个记事本就完全可以完成本教程中的示例开发。

首先，在硬盘上任意位置建立一个文件夹，本例取名为 AIR_DOJO，该文件夹的文件结构如 图 2 所示：

图 2. AIR_DOJO 文件夹下的文件结构

在 AIR_DOJO 文件夹中，创建三个文本文件 index.html，second.html 和 application.xml，以及一个文件夹 js。在文件夹 js 下面再创建一个 JavaScript 文件 index.js。

在这些文件中最重要的是 application.xml 文件，这个文件几乎描述了这个 AIR 应用的所有重要信息，所以我们将从 application.xml 这个文件开始看起。其内容如 清单 1 所示：

清单 1. application.xml 文件内容

                   

<?xml version="1.0" encoding="UTF-8"?>

<application appId="com.adobe.examplesAIRDojo" version="1.0"

xmlns="http://ns.adobe.com/air/application/1.0.M4">

    <name>HelloAIR</name>

    <rootContent systemChrome="standard">

        index.html

    </rootContent>

</application>

 为了第一个程序的简单起见，我们几乎使用了最小化的属性设置。Name 属性设置了应用程序的名字，rootContent 属性设置了应用程序的初始页面是 intex.html。关于 application.xml 更复杂的配置我们将在本教程后面发布为最终的 AIR 桌面应用部分中讲解。既然 index.html 是我们程序的初始页面，接下来看看 index.html 文件的内容：

清单 2. index.html 文件内容                   

<html>

    <head>

        <title>AIR Hello World!</title>

        <script src="js/index.js" />

    </head>

    <body>

        <button id="b1" onclick="clickme()">Click Me!</button>

        <br>

        <a href="second.html">Second Page</a>

        <br>

        <a href="http://www.ibm.com">Visit Internet Website</a>

    </body>

</html>

 这是一个极其简单的 HTML 页面，只定义了一个按钮和两个超链接。当按下按钮的时候将触发 JavsScript 函数 clickme()，该函数放在 index.js 文件中存放。一个超链接跳转到本应用的另外一个页面 second.html，另外一个链接则将应用页面跳转到互联网上的某个页面中。

index.js 和 second.html 的代码分别见 清单 3 和 清单 4：

清单 3. index.js 文件内容                   

function clickme() {

    alert("Button clicked!");

}

 index.js 文件中的 clickme() 函数只是在用户按下 index.html 页面中的按钮的时候弹出一个 alert 窗口。

清单 4. second.html 文件内容                   

<html>

    <head>

        <title>Second Page!</title>

    </head>

    <body>

        <a href="index.html">Return</a>

    </body>

</html>

 second.html 文件只定义了一个简单的链接，跳转回 index.html。

AIR 的 SDK 提供了两个非常有用的命令行工具，一个是用来调试的 adl.exe，一个是用来打包应用程序为安装文件的脚本 adt.bat。它们位于 SDK 的 bin 目录下面，如 图 3 所示：

图 3. AIR SDK 的命令行工具

在开发过程中，我们最常用的是调试工具 adl，下面我们将介绍如何用 adl 来调试运行 Hello World 程序。在本教程后面的 发布为最终的 AIR 桌面应用 部分，我们还将介绍如何使用 adt 工具来将应用程序打包为一个安装文件，并安装运行。

调试工具 adl 的使用非常简单，只要在应用文件夹下执行 adl application.xml 命令即可。ald 工具会根据 application.xml 文件中的应用描述来正确的以调试模式运行应用程序。程序的启动页面是描述中的 index.html，如 图 4 所示：

图 4. 用 adl 工具调试 Hello World 应用

下面我们在调试模式下验证用 HTML 和 JavaScript 代码编写的 Hello World 程序能否达到预期的效果。图 5 至 图 7 分别是当点击 Click Me! 按钮和在界面上点击两个超链接的效果。

图 5. 点击按钮弹出 alert 窗口

图 6. 超链接跳转到本地 second.html 页面

图 7. 超链接跳转到远程服务器页面

从上面几个图可以看出，程序的可以正常运行。下面回顾一下通过这个最简单 Hello World 应用，我们实现了哪些功能：

Ø         构建程序 UI

Ø         程序的事件处理

Ø         加载单独的 JavaScript 文件

Ø         程序多页面切换

Ø         本地程序获取远程 Web 服务器数据

此时，我们不禁要问：既然程序可以加载单独的 JavaScript 文件，那么能否结合 JavaScript 框架来简化我们的开发工作呢？答案是：完全可以！

在本教程接下来的部分，我们将和您一起学习如何使用功能强大的 JavaScript 框架 Dojo 的最新发布版本 Dojo 0.9 来为 AIR 程序开发具有 Ajax 功能的 Mashup 应用。

AIR 结合 Dojo 0.9 开发 Ajax 的 Mashup 应用

Dojo 简介

Dojo 是一个功能强大、面向对象和开源的 JavaScript 工具箱。它为开发 Web 胖客户端程序提供了一套完整的 Widget 和功能强大的开发工具。根据笔者的开发经验，使用 Dojo，您可以实现下列目标：

Ø         直接在您的页面上使用它提供的 Widget 从而快速的开发您的程序界面；

Ø         开发自己的 Widget；

Ø         用它完善的事件机制来进行 Ajax 开发；

Ø         快速开发 SVG 和 VML 的 Web 矢量图形；

Ø         利用它客户端存储方案来缓存数据，提高程序性能；

Ø         让您的程序界面支持拖拽效果；

Ø         屏蔽浏览器差异，提高开发效率；

Ø         高效的处理大量数据类型，包括 JSON 和 XML 数据；

Ø         使用它的 Log 功能，方便的调试您的代码；

Ø         数据加密；

Ø         Dojo 裁剪定制，JavaScript 代码压缩；

Ø         国际化支持；

当然，Dojo 的功能不仅这些，而且 Dojo 本身还在不断的完善着。对于 Web 开发人员来说，Dojo 无疑是一个强大的工具。它的最新发布版本是 0.9，和上一个版本 0.4.3 相比，改动相当大，所以大家还是有必要重新研究一下 Dojo 0.9 。本文主要介绍 AIR 的开发技术，关于 Dojo 0.9 的相关知识，大家可以参考本教程的 参考资料 部分相关文章。

使用 Dojo 0.9

到 Dojo 的官方网站上 下载 Dojo 0.9，然后在 AIR_DOJO 文件夹建立一个 dojo9 文件夹，并将解压后的 Dojo 0.9 放到其中。此时我们的 AIR 应用的文件结构如 图 8 所示：

图 8. 将 Dojo 0.9 放到 AIR 应用中

首先检验一下 Dojo 0.9 是否真的能够用在我们的 AIR 程序中正常运行。为此，在 index.html 页面中加一个超链接，链接到 Dojo 0.9 的一个 Widget 演示页面上：

<a href="dojo9/dojox/widget/tests/test_ColorPicker.html">Dojo Widget: Dojox ColorPicker</a>

同样，我们通过命令行工具来调试运行 AIR 程序，当在界面上点击到 Dojox ColorPicker 的超链接后，可以看到 图 9 所示的界面：

图 9. Dojo 0.9 的 Dojox ColorPicker 演示页面

图 9 的成功展现，证明了 Dojo 0.9 的确可以运行在 AIR 项目中。接下来就让我们在 Dojo 的帮助下开发 Ajax 的 Mashup 应用吧！既然是 Mashup 应用，我们接下来就先介绍一下在该应用中需要调用的三个 REST 风格的 Web 服务。

三个 REST 风格的 Web 服务

在我们即将开始的 Mashup 应用中，将要用到下列三个服务：

Ø         www.sunlightlabs.com 提供的地区信息服务

此服务可以根据一个邮编，返回该地区 JSON 格式的相关信息。例如向服务器发送如下请求：

http://api.sunlightlabs.com/places.getCityStateFromZip.php?zip=94105&apikey=23kj234kjb3kjbcl87ds

其中 zip 参数表示 5 位数字邮编，此例是 94105。参数 apikey 是为了使用他们的服务，需要申请一个 key，本教程就使用他们例子中给的 key 值就可以了。

该请求将返回如下 JSON 格式数据：

{ "zip" : "94105", "city" : "San Francisco", "state" : "CA" }

分别表示了邮编是 94105，城市名是 San Francisco，州名缩写是 CA。您可以了解此服务的 详细说明。

Ø         www.yahoo.com 雅虎提供的地图服务

此服务可以根据邮编返回一个 XML 格式的消息，在此 XML 格式消息内部包含了该地区的地图 PNG 图片的 URL。例如向服务器发送下列请求：

http://local.yahooapis.com/MapsService/V1/mapImage?appid=YahooDemo&zip=94015

其中 appid 也是需要申请的一个 key，参数 zip 表示邮编。则服务器返回的 XML 数据如 清单 5 所示

清单 5. 雅虎地图服务返回的 XML 数据

                           

<?xml version="1.0"?>

<Result xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

http://gws.maps.yahoo.com/mapimage?MAPDATA=kleOx

.d6wXWiukeLcvUT08WLwFAywdxcamwFe9Gg7kH0qNE_N_ByeugEnrodc7JK3Ew_pidR8_RhiL06p

.3sBLAnatvi2ZNEVAo

.y9AaxsBjdV2MduaF7vVF1KSz2WFpZDRR4HXBgIit&mvt=m

</Result>

 在 Result 标签内部就包含了地图图片的一个非常长的 URL，将该 URL 复制到浏览器的地址栏，就可以看到地图图片，如 图 10 所示：

图 10. 从返回的 XML 数据中获取地图 URL

您可以了解此服务的 详细说明。

Ø         www.wunderground.com 提供的天气服务

此服务根据国家名州名和城市名获得当日该城市的天气信息图片。例如向服务器发送如下请求：

http://banners.wunderground.com/weathersticker/big2_both_cond/language/www/US/CA/San_Francisco.gif

就能得到 US 美国 CA 州 San_Francisco 市的今日天气情况的图片如 图 11 所示。城市名多个单词之间用下划线连接。

图 11. 获得 San Francisco 市的天气情况图

您可以了解此服务的 详细说明。

在了解了三个服务之后，来看看我们的是如何准备使用这三个服务构建自己的 Mashup 应用的。

Mashup 的目标

关于 Mashup 的介绍，大家可以参考我的另一篇教程“使用 Eclipse 和 JavaFX 开发 Mashup 应用”，此处不再赘述。在本教程中，我们的最终目标是让用户在界面上输入美国城市的一个邮编，AIR 程序一方面从 www.sunlightlabs.com 提供的服务上得到该城市的州名和城市名，然后根据州名和城市名从 www.wunderground.com 提供的天气服务上得到该城市的天气信息；另外一方面，AIR 程序将根据邮编向雅虎的地图服务请求含有该城市地图图片 URL 信息的 XML 消息，根据返回消息提取地图图片地址，再根据该地址向雅虎地图上请求地图图片，最终在界面中显示出来。程序的处理流程如 图 12 所示：

图 12. 用已知服务构建 Mashup 应用

应用程序的最终目标界面如 图 13 所示：
图 13. 最终目标界面

在明确了目标之后，我们要开始开发之旅了。首先我们要搭建整体框架和界面。

搭建框架和界面

在前面工作的基础上，我们将首先搭建程序的总体框架：

  1. 建立 Mashup 应用的界面 AjaxMashup.html。

  2. 将 AjaxMashup.html 需要的 JavaScript 代码放到 AjaxMashup.js 文件中。

  3. 在首页 index.html 增加一个链接到 AjaxMashup.html。

<a href="AjaxMashup.html">Ajax Mashup</a>

此时文件结构如 图 14 所示：
图 14. Mashup 应用的文件结构

应用程序首页如 图 15 所示：
图 15. 应用程序首页

此时 AjaxMashup.html 文件内容如 清单 6 所示：

清单 6. AjaxMashup.html 文件内容

                   

<!DOCTYPE html PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Ajax Mashup</title>

  <style type="text/css">

    @import "dojo9/dojo/resources/dojo.css";

    @import "dojo9/dijit/themes/tundra/tundra.css";

    @import "dojo9/dijit/themes/dijit.css";

  </style>

  <script type="text/javascript" src="dojo9/dojo/dojo.js"

    djConfig="isDebug:false, parseOnLoad: true">

  </script>

  <script type="text/javascript">

    dojo.require("dijit.form.Button");

  </script>

  <script src="js/AjaxMashup.js" />

</head>

<body>

Zip Code:<input id="zip" maxlength="5"/>

<!—-使用了Dojo的一个Widget -->

<button id="query" dojoType="dijit.form.Button">Go!</button>

<br>

<div id="jsonroot">

  <span id="jsontitle">Display JSON Message Received From sunlightlabs</span>

  <br>

  <!—-用来显示从服务器得到的JSON数据-->

  <span id="jsonmsg"></span>

</div>

<br>

 

<div id="weatherroot">

  <span id="weathertitle">Display the weather forcast</span>

  <br>

  <!—-用来显示天气图片-->

  <img id="weatherimg" src="" border=0 alt="Weather Forecast" height=61 width=468/>

</div>

<br>

 

<div id="xmlroot">

  <span id="xmltitle">Display XML Message Received From Yahoo!</span>

  <br>

  <!—-用来显示从服务器得到的XML消息-->

  <span id="xmlmsg">

  </span>

</div>

<br>

<div id="maproot">

  <span id="maptitle">Display the map</span>

  <br>

  <!—-用来显示地图图片-->

  <img id="mapimg" src="" alt="Yahoo! map" height=500 width=620/>

</div>

 

</body>

</html>

 

大家可以看出，在该页面中，我们仅仅设计了页面的 UI，并没有加入任何的逻辑。此外，我们在页面中引入了 Dojo 0.9 并对其进行了一些基本的配置，使用了它的 dijit.form.Button 组件。

接下来，我们将在界面内增加业务逻辑。

增加业务逻辑

首先，给 AjaxMashup.html 页面中的按钮增加一个 onclick 事件，如 清单 7 所示：

清单 7. 给按钮增加事件响应

<button id="query" dojoType="dijit.form.Button" onclick="mashup()">Go!</button>

在 AjaxMashup.js 文件中增加该方法的代码，如 清单 8 所示：

清单 8. AjaxMashup.js 的事件响应代码

                   

//main function

function mashup(){

  var zipcode = dojo.byId("zip").value;

  if(!validateZip(zipcode)){

    alert("You must input a 5 digit zipcode");

    return false;

  }

  getJsonMsg(zipcode);

  getXMLMsg(zipcode);

}

 

//Make sure zipcode is 5 digits

function validateZip(zipcode){

  if(zipcode.length!=5 || isNaN(zipcode)){

    return false;

  }

  return true;

}

 

//process JSON data, get weather forcast image.

function processJson(response){

  try{

    var jsonObj=response;

    var baseWURL=

      "http://banners.wunderground.com/weathersticker/big2_both_cond/language/www/US/";

    var weathersrc=baseWURL+jsonObj.state+"/"+jsonObj.city.replace(" ","_")+".gif";

    dojo.byId("weatherimg").src=weathersrc;

  }catch(e){}

}

 

//get JSON data according to zipcode

function getJsonMsg(zipcode){

  dojo.xhrGet( { //

    // Call REST style web service.

    url: "http://api.sunlightlabs.com/places.getCityStateFromZip.php?apikey=

    23kj234kjb3kjbcl87ds&zip="+zipcode,

    handleAs: "json",// you can get JavaScript Object from response directly

    timeout: 9000, // Time in milliseconds

    // The LOAD function will be called on a successful response.

    load: function(response, ioArgs) { //

      //Display JSON message

      dojo.byId("jsonmsg").innerHTML = ioArgs.xhr.responseText;

      processJson(response);

      return response; //

    },

    // The ERROR function will be called in an error case.

    error: function(response, ioArgs) { //

      console.error("HTTP status code: ", ioArgs.xhr.status); //

      return response; //

    }

  });

}

 

//process XML data, get map image.

function processXML(response){

  try {

    var docObj=response;

    dojo.byId("mapimg").src=docObj.getElementsByTagName("Result")[0].textContent;

  }catch(e){}

}

 

function getXMLMsg(zipcode){

  dojo.xhrGet( { //

    // Call REST style web service.

    url: "http://local.yahooapis.com/MapsService/V1/mapImage?appid=

    YahooDemo&zip="+zipcode,

    handleAs: "xml",//We can document object directly

    timeout: 9000, // Time in milliseconds

    // The LOAD function will be called on a successful response.

    load: function(response, ioArgs) { //

      dojo.byId("xmlmsg").innerHTML = ""; // reset xml message

      var text = document.createTextNode(ioArgs.xhr.responseText);

      dojo.byId("xmlmsg").appendChild(text);

      processXML(response);

      return response; //

    },

    // The ERROR function will be called in an error case.

    error: function(response, ioArgs) { //

      console.error("HTTP status code: ", ioArgs.xhr.status); //

      return response; //

    }

  });

}

 

各函数的作用在程序里面均有注释。下面对其中几个重要问题进行详细讲述：

  1. 主函数 mashup()

主函数的处理顺序完全按照 图 12 的流程进行处理。根据用户在 zipcode 输入框中输入的数据，到三个 REST 风格的服务器上获取数据并进行进一步加工，然后再根据加工后的数据到服务器上请求该城市天气情况和地图。

  1. 如何用 Dojo0.9 进行 Ajax 开发

用 Dojo 0.9 来进行 Ajax 开发和 Dojo 0.4.3 在用法上有了很大的不同。Dojo 0.4.3 的版本中主要是通过 dojo.io.bind() 来进行。在 getJsonMsg() 和 getXMLMsg() 两个函数中可以看出，Dojo 0.9 则是通过 dojo.xhrGet() 来进行。各参数的含义则和 Dojo 0.4.3 的版本几乎相同。如下列所示：

    • url：发起异步请求的目标地址。

    • handleAs：将返回值转换成某种类型。可以是纯文本（text）、JSON 格式（json）、XML 格式（xml），还可以是 JavaScript 代码（javascript），以及另外两种和 JSON 相关的格式 json-comment-optional 和 json-comment-filtered。

    • timeout：超时时间，单位为毫秒。

    • load：无异常情况时的回调函数。

    • error：处理异常情况的回调函数。

  1. 如何用 Dojo 0.9 处理 JSON 数据

    2. Dojo 0.9 用来处理 JSON 数据有两个最重要的方法，如下列所示：

      • dojo.toJson()：本方法主要将传入的参数转化成 JSON 格式的序列；

      • dojo.fromJson()：本方法将 JSON 格式的数据转化为对应的 JavaScript 对象，从而可以通过 JavaScript 来对数据进行操作。

      如果我们在 dojo.xhrGet() 方法中指定 handleAs 为 json，那么 Dojo 0.9 会自动将结果转化为对应的 JavaScript 对象。从而更方便了我们的数据操作。有了这两个方法，结合本教程的例子，对 Dojo 0.9 的 JSON 数据处理问题都能够应付自如了。

      1. 如何用 Dojo 0.9 处理 XML 数据

      JavaScript 和 JavaScript 的各种框架（包括 Dojo 0.9）对 XML 数据的处理主要都是基于 JavaScript 对 DOM 处理的支持。如果我们在 dojo.xhrGet() 方法中指定 handleAs 为 xml，那么 Dojo 0.9 会自动将结果转化为对应的 DOM 对象。只要我们熟悉 JavaScript 的 DOM 操作，XML 数据的处理问题将不再难以应付。当然，Dojo 0.9 也给我们提供了 XML 和 DOM 处理的一个工具 dojox.xml.DomParser，它的源文件位于 dojox/xml 文件夹下。

      和本教程之前的例子一样，我们用 SDK 的命令行工具在调试状态下运行，就会得到 图 13 所示的效果。

      到此为止，我们需要的全部功能代码均已完成。下面我们就一起来学习如何将应用用 SDK 提供的工具打包成一个安装文件，并且安装运行。从而真正的将应用变成一个和 Web 服务互动的桌面应用。

      发布为最终的 AIR 桌面应用

      用 application.xml 文件来描述应用

      通过前面的学习，我们知道 application.xml 文件在整个应用中起着至关重要的作用，它描述了应用的相关属性。那么如何来编写 application.xml 文件呢？

      在 AIR SDK 目录的 templates 子目录下，有一个 application.xml 模板文件。如 图 16 所示：

      图 16. application.xml 模板文件

      模板文件很简单，而且注释很详细。根据注释我们可以知道一个应用主要有下列几个属性：

      • Xmlns：在本教程中使用 AIR Beta1 版本，必须使用 http://ns.adobe.com/air/application/1.0.M4；

      • appId：应用的 ID，作为应用的身份识别；

      • version：版本号；

      • name：应用的名字，操作系统执行我们的应用时候显示；

      • title：安装应用的时候提示的标题；

      • description：说明，安装时候显示；

      • copyright：版权声明，安装时候显示；

      • rootContent：默认首页，必须是一个 HTML 页面或者 SWF 文件，还可以给该属性再设置 height、width、transparent 和 visible 等显示属性。从而定义应用运行时候的显示属性。

      • installFolder：安装默认文件夹；

      • icon：ICON 图标的位置，制作成安装文件和安装运行时候都会需要；

      • handleUpdates：更新处理，定义应用更新属性；

      • fileTypes：定义本应用安装到操作系统上后，需要向操作系统注册的文件类型；

      Ø

      下面将按照模板来编写我们的 application.xml 文件。

      首先我们找几个分辨率分别为 16*16，32*32，64*64，128*128 的图片作为 ICON，放在 icons 文件夹下，这也是应用文件夹的最终结构。如 图 17 所示：
      图 17. 应用文件夹最终结构

      其次，给出最终的 application.xml 文件，如 清单 10 所示。

      清单 10. 最终的 application.xml 文件 

      <?xml version="1.0" encoding="UTF-8"?>
  
  
      <application appId="AIRDojo" version="1.0" 
  
  
      xmlns="http://ns.adobe.com/air/application/1.0.M4">
  
  
        <name>AIRDOJO</name>
  
  
        <installFolder>Adobe/AIR/QuickStart Samples/AIRDOJO</installFolder> 
  
  
        <description>Sample application for AIR and DOJO</description>
  
  
        <copyright>Everyone can get the source code!</copyright>
  
  
        <rootContent systemChrome="standard" width="800" height="600">
  
  
          index.html
  
  
        </rootContent>
  
  
        <icon>
  
  
          <image16x16>icons/AIRDOJO_16.png</image16x16>
  
  
          <image32x32>icons/AIRDOJO_32.png</image32x32>
  
  
          <image48x48>icons/AIRDOJO_48.png</image48x48>
  
  
          <image128x128>icons/AIRDOJO_128.png</image128x128>  
  
  
        </icon>
  
  
      </application>

      下一步，我们用 SDK 的工具来将应用打包成安装文件。

      打包成安装文件

      我们用 SDK 的 adt 命令行工具对应用打包，adt 命令的运行需要您已经按照教程开始时候说的那样配置好环境变量，并且在您的机器上已经安装了 JRE 1.4.2 及以上版本。

      adt 打包命令如 清单 11 所示：

      清单 11. 用 adt 命令打包我们的应用成安装文件

                         

      adt -package AIRDOJO.air application.xml index.html second.html

      AjaxMashup.html js icons dojo9

      AIRDOJO.air 表示要将应用打包成一个 AIRDOJO.air 类型的安装文件，该安装文件必须在您已经安装了 AIR Beta1 的运行时环境才能正确进行安装。后面将应用所需要的文件和文件夹列出来，即可以打包到安装文件中。图 18 给出了打包后的结果。

      图 18. 打包后生成了 AIRDOJO.air 安装文件

      安装运行最终的桌面程序

      到目前为止，仍然没有建立一个完整的桌面应用。下面就让我们来完成最后的工作，安装刚才打包生成的安装文件。并像桌面应用一样去运行它！双击 AIRDOJO.air 安装包，将会看到 图 19 所示安装界面，Application 属性显示的就是我们在 application.xml 中给应用设定的 name 属性。

       

      图 19. 程序安装界面

      点击 Install 按钮后可以看到 图 20 所示，我们在 application.xml 中设定的属性都有显示，并且还可以看出我们可以选择是否将应用在桌面上放置为一个快捷方式！

      图 20. 安装界面 2

      点 Continue 继续安装，将会看到 图 21 所示的安装完成提示。

       

      图 21. 安装完成

      安装完成后，会发现在桌面上有一个新安装应用的快捷方式，在开始菜单里面也有一个快捷方式。在您操作系统的添加删除程序里面，也有了新安装程序。如 图 22 和 图 23 所示：

      图 22. 生成了程序的快捷方式

      点击快捷方式，就可以看到我们的程序可以正确运行，出现 图 15 和 图 13 的界面。

      图 23. 添加删除程序的程序列表已经有了我们的程序

      可以在不需要使用的时候，通过控制面板 --- 添加删除程序将应用卸载。

      结束语

      本教程仅仅讲述了使用传统 Web 技术 HTML / JavaScript 来进行 AIR 开发的相关技术，其实 AIR 还可以和 Flex 结合起来进行开发。并且由于 AIR 应用最终是个桌面应用，所以它还具有桌面应用的强大功能。比如：操作本地数据库，和远程服务器进行 Socket 通信，操作本地文件系统以及和操作系统进行交互等等。在以后的文章中，我们还将会为大家介绍使用 Eclipse 的 Aptana 插件来开发调试和发布 AIR 应用，并且介绍 AIR 应用作为桌面应用更为强大的功能。

      致谢

      在本文完成之际，特别感谢 IBM 中国软件开发中心 DB2 z/OS 开发团队我的同事们和我的 Mentor 陈威在工作和学习中给我的巨大帮助！

      下载

      参考资料

      学习

       

      获得产品和技术

      讨论

      关于作者

        刘庆，目前在 IBM 软件开发中心（IBM CSDL）DB2 z/OS 开发团队担任开发工程师，拥有 IBM DB2 DBA 专业认证，他在 J2EE 和 Web 开发领域有着多年开发经验，喜欢关注新技术。他毕业于中国科技大学，并拥有硕士学位。

       
      标签：

      相关文章