Posts Tagged ‘Spark Components’

Flash Builder 4 ( Flex 4) : Overview part 2

June 3, 2009

So as promised , here I am with part 2 of overview on what’s new with Flash Builder 4. The part 1 was about IDE related changes in FB4.

Part 2:  Components and Syntax

In part 1 we have been talking about the IDE features. Staying in the design view, the components explorer now you can notice a few folders.
Adobe has released a new suite of (sprite) flex components with the sdk 4.0 which are called as spark components. So now we have 2 types of components
1.    Halo Components – The existing UIComponents (sdk 3.4)
2.    Spark Components – The new set of components
Let look at each folder
Controls
While most of the controls remain the same in both versions a there a few changes
Added:
•    Spinner (close to Numeric Stepper)
•    DropDown (redefined ComboBox)
•    VideoPlayer (newly added in place of VideoDisplay component)
•    RichEditableText (newly added). This is where you can see the amazing text control features like right-to-left, baseline-control and justification of text

The RichTextEditor has been removed from the list.

Data Controls:
All lists have now been grouped under data controls. Apart from the regular ones, there is one addition to this – the paged List control. The Spark list control offers higher-level functionality like paged-data  (by a ‘layering’ mechanism).

Containers:
No VBox,  HBox or Canvas, they have now been replaced by Group containers. So you have HGroup, VGroup well mostly the styling behavior has changed. You can review the example that follows the article to see how they behave.
Then there are these which have been added:
•    DataGroup
•    Scroller
•    SkinnableContainer
•    SkinnableDataContainer

Custom Components
Two new components
Flash component and Flash container: To allow you to directly access a component created in Flash Authoring tool.

New Flash Custom Components

New Flash Custom Components

NameSpaces
Moving onto syntax, the way new elements are created is a little different than Flex 3. Again most of these changes are on the styling side which I plan to explore a little later. We ll stick to the changes on code:
Namespaces have been changed. Now there are 2 basic namespaces that you would find yourself working with:
1.    xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243; – Contains non UI objects like arrays, objects, metadata declarations. That means when you add a script block in flex 4 the tag would be <fx:Script>.
2.    xmlns:s=”library://ns.adobe.com/flex/spark” – Contains the spark component library.
3.    xmlns:mx=”library://ns.adobe.com/flex/halo” – Contains the Halo component library.

Coming up next : Flash Builder 4 : Overview Part 3 on Styling