1 Reply Latest reply on Nov 1, 2010 10:56 PM by drkstr_1

    Why won't this spark skin layout a label properly?

    ohseegee Level 1

      I'm creating a custom icon component, with a rectangular background, the icon on the upper part of the rectangle, and the label on the button part of the rectange.  No matter what I do, the label is always BELOW the rectangle (no matter how I anchor/position the label).  Can anyone help?  What' am I doing wrong?

       

      Here's the skin file:

       

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:SparkSkin
        minHeight="22"
        minWidth="22"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx2="library://ns.adobe.com/flex/mx">
       
        <!--
        ////////////////////////////////////////////////////////////////////////////
        //
        //    Metadata
        //
        ////////////////////////////////////////////////////////////////////////////
        -->
       
        <fx:Metadata>
          <![CDATA[
         
          [HostComponent("IconButton.IconButtonSkin")]
         
          ]]>
        </fx:Metadata>
       
       
        <!--
        ////////////////////////////////////////////////////////////////////////////
        //
        //    States
        //
        ////////////////////////////////////////////////////////////////////////////
        -->
       
        <s:states>
          <s:State
            name="up"
            />
          <s:State
            name="over"
            />
          <s:State
            name="down"
            />
          <s:State
            name="disabled"
            />
        </s:states>
       
        <!--
        ////////////////////////////////////////////////////////////////////////////
        //
        //    Graphics
        //
        ////////////////////////////////////////////////////////////////////////////
        -->
        <s:Group x="0" y="0" width="44" height="64" >
          <s:layout>
            <s:BasicLayout/>
          </s:layout>
         
            <s:Rect
            alpha="0.5"
            alpha.over="0.8"
            radiusX="2"
            radiusY="2"
            bottom="0" top.over="0" top.down="0" top.disabled="0" right.over="0" right.down="0" right.disabled="0" left.over="0" left.down="0" left.disabled="0" height.over="64" height.down="64" height.disabled="64" top.up="0" bottom.up="0" left.up="0" width.over="44" width.down="44" width.disabled="44" right.up="0">
            <s:fill>
              <s:SolidColor
                color="0x000000"
                />
            </s:fill>
          </s:Rect>

       

          <s:BitmapImage explicitHeight="32" explicitWidth="32"
                         id="iconElement" x="6" y="6"/>
         
         
          <s:Label
            id="labelElement"
            color="0xEFEFEF"
            fontWeight="bold"
            textAlign="center"
            width="44" verticalAlign="middle"
            height="21" x="0" y.over="20" y.down="20" y.disabled="20" x.up="0" horizontalCenter.over="0" horizontalCenter.down="0" horizontalCenter.disabled="0" y.up="10" verticalCenter.over="0" verticalCenter.down="0" verticalCenter.disabled="0"/>
         
         
        </s:Group>
      </s:SparkSkin>