Adobe Flex教程

Flex - 应用程序

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

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

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

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

名称	位置
项目根目录	HelloWorld/
Flex Framework库	构建路径
公共资源	html-template
客户端代码	table table-bordered/com/it1352/客户端
服务器端代码	table table-bordered/com/it1352/服务器

应用程序构建过程

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

当我们使用Flash构建器构建代码时，Flash构建器将执行以下任务 :

将源代码编译为HelloWorld.swf文件.
编译HelloWorld.html (存储在html-template文件夹中的文件index.template.html中的swf文件的包装文件)
复制HelloWorld.swf和HelloWorld.html文件目标文件夹，bin-debug.
复制swfobject.js，一个负责在目标文件夹中的HelloWorld.html中动态加载swf文件的JavaScript代码，bin-debug
以目标文件夹中名为frameworks_xxx.swf的swf文件的形式复制框架库，bin-debug
在目标文件夹中复制其他flex模块(.swf文件，如sparkskins_xxx.swf，textLayout_xxx.swf).

应用程序启动过程

打开\ HelloWorld \ bin中提供的HelloWorld.html文件任何网络浏览器中的-debug文件夹.
HelloWorld.swf将自动加载，应用程序将开始运行.

Flex Framework库

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

Sr.No	Nodes&说明
1	playerglobal.swc 此库特定于您机器上安装的FlashPlayer，并包含Flash播放器支持的本机方法.
2	textlayout.swc 此库支持与文本布局相关的功能.
3	framework.swc 这是Flex框架库包含Flex的核心功能.
4	mx.swc 此库存储mx UI控件的定义.
5	charts.swc 此库支持图表控件.
6	spark.swc 此库存储spa的定义rk UI控件.
7	sparkskins.swc 此库支持spark UI控件的外观.

客户端代码

Flex应用程序代码可以用 MXML 以及 ActionScript .

Sr.No	Type&说明
1	MXML MXML是一种XML标记语言，我们将用它来布局用户界面组件. MXML在构建过程中编译为ActionScript.
2	ActionScript ActionScript是一种面向对象的过程编程语言，基于ECMAScript(ECMA-262)第4版草稿语言规范.

Sr.No

Type&说明

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文件夹下的图像.它包含以下文件 :

Sr .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

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

示例Hello World 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>

下表给出了上述代码脚本中使用的所有标签的说明.

Sr.No	节点&说明
1	应用程序定义始终是Flex应用程序的根标记的Application容器.
2	脚本包含ActionScript语言的业务逻辑.
3	VGroup 定义一个垂直分组容器，它可以垂直方式包含Flex UI控件.
4	标签表示一个Label控件，一个显示文本的非常简单的用户界面组件.
5	按钮表示一个Button控件，可以点击进行一些操作.