5 Replies Latest reply on Aug 15, 2011 10:45 PM by Gregory Lafrance

    Sparking skinning question, changing background color on rollOver.

    Gregory Lafrance Level 6

      In the following app with a component and a skin, I want to change the component background color in the custom skin, but what I have does not work. I know I can set component properties in the component, such as color.over="" etc., but I want to do it in the skin. How do I do it?

       

      ----------------------- The app --------------------------

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx"
          width="400" height="400" xmlns:local="*">
          <local:MyComp/>
      </s:Application>
      

       

      ------------------------- The comp -----------------------

      <?xml version="1.0" encoding="utf-8"?>
      <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          width="400" height="300" skinClass="MySkin">
      </s:SkinnableContainer>
      

       

      -------------------------The comp 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"
          xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
          <fx:Metadata>
          <![CDATA[ 
              [HostComponent("spark.components.SkinnableContainer")]
          ]]>
          </fx:Metadata> 
          <s:states>
              <s:State name="normal" />
              <s:State name="disabled" />
              <s:State name="rollOver" />
              <s:State name="rollOut" />
          </s:states>
          <s:Rect id="backgroundRect" left="0" 
              right="0" top="0" bottom="0"  >
              <s:fill>
                  <!--- @private -->
                  <s:SolidColor id="bgRectFill" color="#0000FF" 
                      color.rollOver="#FF0000" color.rollOut="#0000FF"/>
              </s:fill>
          </s:Rect>
          <s:Group id="contentGroup" width="100%" height="100%" 
               minWidth="0" minHeight="0" />
      </s:Skin>