《FLEX简介.ppt》由会员分享，可在线阅读，更多相关《FLEX简介.ppt（56页珍藏版）》请在三一办公上搜索。
1、1,Flex 简介,Tony,第一部分：走近Flex,什么是Flex？,Flex是一个针对企业级富互联网应用的表示层解决方案。富互联网应用程序（Rich Internet Application，RIA），传统的网络程序由HTML语言来标记表现层，只适合图文，形式上受限。RIA具有强交互性，表现内容丰富。swf，一种RIA表现形式。Flex，用编译器来生成swf，实现Web应用（Flash Player）。,Flex和Flash的比较,共同点：都生成SWF文件，通过Flash Player来解释运行不同点：产品市场定位差异：Flex是一种RIA解决方案，企业级的网络应用。Flash是强大的矢量
2、动画创造工具，也可以用于网络开发。开发成本，效率，重用性上，Flex高于Falsh，且Flex有突出的数据交互能力。针对不同的开发人员：Flash动画设计者；Flex程序员。,Flex的特性,使用矢量图形。Flex中的所有组件，都广泛利用了矢量图形，同时，Flex也提供了矢量图形的API丰富的组件库 Flex的自带了数目可观的组件，组件采用了全新的架构，可以自定义组件对多媒体的广泛支持网络视频，即时视频聊天（通过与其他流媒体服务器进行通信来实现）与服务端的通信除了加载XML，文本资料外，还可以和ASP，JSP等多种服务端程序通信，还支持Remoting和Socket等高级数据通信,Flex2.
3、0新特性,Flex frameworkFlex2.0核心，提供了一套丰富的可扩展的用户界面的组件，一个用来控制布局的和用户交互的灵活模型已经一个功能强大的基础架构ActionScript3.0Flex脚本语言。3.0有了很大的改进，增强处理运行错误的能力，面向对象，支持二进制数据处理，支持Socket通信等。Flash Player9.0包含AVM2（ActionScript Virtual Machine）Flex Builder2.0建立在Eclipse平台上面的全新的开发工具,Flex和它的对手,Ajax优点：没有设计新技术，技术免费，广泛的平台，不需要第三方插件缺点：跨平台浏览器代码复
4、杂，界面元素单一，通信方式单一，对多媒体支持不够。Flex和Ajax结合使用Flex-Ajax Bridge技术Openlazlo开源的RIA开发平台，同样采用XML语言描述界面，结合Laszlo语言，同样面向对象，基于组件，数据驱动，最后同样生成swf。缺点：运行效率低，软件不稳定,如何获得Flex,Flex Framework包含在免费的开发套件Flex SDK中，可以独立安装，SDK中含有Flex编译器，再通过文本编辑器，XML编辑器，编写Flex程序。安装集成开发环境Flex Buidler2.0，整合了Flex SDK2.0。功能强大。缺点：需要收费，标准版$499,整合了图表组件的
5、Flex Builder 2.0 售价为$799,安装Flex Builder,两种方法：1，独立安装，不需要第三方软件支持2，插件安装，Flex Builder2.0作为Eclipse的一个插件进行安装,第二部分 Flex基础知识,Flex程序组成,通常情况下，Flex程序由以下三种文件组成以mxml为后缀的程序文件以as为后缀的ActionScript文件以css为后缀的样式表文件MXLM语言是专门用于Flex程序中描述接秒表现的一种XML标记语言，可以用来管理程序的整体布局，控制组件的样式和外观，也可以构建非可视化对象。MXML文件好比大脑，as文件和css文件是它的手和脚，主程序MXM
6、L文件将项目中的所有文件组合在一起，形成一个有机整体。,HelloWorld.mxml,MXML命名规范,区分大小写，文件名和变量名大都区分大小写以小写的“mxml”作为后缀，文件名不能和ActionScript类文件同名（类型冲突），不能命名为“application”，“application”是主程序文件所采用的默认标记，不可以再被使用。,MXML文件结构（1）,可以参照XML语法来分析MXML第一行声明XML文件的语法版本和文件编码格式Mx:Application是一个特殊的标签，程序入口的运行文件，只有一个,MXML文件结构（2）,xmlns:mx=http:/代表mx空间下的But
7、ton对象自定义命名空间 xmlns：myComp=“components.*”,MXML文件结构（3）,节点属性：mx:Application标签，layout属性，定义了Application节点元素的布局方式：“absolute”mx:Label标签，x=“182”y=“109”定义了这个Lable的位置,组件的分类,按照功能分为三大类：布局类：包括所有的容器类组件如Panel等，Spacer、HRule和VRule不是容器类，但主要用于布局，也归于此类导航类：包括菜单条、按钮条等各种导航功能的组件交互类：包括内容展示、数据交互相关组件，如按钮、下拉框、图片等,使用组件,在MXLM中组件
8、使用非常简单插入一个按钮：示例：,自定义MXML组件,将程序中功能独立或者需要反复使用的部分定义成一个用户组件每个组件对应一个MXML文件。,自定义组件示例,myImage.mxml使用自定义组件,编写ActionScript,ActionScript是程序的基础。由于Flex中不存在时间轴，没有Flash中的美术创造工具，所有的界面都是依靠ActionScript来实现。MXML文件经过编译最后也被转化成ActionScript来执行。在一个Flex程序中，主程序会被转化成Aplication对象的子类，自定义组件会被转化成父级对象的子类在MXML文件中使用AS；创建外部AS文件；创建Act
9、ionSpript类文件,Mxml文件编译过后代码,示例：Example_1.mxml编译成后的ActionSpript：class Example_1 extends Application/myImage.mxml相应的为class myImage extends Image/,1、在MXML文件中使用ActionSpript,在MXML中使用ActionSpript一般有2种方式在组件的事件属性中使用ActionScript来处理事件在MXML文件中插入ActionScript块,2、创建外部ActionScript文件,在MXML文件中插入ActionScript代码量比较大不易维护时
10、，可以将代码单独拿出来。示例：ass.as文件internal function doClick():voidtip_txt.text=Hello World!;,3、创建ActionScript类文件,Test.as文件在主程序中创建对象的实例,编辑非可视化对象,非可视化对象，包括所有不可见的组件。1.创建数据2.MXML语句创建类实例,使用容器控制界面布局,在Flex中，界面由组件组成，而组件又被放置在一个个的特定的组件中，这些组件称为容器,1、管理程序的布局,Application的布局Application是一个特殊的容器，位于界面元素层级的根部，包含了整个程序中的所有元素，控制程序的
11、整体布局Canvas，VBox，HBox按功能将程序切割成若干部分，进行局部的布局控制用DivdedBox分割界面,Application标签设置示例,有3个属性和布局息息相关：layout、horizontalAlign、verticalAlign，Layout起决定作用，其他2个受限于它。layout：absolute、vertical、horizontal当layout为absolute时，horizontalAlign和verticalAlign属性不起作用。x，y默认为0,2、窗口布局,操作系统中，窗口是我们常见的表现形式。Panel组件TitleWindow组件,3、动态控制对象的
12、布局,所谓动态布局，就是容器本身可以处理动态数据使用Tile组件显示多个按钮Grid组件类似于HTML中的表格,4、导航容器,导航类允许用户在其子级元素之间自由切换，子级元素必须是容器类型，子级容器中可以嵌套其他容器和非容器组件。According组件：一个可以折叠的导航器ViewStack组件，若干个重叠在一起的字容器组成TabNavigator：快速导航,5、表单布局,From容器,使用组件处理数据和交互,常用组件的使用ButtonCheckBoxComboBox导航类组件ToggleButtonBarTabBar,行为对象和动画效果,一个行为由一个触发器和一个动画效果组成，触发器是一个用
13、户动作，往往伴随着一个事件，如鼠标点击，一旦动作发生，触发器被激活，动画就开始播放。动画效果是由非可视化组件完成的，Flex中包含多种动画效果，如淡入淡出等触发器和事件并不相同。针对一个事件的触发器，受到事件的制约。比如一个点击事件，当点击动作发生后，点击对象先派发事件，然后再去初始化行为触发器，最后才是行为对象的动画，事件可以被监听而触发器不可以。,示例,ml version=1.0 encoding=utf-8?,第三部分：ActionSpript和Flex,ActionScript3.0,相比AS2.0：AS3.0支持运行期间的数据类型验证增强的异常处理机制使用新的虚拟机AVM2（Act
14、ionScript Virtual Machine），AVM2比AVM1快10倍以上面向对象的编程思想封装继承可重用性,AS3.0语法类（1）,创建类和对象package 包名 修饰词 class 类名/代码块一个类必须放在包中，如果类和主目录处于同一级，则不需要包名修饰词：Public：共有类型Internal：内部类型Dynamic:动态类型Final：终点类型,AS3.0语法类（2）,生成对象：var 对象名：类名=new 类的构造函数;Eg：var myExample:Example=new Example();构造函数（constructor）：和类名相同的函数，必须是public类
15、型Package treepublic class Examplepublic function Example():void/,AS3.0语法属性和函数(1),Package treepublic class Exampleprivate var str：String=“Hello”；public function Example():voidvar str:String=“tmp String”trace（this.str）;/修饰词：publicinternalprotectprivate,AS3.0语法属性和函数(2),AS3.0支持函数的不定参数，参数的个数可以动态改变，不定参数可以
16、使用args的形式,其中args是一个数组，存放多余的参数，egPublic function doTest(s:String,rest):voidTrace(“doTest:”+s);For(var i:uint=0;irest.length;i+)Trace(resti);调用时，传入多个参数：doTest(“test”,“第二个”，“第三个”，“第四个”)；,AS3.0语法属性和函数(3),静态属性、函数：使用Static关键词静态常量：const继承：extends接口,数据类型,Boolean：布尔类型int：整数类型，取值范围-21474836482147483647，当值超出范围
17、，自动转化为Number类型Null：只有一个值null，代表空值Number：整数类型和浮点类型String：字符串类型，以Unicode编码存放uint：正整数类型，取值范围：04294967295void：值为undefinded，只可用作函数的返回类型,控制程序的流程,选择语句if流程控制If(条件表达式)elseswitch流程控制Swith(条件表达式)Case 值1：/代码Break；Case 值1：/代码Break；default：/代码条件表达式的值可以是任意类型,循环语句,for循环for.in循环for(var 属性名 in 对象)/对象属性名for each.infor
18、 each(var value:*in student)Trace(value);whiledowhile,跳转语句,breakcontinue,Flex的事件机制,事件机制是AS3.0整体架构中核心的核心响应用户的输入;响应用户的键盘和鼠标事件；响应操作系统的信息反馈等等，这些称为事件Flex程序的初始过程中，在不同的运行阶段派发不同事件，进入待机状态后，又处理用户的各种事件和系统事件当一个对象派发出一个事件，需要另一个对象进行处理Flex中所有的组件都会派生自己的事件，为组件注册监听器，一旦事件发生，监听方法就会被自动调用。派发的事件是一个携带了重要数据的对象,事件机制的工作流程,分为三步
19、：（1）捕获阶段，捕获事件（capturing）（2）目标阶段，检测目标的监听器（targeting）（3）冒泡阶段，事件冒泡（bubbling）,一个事件示例,数据绑定,使用数据绑定时，Flex会自动把一个对象的数据复制，提供给另一个对象使用，提供数据一方的称为数据源对象，使用数据的一方称为目标对象。当数据源对象的数据发生变化时，目标对象的数据会自动更新，这就是数据绑定,数据绑定类型,将后台数据(通过Web Service或Remoting方式得到)绑定给控件把控件数据绑定给后台通信对象，发送给后台服务器端后台返回数据和数据模型（Model）进行绑定组件和对象属性的数据绑定,数据绑定的简单例子,其他,Flex加载外部内容使用HTTPService和Web ServeiceFlex与PHPFlex与Java,结束,Thanks！,
