Flex 3 to Flex 4 Migration Howto
Posted At : March 21, 2010 10:50 PM 0 Comments
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.
This makes the default non-namespaced items in your stylesheet refer to the MX components. eg:
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:
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:
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
becomes:
<fx:Script> and </fx:Script>
Similarly for other tags like this:
<mx:Metadata> to <fx:Metadata>
Add Declarations for non visual components
Wrap
This shows up as the following error:
So if you had something like this before:
It would now look something like this:
Stylemanager is not called as a global class any more and you need to use fully qualified references so:
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.
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.
<mx:AddChild relativeTo="{myBox}">
<mx:Text textAlign="center" text="Loading..." selectable="false" />
</mx:AddChild>
... snip ...
<mx:VBox id="myBox">
</mx:VBox>
... 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
