Flex - 应用程序

---

---

在使用 Flash Builder 创建实际的 “HelloWorld” 应用程序之前，让我们先了解 Flex 应用程序的实际组成部分。

Flex 应用程序由以下四个重要部分组成，其中最后一个部分是可选的，但前三个部分是必须的。

• Flex 框架库
• 客户端代码
• 公共资源 (HTML/JS/CSS)
• 服务器端代码

典型 Flex 应用程序（如 HelloWord）的不同部分的示例位置如下所示：

应用程序构建过程

首先，Flex 应用程序需要 Flex 框架库。稍后，Flash Builder 会自动将库添加到构建路径。

当我们使用 Flash Builder 构建代码时，Flash Builder 将执行以下任务：

• 将源代码编译成 HelloWorld.swf 文件。

• 从存储在 html-template 文件夹中的 index.template.html 文件编译 HelloWorld.html（swf 文件的包装文件）。

• 将 HelloWorld.swf 和 HelloWorld.html 文件复制到目标文件夹 bin-debug 中。

• 将 swfobject.js（一个负责在 HelloWorld.html 中动态加载 swf 文件的 JavaScript 代码）复制到目标文件夹 bin-debug 中。

• 将框架库以名为 frameworks_xxx.swf 的 swf 文件的形式复制到目标文件夹 bin-debug 中。

• 将其他 Flex 模块（.swf 文件，例如 sparkskins_xxx.swf、textLayout_xxx.swf）复制到目标文件夹中。

应用程序启动过程

• 在任何 Web 浏览器中打开位于 \HelloWorld\bin-debug 文件夹中的 HelloWorld.html 文件。

• HelloWorld.swf 将自动加载，应用程序将开始运行。

Flex 框架库

以下是关于一些重要框架库的简要说明。请注意，Flex 库使用 .swc 表示法表示。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

客户端代码

Flex 应用程序代码可以使用 MXML 和 ActionScript 编写。

在 Flex 中，我们可以混合使用 ActionScript 和 MXML 来执行以下操作：

• 使用 MXML 标记布局用户界面组件。

• 使用 MXML 声明性地定义应用程序的非可视方面，例如访问服务器上的数据源。

• 使用 MXML 在用户界面组件和服务器上的数据源之间创建数据绑定。

• 使用 ActionScript 在 MXML 事件属性内定义事件侦听器。

• 使用标签添加脚本块。

• 包含外部 ActionScript 文件。

• 导入 ActionScript 类。

• 创建 ActionScript 组件。

公共资源

这些是 Flex 应用程序引用的帮助文件，例如位于 html-template 文件夹下的主机 HTML 页面、CSS 或图像。它包含以下文件：

HelloWorld.mxml

这是实现应用程序业务逻辑的实际 MXML/AS（ActionScript）代码，Flex 编译器将其转换为 SWF 文件，该文件将在浏览器中由 Flash Player 执行。

HelloWorld Entry 类的示例如下：

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

下表描述了上述代码脚本中使用的所有标签。

服务器端代码

这是应用程序的服务器端部分，它是完全可选的。如果您不在应用程序中执行任何后端处理，则不需要此部分；但如果后端需要一些处理，并且您的客户端应用程序与服务器交互，则您必须开发这些组件。

在下一章中，我们将使用所有上述概念使用 Flash Builder 创建 HelloWorld 应用程序。