Home > Flex 4 > Adding a background color to a spark Group

Adding a background color to a spark Group

November 23rd, 2009 Leave a comment Go to comments

In halo you could add a background color to any container by setting the backgroundColor style, but this is not the case for every spark container. Setting this style on components that extend from SkinnableContainer will work fine, but this style doesn’t exist on the Group component.

The reason for this is the Group container is very lightweight and has no skin and thus no visuals associated with it. It’s role is to layout its children which are visual elements.

You can add a background color to a Group by using a Rect with 100% width and height as the first element:

<s:Group>
    <s:Rect width="100%" height="100%">
        <s:fill><s:SolidColor color="0xFF0000" /></s:fill>
    </s:Rect>
 
    <s:Label text="group content..." />
 
</s:Group>

This works great with the default BasicLayout, but is a little trickier with a VerticalLayout or HorizontalLayout since that first element will be moved around by the layout.

Here is an example of how to add a background color to a VGroup (which is a Group with a VerticalLayout):

<s:Group>
    <s:Rect width="100%" height="100%">
        <s:fill><s:SolidColor color="0xFF0000" /></s:fill>
    </s:Rect>
 
    <s:VGroup>
        <s:Label text="group content..." />
        <s:Label text="group content..." />
        <s:Label text="group content..." />
    </s:VGroup>
 
</s:Group>

Same Idea for HGroup (Group with a HorizontalLayout):

<s:Group>
    <s:Rect width="100%" height="100%">
        <s:fill><s:SolidColor color="0xFF0000" /></s:fill>
    </s:Rect>
 
    <s:HGroup>
        <s:Label text="group content..." />
        <s:Label text="group content..." />
        <s:Label text="group content..." />
    </s:HGroup>
 
</s:Group>

And TileGroup (Group with a TileLayout):

<s:Group>
    <s:Rect width="100%" height="100%">
        <s:fill><s:SolidColor color="0xFF0000" /></s:fill>
    </s:Rect>
 
    <s:TileGroup requestedColumnCount="2">
        <s:Label text="group content..." />
        <s:Label text="group content..." />
        <s:Label text="group content..." />
        <s:Label text="group content..." />
    </s:TileGroup>
 
</s:Group>

Note: This sample requires Flex SDK 4.0.0.12093 or higher. You can get the latest SDK builds from opensource.adobe.com.

Tags: , , , , ,
  1. AV
    December 23rd, 2009 at 05:48 | #1
    Reply | Quote

    How about using

  2. David Salahi
    March 1st, 2010 at 22:21 | #2
    Reply | Quote

    Ah, that explains it! I was wondering how to get rid of that gray-green color. And why there was no background color property. Makes perfect sense now.

    Thanks,
    David Salahi

  1. No trackbacks yet.