Flex是Adobe公司推出的一项RIA(Rich Internet Application富互联网应用程序)开发技术,和Ajax一样都是Web2.0非常流行的前台开发技术,Flex比Ajax的优势是所有的浏览器的效果都一样,做出来的效果更炫,通常用于许多基于Web游戏开发。其缺点是浏览器必须安装Flash插件,因为Flex编译过后会生成Flash格式的文件在浏览器中运行,同时由于Flex生成的文件一般比较大,如果优化的不好,会影响应用速度。
我在上一家公司中,因为项目需要,我曾经学习和使用了半年时间的Flex和Flash技术,虽然到目前为止我还是这方面的菜鸟,只能算是了解了一些入门级的基础知识,总结一下所学的基本知识和有兴趣的读者共同分享,以Flex3.0为准。
1.Flex和Flash的区别:Flex侧重业务逻辑处理,主要面向应用程序开发中,Flash侧重宣传和展示,主要面向多媒体设计者。
2.Flex程序的两个组成部件:
A.”.MXML”文件:用于描述界面元素的文件。
B. ActionScript:用于对页面元素进行操作和事件响应处理。Flex和Flash都使用ActionScript脚本编程语言。
3.Flex页面元素的Bindable属性:标识元素或变量是可动态绑定的,可以实时反映状态变化。绑定就是从一个组件分配数据到另一个组件的过程,Flex绑定有一个内置的广播/监听方法,它会自动监听被绑定数据的改变并且立即更改到任何一个绑定它的地方。
使用例子:
[Bindable] 属性变量
4.DataProvider属性:常常和Bindable属性一起使用,用于指定绑定数据的来源。
5.Flex和后台通信方式:
HTTPService(Servlet)方式、WebService方式、RPC(RMI)方式。
6.Flex的HTTPService和后台通信方式:
<mx:HTTPService id=”...” url=”...”/>
<mx:HTTPService>标签代表HTTPService对象,当调用HTTPService对象的send()方法时,将发出对指定url的HTTP请求,并且返回HTTP响应。可以选择向指定的url传递参数,如果没有使用基于服务器的代理服务,则只能使用HTTP GET或POST方法。如果将useProxy属性设置为true并且使用基于服务器的代理服务时,则还可以使用HTTP HEAD、OPTIONS、TRACE和DELETE方法。
具体使用方法:在Flex框架下使用HTTPService组件使用GET或者POST请求来获取数据时:
(1).创建一个HTTPService对象,给这个对象定义一个名字并分配一个url以便获取数据,url可以是相对路径,也可以是绝对路径。
(2).使用HTTPService对象的send()方法发送请求。
(3).使用HTTPService对象的Result事件来指定数据成功返回后的回调函数。
7.Flex的WebService和后台通信方式:
<mx:WebService id=”...” wsdl=”...”/>
WebService主要是为了使原来各孤立的站点之间信息能够相互通信、共享而提出的一种接口。
补充说明一下WSDL,使不了解WebService的人有所了解:
WSDL(Web Service Description Language):是一种使用XML编写的文档,这种文档可描述某个Web服务,它规定服务的位置,以及此服务提供的操作。
WSDL元素:
<PortType/>:Web Service执行的操作 <message/>:WebService使用的消息
<types/>:Web Service使用的数据类型 <binding/>:WebService使用的通信协议
WSDL编写4个步骤:
(1)定义服务接口。 (2)指定参数(消息)。
(3)消息传递和传输(绑定)。 (4)创建WSDL文件的概要。
更多的关于WebService和WSDL的相关内容,请到网络上查阅相关资料。
8.Flex的RPC(RMI)和后台通信方式:
<mx:RemoteObject id=”...” destination=”...”/>
通过RPC(RMI)方式可以访问使用Action Message Format(AMF)协议编码的java对象的方法。AMF使用二进制编码,因此比WebService方式效率更高。
9.Flex的自定义组件
每个Flex工程中只有一个主的MXML文件,它是整个工程的应用程序入口。其起始标记是<mx:Application>标签,该标签包含程序中的所有其他组件。其他的其起始标记不是<mx:Application>标签MXML文件都是页面元素或者组件,自定义组件可以无缝集成到Flex程序中,和Flex内置的组件一样。
自定义组件的开发:
(1).每个自定义的Flex组件是一个单独的MXML文件,但是不能使用<mx:Application>标签。
(2).要为自定义组件指定命名空间,在MXML文件的XML文档说明中添加,例如:
xmlns:comp=”自定义组件所在的目录,如若要自定component目录下的所有组件,可以写为:component.*”,就指定了自定义组件的命名空间为comp。
(3).使用自定义组件:
使用自定义组件的命名空间来引用,如:
<comp:自定义组件名称>
10.ActionScript集成进MXML两种方式:
A.直接嵌入<mx>标签中,两种情况
(1)在绑定时。(2)在事件处理时。
B.写在MXML的<mx:Script>标签的CDATA区中:
基本框架为:
<mx:Script> <!--[CDATA[ ActionScript脚本代码 ]]--> </mx:Script>
脚本通常放在文件开始部分,在Application标签下面。
11.Flex中所有的容器都是继承自UIComponent类,UIComponent继承Container类。
4种常见的布局容器:应用,面板,HBox/VBox,画布。
组件布局过程:
(1).从通过计算嵌套在组件最内层的组件来计算它的尺寸,然后向外扩张来计算其他组件的尺寸。
(2).从最外层组件开始,向最内层的组件来布局。
12.Flex事件基础:
Flex每次发生事件时,一个专门的事件对象就产生了,每个事件都是一个Flex框架的Event类或者Event子类的实例。
事件的一些属性:
type:事件的类型,如:click。
target:一个关于广播事件对象组件实例。
所有事件封装在两个包中:flex.event和flash.events(这些包不需要导入,使用严格匹配的子类可以加快编译速度)。
13.两种在组件运行前启动的系统事件:
(1)initialize:组件创建前执行。
(2)creationComplete:组件创建布局结束后执行。
14.组件注册事件监听器方法:
组件名.addEventListener(事件类型,监听器名(方法名,注意方法名后不带“()”,因为不是调用))。
15.Flex创建自定义事件方法:
(1).方法1:
<mx:Metadata> [Event(name=”自定义事件名称”,type=”flash.events.Event”)] </mx:Metadata>
type也可以是自定义事件的全路径名称。
(2).方法2:
在actionScript脚本代码中创建并分发事件。
var 自定义事件对象 : Event = new Event(“自定义事件名”);
dispatchEvent(自定义事件对象);
16.自定义事件创建5个步骤:
(1).使用事件的meta标签或者使用actionScript脚本代码定义事件名称和类型。
(2).实例化事件。
(3).分派事件给父组件,然后在事件处理程序中处理它。
(4).创建事件处理器。
(5).使用事件对象中的信息。
注意:自定义事件类必须覆盖clone()方法。
17.Flex事件处理:
目标对象:分发事件的对象。
当前目标对象:当前监听器检查被分发事件的对象。
Flex事件处理机制很灵活,可以在事件分发的目标对象上处理,也可以在其父对象容器中处理,有时在父对象上处理事件比在分发器对象本身更方便。
18.Flex事件传播3个阶段:
(1).捕获(Capturing):从最外层的祖先开始向子孙检查都已经注册。
(2).目标(Targeting):检查目标对象的监听器。
(3).上浮(Bubbling):在目标对象检查完成事件监听器后,应用程序将检查这个阶段所有父对象,祖先对象注册的监听器。
捕获和上浮是两个相反的过程。
19.Flex中使用事件监听器的简单用法:
//声明事件监听器对象 var zc:Object = new Object(); //定义监听事件 zc.onMouseMove=function(){ tarce(_xMouse) } //注册事件监听器 Mouse.addLisener(zc);
20.SWC介绍:
SWC是Flex组件的打包文件,SWC文件包含一个SWF文件和一个catalog.xml文件,如同java中的jar文件一样,SWC通常是常用的flex组件的打包,在Flex工程中可以直接导入使用。
21.Flex使用Flash中影片剪辑:
Flex的架构:
UIComponent>FlexSprite>Sprite>DisplayObjectContainer>InteractiveObject>DisplayObject
Flash的架构:
Sprite>DisplayObjectContainer>InteractiveObject>DisplayObject
两者的架构有较大区别,因此Flash的影片剪辑不能在flax中直接使用,通常需要使用lex Component Kit插件将flash的影片剪辑编译为SWC在Flex中使用。