Flex框架及最详细比较 MX and Spark组件

Flex框架：

flex框架:

现有成熟常用的Flex框架：http://apps.hi.baidu.com/share/detail/15397160
 Cairngorm (Adobe Open Source) - MVC framework (采用这个框架相当于Spring)
 parsley IoC(采用这个框架) parsley(IoC) http://www.spicefactory.org/parsley/docs/2.4/manual/
 PureMVC (Open Source) - MVC framework
 Mate (Open Source) - tag-based, event-driven
 Swiz (Open Source) - Metadata-based Dependency Injection
 Spring ActionScript (Open Source) – IOC Framework
 http://www.infoq.com/news/2008/01/flex-mvc

Flex and Spring :http://www.cnblogs.com/liuzhong/archive/2011/08/29/2158085.html
开源开发框架展现出Flex平台的发展势头 http://hi.baidu.com/sinbh/blog/item/75bf161ebbe3ff154134170b.html
Cairngorm（Cairn-gorm）是一个最早最为成熟的FLEX框架,现在已归为ADOBE门下.
PureMVC它其实是一个ActionScript 3框架,不像Cairngorm,它并不是针对FLASH,FLEX或者其它ADOBE AS3.0类。它是一个用于开发基于FLASH的AS 3.0的任何程序.
Model-Glue是一种简单的MVC的FLEX框架,Model-Glue拥有COLDFUSION接口.它相比以上两款更为轻巧.
ServeBox Foundry是一个ActionScript 3/Java框架针对Flex 2应用开发者.
Guasax是一个易用的程序框架,为保证新老FLEX应用的扩展.
ARP (Ariaware RIA Platform)是一个基于ActionScript的框架,它是一个Open Source Flash 项目.
Flest 是一个ActionScript3/Flex框架.

Cairngorm 企业级Flex客户端框架：
1 Welcome To Cairngorm: http://sourceforge.net/adobe/cairngorm/home/Home/
1.1 Cairngorm Guidelines : http://sourceforge.net/adobe/cairngorm/wiki/CairngormGuidelines/
   1.1.1 Introduction：
      Getting Started with Cairngorm （read）
      Overview of the Cairngorm Architecture (read)
   1.1.2 Sample Applications
   1.1.3 Guidelines
1.2 Cairngorm Tools:http://sourceforge.net/adobe/cairngorm/wiki/CairngormTools/
   1.2.1 IDE - Flex Builder
   1.2.2 Frameworks： Parsley Spring ActionScript Swiz Robotlegs
   1.2.3 Build Automation: Maven Flex-Mojos Flex 3 Ant Tasks
           Flex 4 Ant Tasks Hudson - extensible continuous integration server
   1.2.4 Unit Testing : FlexUnit 4 ASMock Agile Unit Testing
   1.2.5 Agile Functional Testing: RIATest FlexMonkey
   1.2.6 Code Coverage: Flexcover
   1.2.7 Quality Control: FlexPMD
   1.2.8 Adherence to Coding Standards
1.3 Cairngorm Libraries:http://sourceforge.net/adobe/cairngorm/wiki/CairngormLibraries/
   1.3.1 Overview of Libraries：
    Design by Contract Library
    Observer Library
    Popup Library
    Task Library
    Validation Library
    Navigation Library (Requires Parsley, Swiz or Spring ActionScript)
    Module Library release candidate (Requires Parsley)
    Persistence Library release candidate
    Integration Library alpha (Requires Parsley)
   1.3.2 Maven and Bugbase：Cairngorm 源码
   1.3.3 Expectations on Versioning：

主题：Blazeds文档(一)-------Blazeds初步 http://www.iteye.com/topic/267517
主题：Blazeds文档(二)-------Blazeds体系结构（一） http://www.iteye.com/topic/267521
Comet：基于 HTTP 长连接的“服务器推”技术 http://www.ibm.com/developerworks/cn/web/wa-lo-comet/
Spring BlazeDS:http://static.springsource.org/spring-flex/docs/1.5.x/reference/html/index.html
blazeds_devguide：http://livedocs.adobe.com/blazeds/1/blazeds_devguide/

精通Flex3、ActionScript3.0编程设计，熟练掌握Flash Builder/eclipse等开发环境，对定制组件和组件的生命周期有深入的了解
        (AS3、Flex4、ItemRenderer、 FlexUnit、skin、theme、style、 RSL、Module、localization strategy、FlexMojos)
精通BlazeDS远程对象访问和消息推送机制
        (Blazeds、Blazeds integrating with Spring、Blazeds secure strategy、Blazeds cross domain accessing、sandbox)
熟悉Flash/Flex 调用数据的接口，熟悉Flash/Flex开发框架和实现机制，有比较强的调试解决问题的能力
熟悉Flash虚拟机的机制

Flex3到Flex4，增加了Spark组件，这是Flex的一次重要升级，基本上组件全部重写了一套，为了保持向下兼容，出现了同一组件两套实现并存的现象，虽然说Spark组件中也可嵌入MX组件，但实际使用常会遇到些小麻烦，例如mx:Tree滚动条异常，透明背景无法监听鼠标事件等等，如果你使用定制的组件，写法稍有不规范，就会出现Spark下显示异常，比如之前定制的TWaver圆角文本输入框就是如此，不得不在Spark下重新实现。

Spark与MX组件的区别

Spark最大的目的或许是方便Adobe兜售它的Flash Catalyst，当然这是个玩笑，Spark组件更加轻量，更易扩展。所有的Flex组件都从UIComponent继承，Spark组件也是如此，只不过它多了一层包装，从SkinnableComponent继承。MX中每个组件对应一个类，在Spark体系中，每个组件对应两个类，一个Component类，一个Skin类，例如按钮组件对应：spark.components.Button和spark.skins.spark.ButtonSkin，这种设计实现了组件行为逻辑与视图呈现的分离，就像将程序员和美工的工作分开一样，这也是MVC思想的产物。

有意思：Java 开始有一个AWT,后台也弄了一个Swing
Flex 3与Flex4的区别详见：
Differences between Flex 3 and Flex 4
what is difference in halo and spark in Flex3 and Flex4

Spark组件外观定制

前面提到Flash Catalyst，这就是Adobe提供的组件外观可视化编辑工具，这个工具主要针对美工、设计师，对于习惯于写代码的程序员们也可以使用Flash Builder 4+来定制组件。
回到实际问题，之前我定制的圆角文本输入框在Spark框架下出现了问题，我决定将其改造，使用定制组件Skin的方式实现圆角文本输入框。

详细比较 MX and Spark组件

http://labs.adobe.com/wiki/index.php/Flash_Builder_4:Release_Notes

【Controls】

MX	Spark
mx.controls.AdvancedDataGrid	none
mx.controls.Alert	none
mx.controls.Button	spark.components.Button
mx.controls.CheckBox	spark.components.CheckBox
mx.controls.ColorPicker	none
mx.controls.ComboBox	spark.components.DropDownList (w/o editability)
mx.controls.DataGrid	none
mx.controls.DateChooser	none
mx.controls.DateField	none
mx.controls.HorizontalList	spark.components.List (w/ HorizontalLayout)
mx.controls.HSlider	spark.components.HSlider
mx.controls.Image	spark.primitives.BitmapImage
mx.controls.Label	spark.components.Label
mx.controls.LinkButton	spark.components.Button (w/ custom skin)
mx.controls.List	spark.components.List
mx.controls.Menu	none
mx.controls.NumericStepper	"spark.components.Spinner (no TextInput control)spark.components.NumericStepper"
mx.controls.OLAPDataGrid	none
mx.controls.PopUpButton	use spark.components.PopUpAnchor
mx.controls.PopUpMenuButton	use spark.components.PopUpAnchor
mx.controls.ProgressBar	none
mx.controls.RadioButton	spark.components.RadioButton
mx.controls.RadioButtonGroup	spark.components.RadioButtonGroup
mx.controls.RichTextEditor	build own component
mx.controls.SWFLoader	none
mx.controls.Text	spark.components.Label
mx.controls.TextArea	spark.components.TextArea
mx.controls.TextInput	spark.components.TextInput
mx.controls.TileList	spark.components.List (w/ TileLayout)
mx.controls.Tree	none
mx.controls.VideoDisplay	spark.components.VideoPlayer
mx.controls.VSlider	spark.components.VSlider

【Additional Spark controls】

spark.components.ToggleButton
spark.components.HScrollBar
spark.components.VScrollBar

【Layouts/Containers】

MX	Spark
mx.core.Application	spark.components.Application
mx.containers.ApplicationControlBar	spark.components.ControlBarContent
mx.containers.Canvas	"spark.components.Groupspark.components.DataGroupspark.components.SkinnableContainerspark.components.SkinnableDataContainerspark.components.Border"
mx.containers.ControlBar	spark.components.ControlBarContent
mx.containers.Form	none
mx.containers.FormHeading	spark.component.FormHeading
mx.containers.Grid	write custom layout
mx.containers.HBox	spark.components.HGroup
mx.containers.HDividedBox	use MX with Spark containers
mx.controls.HRule	spark.primitives.Line
mx.modules.ModuleLoader	none
mx.containers.Panel	spark.components.Panel
mx.controls.Spacer	none
mx.containers.Tile	spark.components.Group (w/ TileLayout)
mx.containers.TitleWindow	none
mx.containers.VBox	spark.components.VGroup
mx.containers.VDividedBox	use MX with Spark containers
mx.controls.VRule	spark.primitives.Line
mx.core.Window	spark.components.Window
mx.core.WindowedApplication	spark.components.WindowedApplication

【Additional Spark Layouts/Containers】

spark.components.Scroller

【Navigators 】

MX	Spark
mx.containers.Accordion	use MX with Spark containers
mx.controls.ButtonBar	spark.components.ButtonBar
mx.controls.LinkBar	spark.components.ButtonBar (w/ custom skin)
mx.controls.MenuBar	none
mx.controls.TabBar	spark.components.ButtonBar (w/customSkin)
mx.containers.TabNavigator	custom Spark TabBar with MX ViewStack
mx.controls.ToggleButtonBar	spark.components.ButtonBar (w/ custom skin)
mx.containers.ViewStack	use MX with Spark containers

【Charts 】

MX	Spark
mx.charts.AreaChart	none
mx.charts.BarChart	none
mx.charts.BubbleChart	none
mx.charts.CandlestickChart	none
mx.charts.ColumnChart	none
mx.charts.HLOCChart	none
mx.charts.Legend	none
mx.charts.LineChart	none
mx.charts.PieChart	none
mx.charts.PlotChart	none

分享到：