Flex 页面 初始化顺序

Flex RemoteObject 远程调用对像默认是异步执行的,就像AJAX那样,,,,这样子有时候对于等待业务层反回值是很不方便,,所以在Flex RemoteObject 对像中也有设置为同步执行的方法:

两种解决办法: 1,相关处理代码放在result返回那个方法里面. 2,concurrency 设置为single或last. (<mx:RemoteObject concurrency="single"/> concurrency的属性就是同步和异步的 默认的是multiple)

<wbr><a target="_blank" id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/ddw1997/archive/2012/10/11/2719746.html">Flex中实现Application未初始化前加载配置内容</a></wbr>

http://www.cnblogs.com/ddw1997/archive/2012/10/11/2719746.html

flex组件在建立的时候都会经历四个事件:preinitialize,initialize,creationComplete和updateComplete(updateComplete事件在任何改动视觉的情况下都会发生,不是初始化时独有的)。我这里有个例子来检测在嵌套和平行的情况下,测试各个组件的事件抛出顺序。

[c-sharp] view plain copy print ?
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"
  3. preinitialize="showEvent(event)"
  4. initialize="showEvent(event)"
  5. creationComplete="showEvent(event)"
  6. updateComplete="showEvent(event)">
  7. <mx:Script>
  8. <!--[CDATA[
  9. importflash.utils.getTimer;
  10. privatefunctionshowEvent(event:Event):void
  11. {
  12. trace(flash.utils.getTimer().toString()+">>"
  13. +event.currentTarget.name+""+event.type);
  14. }
  15. ]]-->
  16. </mx:Script>
  17. <mx:Canvasid="canv1"
  18. preinitialize="showEvent(event)"
  19. initialize="showEvent(event)"
  20. creationComplete="showEvent(event)"
  21. updateComplete="showEvent(event)">
  22. <mx:Buttonid="btn1"
  23. preinitialize="showEvent(event)"
  24. initialize="showEvent(event)"
  25. creationComplete="showEvent(event)"
  26. updateComplete="showEvent(event)"/>
  27. </mx:Canvas>
  28. <mx:Buttonid="btn2"
  29. preinitialize="showEvent(event)"
  30. initialize="showEvent(event)"
  31. creationComplete="showEvent(event)"
  32. updateComplete="showEvent(event)"/>
  33. </mx:Application>

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preinitialize="showEvent(event)" initialize="showEvent(event)" creationComplete="showEvent(event)" updateComplete="showEvent(event)"> <mx:Script> <!--[CDATA[ import flash.utils.getTimer; private function showEvent(event:Event):void { trace(flash.utils.getTimer().toString()+" >> " +event.currentTarget.name+" "+event.type); } ]]--> </mx:Script> <mx:Canvas id="canv1" preinitialize="showEvent(event)" initialize="showEvent(event)" creationComplete="showEvent(event)" updateComplete="showEvent(event)"> <mx:Button id="btn1" preinitialize="showEvent(event)" initialize="showEvent(event)" creationComplete="showEvent(event)" updateComplete="showEvent(event)"/> </mx:Canvas> <mx:Button id="btn2" preinitialize="showEvent(event)" initialize="showEvent(event)" creationComplete="showEvent(event)" updateComplete="showEvent(event)"/> </mx:Application>

输出:

[c-sharp] view plain copy print ?
  1. 349>>InitExample0preinitialize
  2. 356>>canv1preinitialize
  3. 359>>btn1preinitialize
  4. 369>>btn1initialize
  5. 370>>canv1initialize
  6. 371>>btn2preinitialize
  7. 372>>btn2initialize
  8. 372>>InitExample0initialize
  9. 476>>btn1creationComplete
  10. 477>>btn1updateComplete
  11. 477>>canv1creationComplete
  12. 477>>canv1updateComplete
  13. 477>>btn2creationComplete
  14. 477>>btn2updateComplete
  15. 478>>InitExample0creationComplete
  16. 481>>InitExample0updateComplete

349 >> InitExample0 preinitialize 356 >> canv1 preinitialize 359 >> btn1 preinitialize 369 >> btn1 initialize 370 >> canv1 initialize 371 >> btn2 preinitialize 372 >> btn2 initialize 372 >> InitExample0 initialize 476 >> btn1 creationComplete 477 >> btn1 updateComplete 477 >> canv1 creationComplete 477 >> canv1 updateComplete 477 >> btn2 creationComplete 477 >> btn2 updateComplete 478 >> InitExample0 creationComplete 481 >> InitExample0 updateComplete

结论:

就单个组件而言,事件的抛出顺序是preinitialize,initialize,creationComplete
嵌套关系的两个组件(比如Canvas和button1),preinitialize先外后内,initialize和creationComplete先内后外。只是creationComplete要在下一次update才会发生。 平行关系的两个组件(比如Canvas和button2),按mxml内的顺序,只有前面组件initialize结束后,后面的组件才会抛出preinitialize。

如果不了解 Flex 发布的 swf 结构和初始化流程,会在工作中遇到困难, Flex 发布的 swf 结构和 Flex 对显示层级的划分是 Flex 架构中的一部分。

Flex发布的swf结构

Flex生成的swf是个2帧的MovieClip,文档类继承SystemManager,主时间轴上没有任何内容,帧上也没有代码,2帧结构是为创建加载应用程序的默认加载器,这种早期就开始使用的加载方式在如今仍然具有优势,默认的加载器如图:


加载器的外观是通过代码绘制的,SystemManager使用工厂模式来创建应用程序,这使得第一帧涉及的Flex底层较少,加载器在渐进式下载过程中会很快的显示在舞台上,当Flex工程和需要的共享库下载完毕后,SystemManager跳到第二帧,从应用程序域中找出Application的定义创建实例。下图为swf初始化的顺序:

SystemManager

SystemManagerFlex发布swf的文档类,是应用程序的入口,SystemManager继承MovieClip,不仅控制swf的加载和启动,还划分Flex工程显示层级,保存嵌入字体和样式,监视swf画布大小等顶级功能,某些功能被映射到Application或全局管理器中,你可以选择访问的方式。

Flex显示层级划分

SystemManagerFlex应用程序的显示层级划分如下:

SystemManager是顶级显示层的管理器,凡是父级为SystemManager的显示层都是顶级显示层,应用程序、弹出窗口、工具提示、鼠标光标都是父级为SystemManager的顶级层,popUpChildren:IChildList,toolTipChildren:IChildList,cursorChildren:IChildList并不是具体的显示层,而是记录顶级层的集合,SystemManager自动维护这些集合,使得弹出窗口总是位于应用程序之上,工具提示总是位于弹出窗口之上,鼠标光标总是位于工具提示之上。弹出窗口、工具提示、鼠标光标集合由Flex框架在运行中添加和删除内容,不要通手动修改这些集合以干扰框架运行,但内可以添加应用程序层对你的项目进行划分。

SystemManager重写了DisplayObjectContainer的接口,它与Container一样忽略辅助性的元素,通过SystemManager获取的子级实际上不包含浮动窗口、工具提示和光标这样的辅助层,也不包括内部的鼠标捕捉层,只包含默认的应用程序层和使用addChild()等方法添加进来的应用层,这也是SystemManager提供cursorChildren等这样的集合访问而不是通过getChildAt()访问顶级显示层的原因。通过cursorChildren这样的集合也并不能完全暴露SystemManager的所有子级,要访问原始子级,可以使用rawChildren:IChildList属性进行遍历,但不要通过此手段破坏SystemManager的结构。

载入Flex项目

SystemManager实现IFlexModuleFactory接口,但并不表示它可以作为一个Module载入,扩展IFlexModuleFactory是为了利用工厂模式分离preloaderApplication的关联。整个Flex项目确实可以载入到其它项目中的,但不是以Module方式载入而是通过普通方法加载,例如使用SWFLoaderLoader加载,SystemManager作为顶级容器加入到项目的显示列表。

SystemManagerapplication:IUIComponent属性引用载入Flex项目的application实例,getDefinitionByName(name:String):Object方法获取载入swf中的定义,例如Object(SystemManager(mySwfLoader.content).application.testButton获取载入项目中的testButton按钮实例,SystemManager(mySwfLoader.content).getDefinitionByName("TestButton")获取载入项目中的TestButtond定义。

Flex项目载入到另一个Flex项目中后,会使用新项目的SystemManager管理顶级层,因为全局管理器只能有一个,例如载入项目中有弹出窗口,这个弹出窗口的父级为新项目的SystemManager,原项目的SystemManager仅作为一个父级存在,它的功能只限定于引用,原项目中可以使用topLevelSystemManager:ISystemManager属性引用新项目的SystemManager。让一个Flex项目载入另外一个Flex项目没有什么优势,不能很好的体现项目和模块的关系,代码组织不明确且无法避免重定义,我们应该使用Module来分割应用程序。一个例外是你可以让Flash项目载入Flex工程构建UI来代替Flashv3组件框架,但你需要斟酌加载swfFlash项目带来的等待时间,Flex项目通常体积比较大。

Application

Application是应用层的顶级容器,Application的某些属性关系到Flex如何编译项目或生成的网页,这些属性不能用as设置,只能通过mxml标签设置,如下:

属性

说明

frameRate:Number

项目帧数,默认为24

pageTitle:String

浏览器标题栏中显示的文本

usePreLoader:Boolean

是否显示预加载器PreLoader

preloader:Object

预加载器类路径

scriptRecursionLimit:int

最大堆栈

scriptTimeLimit:Number

最大失去响应时间

获取swf地址和flashVars

Application的url:String可以获取swf地址,但这个属性依然不能获取网页传递的值对,因为Application是通过发布swf的loaderInfo获取地址,parameters:Object属性映射了loadInfo的flashVars,访问flashVars参数比较方便。

初始化流程

ApplicationUIComponent的初始化过程涉及到很多方面,若揉杂在一起便会对维护和修改造成混乱的局面,于是Flex将初始化过程进行阶段划分并制定执行顺序,每个阶段完成都会触发一个事件,这些事件不仅能够反映初始化过程,还为我们提供了对初始化进行增补的手段。

UIComponent初始化流程

Flex组件和Flex容器都继承UIComponent,它们的初始化流程都被定义在UIComponent中,这表示Flex组件和Flex容器的初始化流程是相同的,Flex组件虽然不能象容器那样添加子级,但不代表它们没有子级,如Button内部包含的UITextField,某些Flex组件和Flex容器一样包括其它Flex组件,如Combox的子级包括List组件,这样的组件称为复合组件。Flex组件和Flex容器均采取递归的方式初始化,即先完成子级初始化,然后完成父级初始化,在初始化过程中伴随者事件,如图:


UIComponent的构造函数中不会创建组件的子级,构造函数中只对组件的默认属性、样式进行设置,并且为组件添加侦听器,子级是在initilize()方法中创建的,initilize()方法是UIcomponent初始化核心,它不由构造函数调用的,而是调用addChild()addChildAt()方法时执行,好处是节省内存占用,初始化后的组件必然要占据大量的内存,动态添加的子级在加入容器之前保持其最小体积,直到加入容器时才具有正常的内存占用。在createChildren()方法中创建组件的子级,如果子级也是UIComponent,则会产生递归,preInitilize事件提供创建子级之前的准备工作,childrenCreated()initilizationComplete()方法提供子级创建完毕之后的改造工作,区别是它们之间相隔一个initializeAccessibility()方法,initializeAccessibility()用于初始化辅助功能,当所有子级以及递归完成后,发送initilize事件,如果UIComponent是容器,则接着对组件进行布局,布局完成后发送creationComplete事件。了解initilize()方法工作原理对开发自定义组件非常重要,选择继承UIComponent时,应该把创建子级的代码放入createchildren()方法中;选择继承内置组件时,可以在childrenCreated()initilizationComplete()方法中对组件进行改造;如果只需要对组件的属性或者样式进行设置,可以选择preInitilizeinitilize、事件在不同阶段进行设置,要修改布局,可在creationComplete事件后进行。

Application初始化流程

Application的初始化过程不但包括内部子级的初始化,还通知SystemManager将其加入舞台的显示列表,ApplicationFlex容器,它的初始化规则遵守普通组件的规则,这里以事件为主线阐明Application在初始化过程中经历的阶段:



Application拥有普通容器没有的ApplicationComplete事件,ApplicationSystemManager添加到显示列表后触发,完成度比createComplete更高,在这个事件中可以访问舞台。

初始化事件

初始化事件都是FlexEvent事件,对应类型如下表:

事件名称

事件类型

preinitilize

FlexEvent.PREINITIALIZE

initilize

FlexEvent.INITIALIZE

creationComplete

FlexEvent.CREATION_COMPLETE

applicationComplete

FlexEvent.APPLICATION_COMPLETE


如果不了解 Flex 发布的 swf 结构和初始化流程,会在工作中遇到困难, Flex 发布的 swf 结构和 Flex 对显示层级的划分是 Flex 架构中的一部分。

Flex发布的swf结构

Flex生成的swf是个2帧的MovieClip,文档类继承SystemManager,主时间轴上没有任何内容,帧上也没有代码,2帧结构是为创建加载应用程序的默认加载器,这种早期就开始使用的加载方式在如今仍然具有优势,默认的加载器如图:


加载器的外观是通过代码绘制的,SystemManager使用工厂模式来创建应用程序,这使得第一帧涉及的Flex底层较少,加载器在渐进式下载过程中会很快的显示在舞台上,当Flex工程和需要的共享库下载完毕后,SystemManager跳到第二帧,从应用程序域中找出Application的定义创建实例。下图为swf初始化的顺序:

SystemManager

SystemManagerFlex发布swf的文档类,是应用程序的入口,SystemManager继承MovieClip,不仅控制swf的加载和启动,还划分Flex工程显示层级,保存嵌入字体和样式,监视swf画布大小等顶级功能,某些功能被映射到Application或全局管理器中,你可以选择访问的方式。

Flex显示层级划分

SystemManagerFlex应用程序的显示层级划分如下:

SystemManager是顶级显示层的管理器,凡是父级为SystemManager的显示层都是顶级显示层,应用程序、弹出窗口、工具提示、鼠标光标都是父级为SystemManager的顶级层,popUpChildren:IChildList,toolTipChildren:IChildList,cursorChildren:IChildList并不是具体的显示层,而是记录顶级层的集合,SystemManager自动维护这些集合,使得弹出窗口总是位于应用程序之上,工具提示总是位于弹出窗口之上,鼠标光标总是位于工具提示之上。弹出窗口、工具提示、鼠标光标集合由Flex框架在运行中添加和删除内容,不要通手动修改这些集合以干扰框架运行,但内可以添加应用程序层对你的项目进行划分。

SystemManager重写了DisplayObjectContainer的接口,它与Container一样忽略辅助性的元素,通过SystemManager获取的子级实际上不包含浮动窗口、工具提示和光标这样的辅助层,也不包括内部的鼠标捕捉层,只包含默认的应用程序层和使用addChild()等方法添加进来的应用层,这也是SystemManager提供cursorChildren等这样的集合访问而不是通过getChildAt()访问顶级显示层的原因。通过cursorChildren这样的集合也并不能完全暴露SystemManager的所有子级,要访问原始子级,可以使用rawChildren:IChildList属性进行遍历,但不要通过此手段破坏SystemManager的结构。

载入Flex项目

SystemManager实现IFlexModuleFactory接口,但并不表示它可以作为一个Module载入,扩展IFlexModuleFactory是为了利用工厂模式分离preloaderApplication的关联。整个Flex项目确实可以载入到其它项目中的,但不是以Module方式载入而是通过普通方法加载,例如使用SWFLoaderLoader加载,SystemManager作为顶级容器加入到项目的显示列表。

SystemManagerapplication:IUIComponent属性引用载入Flex项目的application实例,getDefinitionByName(name:String):Object方法获取载入swf中的定义,例如Object(SystemManager(mySwfLoader.content).application.testButton获取载入项目中的testButton按钮实例,SystemManager(mySwfLoader.content).getDefinitionByName("TestButton")获取载入项目中的TestButtond定义。

Flex项目载入到另一个Flex项目中后,会使用新项目的SystemManager管理顶级层,因为全局管理器只能有一个,例如载入项目中有弹出窗口,这个弹出窗口的父级为新项目的SystemManager,原项目的SystemManager仅作为一个父级存在,它的功能只限定于引用,原项目中可以使用topLevelSystemManager:ISystemManager属性引用新项目的SystemManager。让一个Flex项目载入另外一个Flex项目没有什么优势,不能很好的体现项目和模块的关系,代码组织不明确且无法避免重定义,我们应该使用Module来分割应用程序。一个例外是你可以让Flash项目载入Flex工程构建UI来代替Flashv3组件框架,但你需要斟酌加载swfFlash项目带来的等待时间,Flex项目通常体积比较大。

Application

Application是应用层的顶级容器,Application的某些属性关系到Flex如何编译项目或生成的网页,这些属性不能用as设置,只能通过mxml标签设置,如下:

属性

说明

frameRate:Number

项目帧数,默认为24

pageTitle:String

浏览器标题栏中显示的文本

usePreLoader:Boolean

是否显示预加载器PreLoader

preloader:Object

预加载器类路径

scriptRecursionLimit:int

最大堆栈

scriptTimeLimit:Number

最大失去响应时间

获取swf地址和flashVars

Application的url:String可以获取swf地址,但这个属性依然不能获取网页传递的值对,因为Application是通过发布swf的loaderInfo获取地址,parameters:Object属性映射了loadInfo的flashVars,访问flashVars参数比较方便。

初始化流程

ApplicationUIComponent的初始化过程涉及到很多方面,若揉杂在一起便会对维护和修改造成混乱的局面,于是Flex将初始化过程进行阶段划分并制定执行顺序,每个阶段完成都会触发一个事件,这些事件不仅能够反映初始化过程,还为我们提供了对初始化进行增补的手段。

UIComponent初始化流程

Flex组件和Flex容器都继承UIComponent,它们的初始化流程都被定义在UIComponent中,这表示Flex组件和Flex容器的初始化流程是相同的,Flex组件虽然不能象容器那样添加子级,但不代表它们没有子级,如Button内部包含的UITextField,某些Flex组件和Flex容器一样包括其它Flex组件,如Combox的子级包括List组件,这样的组件称为复合组件。Flex组件和Flex容器均采取递归的方式初始化,即先完成子级初始化,然后完成父级初始化,在初始化过程中伴随者事件,如图:


UIComponent的构造函数中不会创建组件的子级,构造函数中只对组件的默认属性、样式进行设置,并且为组件添加侦听器,子级是在initilize()方法中创建的,initilize()方法是UIcomponent初始化核心,它不由构造函数调用的,而是调用addChild()addChildAt()方法时执行,好处是节省内存占用,初始化后的组件必然要占据大量的内存,动态添加的子级在加入容器之前保持其最小体积,直到加入容器时才具有正常的内存占用。在createChildren()方法中创建组件的子级,如果子级也是UIComponent,则会产生递归,preInitilize事件提供创建子级之前的准备工作,childrenCreated()initilizationComplete()方法提供子级创建完毕之后的改造工作,区别是它们之间相隔一个initializeAccessibility()方法,initializeAccessibility()用于初始化辅助功能,当所有子级以及递归完成后,发送initilize事件,如果UIComponent是容器,则接着对组件进行布局,布局完成后发送creationComplete事件。了解initilize()方法工作原理对开发自定义组件非常重要,选择继承UIComponent时,应该把创建子级的代码放入createchildren()方法中;选择继承内置组件时,可以在childrenCreated()initilizationComplete()方法中对组件进行改造;如果只需要对组件的属性或者样式进行设置,可以选择preInitilizeinitilize、事件在不同阶段进行设置,要修改布局,可在creationComplete事件后进行。

Application初始化流程

Application的初始化过程不但包括内部子级的初始化,还通知SystemManager将其加入舞台的显示列表,ApplicationFlex容器,它的初始化规则遵守普通组件的规则,这里以事件为主线阐明Application在初始化过程中经历的阶段:



Application拥有普通容器没有的ApplicationComplete事件,ApplicationSystemManager添加到显示列表后触发,完成度比createComplete更高,在这个事件中可以访问舞台。

初始化事件

初始化事件都是FlexEvent事件,对应类型如下表:

事件名称

事件类型

preinitilize

FlexEvent.PREINITIALIZE

initilize

FlexEvent.INITIALIZE

creationComplete

FlexEvent.CREATION_COMPLETE

applicationComplete

FlexEvent.APPLICATION_COMPLETE


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值