Early migrating your projects from Flex 3.x to Flex 4 (SDK) + FlexBuilder3 to FlashBuilder4 without many code changes

For a project with close to 1000+ files in codebase, there are un-doubtedly many challenges in performing an early code migration.

It’s always tough to sell your manager an idea of migrating code base to a new version. In Medium to small corporate firms, Most Managers play multiple roles of Project Management, Technical Management and Client management. Delivery manager would slightly share or buy most of what project manager informs about technical challenges or deliver dates negotiation due to challenges. There are some advantages and disadvantages for lead / front technical guys who want to prove that the new version is going to help codebase/product in long run with tremendous enhancements. Most of these managers are typically client oriented and think in terms of numbers in most occasions and are considerably less caring about migration efforts / future code enhancements especially when there was huge effort in building a stable version, well appreciated and satisfied by the client

As a Lead or Front facing Technical guy, you are pretty excited about the release & all the news floating around about Flex 4, Flash Builder 4, Coldfusion Builder and you spread your thought across to the manager making decisions claiming that it would be great to migrate codebase for a long term plan. Having worked on the long ran Beta’s (from Adobe) Technical guys know most of the new features released in these new versions

Thanks to Adobe for giving us backward compatibility with the new version of Flex 4 SDK in Flash Builder 4. If you are working on a larger project implemented with Flex 3 and wish to migrate from Flex 3.x SDK to Flex 4 SDK and FlexBuilder3 to Flash Builder 4 (for developer IDE enhancements), start off here :

• Export Latest copy of your Source code from repository
• Create New Flex project in Flash Builder

Export Latest copy of your Source code from repository

Assuming you are on SVN, Switch your perspective to SVN Repository Exploring Perspective and on your source trunk, Export a latest copy of your Source directory –

Hit OK and your Code is now exported to C:\flexsourcecode

Create New Flex project in Flash Builder

Start your FlashBuilder.

Right click in your package explorer and choose New -> Flex Project

Choose your application server type, debug folder, etc. (omitted here).

Proceed and

• Select "MX only" radio option
• Add any *.swc to your libs directory
• Choose appropriate setting for your Framework linkage
• Hit Finish

Your project will be listed –

• Copy your source code (earlier exported into C:\flexsourcecode) into the newly created project here
• Copy any *.swc into libs if you forgot to add earlier
• You can get rid of the test.mxml file (delete)
• Right Click properties on the project and delete the test.mxml and set your mainapplication mxml as default here

FB builds your project and reports any changes to be made.Here are the changes I had to make:

• In Flex 3, mx:Label textDecoration="bold" property value is wrong in Flex4
• In Flex 3, mx:Label fontStyle="bold"property value is wrong in Flex 4
• For the above two use fontWeight instead
• In Flex 3, mx:states, mx:AddChild, components:xyz paddingTop="0" paddingLeft="4" paddingRight="10" paddingBottom="8", paddingType in this scenario is not supported in Flex 4. You will get compiler error
• Plus Lots of warnings...

For most you will be done here.

As you run, you notice that your CSS will not be picked up.

Pull up your CSS file and add the following line in the beginning –

You should be done now.

Do a few testes running your application. Now that you have confirmed that your application works with Flex 4 SDK (mx set only) and Flash Builder 4 (not the right way though, I mean you are not using spark components, fx namespace yet), you can sell the idea of buying Flash Builder 4 for developer productivity and enhancements.

Migrating the code to newer Flex 4 (not just via backward compatibility) would take time and can wait and go on as you do this step.

From Flash Builder 4 docs - In some scenarios you may want to use only the MX components that were available with Flex 3. For example, suppose you have an existing Flex 3 project and you do not want to introduce the new Spark components. But you do want to take advantage of features introduced with Flex 4 and Flash Builder 4, such as the new states syntax, compiler improvements, and other language features. In this scenario, you select the MX Only component set.