Converting Flex 3 Microphone application to Flex 4 (part 1)

Posted on April 28, 2010 | 2 comments

For AIR 2.0 release on labs.adobe.com I created a Microphone Example application showcasing the new feature that allows access to raw microphone data in Flash Player 10.1 and AIR 2.0. This application is a custom chrome AIR application that uses a lot of CSS and embedding of assets, both fonts and images. I figured it would be a good use case for migrating from Flex 3 mx components to Flex 4′s Spark components. As there is a bit to cover in detail I’ll share the step by step changes needed for the migration over a series of posts.

You can still build applications in Flash Builder 4 with Flex 3 sdk, or even Flex 4 sdk with mx compatibility mode on. The purpose of this exercise is to actually convert/migrate the application to the Spark architecture.

Converting Flex 3 Microphone application to Flex 4

• Original Source Files
• Flex 4 files as Flash Builder 4 project (.fxp)
• Part 1 (this post)
• Part 2
• Part 3

Changing the SDK

The original application was created with Flex 3.2 and AIR 2.0 on labs.adobe.com. When switching to the Flex 4.0.0.14159 sdk, which comes with Flash Builder 4, and overlaid AIR 2.0 sdk the project compiles with no errors. Although it compiles with no errors the application doesn’t look much like the original, you can see the difference below.

Note: Flex 4.1 has AIR 2.0 SDK included and is the best approach since the release of AIR 2.0 SDK, until Flash Builder 4 gets and update you need to download it here.

Original:

Flex 4 sdk, no changes yet:

Changing the Application Namespaces

In the main, MicrophoneExamples.mxml application file I removed the old

and replaced it with

Changing the old namespace to the new halo and spark namespace separation yields 2 errors. The simple fix is to change the mx:Style and mx:Script to fx:Style and fx:Script. Simple enough for the application namespace changes.

Adding the CSS Namespaces

Continuing, I opened up the embed_assets/stylesheet_common.css file and added the spark and mx namespaces.

Note: I removed the references to components not used in the application from the css file at this point too, which included ComboBox, HSlider, RadioButton, and Application.

With the new namespaces you now have to add the namespace to the component, in this case its really only WindowedApplication and Window, the rest of the styles are specific style names. This means I added “mx|” to the css block, at this point I also took care of the warning that theme-color is not used and changed it to chrome-color, the changes looked like this:

Warning Cleanup

Just because I wanted to clean up the all the Flash Builder 4 warnings I went ahead and made some code changes that used Application.application in a binding scenario in the InformationPanel.mxml. The usage of Application.application is deprecated and the new way is to use FlexGlobals.topLevelApplication, but the new FlexGlobals can’t be bound. This led to a change in the InformationPanel.mxml to have a public bindable property that I then bound to in MicrophoneExamples.mxml. Here is the two code segment changes.

InformationPanel.mxml code section:

MicrophoneExamples.mxml code section:

Next Steps

This is enough for this blog post. In part 2 we’ll start actually changing the application’s components into Flex 4 Spark components where possible.