Flex开发指南

有关ActionScript 3的部分，请观看本人总结的ActionScript 3详解文章！

1.Flex 3是Adobe出品的开发RIA(Rich Internet Application富互联网应用)的工具，Flex 3包括:Flex 3 SDK软件开发包、编译器、Flex类库和调试工具。

2.Flex Builder 3是基于Eclipse之上的一个开发工具，界面和使用方法很类似Eclipse。

3.Flex的应用程序到底是什么东西？

*答:其实就是把可以用Flash播放的swf格式文件封装到了HTML页面中的应用程序，

然后程序(可以认为HTML)就可以借助Flash文件(swf)的功能(如事件等)来和服务器端进行交互。

*注意:要运行Flex的应用程序必须在客户端安装Flash Player 9或以上的播放器才行；

如果没有安装，那么打开Flex的应用程序时，IE下会提示通过ActiveX插件的形式在线安装。

4.Flash Player 9安装时会有两种版本:非调试版本和调试版本。非调试版就不用说了就是用来运行Application应用的；

*调试版的作用:********************后边讲到

5.Flex 3 Application应用的实现方式:主要借助MXML文件和ActionScript 3语言(AS3)来实现。

*MXML的作用:该文件为一个描述文件，非常类似于XML，只不过该文件中的标签都要以"mx"开头(因为名称空间指定)，例如 。

且该文件的根元素为 ，说白了就是通过这个文件来定义Flash的swf格式文件，

只不过编译后就直接将生成的swf封装到了满足"一定格式"的HTML文件中了。

**注意:我们知道Flash文件中只能有ActionScript代码，没听说过也可以有MXML文件，所以Flex中的这个MXML文件只是为了方便视图界面的开发和格式的美观优雅而特别订制的，

其实运行Flex的应用时，首先会将MXML文件中的定义内容转换成相对应的ActionScript 代码(变量、对象等)，

然后在运行所有ActionScript代码，也就是说如果有MXML的内容的话就先把它们转换成ActionScript，

然后将原来的ActionScript和刚转换成的ActionScript一起进行编译(编译后的文件默认会输出到bin-debug目录)，使之作用于Flash文件之上。

**注意:在MXML文件中只能在...标签内部使用段的形式书写ActionScript代码，

不能像在as文件中那样写ActionScript代码。

*ActionScript 3的作用:就如上说，就是用来定义Flash文件(swf)中的对象、事件等组件的语言。

**技巧:由上边说明知道ActionScript代码会在MXML文件内容转换完后才一起执行，这样一来就可以在ActionScript代码中直接引用MXML文件中通过元素定义(MXML会将元素的ID值最为定义的对象名称)的对象了，

无需担心会访问不到，因为现将MXML转换成ActionScript，然后在统一编译执行ActionScript代码，最后生成封装有swf文件的HTML等一些文件。

**注意:一般Flex应用中会将MXML和ActionScript这两种方式结合使用，以达到最佳效果。

6.Flex Builder 3提供了3种类型的项目:Flex项目、Flex库项目和ActionScript项目。

*Flex项目:就是我们要使用的。我们可以在项目中导入我们自己定义的Flex类库SWC文件(类似与Java中的jar包)。

它有一个html-template目录，存放的是模板文件，输出到bin-debug目录中的文件就是以html-template目录中模板文件为模板生成的。

所以修改html-template模板中的某个设置将会影响输出的内容，有的时候为了实现某个界面效果可以修改模板文件。

**注意:SWC库(库中可以封装图片、声音等素材文件、程序(组件或自定义组件)等)文件类型分为普通类型和RSL类型，

虽然都是库包，但是前者使用时一般要封装到swf文件中使用，就是不需另外导入对应的SWC库包；而后者就是使用RSL机制，

让swf文件在使用SWC库中的内容时才运行(加载SWC库包)，所以需要导入SWC库包到项目，这种属于动态机制。

*Flex库项目:就是将要封装的内容放到src中，然后编译项目，就会在bin目录中生成对一个的SWC库文件。

*ActionScript项目:就是编写ActionScript语言对应的.as文件，然后编译生成对应的SWC 库包，供Flex项目导入使用。

7.使用MXML来实现事件处理机制:用一个例子来演示。

<1>首先创建一个MXML Component文件，使用已有的ActionScript组件来组装一个自定义的组件。

其实就是创建一个新类，继承已经存在的组件(如Panel)，然后在自定义类中封装几个已存在的组件作为属性，以组成自己的类！！

[Event (name="login", type="flash.events.Event")]

internal function clickButton():void{

//向这个组件的事件流中制造一个新的事件，以便可以触发对应的监听器

this.dispatchEvent(new Event("login"));

}

]]>

*说明:因为表单有登陆按钮对象，所以要为按钮注册一个"登陆事件…(即鼠标点击事件),

当点击时当然就会触发事件监听方法，进而完成对应的功能(判断用户名、密码等)。

*注意: 这样一个自定义组件不能独立运行，只能供一个MXML文件引用而使用。

所以是否触发login类型的事件要看引用该组件对象的MXML文件中的声明了。见下边！！

<2>在MXML文件中引入自定义组件，使用元素引用(也可以从组件视图上拖动)。

import mx.controls.Alert;

//监听器方法

internal function loginClick(evt:Event):void{

Alert.show("登陆成功","提示");

}

]]>

*说明:login="loginClick(event)"中的login是事件类型，而loginClick则是事件监听器方法

<3>总结: 上边例子中，首先在自定义组件中为自定义组件声明了一个可以使用的事件类型"login"，

然后为自定义组件中的按钮的鼠标点击事件注册监听器方法为clickButton()方法，方法体中是为自定义组件的事件流中制造一个login类型的事件。

也就是说运行时，点击按钮后，会触发clickButton方法，然后该方法为自定义组件事件流中制造一个新的login事件，

这回导致注册了login事件类型的监听器被调用，即loginClick被调用。这是上边例子点击登陆后的操作流程。

<4>上边为自定义组件声明的事件类型都是ActionScript提供的事件Event类型的，我们当然也可以想在ActionScript中那样，定义自定义的事件类型。

//自定义事件类型

public class LoginEvent extends Event{

//保存用户名

public var username:String;

//保存密码

public var password:String;

public function LoginEvent(type:String){

super(type, false, false);

}

}

*修改<1>中代码:

[Event (name="login", type="com.events.LoginEvent")]

import com.events.LoginEvent;

internal function clickButton():void{

//创建自定义事件对象，并且指定类型名为"login"

var loginEvent:LoginEvent = new LoginEvent("login");

//得到用户名值

https://www.360docs.net/doc/47443160.html,ername = t_username.text;

//得到密码值

loginEvent.password = t_password.text;

//向事件流中制造事件

this.dispatchEvent(loginEvent);

}

]]>

*修改<2>中代码:

//此处参数类型改成了LoginEvent自定义类型，如果不改将会得不到username和password 属性值

internal function loginClick(evt:LoginEvent):void{

//判断用户名和密码

if((https://www.360docs.net/doc/47443160.html,ername == "admin") && (evt.password == "admin")){

Alert.show("登陆成功","提示");

return;

}

Alert.show("登陆失败","警告");

}

*说明:其实我们可以直接在按钮的鼠标点击事件中进行表单的验证，不过如果这样代码的复用能力就比较差，

因为我们可能会在很多地方都会使用自定义组件，如果验证写在鼠标单击按钮事件方法中，那么在每一次引用自定义组件后，

如果各个需求的验证方法不同，那么就要总是修改自定义组件的鼠标点击事件方法中的代码了。

而向上边那样写，就无需修改自定义组件中的代码了。

8.数据绑定: 就是当数据源对象的数据发生变化时，目标对象的数据会自动更新，而不需要我们再编写代码去强制更新。

* 绑定的内部原理: 绑定实际也是借助事件机制来完成的，当目标使用了数据绑定的时候，目标对象就会监听数据源对象的某一固定事件。当数据源发生变化时，数据源就会制造出那个固定的事件(ChangeEvent事件)，

此时目标对象的监听机制会被触发，即通知目标对象更新数据。不过这个过程都是由Flex 完成，不用我们手动干预！！

* 绑定的前提条件: 数据源对象的数据和目标对象的数据格式相同。

<1>方法一: 针对MXML文件可以使用的方法。在为组件对象的元素属性赋值时，使用"{}"直接将数据源直接绑定到对象组件的某个属性上，这样就可以了。

例子:

说明:当滑动条滑动时，将会改变滑动条的数值，因为我们将的fontSize属性值和滑动条的数值进行了绑定，

所以滑动条变化后的数值将会作为的fontSize属性值。

<2>方法二: 针对MXML和ActionScript结合使用的方法。

在组件对象的元素属性中,使用"{}"把某个ActionScript的方法的返回值作为数据源绑定到该组件对象属性上。

同时ActionScript的这个方法的参数要使用[Bindable]绑定符号。

例如:

//作为方法的参数, 如果不指定[Bindable]那么参数变化后不会通知目标进行更新数据[Bindable]

private var number:int;

//下边调用的方法，做平方运算

internal function square(num:int):int{

return num * num;

}

]]>

知道作为参数的number属性要使用[Bindable]进行声明，

表明为该属性指定一个监听器(由Flex自己完成)，当属性值变化时就表示触发该事件，然后就会通知数据绑定目标进行更新操作(也是由Flex自己完成) -->

**补充关于[Bindable]的知识:

**声明的标准格式: [Bindable(event="eventType")] 表示为添加该声明的属性(数据源)制造事件，就是说当数据源变化时，

向事件流中制造一个事件，以便触发事件(Flex内部定义好的)去通知目标对象进行更新操作(由Flex完成)！！

**我们上边为什么只是指定了[Bindable]呢？---- 因为如果不指定默认值为[Bindable(event="propertyChange")]，等价于[Bindable]，

就是说当属性改变的时候制造一个事件，以便Flex通知目标对象进行更新操作。

**扩展能力补充: [Bindable]不仅可以用在属性上，也可以用在getter或setter方法(2选1即可)上，也可以作用在类的声明上。

A.作用在getter或setter方法上: 成为方法级绑定。实现的效果和[Bindable]作用在属性上差不多。

例子:

//1.创建一个ActionScript的类

public class BindClass{

//属性处则不用进行绑定了

private var age:int;

//建立绑定关系

[Bindable]

public function get Age():int{

return this.age;

}

//属性的setter方法，[Bindable]作用在getter或setter方法中选其一即可

public function set Age(age:int):void{

this.age = age;

}

}

//2.在MXML文件中使用BindClass类

//定义一个类对象，供下边的MXML文件访问

private var bc:BindClass = new BindClass();

//下边调用的方法，做平方运算

internal function square(num:int):int{

return num * num;

}

]]>

B.作用在类的声明上: 称为对象(类)级别绑定，[Bindable]标签用于公有类时，

这个类的所有public类型的变量和setter、getter方式定义的方法都可以用于绑定。

例如:

//1.创建一个BindClass类型,并且绑定类级别的绑定

[Bindable]

public class BindClass{

//定义成public主要使用与演示效果

public var age:int;

//getter方法

public function get Age():int{

return this.age;

}

//属性的setter方法，[Bindable]作用在getter或setter方法中选其一即可

public function set Age(age:int):void{

this.age = age;

}

}

//2.在MXML文件中使用BindClass类: 此时就可以使用A中或第一种方法来实现了。

//定义一个类对象，供下边的MXML文件访问

private var bc:BindClass = new BindClass();

//下边调用的方法，做平方运算

internal function square(num:int):int{

return num * num;

}

]]>

//可以使用这种方案，也可以使用下边的(就是第一种方式)

或

<3>方法三: 使用标签来实现，source属性用于指定数据源，destination用于指定目标对象。该标签要和标签组合使用，

把指定的数据作为的数据源。

** 内容补充: 标签的使用,就是可以在该标签内部定义一些数据，定义形式和XML一样。

例如:

FLEX教程

张三

JA V A高级编程

李四

** 实现方法:

//把上边的作为数据源，这里source="https://www.360docs.net/doc/47443160.html,"中的books指的是中的id值(该对象就表示根元素)，

//所以books.book就是得到下的所有以数组的形式(第一个元素下标为0，取0的时候可以不指定下标)。

//destination="text_name.text"则是将数据源中的数据传到目标对象上。

//与上边的等价//表示目标对象

//结果说明: 显示"Flex教程"

<4>以上三种方法总结: 三种绑定的方法一般都是绑定的静态数据，就是都是在文件中准备好了的数据！！

<5>Object对象和动态对象: ActionScript中的Object对象和Java中的有区别，在ActionScript中Object是一个动态对象，可以为对象动态指定属性。

例如:

var obj:Object = new Object();

https://www.360docs.net/doc/47443160.html, = "admin"; //动态指定属性name并为其赋值

obj.age = 24; //动态指定age属性

obj.address = "北京海淀区万泉庄"; //动态指定address属性

或者: 进行初始化

var obj:Object = {name:"admin", age:24, address:"北京海淀区万泉庄"};

**注意:可以使用"dynamic"关键字来定义一个动态的类型，使用的时候可以向上边Object 一样，可以动态创建属性。

**说明:标签运行时会被转换成ActionScript语言中的Object类型的对象，因为Object是动态对象，

所以像source="https://www.360docs.net/doc/47443160.html,"这样指定数据源的时候，如果指定了错误的属性，并不会报告错误，因为是动态类型，

如果指定错误他会动态创建这个属性，所以将会导致匪夷所思的不可预见性的错误，为此Flex内部实现的时候当把转成Object的时候，

Flex又紧接着将Object转换成了ObjectProxy类型的对象，就是去除了Object的动态类型功能的包装代理类，这样才得以上边的程序运行没有后顾之忧！！

<6>工具类BindingUtils和动态绑定: mx.binding.utils.BindingUtils类

(API文档中没有该类的帮助，可以从Flex Builder的帮助中查看API文档，也可在Flex

Builder创建的类中按F1快捷键)

中提供了两个静态方法来处理动态绑定！！

**例子1: 需求要求动态创建一个Label对象，然后将它加入到应用程序中(相当于加入到Java Swing的Frame窗体中)。

而之前的方法是使用MXML创建一个，这样可以使用上边的方式进行绑定，而这里要求动态创建一个Label对象，

此时就是动态绑定，要借助BindingUtils.bindProperty()方法来进行动态绑定。

//定义一个Label类对象

internal var label:Label = new Label();

//初始化方法，运行应用程序时自动运行该方法

internal function init():viod{

//将动态创建的label对象添加到应用程序窗体

this.addChild(label);

label.x = "300"; //设置label对象的属性值

label.y = "100";

label.width = "200";

label.height = "50";

label.text = "10"; //刚开始Label中显示10这个数字

//为label对象动态绑定，将滑动条的value属性和该label对象的text属性进行绑定BindingUtils.bindProperty(label, "text", text_show, "value");

}

]]>

**例子2: BindingUtils.bindSetter()方法的应用。修改上边的例子！

BindingUtils.bindProperty(label, "text", text_show, "value");修改成

BindingUtils.bindSetter(setTxt, text_show, "value");意思是当text_show组件对象的value属性值发生改变时，要调用setTxt()方法，

调用的同时将text_show对象的最新value属性的值作为参数传给setTxt()方法。

除了修改上边语句外，还要添加一个setter方法，其实该方法的定义名称可以随意，不过这里为了见名知意，就定义成了setTxt()名称!!

internal function setTxt(txt:String):void{

label.text = txt; //将Label对象的text属性值等于最新版本的text_show的value属性值

}

9.Flex的样式(style): 使用方式有多种。

<1>直接使用CSS文件，系统默认使用default.css文件。

引入格式:

<2>使用Flex的视图编辑器模式，直接操作组件对象的style样式！！

<3>如果是动态创建的组件对象，那么可以通过调用对象的setStyle()方法来设置样式，也可通过getStyle()方法得到样式！！

<4>使用StyleManager类来操作样式: 结合CSSStyleDeclaration类一起使用！！

例如:

internal function init():void{

//创建一个样式对象

var cs:CSSStyleDeclaration = new CSSStyleDeclaration("myCssStyle");

cs.setStyle("color", "#000000"); //设置样式对象的颜色属性为#000000色

//将cs样式对象作用与程序中所有Panel类型的对象上

StyleManager.setStyleDeclaration("Panel", cs, true);

}

]]>

*说明: MXML文件中的标签引用CSS文件中定义的样式的时候一般使用styleName属性来引用！！

<5>定义CSS文件的格式:

/* 全局样式，使用global关键字定义，就是对所有具有以下指定的属性(像borderColor 属性)的标签，它们的对应属性值都是#767473 */

global

{

borderColor: #767473;

}

**注意:在ActionScript代码中可以使用

var globaalStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration("global");来得到全局样式对象，

在程序中可以动态的修改对应的样式属性的值！！

/* 作用于标签及其子标签的样式*/

Application

{

borderStyle: "none";

}

/*

可以使用MXML文件中标签的styleName属性来引入这个样式，例如，styleName="comboDropDown"其中"."不用写入

类似于HTML中CSS中的类选择方式，HTML标签中可以使用class属性来指定这种类型的CSS样式定义！！

*/

.comboDropDown

{

backgroundAlpha: 0.6;

}

10.Flex的主题: 主题是一套配置完整的CSS样式风格！！Flex提供的几种主题(可以在Flex builder的帮助中以"theme"关键字搜到)文件类型都以".swc"为扩展名！！

其实就是将CSS打成一个swc库包，打包方法有很多，可以使用Flex提供的命令行工具(compc命令，可参看以"theme"为关键字搜到的Flex Builder帮助内容)，

也可以使用Flex Library项目对src中的内容打包成swc包进而导出！！

*主题文件的使用:

**方法一: 在运行应用程序的时候传入附加参数"-theme xxx.css" ; 或者，修改项目的属性，在"Flex Compiler"中的"additional compiler arguments"处的结尾添加"-theme xxx.css"参数。

**方法二: 修改Flex-config.xml(在Flex安装目录的sdks\3.2.0\frameworks目录中可找到)中的标签，来达到修改设置主题的效果！！

例如:

themes/Smoke/Smoke.css

*说明: 可以到Flex Builder的安装目录的sdks\3.2.0\frameworks\themes目录中拷贝Flex提供的几种主题，默认Flex使用的是"HelloClassic"主题。

注意: 文章中提到的《Flex3 Component Explorer》文档可到本人的下载空间中下载获得！