flex 4.6 background image skinning

Question

Hi everyone I'm new in flash builder with flex 4.6...

I created a mobile app with navigator view theme but I want my own personalized theme which is a simple image jpg attached in my skin: backGround.mxml

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

<fx:Metadata>[HostComponent("spark.components.View")]</fx:Metadata>

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<s:BitmapImage includeIn="normal" height="100%" source="assets/fondito.jpg" width="100%"/>

I imported the skin as skinClass in my HomeView, but it covers up all the other components... labels, list, buttons, etc...

How can i display all components above the skin?

Answer 1

Take a look at the skinParts that are necessary for the View class here.

You'll notice that you're going to need a contentGroup optional skin part. This allows you to layout your bitmap image relative to that. As a quick fix, here is some sample code (untested):

...
<s:BitmapImage includeIn="normal" height="100%" source="assets/fondito.jpg" width="100%"/>
<s:Group id="contentGroup"/>
...