Flex 4: New components and containers

With the introduction to new Flash Builder 4 (Flex 4 - code base Gumbao), There are changes in the component architecture. Flex 4 SDK introduce number of new components and container with new architecture. This will make developers life much easier, as the skinning, effects and other customization now will be much straight forward. In Flex 4 new component they have introduced Spark Components.

Following table list out the Flex 3 component and their Flex 4 Spark counter part.

Flex 3 MX Component	Flex 4 spark Component
mx.controls.Button	spark.components.Button
mx.controls.ButtonBar	spark.components.ButtonBar
mx.controls.CheckBox	spark.components.CheckBox
mx.controls.ComboBox	spark.components.DropDownList (w/o editability)
mx.controls.HorizontalList	spark.components.List (with a HorizontalLayout)
mx.controls.HRule	spark.primitives.Line
mx.controls.HScrollBar	spark.components.HScrollBar
mx.controls.HSlider	spark.components.HSlider
mx.controls.Image	spark.primitives.BitmapImage (w/o support for external images)
mx.controls.LinkBar	spark.components.ButtonBar (with a custom skin)
mx.controls.LinkButton	spark.components.Button (with a custom skin)
mx.controls.List	spark.components.List
mx.controls.NumericStepper	spark.components.NumericStepper
mx.controls.RadioButton	spark.components.RadioButton
mx.controls.RadioButtonGroup	spark.components.RadioButtonGroup
mx.controls.TextArea	spark.components.TextArea
mx.controls.TabBar	spark.components.TabBar
mx.controls.TextInput	spark.components.TextInput
mx.controls.TileList	spark.components.List (with a TileLayout)
mx.controls.ToggleButtonBar	spark.components.ButtonBar
mx.controls.VideoDisplay	spark.components.VideoPlayer
mx.controls.VRule	spark.primitives.Line
mx.controls.VScrollBar	spark.components.VScrollBar
mx.controls.VSlider	spark.components.VSlider
mx.core.Application	spark.components.Application
mx.core.Window	spark.components.Window
mx.core.WindowedApplication	spark.components.WindowedApplication
mx.containers.ApplicationControlBar	spark.components.Application (with the controlBarContent)
mx.containers.Canvas	spark.components.Group
mx.containers.ControlBar	spark.components.Panel (with the controlBarContent property)
mx.containers.HBox	spark.components.HGroup
mx.containers.Panel	spark.components.Panel
mx.containers.Tile	spark.components.Group (with a TileLayout)
mx.containers.VBox	spark.components.VGroup

These components/containers are developed based on the UIComponent. There are few components/containers who is not having Spark counterpart. Following table demonstrate the list of components/container without Spark counterpart.

Flex 3 classes with no direct Flex 4 counterpart

mx.controls.Alert
mx.controls.ColorPicker
mx.controls.DataGrid
mx.controls.DateChooser
mx.controls.DateField
mx.controls.Menu
mx.controls.MenuBar
mx.controls.PopUpButton
mx.controls.PopUpMenuButton
mx.controls.ProgressBar
mx.controls.RichTextEditor
mx.controls.Tree
mx.containers.Accordion
mx.containers.DividedBox
mx.containers.Form
mx.containers.Grid
mx.containers.TabNavigator
mx.containers.TitleWindow
mx.containers.ViewStack

I am very excited about new architecture in Flex 4. I know you all too.

I will come up with some tutorial very soon in Flex 4.