Flex 入门教程 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代码负责在目标文件夹中的HelloWorld.html中动态加载swf文件，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表示法表示

客户端代码

Flex application code can be written in MXML and ActionScript.

In Flex, we can mix ActionScript and MXML, to do the following:

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

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

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

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

• 使用< mx:Script>添加脚本块 标签。

• 包括外部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创建Hello World应用程序。