Flex - 应用程序

在我们开始使用 Flash Builder 创建实际的 "HelloWorld" 应用程序之前，让我们先了解一下 Flex 应用程序的实际部分 −

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

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

像 HelloWord 这样的典型 Flex 应用程序不同部分的示例位置如下所示 −

应用程序构建过程

首先，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 文件，例如 sparkskins_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 文件夹下的主机 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 应用程序。