使用 AIR SDK 创建第一个基于 HTML 的 AIR 应用程序

为了通过实际操作较快地说明 Adobe® AIR® 的工作原理,请遵循以下说明创建并打包一个简单的基于 HTML 的 AIR“Hello World”应用程序。

开始前,必须已安装运行时并设置了 AIR SDK。本教程将涉及使用 AIR Debug Launcher (ADL) 和 AIR Developer Tool (ADT)。ADL 和 ADT 是命令行实用工具程序,可在 AIR SDK 的 bin 目录中找到(请参阅 安装 AIR SDK )。本教程假定您已经熟悉从命令行运行程序并了解了如何针对您的操作系统设置所需的路径环境变量。

注: 如果您是一名 Adobe® Dreamweaver® 用户,请阅读 使用 Dreamweaver 创建第一个基于 HTML 的 AIR 应用程序
注: 对于桌面和 extendedDesktop 配置文件,只能开发基于 HTML 的 AIR 应用程序。不支持移动设备配置文件。

创建项目文件

每个基于 HTML 的 AIR 项目必须包含以下两个文件:可指定应用程序元数据的应用程序描述符文件,以及顶级 HTML 页。除了这两个所需文件外,此项目还包含一个 JavaScript 代码文件 AIRAliases.js ,该文件可为 AIR API 类定义好记的别名变量。

  1. 创建一个名为 HelloWorld 的目录以包含项目文件。

  2. 创建一个名为 HelloWorld-app.xml 的 XML 文件。

  3. 创建一个名为 HelloWorld.html 的 HTML 文件。

  4. 将 AIR SDK 的 frameworks 文件夹中的 AIRAliases.js 复制到项目目录中。

创建 AIR 应用程序描述符文件

开始构建 AIR 应用程序前,应创建一个具有以下结构的 XML 应用程序描述符文件:

<application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>
  1. 打开要编辑的 HelloWorld-app.xml

  2. 添加根 <application> 元素,包括 AIR 命名空间属性:

    <application xmlns="http://ns.adobe.com/air/application/2.7"> 命名空间的最后一段“2.7”指定应用程序所需的运行时版本。

  3. 添加 <id> 元素:

    <id>examples.html.HelloWorld</id> 应用程序 ID 与发行商 ID(由 AIR 派生自用于对应用程序包进行签名的证书)一起唯一地标识了应用程序。应用程序 ID 用于安装、访问专用应用程序文件系统存储目录、访问专用加密存储以及应用程序间的通信。

  4. 添加 <versionNumber> 元素:

    <versionNumber>0.1</versionNumber> 可帮助用户确定安装哪个版本的应用程序。

    注: 如果您使用的是 AIR 2 或更早版本,则必须使用 <version> 元素,而非 <versionNumber> 元素。
  5. 添加 <filename> 元素:

    <filename>HelloWorld</filename> 用于操作系统中应用程序可执行文件、安装目录和对应用程序的其他引用的名称。

  6. 添加包含下列子元素的 <initialWindow> 元素,从而为初始应用程序窗口指定属性:

    <content>HelloWorld.html</content> 标识 AIR 要加载的根 HTML 文件。

    <visible>true</visible> 使窗口立即可见。

    <width>400</width> 设置窗口宽度(以像素为单位)。

    <height>200</height> 设置窗口高度。

  7. 保存该文件。完整的应用程序描述符文件应如下所示:

    <?xml version="1.0" encoding="UTF-8"?> 
    <application xmlns="http://ns.adobe.com/air/application/2.7"> 
        <id>examples.html.HelloWorld</id> 
        <versionNumber>0.1</versionNumber> 
        <filename>HelloWorld</filename> 
        <initialWindow> 
            <content>HelloWorld.html</content> 
            <visible>true</visible> 
            <width>400</width> 
            <height>200</height> 
        </initialWindow> 
    </application>

此示例仅设置了几个可能的应用程序属性。有关应用程序属性的完整设置(利用这些设置可以指定窗口镶边、窗口大小、透明度、默认安装目录、关联文件类型以及应用程序图标等),请参阅 AIR 应用程序描述符文件

创建应用程序 HTML 页

现在需要创建一个简单的 HTML 页以用作 AIR 应用程序的主文件。

  1. 打开要编辑的 HelloWorld.html 文件。添加以下 HTML 代码:

    <html> 
    <head> 
        <title>Hello World</title> 
    </head> 
    <body onLoad="appLoad()"> 
        <h1>Hello World</h1> 
    </body> 
    </html>
  2. 在该 HTML 的 <head> 部分,导入 AIRAliases.js 文件:

    <script src="AIRAliases.js" type="text/javascript"></script>

    AIR 针对 HTML window 对象定义一个名为 runtime 的属性。该 runtime 属性使用类的完全限定的包名称来提供对内置 AIR 类的访问。例如,若要创建 AIR File 对象,您可以在 JavaScript 中添加以下语句:

    var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

    AIRAliases.js 文件为最常用的 AIR API 定义了好记的别名。使用 AIRAliases.js ,可以将对 File 类的引用缩短为以下形式:

    var textFile = new air.File("app:/textfile.txt");
  3. 在 AIRAliases 脚本标签下方,添加另一个包含 JavaScript 函数的脚本标签来处理 onLoad 事件:

    <script type="text/javascript"> 
    function appLoad(){ 
        air.trace("Hello World"); 
    } 
    </script>

    appLoad() 函数仅调用 air.trace() 函数。使用 ADL 运行应用程序时,跟踪消息会输出到命令控制台。Trace 语句对于调试非常有用。

  4. 保存该文件。

现在 HelloWorld.html 文件应如下所示:

<html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

测试应用程序

若要从命令行运行和测试应用程序,请使用 AIR Debug Launcher (ADL) 实用程序。ADL 可执行程序可以在 AIR SDK 的 bin 目录中找到。如果您尚未安装 AIR SDK,请参阅 安装 AIR SDK

  1. 打开命令控制台或解释程序。转至为此项目创建的目录中。

  2. 运行以下命令:

    adl HelloWorld-app.xml

    AIR 窗口将会打开,以显示应用程序。同时,控制台窗口会显示由于 air.trace() 调用而产生的消息。

    有关详细信息,请参阅 AIR 应用程序描述符文件

创建 AIR 安装文件

在成功运行应用程序后,可以使用 ADT 实用程序将应用程序打包到一个 AIR 安装文件中。AIR 安装文件是包含所有应用程序文件的存档文件,您可以将其分发给用户。必须先安装 Adobe AIR,然后才能安装打包的 AIR 文件。

为了确保应用程序安全,所有 AIR 安装文件必须经过数字签名。为便于开发,您可以使用 ADT 或其他证书生成工具生成一个基本的自签名证书。还可以从 VeriSign 或 Thawte 等商用证书颁发机构购买商用代码签名证书。用户安装自签名 AIR 文件时,发行商在安装过程中会显示为“未知”。这是因为自签名证书仅确保 AIR 文件自创建后没有被更改。而无法阻止某人自签名一个伪装的 AIR 文件并将其显示为您的应用程序。对于公开发布的 AIR 文件,强烈建议使用可验证的商用证书。有关 AIR 安全问题的概述,请参阅 AIR 安全性 (针对 ActionScript 开发人员)或 AIR 安全性 (针对 HTML 开发人员)。

生成自签名证书和密钥对

从命令提示符处,输入以下命令(ADT 可执行文件位于 AIR SDK 的 bin 目录中):
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

ADT 会生成一个包含证书和相关私钥的名为 sampleCert.pfx 的 keystore 文件。

此示例使用了证书允许设置的最少数量的属性。密钥类型必须为 1024-RSA 2048-RSA (请参阅 对 AIR 应用程序进行签名 )。

创建 AIR 安装文件

在命令提示符下,输入以下命令(在一行中):
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

系统将提示您输入 keystore 文件密码。

HelloWorld.air 参数表示 ADT 生成的 AIR 文件。HelloWorld-app.xml 表示应用程序描述符文件。后面的参数表示应用程序所使用的文件。此示例仅使用了两个文件,但可以包含任意数量的文件和目录。ADT 会验证主内容文件 HelloWorld.html 是否包含在包中,但是如果您忘记包含 AIRAliases.js,则应用程序根本无法工作。

在创建 AIR 包后,可以通过双击该包文件来安装和运行应用程序。也可在解释程序或命令窗口中键入 AIR 文件名作为命令。

后续步骤

在 AIR 中,通常 HTML 和 JavaScript 代码的行为与其在典型的 Web 浏览器中的行为相同。(事实上,AIR 和 Safari Web 浏览器都使用相同的 WebKit 呈现引擎。)但是,如果在 AIR 中开发 HTML 应用程序,则必须了解一些重要差异。有关这些差异和其他重要主题的详细信息,请参阅 HTML 和 JavaScript 编程