0 Replies Latest reply: Nov 24, 2012 3:42 AM by DanDinu RSS

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

    DanDinu

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

      </s:Skin>

       

      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 / smaller  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>

      Can you please help me achieve this?

      Thanks