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，这是一个 JavaScript 代码，负责在目标文件夹 bin-debug 的 HelloWorld.html 中动态加载 swf 文件

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

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

应用程序启动流程

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

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

Flex 框架库

以下是几个重要框架库的简要细节。请注意，Flex 库使用 .swc 表示法表示

客户端代码

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

在 Flex 中，我们可以混合 ActionScript 和 MXML，以执行以下操作 -

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

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

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

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

• 使用添加脚本块标签。

• 包括外部 ActionScript 文件。

• 导入 ActionScript 类。

• 创建 ActionScript 组件。

公共资源

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

HelloWorld.mxml

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

示例 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应用程序。