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