Flex-4 Beta2 : Background image stopped working

Question

AFter upgrading a project from Flex4 Beta1 to Beta2, I've found that the background-image style is no longer supported on Halo components.

Eg:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
      backgroundImage="@Embed(source='myImage.png')" />

Note that jira issue SDK-23050 points out the following :

backgroundImage is not supported for Spark skins.

But this is not using a spark skin, just a standard Halo component.

Anyone got any ideas?

Answer 1

You have to create a skin class now. Use a VGroup and specify a custom made skin.

Answer 2

MX components in Flex 4 allow you to use Spark skins, and Adobe uses Spark skins by default so that MX and Spark components in the same application look like they belong together. Obviously, Spark skins support different functionality than Halo skins, and now you're expected to tweak the skins if you want them to look different (except for some simple color styles). Considering how creative designers can be, this is a much better approach than using only CSS because it's way more flexible, but it catches people familiar with the Flex 3 workflow by surprise.

It's not too hard to copy the default skin and add a background to it. However, you should also be able to use the old Halo skin to get the backgroundImage support, if that's what you prefer. I believe you want to tell your VBox to use mx.skins.halo.HaloBorder.

Answer 3

I ended up changing backgroundImage to backgroundSkin, and that solved the problem.

Answer 4

<s:BorderContainer x="100" y="100" width="200" height="200"

                   backgroundImage="@Embed(source='image.jpg)" >
</s:BorderContainer>

Use the code above. Any spark:BorderContainer have the option backgroundImage, either other backgroundImage options. Add the image you want to your source and put for image.jpg your image's name with its extension. do not forget single quotation marks.