在 Flash Builder 中创建第一个桌面 Flex AIR 应用程序

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

如果尚未执行这些操作,请下载并安装 Flash Builder。此外,还需要下载并安装最新版本的 Adobe AIR,位于此处: www.adobe.com/go/air_cn

创建 AIR 项目

Flash Builder 包括用于开发和打包 AIR 应用程序的工具。

通过定义一个新项目来开始在 Flash Builder 和 Flex Builder 中创建 AIR 应用程序,其方式与创建其他基于 Flex 的应用程序项目的方式相同。

  1. 打开 Flash Builder。

  2. 依次选择“文件”>“新建”>“Flex 项目”。

  3. 输入项目名称,例如 AIRHelloWorld。

  4. 在 Flex 中,AIR 应用程序被视为一种应用程序类型。有两种类型可供您选择:

    • 在 Adobe® Flash® Player 中运行的 Web 应用程序

    • 在 Adobe AIR 中运行的桌面应用程序

    选择 Desktop 作为应用程序类型。

  5. 单击“完成”以创建此项目。

AIR 项目最初由两个文件组成:主 MXML 文件和应用程序 XML 文件(称为应用程序描述符文件)。后一个文件用于指定应用程序的属性。

有关详细信息,请参阅 使用 Flash Builder 开发 AIR 应用程序

编写 AIR 应用程序代码

若要编写“Hello World”应用程序代码,请编辑在编辑器中打开的应用程序 MXML 文件 (AIRHelloWorld.mxml)。(如果该文件尚未打开,请使用 Project Navigator 打开该文件。)

桌面上的 Flex AIR 应用程序内含在 MXML WindowedApplication 标签内。MXML WindowedApplication 标签用于创建一个简单窗口,此窗口包括诸如标题栏和关闭按钮之类的基本窗口控件。

  1. 对 WindowedApplication 组件添加 title 属性,并为此属性赋予值 "Hello World"

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
    </s:WindowedApplication>
  2. 对此应用程序添加 Label 组件(将其置于 WindowedApplication 标签内),将 Label 组件的 text 属性设置为 "Hello AIR" ,并设置布局限制以使其保持居中,如下所示:

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
     
        <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
    </s:WindowedApplication>
  3. 在刚输入的 Label 组件标签之前,紧跟 WindowedApplication 开始标签添加以下样式块。

    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style>

这些样式设置将应用于整个应用程序,用稍稍透明的灰色呈现窗口。

现在,应用程序代码类似于如下内容:

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       title="Hello World"> 
     
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

接下来,您要更改应用程序描述符中的一些设置,以允许应用程序变得透明:

  1. 在 Flex Navigator 窗格中,在项目的源目录中找到该应用程序的描述符文件。如果项目名为 AIRHelloWorld,则该文件应该名为 AIRHelloWorld-app.xml。

  2. 双击该应用程序描述符文件,以便在 Flash Builder 中进行编辑。

  3. 在 XML 代码中,找到 systemChrome transparent 属性(属于 initialWindow 属性)的注释行。删除注释。(删除 "<!--" "-->" 注释分隔符。)

  4. systemChrome 属性的文本值设为 none ,如下所示:

    <systemChrome>none</systemChrome>
  5. transparent 属性的文本值设为 true ,如下所示:

    <transparent>true</transparent>
  6. 保存该文件。

测试 AIR 应用程序

若要测试编写完的应用程序代码,请在调试模式下运行它。

  1. 单击主工具栏上的“调试”按钮

    也可以选择“运行”>“调试” >“AIRHelloWorld 命令”。

    生成的 AIR 应用程序应如下例所示:

  2. 通过使用 Label 控件的 horizontalCenter verticalCenter 属性,文本位于窗口的中心位置。移动窗口或调整窗口大小,像对任何其他桌面应用程序所做的那样。

注: 如果此应用程序不编译,请修正输入代码时无意间造成的语法错误或拼写错误。错误和警告显示在 Flash Builder 的“问题”视图中。

打包 AIR 应用程序、为应用程序签名和运行应用程序

现在已准备好将“Hello World”应用程序打包为 AIR 文件以进行分发。AIR 文件是一个包含应用程序文件的归档文件,这里的应用程序文件为项目 bin 文件夹中包含的所有文件。在此简单示例中,这些文件为 SWF 和应用程序 XML 文件。将此 AIR 包分发给用户,用户随后使用此包安装此应用程序。此过程中的一个必需步骤是对包进行数字签名。

  1. 确保应用程序没有编译错误并按预期运行。

  2. 选择“项目”>“导出发行版”。

  3. 查看 AIRHelloWorld 项目和 AIRHelloWorld.mxml 应用程序是否已列出。

  4. 选择“导出为签名的 AIR 包”选项。然后单击“下一步”。

  5. 如果有现成的数字证书,请单击“浏览”找到并选中它。

  6. 如果必须创建新的自签名数字证书,请选择“创建”。

  7. 输入所需信息,然后单击“确定”。

  8. 单击“完成”以生成名为 AIRHelloWorld.air 的 AIR 包。

现在,既可以从 Flash Builder 的 Project Navigator 中安装和运行该应用程序,也可以通过双击该 AIR 文件从文件系统安装和运行该应用程序。