Skip navigation
BioOdie
Currently Being Moderated

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

Nov 21, 2012 10:32 AM

Tags: #problem #flex #4.6

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

 

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