Note: This article has been updated to reflect any changes that occurred in beta 2. If you are only interested in learning what has changed between beta 1 and beta 2, please refer to the release notes.

As a product manager for Flex I've talked with many people about the upcoming release of Flex 4, including customers and our own development team, and the level of excitement around this version is higher than any I've seen in the past. We are providing beta releases of the two tools geared towards Flex: Adobe Flash Catalyst and Adobe Flash Builder 4; but the foundation for it all is the Flex 4 SDK. This article provides an overview of what you'll encounter as you play with the new SDK and framework. Please remember that this is beta software; functionality may change, documentation may become out of date, and there will be bugs. Make sure to follow the progress of the SDK on the Open Source Flex SDK site, track bugs in the public bug system, and provide additional feedback on our forums.

You may also be interested in reading What's new in Flash Builder 4 beta by Tim Buntel, and Differences between Flex 3 SDK and Flex 4 SDK beta by Joan Lafferty.

The work on the Flex SDK has been focused around three primary themes:

• Design in Mind: providing a framework that supports a new degree of expressiveness, easily enabled with tools.
• Developer Productivity: improving compiler performance and adding productivity enhancements to language features like data binding.
• Framework Evolution: taking advantage of new Flash Player capabilities and adding features required by common use-cases.

Requirements

Flex 4 SDK beta

• Try
• Learn more

Prerequisite knowledge

Familiarity with Flex.

Spark and FXG

The biggest feature of the Design in Mind theme is our new skinning and component architecture, named Spark. Building on top of the existing Halo architecture, Spark provides a much more expressive mechanism for developers and designers to work together on the appearance of their Flex applications. Spark currently includes approximately 30 new components and primitives, forming the foundation of Adobe's next-generation components and primed for easy integration with Adobe Flash Catalyst. This beta release includes almost every component planned for the new architecture, though there may continue to be some adjustments post-beta. Spark will not have versions of every component that exists in Halo. However, since Spark is built on top of the same foundation, all existing Halo components can easily interoperate with the new architecture. For more information related to the architecture, please check out Deepa's Gumbo Component Architecture article.

Based on some great customer feedback for Beta 2, we have added more styling capabilities to the new Spark look and feel. So while you will always have complete control over the appearance of your components via skinning, you will now have an easier time making minor adjustments without having to re-skin.

Another piece that folks will find interesting is support for FXG, the new interchange format for the Flash Platform. In addition to support for using FXG directly within your Flex application, the Flex framework includes graphic primitives that align with the tags in FXG. These graphic primitives can be used directly within your Flex app and support all of the runtime editability associated with the more traditional Flex components. To support high-performance graphics Adobe has also enabled the compiler to optimize static FXG directly into SWF tags understood natively by the Flash Player. This gives you the flexibility to have your graphics tags editable by the editor of your choice, while enabling top performance where it's important. Learn more about FXG.

The Spark architecture also includes an updated, more flexible layout model. The new, runtime-assignable layouts include full support for 2D rotations and scales as well as the ability to apply the new 3D capabilities of Flash Player 10 to any component after layout. This new layout mechanism enables virtualization to be supported not just in List classes, but in a regular container model as well (so long temperamental Repeater!). It also provides smooth scrolling support on any container or list. Learn more about Spark containers and layouts.

Finally, Spark introduces a new and improved animation engine, which serves as the foundation for improved effects and transitions. Flex 4 beta supports the auto-reversing of transitions, Pixel Bender filters applied as effects, transformations in all three planes, and complex keyframe-based animations. See examples of the effects in action in the sample apps, and learn more about Spark effects in the documentation and Chet Haase's articles (Part 1 and Part 2).

Working with states

One area of Flex that we know needed improvement is states. We believe that the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been. Therefore Adobe has introduced some new MXML language improvements in Flex 4 that can make it much easier to work with states.

To support the new model we've upgraded the MXML language to MXML 2009, and at the same time we've made some minor improvements to MXML to support better tools while maintaining our commitment to support editing with a simple text editor. Learn more about MXML 2009 and the new states syntax.

Developer productivity

In the Developer Productivity theme our primary focus has been compiler performance. We've implemented a number of optimizations for common use-cases, and have seen some real improvements. We've also made a number of improvements to the ASDoc tool including support for ASDoc in MXML documents, a common feature request. Binding has been upgraded to now support two-way communication; simply throw an @ in the front of your binding expression and updates to the binding destination will now be copied back into the source. And one very exciting feature that was a top request is our support for more CSS selectors, which includes descendant and id-based selectors. Make sure to check out the documentation to learn more about these improvements.

Finally we know that we need to continue to evolve the Flex framework, even beyond the Spark architecture. A powerful feature in Flash Player 10 is the new text engine, and the associated Text Layout Framework (also in beta, releasing at the same time as Flex 4). We are incorporating the text engine and Text Layout Framework directly into the Flex framework, creating new text controls for Spark and providing basic exposure to the Halo controls as well. The new text controls support bidirectional text, and while it is not in this release, we will quickly be adding mirroring support to Flex to enable Flex applications in all locales. You will also see that we've migrated our HTML templates from being based on the old Adobe Flash Player Detection Kit to the open source SWFObject project, another popular request.

Where to go from here

And there you have it. The next generation of Flex development is now ready for your perusal. Go ahead and download Flash Builder beta, Flash Catalyst beta, or even just the Flex SDK beta on its own. Try building an application or two. Build some new custom components. This is beta software, so file bugs and give feedback on the forums. We'll be listening; we want to use this time to make sure that when we release Flex 4 it's the best yet. We've been astounded with the incredible applications built with Flex up to now, and we hope that with our new framework and tools you can impress us even more!

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.

About the author