These are notes from Adobe MAX 2009. This session will help us see what problems we may encounter moving to Flex 4, as well as what new features we can use.

Packages. The old mx packages are still there. But now everything new is in the spark packages. Why two different packages? At first, they had them all in the same package, but the component had a prefix for the new version. It wasn’t received well. So instead, Adobe just put the new components in new namespaces.

The MX namespace is also called “Halo”. Don’t consider it a “legacy” namespace. These are still fully supported. Spark is all of the new stuff. The general MXML has a new 2009 namespace, but the legacy namespace is still supported.

Graphics

You can add graphic primitives enabling you to draw lines, ellipses, and curves, directly within the MXML. With the new FXG file format, you can import a graphic in as a vector graphic that appears as code. Cool. Using a static FXG image is great for icons or other static simple images, because its rendering is faster than an MXML graphic container.

Flex States

Instead of using AddChild and RemoveChild for changing states, you have includeIn=”" and excludeIn=”" attributes that go directly on components. What’s more, you can set various attributes of a component for the different states by using a dot notation. For instance, title.mystate=”Title”. This seems like a pretty drastic change.

With states, you have to use the OLD way with the 2006 namespace, and you have to use the NEW way with the 2009 namespace.

Skinning

Components all have separate skin files. This will allow you to create a custom skin for any component easily.

Common migration issues

Type selectors need namespaces now in your Flex CSS. For instance, if you’re styling a button, Flex doesn’t know if it is a Spark button or a Halo button. So you need to define the namespace in your stylesheet and update your selectors accordingly.

You must compile against Flash Player 10. This won’t be an issue if you use Flash Builder 4 with Flex 4.

Application.application should now be renamed to FlexGlobals.topLevelApplication. Just a direct rename.

RSLs are on by default.

The “Declarations” tag is a problem child. In Flex 4, anything that is not a display object or default property must be within the fx:Declarations tag. Even tags like RadioButtonGroup. Formatters, Effects, RPC stuff, Validators, etc. need to go in the Declarations.

“If Looks Could Kill.” The default theme is now Spark, which looks different than the old Halo theme. You can switch back to the Halo theme. To do so, turn on “Use Flex 3 compatibility mode” in the project properties, or go into the “Flex Theme” panel and change the theme (this is the preferred way).

If moving to Flex 4, try to use as many Spark components as you can. They should play nicely with MX components. You can intermix them together. Caveats: (1) The graphic primitives cannot go in an MX component, just wrap them with a group; (2) you cannot put MX components in Spark containers; (3) MX effects do not work on Spark graphic primitives; (4) MX navigators (ViewStack, Accordion, etc) should use NavigatorContent component.

Other things to watch out for:

• Spark components don’t support the Halo theme.
• Cannot create spark component based itemRenderers for MX List based components
• APIs between MX and Spark components are different (e.g. addChild vs. addElement)!
• When using MX and Spark components together, you may see a text difference since they are themed differently. There is a TLFText theme that can help with this.

So, migrating an app from Flex 3 to Flex 4 is a bit of a slippery slope. And even just beginning to use Flex 4 with current Flex 3 knowledge will require a bit of a slowdown as you undo some of those brain synapses to do things the new Flex 4 way. But these changes going forward are good for the Flex framework.