Don’t use spaces in component attributes!

I found an issue with the Flex Builder today when using the design perspective. (Please don’t write back telling me that design perspective is for wussies, it’s awesome.)

In short, things get screwed up if you use spaces in your MXML attributes. Say you write the following code:

<mx:Canvas id = "spaces" x = "75" y = "100" width = "500" height = "180" backgroundColor = "0xffeedd"">
     <mx:Text text = "HELLO WORLD" x = "100" y = "0" />
</mx:Canvas>

Notice the spaces between the attribute names and the values. I don’t know why anyone would want to add spaces there but I’ve seen people do it.

Now if you switch into design mode and change the values there, Flex adds another set of values shown in bold.

<mx:Canvas id = "spaces" x = "75" y = "100" width = "500" height = "180" backgroundColor = "0xffeedd" width="300" x="275" y="31" backgroundColor="#808040">
     <mx:Text text = "HELLO WORLD" x = "100" y = "0"  x="38" y="104" text="FOOBAR"/>
</mx:Canvas>

OMG! Flex doesn’t know what to do with the spaced out attributes and you get a big fat mess! So the moral of the story is, please DON’T put spaces between the attribute name and the values in Flex just in case some wussy wants to fiddle with the design.