应用程序（Applications）

在我们开始使用Flash Builder创建实际的“HelloWorld”应用程序之前，让我们看看Flex应用程序的实际部分是什么 -

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

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

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

应用程序构建过程

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

使用Flash构建器构建代码时，Flash构建器将执行以下任务 -

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

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

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

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

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

• 在目标文件夹中复制其他flex模块（.swf文件，如sparkskins_xxx.swf，textLayout_xxx.swf）。

应用程序启动过程

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

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

Flex框架库

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

Client-side Code

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

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

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

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

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

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

• 使用。添加脚本块

• 包括外部ActionScript文件。

• 导入ActionScript类。

• 创建ActionScript组件。

公共资源

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

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>

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

Server-side code

这是应用程序的服务器端部分，它是非常可选的。 如果您没有在应用程序中进行任何后端处理，那么您不需要此部分，但如果后端需要一些处理并且您的客户端应用程序与服务器交互，那么您将不得不开发这些组件。

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