Flex技术设计（精选九篇）
Flex技术设计 篇1
图形化编辑框架(GEF,Graphical Editor Framework)是Eclipse平台下一个重要的框架,它允许开发人员以图形化的方式展示和编辑模型,从而提升用户体验,是Eclipse开发者最常用的框架之一。
GEF的设计很好地支持了可视化设计功能,常用于开发UML类图编辑器、图形化XML编辑器、界面设计工具和图形化数据库结构工具等。它们在图形化编辑方面的共同之处是,提供一个编辑区和一个工具栏,用户在工具栏里选择需要的工具,以拖动或单击的方式将节点或连线放置到编辑区域中完成设计工作。
Flex作为开发富客户端应用程序的主流技术之一,在前端展现和图形化设计上有着独到的优势,其自身不仅提供了丰富的图形组件库,而且自Flex4开始对用户自定义皮肤样式提供了强大的支持,因此本文模拟Eclipse,采用Flex技术开发一个轻量级Flex GEF框架,用以支撑Flex的可视化设计,开发流程设计器或表单等。
1 Flex技术
1.1 Flex定义
Flex是Adobe公司近年推出的一种基于Flash技术的开源富客户端应用解决方案。用户通过MXML标签语言或ActionScript脚本语言进行开发,最终编译形成一个可以在Flash虚拟机之上运行的Flash字节码(.swf)文件,然后可通过浏览器加载或用Flash Player本地播放。Flex是一种跨平台的技术,无论服务器端应用是用Java还是.Net技术编写,客户端都可以使用Flex技术开发。
1.2 Flex框架结构
1)MXML描述语言是XML的扩展,是Flex为描述界面而产生的语言,它可以用来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化的对象,比如XML数据、与服务器端通信的WebService、组件的数据源等。
2)ActionScript语言是一种类似Javascript的面向对象的脚本语言,开发人员可以使用该语言为应用程序添加动态行为。它是一种面向对象的语言,在Flex中,用户可以单独写脚本文件,也可以在MXML文件中嵌入ActionScript代码。
3)Flex类库中包含容器等可见组件,也包含远程服务对象和数据模型等不可见组件,MXML和ActionScript都具备访问Flex类库的能力。
使用MXML可以快速调用Flex基本类库进行用户界面描述,但是很难进行灵活的业务逻辑处理。使用ActionScript可以完整地调用任何Flex应用类库,但在这样的模式下开发效率会大大降低,所以实际开发往往2种结合使用,完成Flex应用。
Flex框架结构如图1所示。
1.3 Flex技术的特点
Flex是堪称强大完整的富互联网应用(RIA,Rich Internet Applications)开发解决方案,企业可以据此创建丰富的个性化应用,极大地提高用户体验,其主要特点如下。
1)可操作性方面:Flex客户端提供更丰富、更友好、易用性更强的界面给用户,同时互动性更好,大大提高开发效率,特别是Flex内建对音频和视频的支持,给用户提供更好的操作体验。
2)架构方面:用XML来描述前端界面,界面的控制由ActionScript来负责,后端的应用逻辑则封装在后端中间件中与Flex前端界面相分离,是真正意义上的MVC(Model View Controller),使得应用开发的结构更为清晰。
3)可扩展性方面:Flex作为前端的客户组件,非常容易与各类后端技术相结合,例如AMF、PHP、Java、.Net等。
4)运行环境方面:程序可以在浏览器中,也可以运行在浏览器外,极大拓展了应用场合。新一代Flex富客户端可以根据需求更加灵活地部署。
5)性能方面:传统的Web应用客户端每次刷新页面都会对服务器产生请求,服务器要将新的页面传递给客户端。而新一代富客户应用在第一次运行时就将应用一次性下载到本地,所有的图形用户界面都在本地运行,运行过程中只产生少量的数据更新请求,而不需要实时地请求服务器并刷新页面。
6)开发效率方面:Flex界面编程技术类似于VB或Delphi,开发中所见即所得,比起修改ASP、JSP、PHP等所表现的界面,有极高的开发效能,且AcitonScript是一种面向对象的语言,对于数据Java或.Net的程序员来说,Flex技术很容易上手,学习成本低。
2 Flex GEF框架总体设计
在Flex GEF框架设计中,为充分保证其灵活性和实用性,除了最基础的MVC设计模式以外,还用到了命令、工厂、观察者、责任链等设计模式。
2.1 MVC设计模式的应用
MVC是3个单词的缩写,分别为:模型(Model)、视图(View)、控制器(Controller)。模型表示业务数据的结构或规则;视图是用户看到并与之交户的界面;控制器是逻辑的处理中心,它接受用户输入,并调用模型和视图去完成用户需求。
MVC模式的目的就是实现解除模型层与视图层间的依赖关系,因此基于Flex设计的GEF框架需要充分弱化用户界面以及行为和模型之间的耦合性,增强应用的灵活性。
Flex GEF的MVC模型如图2所示。
在Flex GEF框架中,模型层可以用Flex对象任意构建,控制层用EditPart实现,视图层用Figure实现。
考虑到框架本身的应用灵活性和扩展性,因此在框架上层设计3个接口:IModel、IEditPart、IF igure,开发中必须实现3个接口。从调用关系来讲,EditPart是逻辑运转的核心,可以通过EditPart找到目标模型和与该模型对应的视图,并通过EditPart实现Model和Figure间所有交互的基本操作。模型和视图之间是一对一或多对一的关系,用户通过界面Figure调用操作与对应的Model进行交互。
基于Flex GEF框架开发可视化图形实现流程如图3所示。
由上述流程可见,Flex GEF提供了一套快速的可视化图形编辑框架,开发者只需要按规则编写代码便可轻松添加松耦合的可视化图形组件。
2.2 其他相关设计模式的应用
除了基础的MVC框架外,Flex GEF还采用了以下几种设计模式。
2.2.1 命令
命令(Command)用于记录对模型的基本操作,用来支持重做(Redo)和回退(Undo)操作的实现。在框架中,用户的每一个在编辑器中的行为都会产生一个Command新对象,它们以堆栈的方式存入命令栈(CommandStack)中,当用户需要执行Undo和Redo操作时,Command对象会自上而下出栈响应用户请求。
2.2.2 工厂
Flex GEF框架使用工厂(Factory)模式来创建EditPart及其他内容,当编辑器拿到相应的模型后,会以扩展的方式取得相应的IEditPartFactory,再由这个Factory创建EditPart。其他的内容,如Figure等,也进行同样的操作。所有的Factory均由扩展机制来提供,方便随时切换。
2.2.3 观察者
观察者可以理解为一种事件机制,当模型或者相应的内容改变时,用来通知相应的对象,以便刷新显示的内容。
2.2.4 责任链
不管是Eclipse GEF还是Flex GEF,都会有层的概念,当鼠标点击屏幕上的内容时,程序会逐层检查鼠标,以确定点击位置所在图层,这是一个责任链的典型应用场景。
3 GEF框架扩展点设计
对于一个可能经常添加新元素的框架来说,扩展能力尤为重要,用户大都希望在不修改现有代码的基础上,以插件的方式来添加新模型。对于Flex GEF来说,添加一个新模型需要考虑以下2方面内容:
1)模型的解析,即Model Factory能够认识新模型;
2)新模型能够正确地显示,而且可以与用户进行交互操作。
3.1 模型解析扩展点ITagParser
目前,对于一个可视化编辑器来说,描述模型最常用的文件格式是XML。
XML格式最大的好处在于扩展和自描述,但对于解析器来说,因为这种扩展能力可能会碰到完全未知的格式,如BPMN格式,程序员如果分阶段开发其中的部分功能,此时就需要核心模型解析器提供良好的扩展功能,能够支持未知的格式,所以Flex GEF根据XML的特性设计了ITagParser扩展接口,用来解析XML,其类结构如图4所示。
1)每一个ITagParser的实现类都能明确地通过getSupported Tags方法来告诉模型解析器自己能够支持哪些模型,这样当解析器碰到自身未知的XML模型时,就可以通过查找ITagParser确定哪里可以解析这些未知内容。
2)在一个文件内可能出现同名的模型标签,但它们需要不同的ITagParser实现类来解析,此时还提供一个isAccepetable方法来根据XML结点信息判断具体需要哪个实现类。如:
以上语句为一个文件内同时出现2个名为“task”的标签,但因各自对应的“type”值不同,会对应ITagParser的不同实现类。
3)XML是树状结构,所以任何一个现有模型标签,都可能添加新的子标签,所以ITagParser提供一个默认的实现类parse,用来支持使用其他的ITagParser解析未知的子标签。
3.2 控制器扩展点IEditPartFac-tory
ITagParser将未知的标签解析出模型后,如何控制这些未知模型就成为一个难题,此时,需要为每一个未知的模型找到一个对应的IEditPartFactory来控制这些模型。
从开发者角度来看,每一个模型显示成何种样子应该是可以扩展的,否则就无法满足一些特殊的需求,如项目可能要求将某一个图元显示成某种特殊样式,又或者在图元默认显示方式上加上一个错误标志等,所以提供一个IFigureFactory,由相应的IEditPartFactory根据自己的需要,来创建显示模型。另外,可视化设计通常都有一个选用板,用来支持用户创建新元素,考虑到图元的扩展性,所以在IEditPartFactory中会提供一个IPaletteFactory对象在选用板上注册新的图元。
扩展接口关系如图5所示。
在具体使用中,首先实现IEditPartFactory接口,创建自己的模型控制类EditPartFactory,然后根据Flex GEF框架的规范建立该控制类与新增模型间的映射关系。关于视图层,IEditPartFactory的实现类可以指定某一现有IFigureFactory的实现类,也可以应用新扩展的实现类。至此,一个新的模型已经通过扩展的方式加入到框架中。
4 Flex GEF框架的典型应用
Flex GEF框架可较好支撑基于Flex技术的可视化设计,其中一个典型的场景就是流程设计器。流程设计器是工作流管理系统的重要组成部分,开发人员通过流程设计器对企业的业务流程进行建模,从而产生一系列可以在流程引擎中运行的流程模型。
图6是在实际项目中,基于Flex GEF实现的业务流程设计器的界面效果。
图6所示流程中的每一个节点都是Flex GEF框架中MVC设计模式的实例,自下而上包含:节点模型(Model)、节点控制逻辑(EditPart)和展现视图(Figure),该流程设计器同时也应用了GEF框架中的命令设计模式和工厂设计模式。此外,通过该框架还可方便地为流程设计器增加新的流程节点模型,具体扩展步骤可参考图3的开发流程。
5 结语
Flex技术作为目前主流RIA技术之一,正以其在图形化设计和建模方面的优势被越来越多的企业所青睐。GEF框架作为E-clipse主流框架之一,为图形化设计与编辑提供了良好支撑。本文充分结合两者之间的优势,打造了一个类Eclipse GEF的轻量级Flex GEF框架。该框架的优势在于:一方面,图形化设计可以充分发挥Flex技术的先天优势,支撑前端展现开发;另一方面,应用GEF的设计模式实现应用程序的松耦合设计和灵活性扩展。该框架在图形化设计相关的业务项目中具有较强的实用价值。
参考文献
[1]刘晓菲,宋朝晖.浅谈基于Flex技术的RIA设计[J].电脑知识与技术,2010(11):124-129.LIU Xiao-fei,SONG Zhao-hui.Design of Flex-based RIA Technologies[J].Computer Knowledge and Technology,2010(11):124-129.
[2]张敏杰.基于Flex技术的工作流设计器解决方案[J].电力信息化,2003,1(5):90-93.
[3]兰天,曲鹏东,孙高飞,等.Flex企业应用开发实践[M].北京:机械工业出版社,2011.
关于flex事件的讲解网页设计 篇2
很多新人对Flex的事件机制都不太熟悉，在使用过程中难免会出现各种问题，这是一个非常普遍的问题，为了更快更好的帮助大家，将介绍一下Flex中事件的各种机制和用法，
Flex的精髓之一就是事件和绑定机制，了解之后，能帮助大家更灵活的设计程序，也对新手上路有一定的帮助。
讲解可能不太系统，也不全面，有很多没有深入。如果高手看到后有疑问，欢迎指正。当然各位也可以提出自己的看法，或者经验分享，谢谢。
二.事件机制介绍
1. 什么是事件机制
事件可以看作是一种触发机制，当满足了一定的条件后，会触发这个事件。比如MouseEvent就是指的当鼠标进行操作之后触发的一系列的事件。很多控件中都有click事件，这个事件就是一个MouseEvent的实例，当点击鼠标后，系统会自动抛出一个名称为click的MouseEvent事件(这种方法我们将在后面介绍到)。如果此时在click上注册一个方法，那么触发该事件时就会执行这个方法。
大致示意图
该示意图对应的Flex主应用的mxml代码
Flex技术设计 篇3
伴随着计算机应用系统的架构在由C/S架构到B/S架构转变的过程, 客户端技术也由客户端程序到Html再到Ajax以至现在的Rich Internet Applications (RIA) 技术。C/S架构的缺点主要是部署、更新很不方便;而B/S架构则是基于页面发起请求, 服务器端传递数据的模式, 但是由于受到Html以及Java Script脚本执行效率的限制, 无法像C/S那样使用丰富的效果来展示数据, 用户体验比较差。从C/S架构到B/S架构, 这2种架构受限于技术本身, 分别发展成了重服务器端和重客户端的模式, 而RIA的出现给客户端和服务器端进行更好的平衡带来了机会, 最大限度地提高了应用程序的广泛性和丰富性。RIA应用程序结合了桌面应用程序的反应快、交互性强的优点以及Web应用程序的传播范围广及容易传播的特性, 简化并改进了Web应用程序的用户交互, 使得应用程序可以提供更丰富、更具有交互性和响应性的用户体验。而Flex作为一种富客户端技术受到了众多开发者的欢迎, 应用越来越广泛。
1 Flex技术介绍
1.1 什么是Flex技术
Flex技术是Adobe公司推出的一种基于Flash技术的开源富客户端应用解决方案。用户通过在Flex Builder (一种在Eclipse基础之上进行了扩展的集成开发环境) 中使用MXML语言或者Action Script脚本来进行开发, 最终编译形成一个可以在Flash虚拟机 (AVM) 之上运行的Flash字节码 (.swf) 文件, 然后可以使用IE或者Flash player来访问这个文件。Flex是一种跨平台的技术, 无论服务器端的应用是用Java还是.net技术编写的, 客户端都可以使用Flex技术。Flex编程模型如图1所示。
1.2 Flex技术的优点
Flex是一种很轻便的客户端技术, 只要客户端安装了Flash player就可以使用Flex技术, 体验富客户端应用, 而目前世界上95%的机器上都安装了Flash播放器, Flex项目最终编译成的Swf文件在Flash player中是以字节码形式运行的, 其执行效率远远高于浏览器解析执行的Java Script, 而且Flash技术可以给用户带来很好的用户体验。综上所述, Flex与各种客户端技术的优缺点如表1所示。
1.3 Flex与传统的开发方式的异同
传统的B/S系统的开发方式SSH (Struts+Spring+Hibernate) 都是一种基于服务器端的开发方式, 是服务器端响应用户请求并将处理结果最终编译成HTML代码传送到浏览器来显示, 服务器端无法向客户端主动的发送数据。而Flex则不一样, 它可以主动地向服务器端发起请求, 而服务器端也可以主动向客户端主动的发送数据, Flex与服务器端通信架构如图2所示。
从图2中可以看出Flex可以直接访问服务器端的Java对象, 而Spring与Hibernate的作用是在服务器端处理业务逻辑以及从数据库读存处理数据, 因此, Flex是可以直接访问Spring中的Java对象的, 也就是说Flex可以很好的与Spring结合在一起。与传统的B/S系统相比Flex并不是以单一的HTTP方式与服务器端进行通信, 这样使得与服务器端通信的数据量大大的减少, 用户只需要请求需要的数据, 避免了传统B/S结构重复传送大量的样式和重复数据。
Flex通过3种方式来访问服务器端:HTTPService方式, Web Service方式, Remote Object方式。其中HTTPService方式通过访问服务器端的页面如Jsp或者Aspx来获取数据。而Web Service方式则是通过访问服务器端发布的Web Service服务来工作的, 数据传输则通过SOAP消息来进行。第3种方式Remot Object访问方式的数据传输效率是最高的, 因为这种方式将传输的数据以AMF的格式进行。使用Remote Object方式来访问服务器端, 需要在服务器端安装Flex的服务器端控件L C D S (Live Cycle Data Service) , 这是一个收费很高的控件。为了促进Flex技术的发展, Adobe公司推出了LCDS的开源版本——Blaze DS服务器端控件, Blaze DS在服务器端提供以下功能:
*提供客户端 (Flex、AIR) 通过AMF协议访问服务端 (Java) 数据的功能;
*提供服务端广播数据给多个客户端的功能;
*提供客户端与客户端实时通信的功能;
这3个功能是Flex与传统的B/S系统最大的区别是:服务器端可以主动的向客户端发送数据。这个功能是传统的B/S系统无法做到的。利用这个功能, 可以实现用户待办任务列表的自动更新, 而不需要使用Java Script脚本定期的去服务器端更新数据。利用Bla ZDS可以很方便地向其他的JMS系统进行交互, 而这一切都是现在的B/S系统无法做到的。
2 工作流设计器
2.1 工作流设计器现状
流程设计器是工作流管理系统的重要组成部分, 开发人员通过流程设计器对企业的业务流程进行建模从而产生一系列可以在流程引擎中运行的业务流程模型。综观各个流程设计器实现方式, 可以分为三大类。第1类是C/S类型, 这类流程设计器大都是厂商自己开发的流程设计器软件, 需要安装在开发人员机器上, 这类产品的特点是运行效率很高, 可以实现非常复杂的流程;第2类就是使用Java Script实现的流程设计器, 这类设计器是使用Java Script+VML技术来绘制图形, 这类产品的特点是开发人员不需要安装任何软件, 只需要有一个浏览器就可以, 当流程稍微复杂时, 整个浏览器会变得相当的缓慢, 给用户体验不是很好;第3类就是使用一些可以在浏览器端运行的插件来实现的, 这类插件包括Applet, Silver Stream等, 这类产品的特点是可以绘制除比较复杂的流程, 在运行效率上也比较的高, 缺点是用户必须安装一个插件。这3类设计器都有一个共同的缺点就是无法根据项目灵活的进行个性化定制, 例如有的项目觉得缺省的流程设计器样式不是很好, 希望能够更换设计器的样式, 这3类设计器是做不到的。而基于Flex技术的流程设计器则在效率与易用性方面进行了平衡。
2.2 流程设计器的架构
本流程设计器是根据WFMC规范, 采用MVC模式设计而成, 其架构如图3所示。
整个流程设计器由3部分组成:流程模型、流程模型的控制器、用户交互界面。
2.2.1 流程模型
流程模型指组成流程的各个部分包括活动节点、迁移等相互联系构成的一个完整的数据结构, 本设计器的模型是根据WFMC (工作流管理规范) 规范定义的通用模型建立的, 包括3部分:活动节点, 迁移, 开始与结束节点。其中活动节点分为3种类型:普通的活动节点, 子流程以及路径节点。普通的活动节点是指活动节点的参与者是人不是系统, 这种类型的节点的开始是由上一环节的参与者发起的, 结束则是有该节点的参与者手动结束的。而子流程是指这种节点是一个流程, 当流程流转到这个活动节点的时候, 会启动与这个活动节点相关的流程, 这是流程之间的交互。路径节点又称自动节点, 指的的是节点的开始与结束都是自动的, 这类节点是没有参与者的, 这类节点的主要作用是在流程流转的过程中进行路径的寻址, 根据设定的条件自动进行路径的选择。
这3个部分都实现了接口XMLSerializable, 以便可以方便地将流程模型转化为XML或者从XML中将流程模型回来, 接口如下
当用户通过流程设计器进行业务流程的建模时, 内存中就存在了这样一棵由活动节点与迁移线, 开始与活动节点组成的树, 而这棵树的更新则是靠流程模型控制器来完成的。
2.2.2 流程模型控制器
流程模型控制器的作用是响应用户在界面上的操作请求, 实时地更新流程模型, 维护流程模型的完整。控制器包含的操作大致可分为流程模型的更新包括活动节点, 迁移等组成的增删查改, 模型的序列化/反序列化, 其他操作如撤消操作, 全屏操作, 模型检测等三大类操作。
在这三大类操作中要处理好模型的更新与模型的序列化二者之间的关系, 要把握好模型序列化的时机。模型序列化指的是将模型转化为XML代码, 当流程比较复杂时, 序列化操作是一个很耗费CPU和内存的操作, 因此, 模型的序列化操作只在必要的时候才进行。在本设计器中, 流程的序列化操作发生在2个地方, 第1个地方是用户查看流程生成的XML代码的时候发生序列化, 第2个地方是用户保存流程到数据库或者文件的时候发生序列化操作。模型控制器另外一个实现的难点就是流程可逆操作的实现。设计器的一切操作都是可逆的, 防止用户在无意的情况下所做的操作可以恢复, 在本设计器中可逆操作的实现是按照设计模式里面的Command模式来实现的, 简单地说, 用户所有的操作都要实现下面的接口
每一个操作都是一个Command, 都要实现逆操作方法unexecute, 这样可以达到一切操作都是可逆的目的。
2.2.3 用户交互界面
用户交互界面是直接面向用户操作的部分, 通过其用户方能实现各种操作, 因此设计器界面一定要易用, 最好能够遵循用户已有的习惯, 正式基于这个理念, 本流程设计器的界面模仿了Windows程序的界面, 用户很容易使用, 不存在任何不适应的地方。
用户交互界面的功能包括:流程各个组件的增删查改、迁移条件的设置、其他的操作的展示等, 如图4所示。
用户可以通过左边的操作导航来进行流程各个组件的创建, 如点击“活动”按钮则可以在右边的画布中增加一个活动节点, 点击“连接线”则可以增加一条迁移线, 如果用户需要删除流程的节点时, 则点击选中需要删除的组件, 然后利用键盘上面的DELETE键就可以删除组件, 如果用户无意做了错误操作, 则点击“编辑”菜单下面的撤销或者使用CTRL+Z快捷键就可以撤销刚刚所作的操作。
在设计用户界面时将用户最常用的80%的操作都放置在了左边的操作栏中, 而剩下的补偿用的20%的操作则放在了菜单中, 菜单模式仿照Windows系统模式。当用户双击活动时就会弹出活动节点的属性菜单进行活动属性的设置。而双击迁移线, 则可以设置迁移线的属性。当用户绘制好流程后, 为了防止拓扑结构出现死循环, 用户可以点击“编辑”菜单下面的“模型检测”来检测其所见的模型是否符合工作流规范。
3 结语
综上所述, 基于Flex技术的工作流设计器继承了传统的流程设计器的优势, 又弥补了传统设计器在效率与易用性方面的不足, 并具有运行效率高、轻便, 可以根据项目个性化定制, 既可以单独运行也可以在浏览器中运行的特点。可以预见, 基于Flex技术实现的流程设计器肯定会逐步推广应用。
摘要：基于Flex技术的工作流设计器继承了传统B/S系统的优点, 弥补了Applet的笨重以及Html与Ajax的低效的缺点, 发挥了Flash技术轻便以及可以给客户带来极好的用户体验的特点。论述了Flex的基本原理和传统的B/S系统的客户端技术的缺点以及Flex客户端技术与这些技术相比的优点, 阐述了Flex的开发过程以及Flex技术如何与服务器端进行数据交互以及基于Flex技术开发的工作流设计器的架构和流程设计器实现的要点。
关键词：Flex,流程设计器,工作流,RIA
参考文献
[1]吕晓鹏.Flex 3.0——基于ActionScript 3.0实现[M], 北京:人民邮电出版社, 2008.
[2]邓保华. 一种基于BPEL4WS规范的业务流程设计器的解决方案[M].计算机工程与科学, 2006, 28 (4) :77-79.
[3]彭晓川.基于Flex的RIA与J2EE应用的整合, [J].电脑与电信.2008, 15 (2) :37-39.
[4]王瑞玲. RIA及其基于Flex的应用开发模型[J].2007, 20 (1) , 206-207.
[5]潘 华. 一个基于Web的工作流建模工具的设计与实现[J].商场现代化, 2008, 15 (2) :50-51.
Flex技术设计 篇4
在Flex里面不像在Flash里面随意制作动画了，Flex更趋向于应用程序，而不是动画制作了，所以没有了时间轴的概念。在Flex中使用动画效果，可以用Flex自带的Effect，或者自已定制Effect，因为很多人都想借Flash里面的一样操作Flex，比如在Flash里面做一个动态按钮 很容易，当鼠标移动到上面时，会有很多发光的点跑出来（荧火虫效果），这种效果在Flash十分容易实现，但在Flex里面要实现这种效果就不是那么简单 的了，下面说说在Flex里的的动务效果的使用与自定义制作。
首先介绍一下Flex里面的自带的效果有以下几种：
Blur模糊效果
Move移动效果
Fade淡入淡出效果
Glow发光效果
Resize调整大小效果
Rotate旋转效果
Zoom缩放效果
WipeLeft 用遮罩实现画面收放效果，下同，分别为不同方向WipeRightWipeUpWipeDown
不同的效果所需要设置的属性也不一样，比如Blur效果需要设置它的X与Y轴的模糊像素
而Move效果需要设置移动的位置信息
其它设置可以参考Flex语言参考
下面说说如何使用这些效果。要运行这些效果有两种方法：一种是调用该效果的play()方法，另外一种是使用触发器来触发效果。
（1）使用play()方法：
先看效果：在线播放
以下代码：
在 代码中看到，要使用效果，先定好一个效果，如上面的
兰蔻bb霜 bb霜是什么 哪个牌子的bb霜好 好用的bb霜temp.vsimu.com
（2）使用触发器播放效果：
使用触发器播放效果的话，可以不用写ActionScript代码，直接在组件的效果触发器上指明使用哪个效果就可以了，比较简单明了，但就不能进行更多的属性定制，而用AS控制播放的话，可以对效果进行很多的设置再相应根据情况播放，先看看触发器播放的代码：
以下代码：
看以上代码，先写好了Blur的效果并设置好属性后，duration=”2000″这个是播放的时间以毫秒为单位。
在Panel标签里有这样一句：creationCompleteEffect=”{be}” 这个就是触发器，是该Panel组件的效果触发器，当Panel组件加载完成时，会由系统自动调用该效果触发器，触发器里面指了触发 be 这个Blur效果
在Flex里面还有很多触发器如：
addedEffect被添加进容器时触发效果
removedEffect被从容器中移除时触发效果
creationCompleteEffect 被创建成功时触发效果
focusInEffect获得焦点时触发
focusOutEffect失去焦点时触发
hideEffect被隐藏时(visible=false)触发
showEffect被显示时(visible=true)触发
rollOverEffect鼠标经过时触发
rollOutEffect鼠标离开时触发
mouseDownEffect鼠标按下时触发
mouseUpEffect鼠标松开时触发
moveEffect被移动时触发
resizeEffect被重整大小时触发
注 意：这些都是效果触发器，不要与事件触发器混乱了。事件触发器是rollOver，事件触发器与效果触发器差不多，事件触发器是当用户执行相就操作时触发 事件，将会调用自定的事件触发处理函数，而效果触发器是执行相应操作时被触发并由系统自动调用所定的效果的play()方法。
现在说说效果的一些其它属性：
每个效果都有reverse()方法，该方法是反向播放，原本由小到大的变化，而调用reverse();后再运行play()的话，效果将会从大到小进行播放。
但要注意的一点是，reverse()方法不会自动播放，即是单单调用reverse();的话，效果并不会播放，他只会记录该效果为倒转，而要再调用play()后倒转效果才会开始播放。而调用pause()与resume()就是暂停与继续播放效果startDelay这个属性是设置效果的播放延时，以毫秒为单位，即要等待多少毫秒后效果才开始播放，如：
该模糊效果将会在调用play()之后3秒才开始播放
repeatCount这个属性是设置效果的重复次数，默认为1，设置为0的话就是不停循环播放
每个效果都有两个事件：effectStart 与 effectEnd
你可以在该效果事件的处理函数里面对效果作相应的操作，如：
兰蔻bb霜 bb霜是什么 哪个牌子的bb霜好 好用的bb霜temp.vsimu.com
当效果播放完时，系统将会自动触发effectEnd事件，在处理函数里面，将该效果Instance即现时播放的效果实例进行倒转并播放，当播放完，又会触发effectEnd事伯，这样一直循环！
现在再来说说效果的组合：
通常如果你觉得只应用一个效果很单调的话，可以进行效果组合应用，即多个效果同时播放或者顺序播放，如，当加载页面时，你想Panel先模糊到一定程度，再将Panel移动到某个位置，再把Panel还原成原来的清淅度（即消退模糊）。这样分析一下，一共用 了三个效果，一，先应用Blur（由清至模）效果，当Blur完成时，再应用Move效果，当Move完成时，再应用另外一个Blur（由模至清）效果。这样三个效果组合就是按顺序组合，先后运行。先来看看效果：在线播放
再来看看代码：
看以上代码，
另外的就是同时播放了，
这 个
使用Flex自带的效果基本用法就这些，下篇文章将讨论自定义效果的制作，将会详细说说这篇文章上面说到的 effectInstance 即实例与工厂的概念。
Flex技术设计 篇5
目前, 互联网已经渐渐成为应用程序开发的默认平台, 应用程序的框架也从最初的主机模式到客户机/服务器模式过渡到了浏览器/服务器模式, 传统的网络程序一般都采用页面表现内容、服务器端传递数据的开发模式, 表现形式限于图文内容, 随着时间的推移, 这种方式已经不能满足网络用户更高的、全方位的体验要求。用户越来越希望网页在表现上能够更智能、更人性化、更具有个性化特色。这些功能在传统的开发模式中是通过C/S模式的构架系统来解决的, 而C/S构架系统同时又存在着服务器部署复杂、难于更新和维护的问题。
富互联网应用程序 (Rich Internet Application简称RIA) 是将桌面应用程序的强交互性与传统的Web应用相结合起来, 采用异步方式和服务器端通信, 以一种安全的、具备良好适应性的服务器的模式来运行工作。RIA技术既弥补了B/S结构应用系统页面表现方式单调、数据处理不智能的缺陷, 又解决了C/S结构应用系统的难于部署不易维护和更新的问题, 这是由于RIA构架的系统本身就是将应用系统全部部署在服务器上, 所以在部署更新的时候, 只要更新服务器就可以。
目前比较有实力的RIA开发技术主要包括Macromedia Flash/Flex、Ajax、Laszlo、Avalon、XUL等。由于Macromedia Flash Player的广泛应用, 使得以Macromedia Flash Player为客户端的RIA技术发展迅速。Flex就是为满足希望开发RIA的企业级程序员的需求而推出的表示服务器和应用程序框架。所以选用Flex技术来设计和开发该档案馆在线文件管理系统。
1 Flex技术介绍
1.1 Flex简介
Macromedia Flex是目前最流行的开发富客户应用 (Rich Internet Application, 简称RIA) 的一种解决方案, 是针对企业级的网络应用的。Flex系列产品包括编译工具和功能强大的开发环境, 通过编写MXML脚本文件和Action Script代码, 用Flex编译器编译成SWF文件, 用户的浏览器只要安装了Flash播放器插件就可以进行访问。
1.2 Flex技术特点
Flex组件库:Flex类库中存在强大的组件库, 同时, 开发者也可以在Flex中创建一些自定义组件, 使得应用程序更加具有个性化和更为丰富的用户体验。
事件机制:事件是指用户或者系统本身派发一个信号, 然后等待响应程序的处理过程。Flex程序最擅长处理的用户交互, 正是事件的典型代表。
绑定机制:数据在绑定的时候, Flex会自动把一个对象数据复制, 提供给另一个对象使用, 提供数据一方称为数据源对象, 使用数据的一方称为目标对象。当数据源对象的数据放生变化的时候, 目标对象的数据会自动更新, 而不需要再编写代码去强制更新, 这就是绑定的含义。
Http Service、Web Service与Remoting技术HTTPService主要用来发送HTTP形式的GET或者POST请求。Web Service和HTTPService非常相似, 也是使用HTTP协议进行通信的, 但运行原理截然不同。从用户的角度看, Web Service就是一个应用程序, 它向外界暴露出能够通过Web进行调用的API集合, 用户可以调用这些API来实现某些功能。无论是HTTPService还是Web Service都是以文本格式来进行数据通信的。在数据量小的情况下, 这两种方式很合适, 但是如果要是传递复杂的数据, 必须先转换为其他文本格式, 比如XML形式, 供Flex调用。Remoting技术使用Action Message Format (简称AMF) 信息格式传递数据的。AMF采用了二进制压缩, 支持数据序列化和数据反序化, 为SWF文件与Remoting服务器端通信提供了一种轻量级的、高效能的通信方式。
2 以Flex技术设计档案馆在线文件管理系统
2.1 系统信息模块
管理员可以通过该模块添加、删除用户并对已存在的用户进行权限设置, 此外, 该模块还提供了系统日志的记录, 即每个用户在系统的一切操作都记录到了系统数据库中。
这个模块主要是通过应用程序与数据库通信来完成了, 系统在数据存储上采用的是My Sql数据库, 通过Flex的组件提供GUI, 利用Remoting技术, 建立Remote Object对象并以AMF数据格式的消息与PHP的应用程序进行通信, 而PHP是可以直接快速方便的从My Sql数据库中得到数据。最后, Flex利用得到的数据绑定到可视控件上, 一般是Data Grid、Tree等组件。
2.2 文件管理器模块
具有权限的用户利用这个模块实现对文件夹及文件的添加、移动、重命名、删除、复制、检索查询等操作。
该模块主要是利用PHP对文件的强大处理能力来完成的, 主要利用到的几个PHP函数包括:mkdir、copy、opendir、readdir、fopen、fclose、rename、unlink、rmdir等。
Flex中通过Remoting技术建立Remote Object对象与PHP应用程序进行通信, PHP具有强大的文件操作能力, 在PHP应用中设计创建、重命名、删除、移动、复制文件夹及文件的功能并将返回的信息以XML格式的数据返回给Flex。在Flex中Tree控件是可以直接利用XML数据, 同时可以在Flex中设计可视控件来反映实际服务器上的文件分布情况。使得在Flex中显示的信息是与服务器上面的文件信息是一致的。下图便是Flex应用程序通过PHP完成数据库和文件操作的工作方法。
结束语
本系统实现了在线电子文件的基本功能, 并加入了权限管理, 力求操作便捷、界面简单、用户体验强。与传统的B/S或C/S模式构架的应用程序相比, 系统更容易维护, 用户体验更强大, 同时在开发中, 提高了开发效率, 增强了系统的安全性。但是, 系统在用户权限管理方面还没有做到更深的层次, 在今后的维护与更新中还是有待提高的。
参考文献
[1]邱彦林.Flex第一步——基于ActionScript3.0的Flex2应用开发[M].北京:清华大学出版社.
[2]张志超.基于FLEX1_5应用程序的安全性[D].杭州:浙江大学, 2007, 6.
Flex技术研究 篇6
关键词：FLEX,HttpService,ActionScript,Xml
0 引言
随着时代的发展, 新技术Flex应运而生, 由于Flex将标准的语言、可扩展用户界面和数据访问组件三者结合起来, 所以开发人员能够快速地构建一个具有良好的网络交互能力和更加绚丽的表现效果的Flex应用程序。同时Flex具有丰富的界面表现能力, 可以充分满足广大用户的需求。
1 Flex技术
Flex是一个安装在客户端表现层的服务器, 自带很多富用户界面组件, 并使用XML的标记语言进行布局组件, 而且ActionScript是一种面向对象程序设计的语言。使用Flex开发的应用程序能够在常见的桌面平台上运行, 支持应用程序外观进行完全自定义, 支持各种连接到后端和服务的方法。
1.1 Flex组成元素
Flex表现层服务器包含Flex应用框架和Flex运行服务, 而Flex框架又包含MXML描述语言、ActionScipt程序语言和Flex类库。如图1所示。
开发人员结合MXML和ActionScript来建立应用程序, MXML原理定义用户界面元素, ActionScript原理定义客户逻辑和程序控制。Flex类库则包含了Flex组件、管理器和行为控制。
1.1.1 MXML界面语言
MXML是基于XML的标记语言, 用于应用程序用户界面的布局, 在Flex技术中, MXML用于设计用户界面, 实现丰富的Flex表现层。从作用上说, MXML和HTML的功能是基本一致的, 都是用于设计用户界面, 但是MXML比HTML拥有更丰富的界面组件, 并且开发人员在用MXML进行开发时, 能体会到MXML在结构上和条理上更加清晰。
MXML提供了表示逻辑的声明抽象以及用户界面和服务器端数据之间的绑定。MXML将表示层问题从业务逻辑中剥离出来, 从而最大化了生产力和应用程序的可用性。
1.1.2 ActionScript编程模型
ActionScript是Flash的脚本语言。ActionScript与JavaScript结构类似, 同样拥有语法、变量、函数等, 它也是由很多代码组成, 每行代码又是由一些命令、运算符、分号等组成。它的结构与Java等高级编程语言相似。所以, 对于有高级编程语言开发经验的人来说, 学习ActionS-cript是很容易的。而且ActionScript是一种强类型面向对象的语言, 可用于定义事件监听器和处理器、设置或检索组件属性值, 以及处理回调函数等。
ActionScript是为Adobe Flash设计的面向对象的程序设计语言, 在Flex开发中, ActionScript的基本作用类似于传统网页开发中的JavaScript, 同时ActionScript还要负责Flex程序的逻辑控制和业务建模。ActionScript遵循欧洲计算机制造商协会 (ECMA) 通过的ECMAScript标准, 而ECMAScript出自JavaScript派生出的标准EC-MA-262, 因此无论是使用语法还是技巧方面, ActionS-cript与JavaScript都非常相似。
作为Flex技术的组成部分, ActionScript充当着更加重要的角色。如果说MXML是Flex亮丽的外表, 那么ActionScipt就赋予了Flex聪慧的灵魂。对于开发者而言, 在ActionScript上所下的功夫要大于MXML, MXML作为界面表现层需要更多的是外观设计, 而ActionScript则需要担当起用户交互、数据处理和业务逻辑处理的重任。不仅如此, 在MXML中所使用的Panel、Label等Flex内建组件都是基于ActionScript类实现的, 应用ActionScript可以继承这些内建的组件对象来创建自定义的Flex组件, 使得开发的灵活性大大增加。ActionScript的应用还可以涉及到表现层数据模型以及异步远程请求及响应的事务处理。
我们可以通过
1.2 Flex工作原理
Flex应用展开在Web上的工作原理, 与以HTML为基础的网页应用有很大的差别。一个Flex应用包含了多个MXML和ActionScipt类文件, 以及需要嵌入的外部资源。MXML文件首先被编译为ActionScipt文件, 然后Flex需要将编译出的ActionScript文件和其他的ActionScript类共同生成为一个完整的SWF文件。在下一步中, 如果生成了外包装的文件, 就需要在HTML中运行此SWF文件。如果不生成外包装文件, 可以直接在Flash Player上读入此文件。
外部资源也是Flex应用的一个组成部分, 如CSS样式表单、图形文件等。外部资源可以在编译时嵌入到SWF文件中, 也可以在运行时动态地加载。
2 结束语
实践证明, Flex技术的应用, 给我们带来了非常棒的客户体验。Flex对2D和矢量的良好支持, 甚至可以做出很优秀的游戏。随着FlexSDK的不断更新和完善及Flex技术本身具有的优势, 都有利于未来Flex的发展。
参考文献
[1]聂晓霞.Flex从入门到精通[M].北京:清华大学出版社, 2008.
[2]黄曦.Flex 3.0 RIA开发详解:基于ActionScript3.0实现[M].北京:电子工业出版社, 2008.
[3]王瑞玲.RIA及其基于Flex的应用开发[J].科技情报开发与经济, 2007 (10) .
基于Flex的网络课程设计与实现 篇7
关键词：Flex,ActionScript 3.0,网络课程
0 引言
网络课程、开放课程作为一种重要的数字化学习方式, 已成为人们终身学习、随时随地学习的重要资源, 在实现全民教育方面, 发挥了重要的作用。但使用Web2.0技术制作的网络课程因其灵活性不够、缺乏丰富的用户界面及高效的多媒体处理性能, 已不能满足学习者的需求。本文以田径网络课程的设计与实现为例, 探索了基于Flex平台的网络课程开发。
1 Flex技术
目前, 绝大多数网络课程都是基于HTML4技术的, 但是HTML4的UI功能较差, “请求-响应-刷新”模型要求多次提取网页来完成一项事务处理, 导致交互速度慢, 用户体验较差。随着网络传输速率的提升, 用户越来越希望Web能够更智能、更人性化、更具个性化。
Flex技术是一种基于标准编程模型的高效RIA开发产品集, 最初由Macromedia公司在2004年发布, 是目前最完善的RIA (Rich Internet Application, 富互联网应用程序) 技术。基于Flex与RIA技术能将传统的桌面应用程序搬到浏览器里运行, 具有更好的网络交互能力、更绚丽的表现效果, 使用相对简单的代码就可以完成绚丽高效的Flex程序[1]。
Flex应用程序提供了一系列独特的功能, 包括:表现力、高执行效率、丰富媒体支持、脱机支持等。Flex在网络课程中的应用可以改变远程学习者与教学系统的交互方式, 改进教学资源界面质量, 带来良好的学习者体验[2]。
2 田径网络课程设计
本文以田径课程为例, 以Flex技术为基础, 进行了网络课程的设计与开发实践。本网络课程遵循以下教学策略:
(1) 以自主学习为中心。网络课程在设计时坚持以探究性学习为指导, 以学生为中心, 促进学生自主学习。本网络课程中, 学习者学习活动包括自选学习内容、自定学习进度、观看视频、观摩演示、自我评价、反馈等。
(2) 以异步学习为基础。现有网络媒体更适合异步学习。同时, 异步学习更能体现学习的自主化和个性化。
(3) 建立多元化学习环境。网络学习结合书本、光盘等实体学习资源, 建立正确的技术表象, 并将表象转化成为标准的动作技能。将离线资源与网络课程相结合完成学习目标。
(4) 以协作学习为导向。学习者利用网络课程中的交流平台, 相互讨论在学习中遇到的问题, 弥补个别化学习的缺陷, 提高学习效果。
通过对课程对象、课程内容、课程需求分析, 田径网络课程模块设计如图1所示。
(1) 理论学习。涵盖田径各方面知识, 相当于理论教学的教材。但田径网络课程不仅仅是文字教材的“复印”, 需要将教学内容进行新的整合。
(2) 视频教学。课程制作过程中, 首先收集国际优秀运动员动作示范录像, 然后用视频编辑软件编辑。根据田径各项技术动作的特点和教学需要, 化动为静、化快为慢, 使学生学习既能感知动作技术全过程, 又能了解动作技术各环节的细节。
(3) 田径名人。将历史人物独立作为一个栏目设计, 既可讲述田径运动的相关知识, 又可增加教学的趣味性。通过田径明星的奋斗事迹来激发学生的学习动机, 培养学生吃苦耐劳的精神。
(4) 田径知识。展示各田径项目的起源、趣闻、运动伤害的预防及处理等田径相关知识。
(5) 赛事欣赏。通过视频欣赏田径运动各项目的身体美、技术美、动作美, 以及运动员超越自我的顽强拼搏精神所体现出的人格美。
(6) 综合测试。学生能够自动提交试卷, 由系统自动批阅、统计成绩并将信息反馈给学生, 以供学生自我评价。
(7) 在线讨论。其功能相当于网络聊天室, 主要提供给使用者一个实时在线的讨论工具, 学习者利用这一工具可以与其他学习者进行在线交流并得到实时的反馈。
3 基于Flex的田径网络课程技术实现
为了更加深入地探究Flex如何在网络课程中应用, 笔者以《田径网络课程》开发的具体步骤和流程为例, 详细阐述其开发过程。
3.1 网络课程中组件的应用
本网络课程采用页面无刷新技术, 当学习者进入网络课程后, 直接点击首页的导航, 就会在同一浏览器窗口弹出相应的界面, 无需页面跳转。在本网络课程中, 可多次使用弹出窗口来显示相关的学习内容。如“理论学习”等板块、“图片体育”板块中的缩略图及放大显示等。其中, 弹出窗口是Flex Builder中自定义的TitleWindow组件, 它继承自Panel类。Panel和它的子类都具有窗口程序的特点:有标题条, 可以放置其它内容, 从而形成一个整体。TitleWindow也具有自己的特点:有页面弹出窗口、有关闭按钮、能通过拖放调整位置等。
网络课程中使用MXML来创建TitleWindow自定义组件。文件名为lilluncontent.mxml, 组件以TitleWindow为基类, 所有组件文件都存放在程序根目录下/newcomp文件夹中。主要代码如下:
在“理论学习”按钮中注册了按钮单击事件, 当点击按钮时, 即触发changeStateToLilun (event:MouseEvent) 事件, 从而弹出理论学习窗口。
3.2 网络课程中HttpService数据通信服务
田径网络课程使用的数据形式多样, 包括文字数据、图片数据、视频数据。在设计制作过程中, 使用XML数据形式把这些数据集中, 然后通过ActionScript3.0中的XML相关类读取。
HTTPService可通过异步交互读取XML文件。通常HTTPService类使用send () 方法产生一个数据调用, 当SWF文件接收所有的数据, 便会产生一个名为result的事件, 也就是告诉此事件的所有监听者, 数据已准备就绪, 返回的数据被存储在名为lastResult的属性和ResultEvent的result属性中[3]。
因为田径项目的理论经过很长一段时间的发展已经比较成熟, 改变较少, 所以“理论学习”板块使用XML文件作为数据源。下面以“理论学习”为例介绍HTTPService数据服务。从xml文件中读取数据并作为树型控件 (Tree控件) 的数据源代码如下:
为了正常显示中文字符, 这里encoding属性值最好设定为“uft-8”。其中book.xml与主程序在同一目录。在程序中创建
4 结语
基于Flex技术开发的网络课程结合了MXML、ActionScript3.0及Flash相关技术, 具有较好的发展前景[4]。当然, 本文所做的开发与实践还处于初级阶段, 还有一些问题值得深入研究。通过对该课程的使用调查, 发现Flex应用程序也存在一些不足: (1) Flex虽然继承了Flash的诸多优点, 但丢掉了Flash的小巧轻盈; (2) Flex对服务器和客户端的硬件有一定要求; (3) 搜索引擎对SWF文件内容的支持不够。随着Flex技术的发展以及应用的深入, 这些问题都将逐步得到解决。
参考文献
[1]邓小霞.基于RIA的Flex在网络课程中的应用研究[D].武汉:华中师范大学, 2008.
[2]戴侃, 杨小虎.基于J2EE和FLEX技术构建RIA系统的探索与实现[J].微电子学与计算机, 2006 (5) .
[3]陈显军, 魏祖宽.基于Flex的XML数据通信与应用研究[J].计算机与现代化, 2008 (3) .
Flex技术设计 篇8
一、基于flex的虚拟学习平台的设计研究的意义
1. 提高学生学习过程中的自主性、创新性
借助网络信息技术和多媒体技术, 可以为学生创建一个具有一定探索性、创新性的学习情境, 对学生来说不仅可以充分地激发学生的学习兴趣, 还可以引导学生在学习中多角度思考问题, 帮助学生提高自己收集信息、处理信息、分析信息的能力, 进而提高学生在学习过程中的自主性、创新性。利用网络和多媒体所创造的动漫人物来进行情境创设, 带给学生一个更加轻松愉快的学习氛围, 在一定程度上可以减轻学生的心理压力, 再通过各种结合了课堂教学知识的小游戏, 从而达到练习巩固的效果, 进而提高学生的学习效率。
2. 丰富教师的教学方式, 提高教师的教学水平
虚拟学习平台的建立, 让以往教师的教学模式发生了一定的改变, 从传统意义上的说教式教学, 变为学生亲自参与的, 多感官刺激的教学模式。在这样的教学模式下, 可以把抽象的知识变得更为具体化, 也可以让学生的学习活动变得更加的生动、形象、有活力、富有趣味。从学生的认知角度来说, 这样的教学模式也更加符合学生的认知发展规律, 教师的教学效率自然能够得到提高。相对来说, 动漫信息技术整合知识的教学, 比单纯知识的教学更为学生所接受, 教师的教学策略以及教学方式能够变得更加丰富。
3. 实现教学三方互动, 提高教学效率
我们都知道, 在当前的教学活动中, 很难实现教学三方即教师、学生、家长之间的教育互动, 这样对教学的质量会有一定的影响。而虚拟学习平台则可以解决当下教学中的这一问题, 提高教师、学生、家长之间的互动, 让三者共同参与到教学活动中, 一起来交流沟通教学过程中的内容、方法。这样, 可以帮助老师和家长及时地掌握学生的学习状况, 并且及时发现其中的问题并予以解决, 进而提高教学效率。
4. 改善教育模式, 提高教育效果
虚拟学习平台为教学引入了全新的教学理念, 从各方面上来帮助教师进行教育行为中的创新。而且, 对今后的教育体制改革来说也有一定的推进作用, 具有一定的参考价值。从目前的教育现状来看, 教学模式存在一定的问题, 填鸭式的教学模式仍然占据主要地位。尽管教育改革一再推行素质教育, 但实施起来的效果却并不理想。虚拟学习平台的建立, 可以帮助教师及时更新教学理念, 改善教学模式, 进而有效地提高教学效果。
二、flex技术概述
flex技术是Adobe公司近几年所推出的一个具有重要意义的产品技术。flex是RIA技术中最优秀的技术之一, 它是一个针对企业级的富互联网应用的表现层解决方案, 让企业可以穿件富有个性特色的丰富媒体应用程序, 在一定程度上提高了用户的体验。此外, flex还提供了许多的技术操作, 例如访问本地的数据资源, 操作本地的SQL数据库, 开发桌面程序等。其特点是可以提供一个更为密集的内容, 减少了与服务器之间的响应时间, 反应速度较快, 并且在用户的界面上有一定的创新, 图形丰富有创意, 所提供的数据可以进行缓存, 可以以离线的方式进行工作。
三、系统设计
1. 设计目标
为了保证儿童的学习效率, flex虚拟学习平台的总体设计有以下目标:
(1) 对教材所提供的教学内容要进行深度的挖掘, 并且为了拓宽学生的知识面, 还要对教学内容加以拓展。
(2) 在进行动漫游戏的设计时, 要重视学生在其中的参与度, 还有注意游戏的趣味性和与学生之间的互动。
(3) 让家长也能够参与到其中, 实现共同教育、共同成长这一目标。
(4) 创设出完整的题库资源, 帮助学生学习。
2. 设计原则
在进行虚拟学习平台设计过程中, 需要注意到以下几个设计原则:
(1) 实用性原则。设计出的成果要保证其系统功能的齐全, 尽量不存在繁琐的操作过程, 所呈现出的操作页面也需要简洁直观。
(2) 开放性原则。也就是实现数据的互通, 使教育资源可以共享。
(3) 安全性原则。
(4) 可扩展性原则。
3. 架构设计
在虚拟学习平台的网络基本结构中有两个服务器, 一个是数据库服务器。用来储存所有用户的相关数据, 另一个是web服务器, 用来实现用户与系统之间的交互行为。这样, 学生、教师、家长通过Internet来访问这一学习平台, 管理员则通过Internet来进行系统的管理工作。
4. 系统架构
虚拟学习平台的系统架构采用的是分层的程序应用, 这样不仅可以方便管理, 还可以在极大的程度上提高程序的各项功能。
5. 系统功能展示
如图所示, 教学三方在虚拟学习平台中的操作并不相同, 也就是说不同的角色在登录系统之后所对应的操作并不相同。这样的功能页面就是根据不同用户的需求而设计, 简单明了, 方便操作。
6. 动漫游戏结构
在动漫游戏这一板块, 用户为学生, 这一板块也是该平台的核心模块。在动漫游戏的设计中采用的就是flex技术, 通过fle技术来构建动漫游戏的主程序, 控制AI, 角色移动等行为。而游戏所涉及的场景则运用的是flash。对flash我们并不陌生, 也就是说它是一个相对来说已经进入成熟期的产品。两者之间的配合, 算得上的互补, 在处理一些较为复杂的动态交互时以及反应速度上都会变得更加具有优势。
7. 性能解释
我们所设计的是学习平台, 学生是我们面对的主体用户, 所以, 学生所操作的动漫游戏板块属于该平台系统中最主要也是最关键的子系统。当该系统在日常的业务处理工作时, 其反应时间应该要小于3秒, 特殊板块的反应时间应该控制在30秒以内。当然, 在处理特殊情况, 如大量数据待处理时, 应该及时调整处理时间, 可以安排在类似夜间等系统空闲的时间段进行处理。
四、虚拟学习平台游戏板块的实现
因为该平台主要用户为学生, 设计初衷是帮助学生提高学习效率, 因此在这里主要介绍游戏模块的实现。
1. 相关理论的简单介绍
(1) 建构主义理论
从认知发展的角度来说, 建构主义是认知主义的进一步发展。在教学过程中我们不难发现, 学生的学习过程与其认知的发展之间存在着密切的联系, 而建构主义则能够帮助我们更加方便的发现学生在学习过程当中所体现出的认知规律。建构主义理论主要有以下几个观点:1) 学习是一个有意义的过程。学生获得知识是与外界环境进行交互作用而产生的结果, 在进行新知识的学习时, 传授并不是唯一途径。外界环境所带来的知识不仅可以被机体同化, 还可以改变机体原有的认知。2) 学习是一个协商活动的过程。学习者是教学活动中的主体, 也是其中最活跃的成分。由于个体差异的存在, 不同的学习者对所学习的知识所产生的理解会有所不同, 这时候, 便需要通过社会的“协商”以及时间才能够达成一个与真实世界相符合的认知。3) 学习是一种真实情景的体验。抽象的学习情境往往很难提高学生的学习效率, 学生需要在一个更加具有真实的学习情境里收获知识。教学不仅是为了知识的传播, 更多的还是要提高学生处理实际问题的能力。
(2) 皮亚杰的认知发展阶段论
根据皮亚杰的认知发展阶段理论, 处于不同年龄阶段的学生其认知发展的特点会有所不同。例如在7到11岁的儿童处于具体运算阶段, 该阶段的儿童虽然在逻辑思维方面已经有了一定的提升, 但是在抽象思维方面仍然具有一定的不足。在11岁至成年时期, 则开始具有一定的推理能力, 抽象思维逐渐成熟。以小学生为例, 他们大多处于具体运算阶段, 为了适应他们的认知发展特点, 在虚拟学习平台动漫游戏的设计中则要重视对学生的吸引力, 同时兼顾完整具体的剧情设计。
2. 动漫游戏说明
(1) 游戏文档
这一部分主要由两部分组成, 即游戏概述和游戏脚本。
(2) 人物设计
在进行游戏的人物设计时, 为了增加该模块的趣味性, 多采用的是卡通的人物形象。在设计时主要通过借鉴动漫角色进行创作, 例如动物人形化、植物人形化、形象拼接法等一系列措施。将原本刻板抽象的知识变得更加具有形象性, 吸引学生的注意力。
(3) 场景设计
采用卡通化的各种场景, 或夸大或缩小现实场景, 达到突出某一特征的目的。当然, 在设计时仍然要照顾学生的学习兴趣, 保证场景的连贯性, 推进故事情节的发展。
(4) 游戏的实现
前面已经做过介绍, 运用flex技术进行主程序的搭建, 进而实现各种命令的运作。
(5) 游戏功能
包括通关记录、角色交互、积分、答题, 任务等。通过这些功能设计, 实现了游戏功能的多样化设计。可以帮助用户自主记忆关卡, 控制游戏时间等。
3. 动漫游戏学习的优势
1) 趣味化的学习, 不仅能够有效帮助学生集中自己的注意力, 提高学生的学习兴趣, 更多的是在无形之中让学生习得知识。将教学内容与游戏融合在一起, 比知识的单一教学更有了竞争力, 丰富的真实具体情境, 是口头教学难以实现的。
2) 没有客户端的存在, 让这个平台具有了更为广泛的应用环境。只需要一个连接, 随处都可以进行学习。
3) 在未来, 信息化的程度愈来愈大, 这样的学习平台也将会更加具有实用性。
总结:
现在的我们已经步入了互联网时代, 信息化的教学也适应时代的发展。一个良好的虚拟学习平台可以满足学生的个性发展需求, 激发学生的学习兴趣, 为学生的学习提供一个形象化、具体化的学习环境。当然, 目前的设计还不够完善, 面对学生、教师、家长越来越高的需求, 虚拟学习平台的开发受到了一定的挑战。在教育教学这一领域中, 我们要做的, 还有很多。
参考文献
Flex技术设计 篇9
当前大部分的机房监控系统都是建立在J2EE技术基础之上的, 系统所涉及的层次较多, 复杂程度相对较高。尽管应用服务器及数据库都具备一定程度的监控作用, 可以实时监控应用服务器及数据库运用状况, 然而对于Web应用内部的运用状况却无能为力;不仅如此, 每一层面对应的监控信息相互间之间没有有效联系起来, 也就是说, 系统管理员从现有Web运行环境中根本无法获知程序运行的整体情况。实践中, 普遍采用的机房监控系统运行环境详见下图所示。
一般情况下, 在生产环境中的J2EE应用上线所处的集群环境都是由两台或以上应用服务器及数据库服务器构建而成的, 所以, 要想对应用运行作出全面反映, 还应解决怎样统一处理及分析集群当中所有节点对应的监控信息。
根据上述分析可以得知, 实现对J2EE应用的有效监控是极为复杂和困难的, 亟需设计出一种全新的机房综合监控系统。
基于Flex技术的机房综合监控系统设计方案
1.相关技术
(1) Flex。Flex即用来进行RIA开发的程序框架, 其实现了桌面应用程序最佳用户界面功能与Web程序广泛应用的、成本低廉的部署及互动多媒体的有效融合, 被视为新一代Web应用研发的有力工具。
Flex框架主要涉及MXML页面标记语言、Flex类库以及Action Script编程语言等三项内容, 其中, MXML页面标记语言是建立在XML基础之上的, 其作用主要是布置界面以及对控件进行显示;用户界面与服务器端数据借助MXML实现绑定, 从而使数据访问编程复杂程度大大降低, 编程效率极大提升;Flex类库作为核心内容, 能够提供一系列控件及组件, 以确保用户界面更好实现;作为面向对象语言的一种, Action Script的作用主要是对GUI组件进行控制, 回调数据访问及监听。
(2) JMS技术。JMS技术主要是对客户端与JMS提供者间的标准接口及语法作出定义, 属于J2EE范畴。管理对象、连接、会话、消息、消息的制造者及消费者等要素构成, 其作用主要是确保客户机相互间同步或异步通信。
JMS技术最大的优势就是其拥有开放标准及正确设计代码, 可以确保所有JMS服务器均能够兼容系统;不仅如此, JMS技术的消息传送方式可靠性高, 只要消息切实被发送至JMS服务器, 便将其发送到寻址到的目的地。只要消息向服务器发送代码执行无误, 就算服务器在进行处理时发生意外状况, 也不会影响目的地对消息的接收。
2.系统结构
从上文的介绍及分析中可以得知, 监控依托于J2EE的Web应用需要解决好性能及适用性两大关键问题, 其中, 在性能方面, 避免由于监控系统的增加而对之前系统的正常运行造成不利影响是摆在面临的最主要的问题;在适用性方面, 要想将监控系统自身价值充分展示出来, 必须确保能够在应用系统上线部署环境中有效运行。其基本架构如图2所示:
依托于Flex技术的机房综合监控系统当中, 监控服务端与监控代理端之间的正常通信主要是借助JMS得以实现的。JMS的作用主要表现为以下几点:促进机房综合监控系统处理数据性能进一步提升;JMS自身具备队列及主题订阅功能, 特别是对于集群环境最为适用, 可以实现数机监控;监控系统对于相关数据通常采用图表等直观方式予以显示;除此之外, 将Flex技术运用到监控信息展示层面, 可以提供更加高效便捷的用户界面, 系统与用户之间可以更加顺畅的开展互动。
结合以上介绍和分析, 笔者提出Flex技术的机房综合监控系统结构设计方案, 该综合监控系统主要涉及四个层次, 按照由下至上的顺序依次为监控资源、监控代理、监控消息以及监控服务。该综合监控系统当中的监控代理主要是在集群各个节点应用中运行, 监控代理与监控服务相互独立存在, 采取此种设计方式可以确保监控系统能够在集群环境中很好的运行, 从而有效解决了前文在介绍系统技术选择时所提到的适用性问题。监控代理并不负责具体的监控, 其作用主要是采集数据, 具体的监控工作则主要是由监控服务端来负责, 之所以如此设计, 主要是为有效解决前文所提到的系统性能问题。监控服务端对系统监控代理所收集到的数据进行汇总和处理, 这样可以实现对系统监控带给应用的影响的有效控制。利用依托于JMS技术的监控消息完成监控代理与监控服务中心之间的解耦, 同时选择自定义消息格式, 这样不但可以促进网络通信效率进一步提升, 而且对于监控系统整体性能的提高也具有重要意义。
3.系统功能
应用监控系统相关模块功能详见下表所示。
基于Flex技术的机房综合监控系统的核心是监控服务。监控服务主要作用具体表现为:
第一, 处理数据。监控服务器及数据库服务器负责开展具体的数据处理工作, 即以具体要求为依据对所接收到的来自于数据采集模块的实时数据进行分类及处理, 同时, 为确保监控系统可以实施查询到相关数据, 还需要将经过处理的数据保存在数据库服务器中。
针对数据采集模块所收集到的各种数据所进行的分类、处理、保存及系统中全部数据交互等操作均在监控服务器中开展, 监控服务器自身并没有数据保存机制及对应的设备, 因此, 只能将相关数据保存在数据库服务器当中。
第二, 监控管理。具体而言, 就是借助监控控制台完成针对监控代理的配置及管理, 并在运行过程中对监控代理具体行为进行调整, 以确保系统运行过程中, 用户对监控功能调整需求的切实实现。监控管理流程详见下图所示。
第三, 阈值告警。所谓阈值告警, 就是指在实时数据及历史数据等监控数据操作阈值出现异常状况时, 将发生异常的数据及资源等信息准确且及时的发送给用户, 这样用户便可以及时根据实际情况调整系统或相关业务, 从而有效防止发生系统运行效率下降、系统运行紊乱甚至系统崩溃等严重后果。阈值告警实现:
阈值警告中向用户进行告警通知的方式主要有以下几种:第一, 向告警处理模块发送告警信息, 提醒用户及时进行处理;第二, 将告警信息借助显示的数据或图像予以展示, 提醒用户系统中出现异常数据;最后, 借助Web界面对告警信息进行浏览, 能够获悉系统采集到异常数据, 以所采集到的异常数据为依据, 对到底是出现了网络连接错误还是应用程序发生异常做出判断。
第四, 数据展示主要是根据应用提供统一视图, 从而向用户提供其所关心的相关业务开展情况具体信息, 便于用户以此为依据来解决系统性能及可用性问题。对于广大用户而言, 借助数据展示可以获取极为丰富的监控信息, 从而为用户获悉系统历史及当前运行状况创造便利条件。
结语
综上所述, 针对当前实践中所普遍采用的机房综合监控系统中所存在的不足与问题, 笔者提出了基于Flex技术的机房综合监控系统。通过实际应用证实, 该系统具备实时应用特点, 能够很好的解决大用户量并发控制问题, 可以提升系统稳定性、可靠性、容错性, 具有优越的普遍适用性, 并不过分依赖于某一既定的应用服务或者消息服务器, 一般情况下, 不用进行特别调整便可以实现在其他服务器上的有效运行, 除此之外, 系统借助一种松散的耦合实现集成, 从而确保其拥有优越的复用性能。本文所阐述的基于Flex技术的机房综合监控系统具有极大的实际应用及推广价值。