Flex 4: create a group with a background

Question

I am trying to create a simple component that extends spark.components.Group to have a background color, more specifically spark.primitives.Rect component, stretched to fill the background.

This is what I came up with so far:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" <fx:Metadata> [DefaultProperty(name="content")] </fx:Metadata> <s:Rect id="background" width="100%" height="100%"> <s:fill> <s:SolidColor color="#990000"/> </s:fill> </s:Rect> <s:Group id="container"/> <s:filters> <!-- For good measure ;) --> <s:DropShadowFilter color="#000000" strength="0.4" blurX="5" blurY="5" distance="2" angle="90"/> </s:filters> <fx:Script> <![CDATA[ public function set content(value:Array):void { this.container.mxmlContent = value; } ]]> </fx:Script> </s:Group> 

So, the logic here basically makes sense, right? All child elements declared in MXML fall into a group called "container." It works just fine. However, when I run the example below, the layout is completely fubar.

 <s:VGroup> <!-- This is the component described above --> <components:MessageContainer id="component" width="100" height="100"/> <mx:Slider/> <mx:Slider/> <mx:ColorPicker/> </s:VGroup> 

Here's what it looks like:

Is there something I'm missing here? Maybe I need to override the method?

Answer 1

Weird I just resorted to implementing Skin and applying it to SkinnableContainer. I was going to use beta version 2 of Flex 4. Very strange.

Answer 2

What flex 4 build are you using? I just copied your code for sure and the result looks exactly as you expect.

I am launching beta 2 build, which has been released over the past few weeks. Build 4.0.0.253292. You can update your assembly if you do not have the latest version installed, but you can also try to clean up the project. It can just get confused. Also, make sure that your browser does not cache SWF, which sometimes happens when the file size does not change dramatically.