Tech Blog

Flex 3 to Flex 4 Migration Howto

Posted At : March 21, 2010 10:50 PM 7 Comments

I recently completed migrating an application from Flex3 to Flex4, and for my own reference, here's how I did it.

Note - this was done with flexsdk-4.0.0.13875, which was the most recent stable build at the time.

Phase 1: Get Flex3 code compiling with Flex4

Fix up stylesheets:

If you have a current Flex3 project and you are migrating to Flex4 you need to add the following lines at the top of your stylesheet.

@namespace "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";

This makes the default non-namespaced items in your stylesheet refer to the MX components. eg:

Button{fontSize:18;}
And to style up spark buttons you simply use:
s|Button{fontSize:18;}

To statically link or not?

Flex 4 defaults to dynamically linking runtime shared libraries. This produces smaller files, but if you are making desktop type applications or developing code while not connected to the internet you'll probably want to statically link the files. Add this to your compiler option:

-static-link-runtime-shared-libraries=true

You now should have a happily compiling app, however, to use all the new goodness of flex 4 there are still some more steps to be done.

Phase 2: Using all of flex 4

Update namespace to 2009

To update the namespace references for flex 4 I did the following search and replace:

Replace:
xmlns:mx="http://www.adobe.com/2006/mxml"
With:
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"

Replace mx with fx namespace

<mx:Script> and </mx:Script>
becomes:
<fx:Script> and </fx:Script>

Similarly for other tags like this:

<mx:Binding> to <fx:Binding>
<mx:Metadata> to <fx:Metadata>

Add Declarations for non visual components

Wrap tag around non visual compoents. The compiler will complain about all these errors so just follow through and wrap them in

<fx:Declarations></fx:Declarations>
tags until all the errors go away.

Migrate States

Finally, at least for the project I migrated, I needed to convert all the state tags to the new format of inline attributes.

This shows up as the following error:

Error: State overrides may no longer be explicitly declared. The legacy states syntax has been deprecated.

So if you had something like this before:

<mx:State name="loading">
<mx:AddChild relativeTo="{myBox}">
<mx:Text textAlign="center" text="Loading..." selectable="false" />
</mx:AddChild>
... snip ...
<mx:VBox id="myBox">   
</mx:VBox>

It would now look something like this:

<mx:State name="loading">
... snip ...
<mx:VBox id="myBox">   
<mx:Text textAlign="center" text="Loading..." selectable="false"
   visible="false" includeInLayout="false"
   visible.loading="true" includeInLayout.loading="true"
/>
</mx:VBox>

Migrate StyleManager References

Stylemanager is not called as a global class any more and you need to use fully qualified references so:

thisImage.source = StyleManager.getStyleDeclaration("Image").getStyle("brokenImageSkin");
becomes:
thisImage.source = styleManager.getStyleDeclaration("mx.controls.Image").getStyle("brokenImageSkin");

When these have all been converted, your application should compile.

Then you can start leveraging the new functionality of flex4 and begin migrating your components to spark if necessary.

Posted in: Open Source, HOWTO, Flex, AIR, Actionscript

New comments are disabled

7 Comments

Mauricio 10/4/10 3:00 PM

Great article, I am planning to migrate a huge project from Flex 3 to flex 4 and until now I didn't have an idea of how to achieve that goal.

Thanks!!

Sunil 11/10/10 9:45 PM

Awesome, thank you for documenting this!

Alex 11/21/10 2:22 AM

Thanks for the article. What a pain, huh? Adobe should have created an instant migrate tool. For huge projects with hundreds of files... this is an epic quest.

It's stuff like this that makes me want to get out of Flex development forever.

ricky 12/29/10 7:14 PM

Don't you need to instantiate the StyleManager class in the below code snippet?

thisImage.source = styleManager.getStyleDeclaration("mx.controls.Image").getStyle("brokenImageSkin");

Paul Zain 2/27/11 12:03 PM

Excellent article--you saved me quite a bit of time. Cheers.

Rajik Pasha 6/15/11 7:02 AM

Hi Thanks for a nice tutorial.

I followed this for migrating our flex3 project to Flex4 , but i have some problen in this like i am unable to resize my panels and Link buttons are also not working in Firefox and Chrome ..But it works fine in IE8..

Please help me..

Nirmal Kumar Bhogadi 7/1/11 12:59 PM

I work on Adobe Flex. We have a huge application that is written in Flex 3. Now I am trying to migrate it to Flex 4. I have 3 modules in that application. I have few pages which contain Charts. When I run my application with Flex 4, the pages that contain Charts are not loading at all. All the other pages are working fine. Also, I have a module which is built on Google Maps. Even that module is not loading with Flex 4. I have checked the Flex 3 compatibility option in the properties.

I have asked to lot of guys about this issue (Charts not loading), but did not get any useful answer. Please help me in this respect.