Skip navigation
Currently Being Moderated

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

Nov 24, 2012 3:42 AM

Tags: #flex-mobile

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="" xmlns:s="library://"

alpha.disabled="0.5" >


<s:State name="normal" />

<s:State name="disabled" />


<fx:Metadata> <![CDATA[ [HostComponent("spark.components.Application")] ]]> </fx:Metadata>

  <!-- fill -->

<s:BitmapImage id="img"


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=""

xmlns:s="library://" applicationDPI="240" xmlns:components="views.*"

creationComplete="removeTab1DefaultView(event)" skinClass="skins.CustomMainSkin"     >

<s:ViewNavigator label="Main view" firstView="views.MainView"/> <s:ViewNavigator label="Online Rankings"



<!-- Place non-visual elements (e.g., services, value objects) here -->



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 / smaller  than the screen.

        <?xml version="1.0" encoding="utf-8"?>

<s:View xmlns:fx="" xmlns:s="library://"

title="MainView" actionBarVisible="false" tabBarVisible="false" >

<s:SkinnableContainer skinClass="skins.CustomMainSkin" > <s:NavigatorContent id="gameBoard" >


<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:SkinnableContainer>

<fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations>


Can you please help me achieve this?



More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points