0 Replies Latest reply on Nov 21, 2012 10:32 AM by BioOdie

    Custom button skin with scaleGrid 9 slice image does not appear in Design Mode

    BioOdie

      So in a custom button skin I have a nine sliced image, and then throw that onto an MXML page. In design view, I cannot get the component to show the image that I've thrown on it. Unless I do a hack on the MXML page by adding the image in it's scaleGrid form to the page somewhere. Then it seems to act as like a preloader for the image so it actually displays. But I don't want to do this hack on every page that uses this component. Is there a work around?

       

      Here's the button skin:

      <?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"
                          width.disabled="296" height.disabled="73">
          
       <!-- host component -->
       <fx:Metadata>
                          [HostComponent("spark.components.Button")]
        
                          [Embed('assets/art/shared/button_1@2x.png', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)]
       </fx:Metadata>
      
        
       <!-- states -->
       <s:states>
                          <s:State name="disabled" />
                          <s:State name="down" />
                          <s:State name="over" />
                          <s:State name="up" />
       </s:states>
        
                <s:Group width="100%" height="100%" >
        <s:Image width="100%" height="100%" smooth="true" source="@Embed('assets/art/shared/button_1@2x.png', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)"/>
       </s:Group>
        
       <!-- text -->
                <s:Label id="labelDisplay" left="10" right="10" top="2" bottom="2" horizontalCenter="0"
                                     maxDisplayedLines="1" textAlign="center" verticalAlign="middle" verticalCenter="1"
                                     color="#FFFFFF" >
        <s:filters>
                                    <s:DropShadowFilter distance="0" angle="90" color="0x000000" alpha="1" blurX="2" blurY="2" strength="16" quality="3" />
        </s:filters>
       </s:Label>
        
      </s:Skin>
      
      
      

       

      And then I throw that button into an MXML page. The image doesn't show up in design view.

       

      <s:Button x="330" y="94" width="134" height="57" label="Button" skinClass="features.shared.NineSliceButtonSkin" />
      

       

       

      This hack, fixes the button! And all other buttons that use that skin.

       

      <s:Image width="100%" height="100%" smooth="true" source="@Embed('assets/art/shared/button_1@2x.png', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)"/>
      
      <s:Button x="330" y="94" width="134" height="57" label="Button" skinClass="features.shared.NineSliceButtonSkin" />