4 Replies Latest reply on Feb 21, 2011 8:12 PM by Fran711

    Skinning Mobile Application with Image

    Fran711

      Hey everyone.  Thanks for looking in advance. 

       

      I have been trying for hours to get a custom skin on the view of my mobile application and have had no luck.  When I run the application, the image I'm using completely covers the screen as well as all of the components that I have in the View. 

       

      Here's part of Mobile App .mxml file just in case it helps at all:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:MobileApplication
      
       xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:s="library://ns.adobe.com/flex/spark"                     xmlns:mx="library://ns.adobe.com/flex/mx"
      firstView="views.HomePage" skinClass="skins.appskin">

       

       

      And here is my skin .mxml:  (It's very simple for now, I just want to get a basic version working.)

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark">
           <!-- host component -->
           <fx:Metadata>
                [HostComponent("spark.components.MobileApplication")]
           </fx:Metadata>
           
           <!-- states -->
           <s:states>
                <s:State name="disabled" />
                <s:State name="normal" />
           </s:states>
           
           <s:BitmapImage source="@Embed('Cereal.jpg')"
                             fillMode ="scale" left="0" right="0"  top="0" bottom="0"/>
           
                <s:ViewNavigator id="Navigator" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"/>
           
      </s:Skin>

       

       

      Any help is much appreciated.  Thanks!