Over a million developers have joined DZone.

Flex 4, Flash Builder 4, CF Builder, and Flash Social Released En Masse

DZone 's Guide to

Flex 4, Flash Builder 4, CF Builder, and Flash Social Released En Masse

· ·
Free Resource
After several months in beta, a host of Flash Platform technologies were released today in their production-ready versions.  The releases include version 4 of the Flex Framework, Flash Builder 4 (previously named Flex Builder), the brand new ColdFusion Builder, and the Flash Social service for easier Flash integration with social networking sites.  DZone has gathered the finer details of the new features from Dave Gruber, a Product Marketing Manager at Adobe.

Flex 4

The Flex open source framework is composed of ActionScript 3 and MXML (a higher level abstraction of ActionScript that is a tag-based construct).  Flex contains over 100 visual components for building RIAs.  In addition to the components and debuggers, there's a new specific component model.  

The Spark Model
In previous versions, when you used a visual component it included the visual layout and the logic bundled into a single unit.  The latest version of Flex introduces a new "Spark" component model, (an the evolution of the MX component model) which divides the component into its logic and visual layout pieces.  Gruber said, "You can think of it like in MVC (Model View Controller) when you're separating the UI from the associated logic, except in this case its at the component level."

The following example of the Spark model shows how you can toggle the drop shadow on a Spark Panel container by setting the Boolean dropShadowVisible style:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/07/toggling-the-drop-shadow-on-the-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_dropShadowVisible_test"
<s:CheckBox id="checkBox"
selected="true" />

<s:Panel id="pnl"
title="Spark Panel title"
width="300" height="200"
horizontalCenter="0" verticalCenter="0">
<s:Scroller width="100%" height="100%">
<s:Label id="lbl"
paddingLeft="5" paddingRight="5"
paddingTop="5" paddingBottom="5">
<s:text><fx:String source="lorem.txt" /></s:text>



The Spark Model provides two main benefits: complete creative control (Flex 3 didn't have it) and a separation that allows developers to handle the logic and designers to create the interactive elements with an upcoming tool called Flash Catalyst (an interactive design tool that doesn't require coding).  There are also more capabilities from Flash Player 10 available.

Flex 4 introduces a new tag-based graphics layout language called FXG that's shared between other Adobe Creative Suite products (Photoshop, Fireworks, etc.).  "Rather than having a bit-level description of graphics, you can now have an XML-based description," said Gruber.  There are also a number of improvements to MXML making it much easier to work with states.  

Productivity Improvements
The compiler performance has been improved in Flex 4.  2-way bindings have been added along with more CSS selectors (including id-based and descendant).  Flex 4 will also incorporate the Flash 10 Text Layout Framework, which provides new text controls for Spark that include bidirectional support, mirroring, and basic exposure to Halo controls.

Flash Builder 4

Formerly known as Flex Builder, Flash builder 4 is based on Eclipse and features productivity improvements for working with the Flex 4 Framework in areas like code-hinting and debugging.  The three main themes in this release were designer/developer workflow, data-centric development, and IDE productivity and testing, said Gruber.

Debugging and Profiling
Here are some of the features added to Flash Builder 4 debugging:

  • Watchpoints and conditional breakpoints added
  • FlexUnit fully integrated
  • Move refactoring added
  • Profiler includes improved "Object References" report

IDE productivity

  • Getter/setter generation
  • Event code generation
  • New Package Explorer
  • ASDoc support
  • Coming online build capability (for automated build processes)

Data-centric development
Gruber says that most projects aren't building from scratch but instead, they're connecting to existing data and infrastructure.  In the new Flash Builder, developers can introspect existing data such as web services or Java implementations (EJBs, POJOs).  This data is easily viewed from Flash Builder so you can see the data and bind it to the visual components of the app.  For example, you could drag a method on top a data grid and it would automatically populate the chart and allow you to setup an update process.  Flash Builder supports the introspection of PHP, Java, ColdFusion, RESTful services, and SOAP based services.  Flash Builder 4 also comes with a Network Monitor that allows you to view and measure all the data that moves back and forth between client and server side.  

Design/Development Workflow

There is tight integration between Flash Builder, Flash Catalyst, and Flash Professional so that designers and developers can easily combine their work without having to save and import files - you can just transfer them while the programs are running.  Flash Builder 4 also allows you to create custom themes and provides several prebuilt ones to choose from.  

Price:  Standard Edition: $249  upgrade:  $99   Premium Edition (formerly "Professional"):  $699  upgrade: $299  Includes a copy of CF Builder; adds profilers, network, monitor, unit testing harness and integration, and command-line build. 
(Pricing for CF Builder and Flash Builder has not gone up from previous versions)

ColdFusion Builder

CF Builder, like Flash Builder, is based on Eclipse and it is intended for ColdFusion/CFML developers.  Gruber said Adobe built this tool with themes similar to those in Flash Builder 4.  Since this is the first ever release of CF Builder, the main highlights are the basic code development features (code assist, refactoring, insights, snippets, wizards, and SQL tools that CF developers commonly use).

As an example, ColdFusion Builder has great code assistance for CFCs (ColdFusion Components).  So for example, consider the following code snippet:
<cfset ob = createObject("component", "test")>
Once you hit the dot, CFBuilder introspects your test component and provides the following visual feedback:

CF Builder has interactive debugging capabilities such as line-by-line debugging, breakpoints, and the ability to step through your apps.  There are also server controls so you can manage what goes on in your CF server right from your IDE.  If you have Flash Builder as well, you can use the tight integration between the two products to create Flex-based applications using ColdFusion in the same Eclipse instance.  You'll also be able to do some things with JavaScript and Ajax.   The AIR 1.5 (AIR 2.0 update coming later this year) plugin is embedded so you can publish AIR content (running as web apps or native desktop apps) right from a CF/Ajax application.  Publishing AIR apps is also easy to do in Flash Builder.

Price:  Standard Edition:  $299 (Flash Builder is included)

Flash Social

About a year ago, Gruber says Adobe started introducing services for the Flash platform to help developers with features that are difficult to implement in applications, usually because they are cloud-based.  Today, Adobe is introducing the Flash Social service, which provides a single API to integrate Flash-based applications with (in the first release) the top 14 social networking sites (Facebook, Twitter, LinkedIn, Wordpress, etc.).  This means that Flash developers don't have keep up with 14 different APIs that are constantly changing.   The base set of features allows you to authenticate users from each of the networks (to verify that it's a valid user), gain access to profile information, and post updates to the social network from the app.  Gruber says a good example would be a multi-player game application that posts high scores on your social networking sites and lets other people on the site see who's playing.  

See DZone's RefCardz on CF Buider and Flash Builder 4.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}