如果不了解Flex发布的swf结构和初始化流程,会在工作中遇到困难,Flex发布的swf结构和Flex对显示层级的划分是Flex架构中的一部分。
Flex发布的swf结构
Flex生成的swf是个2帧的MovieClip,文档类继承SystemManager,主时间轴上没有任何内容,帧上也没有代码,2帧结构是为创建加载应用程序的默认加载器,这种早期就开始使用的加载方式在如今仍然具有优势,默认的加载器如图:
加载器的外观是通过代码绘制的,SystemManager使用工厂模式来创建应用程序,这使得第一帧涉及的Flex底层较少,加载器在渐进式下载过程中会很快的显示在舞台上,当Flex工程和需要的共享库下载完毕后,SystemManager跳到第二帧,从应用程序域中找出Application的定义创建实例。下图为swf初始化的顺序:
SystemManager
SystemManager是Flex发布swf的文档类,是应用程序的入口,SystemManager继承MovieClip,不仅控制swf的加载和启动,还划分Flex工程显示层级,保存嵌入字体和样式,监视swf画布大小等顶级功能,某些功能被映射到Application或全局管理器中,你可以选择访问的方式。
Flex显示层级划分
SystemManager对Flex应用程序的显示层级划分如下:
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是为了利用工厂模式分离preloader和Application的关联。整个Flex项目确实可以载入到其它项目中的,但不是以Module方式载入而是通过普通方法加载,例如使用SWFLoader或Loader加载,SystemManager作为顶级容器加入到项目的显示列表。
SystemManager的application: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来代替Flash的v3组件框架,但你需要斟酌加载swf给Flash项目带来的等待时间,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参数比较方便。
初始化流程
Application和UIComponent的初始化过程涉及到很多方面,若揉杂在一起便会对维护和修改造成混乱的局面,于是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()方法中对组件进行改造;如果只需要对组件的属性或者样式进行设置,可以选择preInitilize、initilize、事件在不同阶段进行设置,要修改布局,可在creationComplete事件后进行。
Application初始化流程
Application的初始化过程不但包括内部子级的初始化,还通知SystemManager将其加入舞台的显示列表,Application是Flex容器,它的初始化规则遵守普通组件的规则,这里以事件为主线阐明Application在初始化过程中经历的阶段:
Application拥有普通容器没有的ApplicationComplete事件,Application被SystemManager添加到显示列表后触发,完成度比createComplete更高,在这个事件中可以访问舞台。
初始化事件
初始化事件都是FlexEvent事件,对应类型如下表:
事件名称 |
事件类型 |
preinitilize |
FlexEvent.PREINITIALIZE |
initilize |
FlexEvent.INITIALIZE |
creationComplete |
FlexEvent.CREATION_COMPLETE |
applicationComplete |
FlexEvent.APPLICATION_COMPLETE |
flex启动过程和初始化