`
hacker47
  • 浏览: 340491 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    S2Flex2-1.1.0

    《S2Flex2-1.1.0:Seasar2框架与Flex交互的深度解析》 在现代Web应用开发中,交互性和用户体验是至关重要的因素。S2Flex2-1.1.0是一个专为Flash播放器设计的软件库,它使得开发者能够利用Adobe Flex这一强大的...

    flex与js交互浅析.docx

    2. JavaScript调用Flex JavaScript调用Flex方法的步骤首先是注册Flex中的AS方法为可被JavaScript调用。这通过`ExternalInterface.addCallback`完成: ```xml <![CDATA[ import flash.external....

    flex2

    2. ActionScript 3.0:Flex 2采用了ActionScript 3.0,提供了更强大的类型系统、错误处理机制和事件模型,使得代码更加健壮且易于维护。 3. 组件库:Flex 2提供了丰富的预定义组件,如按钮、列表、表格等,可以快速...

    Flex体系架构剖析

    Flex体系架构是Adobe公司开发的一款用于构建富互联网应用程序(Rich Internet Applications, RIA)的技术框架。Flex以其强大的组件模型、丰富的用户体验以及与后端服务的高效集成,深受开发者喜爱。本篇文章将深入...

    Flex_API的架构图

    2. **ActionScript**: Flex API基于ActionScript编程语言,这是一种面向对象的语言,与JavaScript类似,但提供了更强大的类型系统和面向对象特性。ActionScript用于编写Flex应用程序的逻辑层。 3. **MXML**: MXML是...

    Flex体系架构深度剖析

    Flex体系架构深度剖析 Flex是一种基于ActionScript和Flash Player或Adobe AIR运行时的开放源代码框架,用于构建富互联网应用程序(RIAs)。Flex为开发者提供了丰富的用户界面组件库,能够创建具有互动性和动态性的...

    Flex2StyleExplorer.zip_Flex2StyleExplor_Flex2StyleExplorer_flex

    - **组件导航**:Flex2StyleExplorer提供了一个组件层次结构,用户可以逐级深入查看每个组件及其子组件的样式。 - **资源管理**:工具还支持管理应用内的图像、字体和其他资源,确保样式与资源的对应一致。 3. **...

    flex2中文学习资料

    Flex2基于事件驱动的架构,允许用户与应用进行交互。每个组件都可以发出事件,而事件处理器则响应这些事件,执行相应的操作。理解事件模型是掌握Flex2编程的关键。 8. **Flex Builder IDE** Adobe Flex Builder是...

    flex mvc 架构图

    Flex MVC架构图是一种用于构建富互联网应用程序(RIA)的架构模型,主要应用于Adobe Flex开发中。Flex是一个开源框架,允许开发者使用MXML和ActionScript创建交互式的、基于Flash的用户界面。MVC(Model-View-...

    flex的组织结构图组件

    在Flex中,组织结构图组件是用于展示层次数据,如公司组织架构、文件系统或任何具有层级关系的数据集合的工具。这种组件能够以图形化的方式帮助用户理解复杂的关系。 标题“flex的组织结构图组件”指的是一种特定的...

    Flex 2 Developer’s Guide

    《Flex 2 Developer’s Guide》是Adobe官方发布的一本针对Flex 2开发者的详尽指南,旨在帮助开发者深入了解和熟练运用Flex 2框架进行富互联网应用程序(RIA)的开发。Flex 2是一款强大的开发工具,它基于...

    flex自定义树形结构

    在IT行业中,尤其是在前端开发领域,`Flex`布局和`Tree`数据结构是两种非常重要的概念。本篇文章将深入探讨如何在Flex环境中自定义实现一个具备展开、收缩功能的多级目录树形结构。 首先,让我们理解`Flex`布局。...

    flex2帮助文档.chm

    4. **组件体系**:详述Flex 2内置的组件库,如Button、Canvas、Form等,以及如何自定义组件。 5. **数据绑定**:解释如何实现视图和模型之间的动态数据绑定,使得UI自动反映数据的变化。 6. **图形和动画**:讲述...

Global site tag (gtag.js) - Google Analytics