Joan has posted 1 posts at DZone. View Full User Profile

A Comparison of Flex 3 and Flex 4 beta

06.19.2009
| 32697 views |
  • submit to reddit

The Flex 4 (codename: Gumbo) beta release is a major change from Flex 3. The Flex 4 beta introduces a new component and skinning architecture. As a Flex 3 developer, however, you will likely not encounter too many challenges when compiling Flex 3 applications with the Flex 4 beta, since a goal of the new release is to maintain backwards compatibility with Flex 3.

In this article, I will provide a general overview of the main objectives in the Flex 4 beta, architecture differences, and an introduction to changes in components, layouts, use of states, and effects. I'll also answer some questions regarding what to expect when you compile your Flex 3 application in Flex 4 beta. This article will not cover all of the new features and functionality in Flex 4. For that information, see Matt Chotin's What's new in Flex 4 SDK beta article.

Throughout this document, the term Halo components refers to components originally included in Flex 3. The term Spark components refers to the new set of components in the Flex 4 beta.

Requirements

In order to make the most of this article, you need the

Flex 4 SDK beta
Prerequisite knowledge

This article assumes knowledge of the Flex 3 Framework.

 

Migrating applications to Flex 4 beta

When migrating Flex 3 applications to the Flex 4 beta, you should not expect to do very much work. Other than bug fixes and a change in the default theme, you can look forward to your application generally working the same (or better) than it did in Flex 3. However, there are a few things to watch out for.

Player dependency

Be sure that you compile against Flash Player 10. The Flex 4 beta requires Flash Player 10 support.

Type selectors require a namespace

A CSS type selector names the Flex class to style. For example, the following are type selectors for Button and DateField:

Button {
cornerRadius: 10;
}
DateField {
color: #780800;
}

As of the Flex 4 beta, when an application uses type selectors, a namespace is required. If you are using only the MXML 2006 namespace in your Flex Application, add the following default namespace declaration to your CSS:

<mx:Style>

@namespace "http://www.adobe.com/2006/mxml";

</mx:Style>

If you are using multiple namespaces in your application, then you will need to provide each of the namespaces in your CSS. For an example, see Namespaces and packages in Flex 4 beta later in this article.

Further, if an application used a method like StyleManager.getStyleDeclaration("Button"), the type selector will need to include its package. For example, the call to getStyleDeclaration() would change to StyleManager.getStyleDeclaration("mx.controls.Button").

Theme change

The default theme for Flex 3 (Halo) components is now the Spark theme. Therefore, your application may look and size itself differently when you compile it using the Flex 4 beta. If, however, you want to use the Flex 3 look you still can because Flex 4 beta includes the Halo theme from Flex 3. To compile using the Halo theme, you can use the -compatibility-version=3.0 flag or compile your application using the -theme as an additional compiler argument. In Flash Builder 4 beta, you can do this by changing the Additional Compiler Arguments setting in the Flex Compiler section of the Properties panel (see Figure 1). If you are using the additional compiler arguments, make sure that the framework/themes/Halo directory is in your source path.

propertiesPanel.JPG

Figure 1. Setting additional compiler arguments

If you do choose to use the new Spark theme, note that many of the styles that worked with the Halo theme do not work in the Spark theme. The Spark theme only supports a limited number of styles including baseColor, color, contentBackgroundColor, focusColor, symbolColor, selectionColor, and rollOverColor. To change visuals like borders or rounded corners on a component using a Spark theme, you will need to create a custom skin. Flex 4 beta has also added a Wireframe skin that was designed to be used for quick mock-ups.

In addition to the theme change, the default preloader has changed to the mx.preloaders.SparkDownloadProgressBar for Flex 4 beta applications. This lighter weight preloader should shorten start-up time a little. If you want to use the Flex 3 preloader, you only need to change one line of code. In your Application tag add the following: preloader="mx.preloaders.DownloadProgressBar".

If you are migrating an application from Flex 3 to Flex 4 beta, I do not recommend that you replace each of your Flex 3 Halo components with their corresponding Flex 4 beta components. This is probably not a good investment of your time. Instead, move to the Flex 4 beta component architecture for new applications.

References
Published at DZone with permission of its author, Joan Lafferty. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: