在 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 文件从文件系统安装和运行该应用程序。