1 Reply Latest reply on Sep 19, 2012 9:28 PM by megharajdeepak

    passing an argument to a skin

    developer_ethan

      I have a custom skin that basically draws a gradient background on a button.

      I want to use the same skin, but, change the colors of the gradient background for each button. The hostCompnent.property lines

      causes  a compiler error:

      1119: Access of possibly undefined property borderFillGradient1 through a reference with static type spark.components.supportClasses:ButtonBase

       

      What am I doing incorrectly.

       

      Thanks in advance.

       

      Here is my custom button component:

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"

                                       xmlns:s="library://ns.adobe.com/flex/spark" xmlns:controls="myconrols.*" skinClass="assets.skins.MyButtonSkin">

          <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

         

          <fx:Script>

              <![CDATA[

                 

                 

                 

                 

                  public var mainFillColor1:uint;

                  public var mainFillColor2:uint;

                  public var borderFillGradient1:uint;

                  public var borderFillGradient2:uint;

             

                 

                 

              ]]>

          </fx:Script>

      </s:Button>

       

       

      Here is my custom skin

       

      <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

                   xmlns:s="library://ns.adobe.com/flex/spark"

                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

                   minWidth="5" minHeight="18"

                   alpha.disabled="0.5">

          

          <fx:Metadata>

              <![CDATA[

              /**

               * @copy spark.skins.spark.ApplicationSkin#hostComponent

               */

              [HostComponent("controls.MyCustomButton")]

              ]]>

          </fx:Metadata>

         

        

          <!-- states -->

          <s:states>

              <s:State name="up" />

              <s:State name="over" />

              <s:State name="down" />

              <s:State name="disabled" />

          </s:states>

         

          <!-- border -->

          <s:Rect height="100%" width="100%" radiusX="6"

                  top="0" right="0" bottom="0" left="0">

              <s:fill>

                  <!-- gradient fill colors - default ratios are 0,1 -->

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry color="{ hostComponent.borderFillGradient1}"/>

                      <s:GradientEntry color="{ hostComponent.borderFillGradient2}"/>

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

         

          <!-- inner fill -->

          <s:Rect height="100%" width="100%" radiusX="5"

                  top="1" right="1" bottom="1" left="1">

              <s:fill>

                  <!-- gradient fill colors - default ratios are 0,1 -->

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry color="{ hostComponent.mainFillColor1 }"/>

                      <s:GradientEntry color="{ hostComponent.mainFillColor'}"/>

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

        

       

          <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->

          <s:Label id="labelDisplay"

                   textAlign="center"

                   maxDisplayedLines="1"

                   horizontalCenter="0" verticalCenter="1" verticalAlign="middle"

                   left="8" right="8" top="2" bottom="2" color="0xffffff">

             

              <s:filters>

                  <s:DropShadowFilter distance="1" blurX="0" blurY="0" color="#000000" alpha=".4" angle="270"/>

              </s:filters>

             

          </s:Label>

         

      </s:SparkButtonSkin>

        • 1. Re: passing an argument to a skin
          megharajdeepak Level 1

          Hi there..

          color property is style  and hence you need to create a style rather than property.

           

          Instead of :

                      public var mainFillColor1:uint;

                      public var mainFillColor2:uint;

                      public var borderFillGradient1:uint;

                      public var borderFillGradient2:uint;

           

          delcare them as styles like this:

                  [Style(name="mainFillColor1", type="uint", format="Color")]

                  [Style(name="mainFillColor2", type="uint", format="Color")]

                  [Style(name="borderFillGradient1", type="uint", format="Color")]

                  [Style(name="borderFillGradient2", type="uint", format="Color")]

           

          And use it in your code like this:

          <s:GradientEntry color="{ hostComponent.getStyle('mainFillColor1') }"/>

           

          You could also use css and delcare your colors there and use only one skin for all your buttons and handle their colors in css.

           

          Cheers!

          Deepak