Flex2系统架构浅析

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 的架构与运作原理,许多问题就会自然解决了。

你可能感兴趣的:(UI,Flex,Flash)