Adobe Flex - How to embed component inside an image's "window"?

Question

I have a an image, lets call it "StageSkin.png". This is an image which is really just a border, and the middle of the image is "windowed", meaning that it is meant to show other information inside of it. The information inside of it is in the form of a component (based on a canvas component, lets call it 'Gauge').

I want to create a component out of the 'StageSkin' image and the 'Gauge' component inside of it that would allow me to resize the component with the 'Gauge' component staying inside of StageSkin's window. I searched on this, and got the code below, but the embedded component just overlaps the entire image. What do I need to do?

<mx:Style>
 .nineSliceScalingBackground
 {
  background-image: Embed("assets/StageSkin.png",
  scaleGridTop="53", scaleGridBottom="523",
  scaleGridLeft="20", scaleGridRight="485");

  background-size:"100%"; 
 } 
</mx:Style>

Answer 1

Does the component (and its child components) have background colors set? If so then those might be drawing on top of the background image, causing it to not display.

Answer 2

I'm not 100% certain this is your issue, but it sounds like you just need to pad your container.

<mx:Style>
    .nineSliceScalingBackground
    {
        background-image: Embed("assets/StageSkin.png",
        scaleGridTop="53", scaleGridBottom="523",
        scaleGridLeft="20", scaleGridRight="485");

        background-size:"100%";

        paddingTop: 53;
        paddingLeft: 20;
    } 
</mx:Style>

One thing which is annoying is that padding doesn't work for Canvas components. That means you need to use Container as your base class (or VBox/HBox if your use case demands it).

Padding determines the amount of space between the edge of the parent and the edge of the child.

You may also have to explicitly set the width of your child elements to match the width of your window (585-20=565). You cannot do this in CSS but MXML or ActionScript will work. You might also get away with setting a paddingRight and setting the width of the component at 100%.