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