Flash Builder 4 ( Flex 4) : Overview part 2

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

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

Flash Builder 4 (Flex 4): overview part 1

Finally Flash Builder 4 (read Flex Builder 4) is out. I was trying to review on what has changed and whats new in the latest release. Flash Builder… I don’t know I think I like Flex Builder better 🙂

I will review new features in Flash Builder 4 with respect to IDE ,Syntax,Components,Styling,Performance and finally a Conclusion.

So lets get started with the IDE,

On the whole the IDE looks just about the same. But look a little closer and you will notice a host of other things. The top then things that you might notice (If  you start building a project right away) are…

1 The Package Explorer (Flex Navigator in FB 3)
-The code management has changed a little.
-The packages are now grouped, which is a very good thing (you will know why if you use cairngorm)
-Outline has been included with the class shows SDK (framework) packages
-Uses swfobject.js instead of AC_OETags.js

The new Package Explorer (earlier: navigator)

2 The Component Explorer

The  Components view in the design mode now has a different folder structure. Some new components have been added and you won’t find some old components like the numeric-stepper. I will be adding a detailed review on components in part 2.

3 Data Services Tab

By Far, the most exciting feature of FB4. This tab allows you to link data from a source without a single line of code. See it to believe it.

The Data Services Tab

4 The Network Monitor

Adobe has really worked on Developer productivity and I say this because of this super cool feature that allows you to see the communication your app makes with your data server. No more searching for analyzers and http sniffers online  🙂

The network monitor

5 ASDocs window

Another one for developer productivity. If you are working on Flex 3 I am sure you ll love this. No more opening new windows or googling up what some property means. The ASDocs  window allows you to see it there and then.

6 Auto Function Generator

Another one that generates a function definition without any typing 🙂

7 Theme chooser

Components are now divided into Spark and Halo(standard flex 3 components) compoents and with the theme chooser you can how you want to display them…

8 Appearence Window

Along with the Properties components (enhanced quiet a lot) there is another tab for Appearece. The styling for Flex 4 components has changed (especially for spark). The appearance window mainly caters to it.

9  States in Code View

This release will amaze you if you are a flex developer. State management, it seems has been enhanced drastically and this options grey’s out everything that is not included in the selected state. WOW !

10 Export as FXP – The new export format

The flex project archive (.zip) is now FXP.

This has been about the IDE Features and there is a lot more to explore, for the next part lets try our hands on some new flex compoents .

Coming up  : Review of Flash builder 4 Syntax,Components,Styling,Performance and finally a Conclusion.
Download Flash Builder 4 today

Flash (Flex) Builder 4 available for download

Yes Flex Builder 4 renamed to Flash Builder 4 and Flash Catalyst are  available for download on labs.adobe.com -> Get Flexing guys…

Cheers,

Y