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 (MX) 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 in the Properties Panel. In the Properties Panel, select, Flex Theme and click on the Halo theme (see Figure 1).

Figure 1. Selecting the Halo Theme in the Properties Panel

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. To understand which styles are available for the Spark skin, you should reference the ASDoc. For each style listed per component, a "Theme" will be designated. If no theme is designated, then, the style is available for both the Halo and Spark theme. Flex 4 beta has also added a Wireframe skin that was designed to be used for quick mock-ups. The Wireframe theme does not support style changes.

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 MX 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.

Automation Library location change

In Flex 3, automation libraries were present under {sdk}/frameworks/libs and in the Flex 4 beta, it is available under {sdk}/frameworks/libs/automation. Users should ensure that they don’t have a copy of automation libraries under the frameworks/libs. 

Page 2 of 7

Previous Page

Next Page