Flex - 应用程序( Applications)

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

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

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

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

名称	地点
项目根目录	HelloWorld/
Flex框架库	构建路径
公共资源	html-template
客户端代码	table table-bordered/com/iowiki/client
服务器端代码	table table-bordered/com/iowiki/server

应用程序构建过程

首先，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表示法表示

S.No	节点和描述
1	playerglobal.swc 此库特定于计算机上安装的FlashPlayer，并包含Flash播放器支持的本机方法。
2	textlayout.swc 此库支持与文本布局相关的功能。
3	framework.swc 这是flex框架库包含Flex的核心功能。
4	mx.swc 该库存储mx UI控件的定义。
5	charts.swc 该库支持图表控件。
6	spark.swc 该库存储spark UI控件的定义。
7	sparkskins.swc 此库支持spark UI控件的外观。

Client-side Code

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

S.No	类型和描述
1	MXML MXML是一种XML标记语言，我们将用它来布置用户界面组件。 MXML在构建过程中编译为ActionScript。
2	ActionScript ActionScript是一种面向对象的过程编程语言，基于ECMAScript（ECMA-262）第4版草案语言规范。

S.No

类型和描述

MXML

MXML是一种XML标记语言，我们将用它来布置用户界面组件。 MXML在构建过程中编译为ActionScript。

ActionScript

ActionScript是一种面向对象的过程编程语言，基于ECMAScript（ECMA-262）第4版草案语言规范。

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

使用MXML标记布局用户界面组件
使用MXML以声明方式定义应用程序的非可视方面，例如访问服务器上的数据源
使用MXML在服务器上的用户界面组件和数据源之间创建数据绑定。
使用ActionScript在MXML事件属性中定义事件侦听器。
使用。添加脚本块
包括外部ActionScript文件。
导入ActionScript类。
创建ActionScript组件。

公共资源

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

S.No	文件名称和描述
1	index.template.html 主持HTML页面，带占位符。 Flash Builder使用此模板使用HelloWorld.swf文件构建实际页面HelloWorld.html。
2	playerProductInstall.swf 这是一个用于在快速模式下安装Flash Player的Flash实用程序。
3	swfobject.js 这是负责检查已安装的Flash播放器版本以及在HelloWorld.html页面中加载HelloWorld.swf的JavaScript。
4	html-template/history 此文件夹包含用于应用程序历史记录管理的资源。

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>

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

S.No	节点和描述
1	Application 定义始终是Flex应用程序的根标记的Application容器。
2	Script 包含ActionScript语言中的业务逻辑。
3	VGroup 定义垂直分组容器，该容器可以垂直方式包含Flex UI控件。
4	Label 表示Label控件，一个显示文本的非常简单的用户界面组件。
5	Button 表示一个Button控件，可以单击该控件执行某些操作。

Server-side code

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

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

<上一篇.Flex - 环境

Flex - 创建应用程序( Create Application).下一篇>

Flex - 教程

Flex - 概述

Flex - 环境