The Flex 4 (codename: Gumbo) release is a major change from Flex 3. Flex 4 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 Flex 4 , 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 Flex 4, 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. This article will not cover all of the new features and functionality in Flex 4.
Throughout this document, the term MX components refers to components originally included in Flex 3. The term Spark components refers to the new set of components in Flex 4.
Migrating applications to Flex 4
When migrating Flex 3 applications to Flex 4, 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 SDK 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 SDK, 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:
@namespace "http://www.adobe.com/2006/mxml";
…
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 4later 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”).