setting s customskin to a flex mobile application makes all components dissapear - apache-flex

Question

I'm trying to add a custom skin with a background image to my application that entirely fits the entire screen of any device.
This is the skin:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomMainSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5" >
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<!-- fill -->
<s:BitmapImage id="img"
source="assets/background.jpg"
scaleMode="stretch"
fillMode="scale"
smooth="true"
left="0" right="0"
top="0" bottom="0" />
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" />
If i set the skin on the application everything looks great, the image resizes to the screen needs, but all componnents dissapear and i am not able to edit any view.
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="240"
xmlns:components="views.*"
creationComplete="removeTab1DefaultView(event)"
skinClass="skins.CustomMainSkin" >
<s:ViewNavigator label="Main view" firstView="views.MainView"/>
<s:ViewNavigator label="Online Rankings" firstView="views.RankingsOnline"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:TabbedViewNavigatorApplication>
I tried setting the skin directly in the view using a SkinnableContainer. Components are visible in this way, but the image doesn't resize and is a lot larger than the screen.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="MainView"
actionBarVisible="false"
tabBarVisible="false"
>
<s:SkinnableContainer skinClass="skins.CustomMainSkin" >
<s:NavigatorContent id="gameBoard" >
</s:NavigatorContent>
<s:Group x="27" y="133" width="297" height="388">
<s:Button left="33" right="36" top="39" bottom="281" label="Start Game"
horizontalCenter="-2" verticalCenter="-121" click="button1_clickHandler(event)"/>
<s:Button x="34" y="146" width="228" label="Rankings" click="rankingsAction(event)"/>
<s:Button x="32" y="252" width="228" label="Quit"/>
</s:Group>
</s:SkinnableContainer>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:View>
How can i achieve this? It seems really hard and un-natural.
Thanks

Answer 1

Here is an example for a simple skin with a BG image.
Below, the code to use it.
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomPanelSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
blendMode="normal"
mouseEnabled="false"
minWidth="131" minHeight="127"
alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<!-- states -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
<fx:Metadata>
[HostComponent("spark.components.Panel")]
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
override public function get colorizeExclusions():Array {
return exclusions;
}
override protected function initializationComplete():void {
useChromeColor = true;
super.initializationComplete();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
if (getStyle("borderVisible") == true) {
background.left = background.top = background.right = background.bottom = 1;
contents.left = contents.top = contents.right = contents.bottom = 1;
} else {
background.left = background.top = background.right = background.bottom = 0;
contents.left = contents.top = contents.right = contents.bottom = 0;
}
var cr:Number = getStyle("cornerRadius");
var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar");
if (cornerRadius != cr) {
cornerRadius = cr;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void {
target.topLeftRadiusX = cornerRadius;
target.topRightRadiusX = cornerRadius;
target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
}
private var cornerRadius:Number;
]]>
</fx:Script>
<!-- drop shadow can't be hittable so all other graphics go in this group -->
<s:Group left="0" right="0" top="0" bottom="0">
<!-- layer 2: background fill -->
<!--- Defines the appearance of the PanelSkin class's background. -->
<s:Rect id="background"
left="1" top="1" right="1" bottom="1">
<s:fill>
<s:BitmapFill id="backgroundFill" source="#Embed('Images/BG.jpg')" alpha="0.3" fillMode="repeat" />
</s:fill>
</s:Rect>
<!-- layer 3: contents -->
<!--- Contains the vertical stack of titlebar content and controlbar. -->
<s:Group id="contents"
left="1" right="1" top="1" bottom="1">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="contentGroup"
width="100%" height="100%" minWidth="0" minHeight="0">
</s:Group>
</s:Group>
</s:Group>
</s:SparkSkin>
Usage:
<s:Panel id="target"
width="100%" height="100%"
skinClass="WorkspaceSkin">
</s:Panel>