Flex 4: Build a Group with a background

Question

I'm trying to build a simple component extending spark.components.Group to have a background color, more specifically a spark.primitives.Rect component stretched to fill the background.

This is what I've come up with thus 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>

Ok, so the logic here basically makes sense, right? All children declared in MXML go to the Group called "container". That is working 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>

This is what it looks like:

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

Acculturation

Answer 1

Weird. I just resorted to making a Skin implementation and applying it to a SkinnableContainer. I was compiling using the Beta 2 release of Flex 4 as well. Very strange indeed.

Acculturation

I think Ryan Guill was talking about a nightly build, as opposed to the milestone beta 2 flex 4 build: 4.0.0.10485 Anyway, I recall having an issue similar to this where a top="0" bottom="0" left="0" right="0" fixed it for me. :/ edit: sorry, I misread your question, read it as width="100%" height="100%" – Tifanie

any chance you could post your solution's code? that'd be helpful. – Primipara

Answer 2

What build of flex 4 are you using? I just copied your code exactly and the output looks as you would expect it to.

I am running the beta 2 build that was released within the last few weeks. Build 4.0.0.253292. You can upgrade your build if you aren't running the latest, but you can also try to clean the project. It might just be getting confused. Also make sure your browser isn't caching the swf, which sometimes happens when the file size doesn't change dramatically.

Feasible