讲解软件开发flex动态效果课件

Flex开发 5、开发实例 1、Flex简介 2、Flex机制、通信 3、Flex安装、集成 4、常用控件 6、开发技巧 Flex简介 开源框架 支持RIA 采用GUI界面开发 编译简单它可以把运行中的MXML（Flex标记语言）和ActionScript编译成FLASH应用程序（即二进制的 SWF文件）。 RPC（Remote Procedure Call Protocol）远程过程调用协议 AMF(Action message format) 基于http协议之上交换数据的协议 RIA （Rich Internet Applications) 富互联网应用 Flex技术主要技术框架 1. 描述应用程序界面的XML语言（MXML） ； 2. 符合ECMA规范的脚本语言（ActionScript) ，处理用户和系统的事件，构建复杂的数据模 型； 3. 一个基础类库； 4. 运行时的即时服务； 5. 由MXML与ActionScript文件生成swf文件 的编译器。 Flex机制 Flex事件机制（一） Flex事件机制是观察者模式，即首先要注册事件，事件分发后通过事件响应函数进行处 理。 例如：button.addEventListener(“click”,onClick);/ Internal function onClick(evt:MouseEvent):void txt.text=“clickabutton!”;/事件响应函数 通过addEventListener注册函数的参数可以看出，首先需要注册事件类型（第一个参数 ），然后注册响应函数，即事件发生后需要做什么事情，也就是说调用哪一个方法。 Flex事件机制中的事件流 1.捕获阶段（从根节点到子节点，检测对象是否注册了监听器，是则调用监听函数） 2.目标阶段（调用目标对象本身注册的监听程序） 3.冒泡阶段（从目标节点到根节点，检测对象是否注册了监听器，是则调用监听函数） 注：事件发生后，每个节点可以有2个机会（2选1）响应事件，默认关闭捕获阶段。 从上到下（从根到目标）是捕获阶段，到达了目标后是目标阶段，然后从目标向上返回 是冒泡阶段。 当事件发生时，FLEX通过事件的分发器EventDispatcher进行事件分发，分发的顺序是： 从上往下到达目标，然后从下往上，从目标开始返回。 移除对象的事件流：removeEventListener(), Flex事件机制（二） Event类作为创建Event对象的基类，当发生事件时，Event对象将作为参数传 递给事件侦听器。如MouseEvent、KeyboardEvent Event类有几个常用的公共属性： 是否冒泡：bubbles; 目标对象：target; 所处阶段：eventPhase; 当前对象：currentTarget; Flex事件机制中的自定义事件，也就是向监听器传递自己定义的事件类型，同 时可以通过事件传递参数。 1.创建自定义事件名称的Event dispatchEvent(newEvent(“myEvnet”,true,false); 2.创建自定义事件类 Public class MyEvent extends Event dispatchEvent是EventDispatcher的方法： publicfunctiondispatchEvent(event:Event):Boolean将事件调度到事件流中。事件 目标是对其调用dispatchEvent()方法的EventDispatcher对象。 EventDispatcher 类 事件允许应用程序了解用户何时与组件进 行了交互操作，以及组件的外观或生命周 期何时发生了重要更改，例如其创建、删 除或调整大小。 EventDispatcher 类的方法允许您添加和删除 事件侦听器，以便代码可以相应地响应事 件。例如，可以使用 EventDispatcher.addEventListener() 方法向组 件实例注册侦听器。触发组件事件时，侦 听器会被调用。 Flex和Java通信 Flex和Java通信，一般来说使用LCDS（LiveCycle Data Service），不过这个 是收费的，所以就用免费的BlazeDS代替,BlazeDS是官方从LCDS中分离出 来的开源数据服务中间件。 为什么来说一般来说是用LCDS，也就是说不一定非要用LCDS，因为LCDS提 供的功能完全可以自己实现，而且除了RemoteObject方 式，还有 WebService、HTTPService等等。简而言之，使用LCDS使FLEX与后台的通 信更多的便捷和特性。 BlazeDS是基于服务器的JAVA远程控制和WEB消息传递技术，使得在浏览器 上运行的Flex应用程序和远端的JAVA应用程序之间互相通信。 需要两个工具： 1. Eclipse的Flex插件下载地址 /Applications/Flex/FlexBuilder/3/FB3_WWEJ_Plugin. exe。 2. BlazeDS官方网址如下： /wiki/display/blazeds/BlazeDS 需要单独开发flex时，使用FB3_win.exe 下载地址/products/flex/ FlexFlex工具的安装工具的安装 1、需要单独开发flex时，使用FB3_win.exe 下载地址/products/flex/ 2、需要同时开发java和flex时，使用Eclipse的Flex插件 下载地址 /Applications/Flex/FlexBuilder/3/FB3_WWEJ_Plugin.exe。 Flex Builder 3Flex Builder 3的安装的安装 这个比较简单，只要一直按“下一步”就行了。 eclipseeclipse集成工具集成工具 FB3_WWEJ_PluginFB3_WWEJ_Plugin安装安装 其中要求设置eclipse路径时，设置选择安装的Myeclipse的eclipse路径。 安装后， 1、打开你FlexBuilder插件安装的文件夹，将里面的features和plugins两个文件夹 内的文件对应复制到 “eclipse”文件夹里的features和plugins两文件夹； 2、将FlexBuilder插件安装的文件夹中的sdks放入到MyEcipse6.0下的eclipse文件夹 下。 集成spring 1、在services-config.xml中注册SpringFacotry，配置如下 2、接下来就要在applicationContext.mxl中注册helloJavaFlexBean，配置如下: 3、在remoting-config.xml中将SpringBean公开给Flex客户端，配置如下： spring helloJavaFlexBean 4、 这个destination必须和上边xml中定义的目标条目一致，是远程服务的目标。 而这个id用于在Flex的AS语法中调用。 remoteHello.helloJavaFlex(logNam); 集成struts2 集成时，和平时没有区别 调用时，有不同 outxml.jsp info.lastResult.userinfo.user success var xml:XML=XML(event.result); xml.item /ftl/success.ftl 集成hibernate 集成hibernate，不用改东西 控件简介（一） 1:控件分类：基础控件和数据源控件 2：按照用途可以分5类 1：文本控件：标签label不能编辑，用来显示单行文本 文本text不能编辑，用来显示多行文本 文本条textinput 可编辑，用来显示单行文本 文本区域textarea 可编辑 用来显示多行文本 富文本编辑richTextedit可改变文字的大小，粗细，对齐等格式，可显示纯文本也可 显 示html格式的富文本 2：数据源控件：一些flex控件需要其他控件提供数据，如表格，树，下拉条都需要有一个 数据源来提供数据。 3：菜单控件： 菜单menu可视的，有多层次的子菜单 菜单条menubar 不能编辑，多行文本域 弹出菜单popupmenubutton 单击按钮时可以弹出的菜单 4：按钮控件： 按钮button可改变大小包括标签，图标 弹出按钮控件popupbutton control可弹出菜单的按钮 按钮条buttonbar显示一行相同外观的按钮 链接按钮linkbutton、显示文本链接 连接条linkbar 显示水平的一行链接按钮控件 复选框checkbox显示被选择或未选择的布尔值 单选按钮radiobutton、一组按钮中只能选择一个 单选按钮组radiobutton group、显示一组单选按钮控件，具有唯一的click事件 开关按钮条 togglebuttonbar显示一行相关的 按钮 控件简介（二） 5：flex控件： 警告alert弹出警告框 下拉列表combobox下拉数据列表 选色器colorpicker可选择的调色盘 数据表格datagrid 数据表格 日期选择器datechooser选择日期控件 日期条 datefield 单击弹出日期选择器 水平列表horizontalList 水平列表项目 水平尺/垂直尺 hrule vrule单个水平或垂直标尺 水平、垂直滑竿 hslider，vslider 图像 image 支持gif jpeg png svg swf 列表list 可滚动的数据组 计数器numericstepper单击向上的按钮增加数据，单击向下的按钮减少数据 进度条progressbar 当前操作进度 滚动条 水平，垂直滚动 scrllbar，hscrollbar，vscrollbar swf加载器 显示swf文件 列表条tabbar一组水平的列表 排列列表tilelist类似表格的行列对正排列的项目 树tree、以展开树的方式显示继承关系的数据 音像videodisplay flex应用中的数据流媒体 常见控件（一） mx:Application有creationComplete, color属性。 如creationComplete=“init()” mx:Button有label， click等属性。 mx:Panel有title， horizontalAlign=“center“ verticalAlign=“middle“ 等属性。 mx:Form有x，y等属性。 mx:FormItem有label，required，fontSize等属性。 mx:TextInput可输入框 mx:ComboBox下拉框。 mx:HBox有horizontalGap（横向间隔），verticalGap（竖向间隔 ）。 mx:Text有text属性。 mx:Script是ActionScript的代码块，有source属性。如 source=“com/sy/util.as” 常见控件（二） mx:HTTPService是提交块，method，url，id，showBusyCursor， useProxy（指定是否使用 Flex 代理服务.默认值为 false.），fault， resultFormat， result。 mx:WebService和mx:HTTPService功能相同。 mx:request下面是xml，参数。 mx:Label有text属性。 mx:RemoteObject有id， destination属性。 mx:method有name， result， fault。 mx:DataGrid有itemClick， dataProvider， color。 mx:columns。 mx:DataGridColumn有headerText， dataField， labelFunction 调用方法 。 mx:DateFormatter有id， formatString。 mx:DateField有formatString属性。 mx:StringValidator有source，property，minLength，maxLength， requiredFieldError，tooLongError，tooShortError，required属性。 NumberValidator和DateValidator。 新建项目 1、新建Flex project； 2、这一步，就是需要注意create combined Java/Flex prject using WTP这一项一 定要勾上，Java Source Folder就是Java业务代码存放的根目录，默认用src即可 ，无须改动。这样就将Java和FlexLCDS代码放在一起了。 3、Context folder就是最终编译的容器目录，Content folder修改为WebRoot 。 Flex WAR file就是选择BlazeDS的blazeds.war， Output folder是Flex编译后swf和 html文件的目录（修改为webroot） 4、Main source folder是放Flex源码存放目录，Output folder URL是开发过程中 运行和请求的路径 5、查看生成的代码结构 6、发布成J2EE项目：切换到myeclipse视图，右键工程-myeclipse-add web project，一定要去掉Create web.xml的勾，这样就不会覆盖LCDS（BlazeDS）创 建的 web.xml文件，这时图标变成J2EE得了，不是Fx的标志了 7、右键工程-properties-flex server 修改Context root为工程名称-点击validate location检测是否连接正常 8、部署到Tomc