flex开发技巧_V0.1

1Flex开发技巧版本号：0.1制定日期：2008-10-18编制夏辉日期2008-10-18审核日期批准日期2目录1Flex优化................................................................................................................................................32页面跳转.................................................................................................................错误!未定义书签。2.1Flex页面之间的参数传递..........................................................................错误!未定义书签。2基于Cairngorm框架的设计................................................................................................................52.1需求描述.....................................................................................................错误!未定义书签。3Cairngorm框架解析..............................................................................................错误!未定义书签。31Flex优化Flex的帮助手册中，有一个专门的章节讲了程序的优化，下面是我结合帮助作的几点小结：1、避免容器的多级嵌套，减少相对尺寸、相对定位的使用。在使用百分比来给容器内的元件定尺寸，一旦容器中的任何一个元件的位置和尺寸变化，都会引发容器对所有子级的重定位动作。如果嵌套的级别很深，这个计算量会很大。2、尽量使用轻量级的容器Canvas是体积最小的容器，它只支持绝对定位。很多时候，都可以使用它来代替HBOx和VBox。另外，Canvas也是我们编写自定义容器性质组件的一个首选。它具有容器的基本功能，利于扩展。3、避免使用大体积的组件，比如DataGrid、AdvancedDataGrid大个子组件的功能强大，但开销也是非常大的。由于功能的复杂性，使得皮肤、样式、itemRenderer的实现都格外复杂。4、处理数据时多用分页的方式在使用数据类型控件时，尽量减少数据一次的显示量。比如TileList，它会把数据一次性全部创建，不管是不是需要显示，这样很浪费资源。ViewStack、TabNavigator等在处理元件时，并不是一次创建，只要元件在第一次被显示时才创建，这样，就避免的不必要的开销。5、setStyle和styleNameFlex组件的皮肤都是可视化元件，组件在自身初始化时，会使用当前的样式比如styleName完成所有皮肤元件的绘制。如果我们在运行期间通过setStyle修改了组件的样式，组件的尺寸、位置就会作相应调整。联系到第一条，如果组件位于一个层级很深的容器中，也会有一个大的计算量。2Flex常见错误2.1CannotcreateHTMLwrapper.Right-clickheretorecreatefolderhtml-template.点击项目-属性-Flexcompiler，取消”Generatehtmlwrapperfile”即可。42.2BlazeDS项目用自带的Tomcat启动时报“FileNotFoundException:target\activemq-test.log”进行tomcat的lib\activemq4.1.1，从中去除activemq-core-4.1.1-tests.jar，再启动，就不报错了顺便删除项目中lib目录下的servlet-api.jar，否则提示该jar无法加载53模块化如果做一个很大的Flex程序，比如程序文件有2，3M，一次性下载的话，就算是我的10M宽带也是需要一段时间。更别提普通的ADSL了。另外如果同时实例化太多的Flex控件,要占用很大的内存，浏览器（FlashPlugin）处理的时候会很慢，同时也会占很多的CPU资源。因此，我们必须通过模块化技术来解决此类问题。模块（Module）是以mx:Module代替mx:Application作为根标签的MXML文件（或ActionScript文件）。你可以将带有mx:Module标签的作为一个程序来看，但是它不能运行。代码演示项目名称ModuleApp.zip3.1mx:ModuleLoader方式调用ModuleModuleLoader组件常用属性、方法和事件名称分类说明url属性要加载的外部MXMLmodule的urlmoduleLoader方法构造函数，没有参数loadModule方法加载外部的mxmlmodule，无返回值unloadModule方法卸载外部的mxmlmoduleerror事件捕获抛出错误的事件loading事件ModuleLoader开始加载外部文件时触发的事件ready事件ModuleLoader完成加载外部文件时触发的事件setup事件加载开始并且可以提供模块信息，但没有加载完成时触发的事件unload事件卸载模块时触发的事件urlChanged事件当url发生改变时触发的事件progress事件跟踪模块实例加载的进度信息调用过程1、将组件mx:ModuleLoader拖到界面上，代码如下：mx:ModuleLoaderid=mlwidth=300/2、如果需要加载外部mxml文件，代码如下：privatefunctionuseModuleLoader(event:Event):void{if(ml.url==null){ml.url=UserList.swfml.loadModule();}}3、组件mx:ModuleLoade的错误处理详见ErrorApp.mxml4、显示组件mx:ModuleLoade的加载过程详见ProgressApp.mxml6详见ModuleApp1.zip3.2ModuleManager方式调用ModuleModuleManager方式比ModuleLoader方便编码复杂一些，但是更加灵活。调用过程：1、通过ModuleManager实例的getModule()方法拿到Module模块的一个索引，索引类型为IModuleInfo。2、调用这个索引的load()方法。3、利用这个接口的factory属性拿到它相关连的Module工厂，调用此工厂的create()方法，并将返回值强制转换成当前的Module类型。代码如下：![CDATA[importmx.events.ModuleEvent;importmx.modules.ModuleManager;importmx.modules.IModuleInfo;publicvarinfo:IModuleInfo;privatefunctioninit():void{info=ModuleManager.getModule(Module1.swf);info.addEventListener(ModuleEvent.READY,moduleEventHandler);info.load();}privatefunctionmoduleEventHandler(e:ModuleEvent):void{vb.addChild(info.factory.create()asModule1);}]]/mx:Scriptmx:VBoxid=vb/详见ModuleApp1.zip3.3模块之间的数据通信Module模块是一个容器，每个独立的模块对象都相当于一个自定义组件。有以下几种方式可以实现模块-模块、模块-主应用、主应用-模块、模块-一般自定义组件间的数据传输和通信。1.利用ModuleLoader的child、ModuleManager的factory、以及Application的parentApplication属性存取Module模块和主应用文件对象索引。72.因为Module模块在ModuleLoader中通常用url属性来指定，所以我们可以通过在url上面拼GET参数，然后在Module模块中解析这些拼上去的参数的方式来传输数据。3.通过ActionScript接口方式。你可以定义一个ActionScript接口，这个接口定义了一系列方法和属性。Module模块和主应用Application都可以访问这些属性。从而实现数据共享。3.3.1在Application中访问Module模块对象在application对象中代码如下privatefunctiongetTitle():void{s=(m1.childasChildModule1).getModTitle();}在module模块中代码如下：publicfunctiongetModTitle():String{returnChildModule1;}详见AppToModule.mxml通过这种方式得到子Module模块的索引导致了主应用Application和Module模块之间的紧耦合，不利于模块逻辑的重用。同样地，利用ModuleManager的factory属性也可以拿到当前ModuleLoader的子模块对象的索引。在module模块中代码如下：publicfunctioncomputeAnswer(a:Number,b:Number):Number{returna+b;}详见SimpleModule.mxml在application对象中代码如下publicvarassetModule:IModuleInfo;publicvarsm:Object;publicfunctioninitApp():void{//GettheIModuleInfointerfaceforthespecifiedURL.assetModule=ModuleManager.getModule(SimpleModule.swf);assetModule.addEventListener(ready,getModuleInstance);assetModule.load();}publicfunctiongetModuleInstance(e:Event):void{//Getaninstanceofthemodule.sm=assetModule.factory.create()asSimpleModule;}publicfunctionaddNumbers():void{answer=sm.computeAnswer(a,b);8}详见SimpleMXMLApp.mxml3.3.2在Module模块对象中存取主应用Application1、通过parentApplication属性获取application对象的属性和函数Module模块可以通过其parentApplication属性拿到主应用Application对象的索引，通过这个索引可以访问主应用对象的公共方法和属性。这种方式使得application模块与module模块耦合过大，可移植性大大降低。在module模块中代码如下：privatevarexpenses:ArrayCollection;//Accesspropertiesoftheparentapplication.privatefunctiongetDataFromParent():void{expenses=pa