flex framework 是一个十分精细与复杂的架构,在轻松将组件(controls / containers) 拖拉到画面上就能构成一个 appliction ui的背后,其实是这个 framework 在暗地里提供了许多底层的服务,才能让整个flex 应用程序顺利启动与执行。
上面这张图是从比较高的位置来鸟瞰一支 flex app时所看到的架构。
简单的说明如下:
*每当开启一支 flex app swf 时,最先被加载并执行的并不是程序(controls/containers),而是 SystemManager,它有点像是操作系统中的 Boot Loader,Loader加载后才能 bootstrap 后面的每一道手续起来。
*当 SystemManager 加载并启动后,最先显示在画面上的就是 Preloader,也就是灰色的 progress bar,这是因为此时 SystemManager 正在下载其它需要的组件与 class library。
*等程序所需的 class library都下载完成后,progress bar 就功成身退,此时SystemManager 就会建立 Application 组件。
*Application组件是整支 app的最底层,至少所有 UI 面的组件(例如 panel, button, chart…)都置于这个 Application组件中,所以说的更明白一点就是:在flex中,所有东西都是组件,一层包一层,而往上trace到最根本就是这个 Application组件。
*同一时间,SystemManager 也会建立 Cursor Manager负责管理各种 cursor,例如显示 arrow、hand等不同的图示,当然如果你想隐藏鼠标光标,也可以由这里下手。
*Drag Manager则是专门负责各种拖拉行为,例如 flexstore里面把商品拖放到购物车里,就是靠 Drag Manager去启始拖拉,并置换 Drag Proxy图案,然后侦测鼠标的位置来显示不同的鼠标(例如绿色的勾勾,红色的叉叉)
*PopUp Manager 是处理各种需要跳到最上层窗口的地方,例如 Alert window, 或 TitleWindow等需要置于最上层的组件,就是靠 PopUpManager.createPop()去建立,同时它也可以提供 modal window的服务,也就是在 window下方产生一大片白色吃掉所有的鼠标反应,这部份的 code base 基本上跟 flash 8里面没有太大不同,这篇里有相关介绍,唯一的差别是由于 flash 8 的 Bitmap API提供了 catchAsBitmap指令因此可以顺便加些 blur/dissolve效果上去。
*ToolTip Manager 则是负责显示所有的提示文字,它的实作也很简单,当鼠标 rollover 任何一个对象时,framework会去探询该对象是否有 obj.tooltip=”xxx” 这样的属性,如果有,就交给 ToolTip manager去画一个黄色背景的框框将文字显示出来,并且在一定时间后 fade out。
上面介绍的这六个东西就是一般在撰写 flex 2 application 时工程师最需要了解的基本的结构,一旦熟悉这个架构后,就可以解释许多疑问,例如:
Q:为什么 Cairngorm 里面的 CairngormEvent 从 TitleWindow发出后,无法像其它地方一样向上 bubbling 到 Application 然后被 controller 接收?
A:因为 TitleWindow 是透过 PopUpManager 直接建立并附加到 SystemManager身上,因此 CairngormEvent 向上 bubbling 后最终落点是在 SystemManager而非 Application,因此收不到。那解决方法为何?请大家想想吧。
Q:如果我想做 ShortCut Manager,能侦听并处理所有的 shortcut key该如何下手?
A:从这个架构图来看,可能的下手地方有三个,第一是在 SystemManager里面侦听所有的 keyDown event然后做解析;第二是在 Application 里面侦听并处理,第三则是直接操作 flash.display.InteractiveObject 这个class去处理所有的 key event。
其它诸如此模拟较牵涉到 low-level system architecture的问题还有很多,但只要先彻底了解 flex 2 framework 的架构与运作原理,许多问题就会自然解决了。
分享到:
相关推荐
Flex体系架构剖析,Flex体系架构剖析,Flex体系架构剖析
flex与js交互 flex调用 js 和js调用flex
Flex体系架构深度剖析,Flex体系架构深度剖析,Flex体系架构深度剖析,Flex体系架构深度剖析
QCon 2009 beijing全球企业开发大会ppt: ...11.Flex体系架构深度剖析 ...通过60分钟的讲解,能够从超越代码开发视角了解整个Flex生态系统和体系架构,帮助企业在RIA应用开发上进行更好的技术体系架构分析和技术决策。
基于Flex的WebGIS架构研究,张驰,周良辰,当前WebGIS系统主要实现技术大都基于传统的Web技术,没有充分利用客户端的计算能力以及HTTP协议,因而界面显示与交互能力较弱,不能�
支持在Flash播放器中用Flex调用S2Container组件的软件库
flex2_驱动%2C刷机工具
flex2中文帮助,给大家共享
一.flex2的全屏代码 在仅仅使用Flex Builder2(我下载的是FLXB_2.0_Win_WWE.exe)的时候,写全屏代码竟然找不到flash.display.StageDisplayState,于是下载了Flex 2.0.1升级包(官方地址:...
Flex2开发人员指南.Flex2开发人员指南.
Flex体系架构深度剖析.pdfFlex体系架构深度剖析.pdfFlex体系架构深度剖析.pdfFlex体系架构深度剖析.pdfFlex体系架构深度剖析.pdf
创 建过Java多语言本地化应用的朋友应该都很熟悉Java的本地化资源访问的功能,现在好了,Flex2诸多激动人心更新中的一个就是本地化特性 (localization feature),这倒是Adobe加强推广Flex2的一个强助力了(这一...
flex的组织结构图组件
QTP的flex2插件,直接安装运行,如果提示重启,重启电脑后,安装成功。
Flex体系架构剖析 针对RIA的Adobe技术整体架构
Flex体系架构剖析_QCon.pdfFlex体系架构剖析_QCon.pdfFlex体系架构剖析_QCon.pdfFlex体系架构剖析_QCon.pdfFlex体系架构剖析_QCon.pdfFlex体系架构剖析_QCon.pdfFlex体系架构剖析_QCon.pdfFlex体系架构剖析_QCon.pdf
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
flex自定义的树形结构,展开,收缩,多级目录支持