Flex 4 & FlashBuilder Impressions – Catalyst, FXG, Spark Components

This past week I was able to write a small application with the Flex 4 API and FlashBuilder. I have quite a bit of previous experience with Flex 3. As a side note, it seems that the name change from FlexBuilder to FlashBuilder came about to emphasize the new integration capabilities with Adobe’s new Catalyst product. Catalyst advertises as a visual (no code) designer tool to create composite applications with existing Photoshop, Fireworks and Illustrator artifacts. These can then be imported with FlashBuilder into your Flex 4 projects.

One of the major changes is an entirely new set of UI components called Spark. These will take a little bit of getting used to as you create separate mxml files (FXG Flex 4 XML Skinning markup) to handle visual aspects of your components. Once you get a grasp of this new architecture it will become apparent how much easier it will be to skin your custom components and work with state. This will also enable the separation of the visual design from the component. You can now have someone that specializes in visual design more easily skin components. This is also where Catalyst comes in to work with FXG to create your skinning.

Another aspect that I really like is the ability to continue to use Flex 3 objects with Flex 4. This will allow you to gradually integrate some of the new features. A piece of advice though is to remember which component group you are using. For instance, MX RadioButton events are not always captured by a Spark RadioButtonGroup. Make sure you are always paying attention to your name spaces:

Spark Component

<s:RadioButton/>

MX Component

<mx:RadioButton/>

Some of the other aspects that win kudos:

  • Two way binding e.g. @{object}. Cuts down the amount of code, that’s always a good thing!
  • The new Group and Scroller classes. Using the Group to handle layout while having a defined scroller object makes it easier to work with containers and makes dynamic scrolling easier. For Instance, bring a component into view:
    • Mxml:
      <s:Scroller width="100%" height="100%">
      <s:Group id="content">
      <s:TextInput id="myField"/>
    • ActionScript:
      var myFieldBounds:Rectangle = myField.getBounds (this)
      content.verticalScrollPosition = myFieldBounds.bottom;
  • Faster compile times. It is not as fast as Java but it is helping with one of the gripes developers have about Flex.
  • Find/Replace across the entire project. Another extremelly useful feature is now part of Flex and FlashBuilder.
  • FlexUnit integration, improved refactoring and new data tools are all new features that should make Flex even more enjoyable to work with.

Just scratching the surface with the changes but they do look very positive. Like any tool set there are always frustrating aspects, but all-in-all, I believe Flex is heading in a very positive direction.

Lastly, owning a MacBook Pro allows one to appreciate Apple’s innovation and craftsmanship. Apple’s reluctance to install the Flash player on the iPhone and IPad is problematic for all. There are an enormous amount of websites using Flash and now Flex/Flash applications. There needs to be a meeting of the minds between Steve Jobs and Adobe. Any concerns voiced or changes that need to be made should be in an open and transparent fashion. It will be interesting watching this story play out.

Leave a Reply

Your email address will not be published. Required fields are marked *