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

Posted on May 4, 2010 | Comments Off

This is the third part of a series of posts detailing the migration of a Flex 3 AIR 2.0 application to Flex 4. In this post we’ll start converting the custom components that make up the actually Microphone example code. This code comes across more of the same migration issues as well as some new ones. There will be migrating of css styles to skins which in turn then get reused across components. Also I noticed a difference in mx:Label and s:Label causes some tweaking on placement/layout on the converted components.

Converting Flex 3 Microphone application to Flex 4

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

Approaching the mx:ViewStack in Flex 4

Flex 4 overhauled how states work in mxml. This new approach is a lot easier then the old method of all state logic being inside the state mxml blocks. The new states mechanism is a decent approach to replace most of the simple cases of ViewStack functionality. There is no Spark ViewStack direct component replacement but if you want the old selecetedChild property and similiar syntax you can find people that have created a ViewStack Flex 4 Spark component on the web. I choose to use the new state method, in the main applications mxml I added three states for the three views declared in the ViewStack. The three states are called: sampleMic, pitchDetection, and info.

NOTE: The <s:states> property has to be before any content components or you will get a compiler error shown below.

Child elements of ‘WindowedApplication’ serving as the default property value for ‘mxmlContentFactory’ must be contiguous. MicrophoneExamples.mxml /microphone/src line 57 Flex Problem

Next I removed the mx:ViewStack and added the includedIn property with the respective state name for each custom component that was in the mx:ViewStack. This will compile with some errors in MicrophoneExamplesSource.as file relating to the vsMain.selectedChild = X (X is the id/instance of the custom component), which is then changed to currentState = Y (Y is the string name of the new states). I went ahead and implemented a Fade state transition in the new Flex 4 transitions approach. Here is what the code looks like, MicrophoneExamples.mxml:

Converting Custom View SampleMicPanel

I started by adding the three new namespaces: fx, mx, and s. Then changed the main component from mx:Canvas to s:Group. The mx:Script block was changed to fx:Script because of the new namespace change. The first child mx:Canvas component has styleName="controlsBox"which I removed from the css and provided a custom skin to take care of the controlsBox‘s background and border style values. I removed the styleName property and then change mx:Canvas to mx:SkinnableContainer with skinClass="controls.skins.ControlsBoxSkin". The ControlsBoxSkin will be reused later in the other custom components here is what it looks like:

The second mx:Canvas with id="spectrum" is a place holder for the wave form to be dynamically drawn on. I changed mx:Canvas to s:Group which extends Sprite which can be drawn on programmatically.

For the TOP CONTROLS section of code I changed mx:HBox to s:HGroup, mx:Button to s:Button and s:ToggleButton (removing the toggle property), and mx:Label to s:Label. The s:Label padding is not the same as mx:Label and I had to tweak the font-size of footerPTText to 12. I didn’t change mx:Spacer as it made more since then just putting a s:Group with height="100%" in there.Here is the code:

NOTE: There is no mx:Spacer Spark equivalent, you could create a s:Group width=”100%” but they both inherit UIComponent at some point in their class structure, mx:Spacer has less hierarchy so is smaller in size.

For the TIMING UI section of code I changed mx:HBox to s:HGroup and the property horizontalGap to gap. I moved down the s:HGroup down four pixels because of padding differences. Here is the code:

For the PLAY CONTROLS section of code I changed mx:HBox to s:HGroup, mx:Button to s:ToggleButton (removing the toggle property), all mx:Canvas to s:Group, mx:HSlider to s:HSlider. The playHeadCanvas and playHead components had background colors set onto the mx:Canvas, these css styles where removed and drawn into the s:Group‘s directly with s:Rect. The s:HSlider handles the DataTip styling through skins and not styles now, so I had to create a custom skin and added it to the component as skinClass="controls.skins.MyHSliderSkin". I created a copy of the Spark HSlider skin and just tweaked the DataTip section to be a rounded dark rectangle with light grey text, code is found in MyHSliderSkin.mxml. There was no equivalent in the css file but the mx:HSlider would use global styles in setting the DataTip style so this had to be changed manually in the skin for the s:HSlider. Here is the code:

NOTE: In Part 1 I removed HSlider, RadioButton and ComboBox from the css file. They used custom images for icon style values. As we saw with the s:Button in the previous Parts of this series, I had to do this through skins not styles (or a custom skin that reads styles). The default skin’s for the above Spark components is the look and feel I am looking for, although slightly different, so I didn’t create custom skins for those components. The approach is like that of the controls.skins.IconButtonSkin but is a little more complex because of nested skins. I am leaving this from the series of posts for another time.

For the rest of the code the same type of changes where applied for the various components. The one thing to point out is that the mx:ComboBox to s:ComboBox the dataProvider doesn’t take a value of Array but has to be an IList. I wrapped the Array into an ArrayList that implements IList. Here is the code:

Converting Custom View PitchDetection

This is like the other custom component by adding namespaces and changing all the mx components to their Spark equivalents. The main mx:Canvas was changed to s:Group and the mx:Canvas with styleName="controlsBox" was changed to s:SkinnableContainer with a value of skinClass="controls.skins.ControlsBoxSkin", like in the previous SampleMicPanel component migration. Chalk one up for reuse of skins. Here is code of just the content section of the PitchDetection:

I removed the styleName="mainPaddedBox" from the PitchDetection component in the MicrophoneExamples.mxml file as it was not needed for this component.

Converting Custom View InformationPanel

This component inherits a mx:VBox which I changed to s:VGroup, as well as changed verticalGap to gap. I removed the styleName="mainPaddedBox" from the InformationPanel component in the MicrophoneExamples.mxml file and from the main css file. This is because the Spark component does not do padding on styles but as properties on the s:VGroup component. The old padding style values where applied to the as properties on the InformationPanel declaration in the MicrophoneExamples.mxml file.

Changing the mx:Label to s:Label again messed with padding and size of the text, I had to change css infoText to font-size of 12. The mx:HRule is basically a line so I removed this component and added s:Line with weight of 2 for the thickness. Here is the code changes:

Converting Custom View InputDeviceSelector

This custom component makes use of the controlsBox style, which means I reused the controls.skins.ControlsBoxSkin in connection with s:SkinnableContainer to replace the mx:Canvas. I made namespace, fx:Script, s:Label, and s:VGroup changes like before. The mx:ButtonRadioGroup change to s:ButtonRadioGroup requires that it is placed into a new fx:Declarations code block to keep non-visual declarations separate. Then when I compiled it comes back with an error about using addElement instead of addChild, with Spark containers components have to implement the IVisualElement interface and use the new addElement methods. Changing vbButtons.addChild to vbButtons.addElement fixes the compiler error and its all ready. Here is the content section of this custom component:

The End

This is the end of these series of posts on a real world example of converting a Flex 3 application to Flex 4 and the Spark architecture. Flash Builder 4 can still be used for Flex 3 applications both with the Flex 3 sdk and Flex 4 sdk in mx compability mode, for more information check out the ADC article.

Also a great post on learning more about Flex 3 and Flex 4 differences can be found on ADC here.