How to add a background gradient to an Application?

I'm a Flex newbie and am porting a 开发者_高级运维pure Flash/AS3 application to Flex 4.5.

In my original Flash/AS3 application I had a Sprite acting as a background. I put it underneath all other DisplayObjects and fill it with a linear gradient of random color. It looked good and seemed to work well with Flash Components (Buttons, Checkboxes, TexFields), because they are transparent.

So in my new Flex program (with BasicLayout), I've tried creating a Rect too:

<s:Rect left="0" top="0" right="0" bottom="0">
    <s:stroke>
        <s:LinearGradientStroke id="_bgcolor" rotation="90" weight="1">
            <s:GradientEntry color="0x33FFFF" alpha="0.55" />
            <s:GradientEntry color="0x99FFFF" alpha="0.2475" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>   

But this doesn't work well, the Rect is obscured by the other Flex components:

Is there a quick way of adding a backround gradient to a Flex application (something as simple as backgroundColor="#CCCCCC") or do I have to study "skinning docs" (and will skinning of an Application help here, since the problem seems to be that the Flex components are opaque?)

Looks like the default white background overlays your custom Rect.

Try adding contentBackgroundAlpha="0" to hide the component background without messing with skins.

You used <stroke> instead of <fill>

<s:Rect left="0" top="0" right="0" bottom="0">
    <s:fill>
        <s:LinearGradient id="_bgcolor" rotation="90">
            <s:GradientEntry color="0x33FFFF" alpha="0.55" />
            <s:GradientEntry color="0x99FFFF" alpha="0.2475" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

You're missing content group

<s:Group id="chrome" left="0" right="0" top="0" bottom="0" visible.closedGroup="false">

    <s:Rect left="0" top="0" right="0" bottom="0">
              <s:fill>
                    <s:LinearGradient id="_bgcolor" rotation="90">
                       <s:GradientEntry color="0x33FFFF" alpha="0.55" />
                       <s:GradientEntry color="0x99FFFF" alpha="0.2475" />
                   </s:LinearGradient>
               </s:fill>
            </s:Rect>
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
</s:Group>