Adding a background color to a spark Group
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.
How about using
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
Or use a ‘BorderContainer’ instead of a group and specify the ‘backgroundColor’.
Its better to use this way, as bordercontaienr is bit heavy when compared to group + Rect
thanks for this
<3
Hi,
How can this be done from AS. i have created a vgroup in AS and i want to set background to it. kindly help in adding background image for the same.
Regards,
Prakash
@prakash – Here is an example in ActionScript:
import mx.graphics.SolidColor;
import spark.components.Group;
import spark.primitives.Rect;
public function addGroup():void {
var g:Group = new Group();
var bg:Rect = new Rect();
bg.fill = new SolidColor(0xFF0000);
bg.left = 0;
bg.right = 0;
bg.top = 0;
bg.bottom = 0;
g.addElement(bg);
addElement(g);
// now add your elements to the Group
g.addElement(other element);
}
thx!
I thought I was going crazy for a minute there… So easy a caveman could do it.
THANKS!
Another generalized takeaway from this- when you are looking for something in spark classes … it just may not be there yet. Check mx.
Again, Great post.
Thank you very much. This stuff safed my life
Thanks. Brand new to Flash Builder and still getting used to layouts. This helped a lot.