I have been using the Flex 4 SDK for a while now, since the Beta 2 release, and had a few projects containing mxml code with spark components. Since then Adobe has made some changes, and I found that in order to use few of the new components I need to upgrade.
One of the best references I use is Tour de Flex and it is now based on a newer build, so I decided to grab the latest stable build from Adobe – that is build 13875. After installing it on my Flash builder – not to my surprise – I found that my projects shows build errors in any mxml that has spark and halo components, and the compiler refuses to recognize the mx namespace.
Now, you’d think Adobe would include some notes about these kind of changes but, alas, you are on your own. Long story short, the halo namespace that was mapped to the mx components was renamed to mx (thanks to Peter deHaan’s post for this revelation).
So to fix the problem, simply rename all ‘ns.adobe.com/flex/halo’ to ‘ns.adobe.com/flex/mx’. Don’t forget the includes in the CSS file, if you have one.
Embedded fonts problems
Now that my project compiles and runs, I notice that the fonts don’t look right. However, this time the nice folks at Adobe provided us with the following warning:
warning: incompatible embedded font 'ArialFont' specified for mx.controls::UITextField (UITextField36).
This component requires that the embedded font be declared with embedAsCff=false.
Well, as it turns out, the new SDK now assigns two different types of embedded fonts: CFF embedded and non-CFF embedded. The CFF is used exclusively by spark components, while the mx components can only use non-CFF – too bad, since it practically means you cannot share styles between, say, spark and halo labels and text fields like I did.
To fix this, you’d have to define each of your embedded fonts twice: one instance for spark, and another instance for halo.. oops, I mean mx. In the mx font embed, set embedAsCFF to ’false’, and then create styles for both types and use them from their corresponding components. There is a detailed explanation with code samples on the Adobe web site.
That is my best solution to date, and while it consumes twice the memory for fonts, you get to use your fonts for both mx and spark. If anyone found a better solution, please post a comment.