flex 2 系統架構淺析

本文转自:http://hi.baidu.com/dkss/blog/item/bc22376d7def9afb43169485.html

 

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 的架構與運作原理，許多問題就會自然解決了