1 Reply Latest reply on Jun 24, 2007 5:53 PM by peterent

    Using styles for skins

    jimmit
      Hi, I'm trying to make a toggle button that uses one style when it's selected and another when it's not. Below is my code defining the style but I don't know how to use this to make a toggle button. I can set the initial style but not the one when it's clicked. I'd like to be able to use a script to toggle the button also.

      <mx:Style>
      .buttonOn {
      highlightAlphas: 0.94, 0.06;
      fillAlphas: 0.31, 1, 0.24, 0.78;
      fillColors: #990099, #ff00ff, #990099, #000000;
      color: #000000;
      textRollOverColor: #000000;
      textSelectedColor: #000000;
      borderColor: #999999;
      themeColor: #999999;
      }

      .buttonOff {
      highlightAlphas: 0.94, 0.06;
      fillAlphas: 0.31, 1, 0.24, 0.78;
      fillColors: #000000, #000000, #000000, #000000;
      color: #000000;
      textRollOverColor: #000000;
      textSelectedColor: #000000;
      borderColor: #999999;
      themeColor: #999999;
      }
      </mx:Style>

      Thanks for any help,
      James
        • 1. Re: Using styles for skins
          peterent Level 2
          Styles and skins are two different things. A skin is visual or graphic element of a component and a style controls that. For example, using a normal Flex button, the color style changes the color of the Button's label. If you wanted a square, gradient filled button you would want to make skin. Then the skin might use a style like 'gradientColor' which it would use to make red, green, blue, etc. buttons.

          The problem with the default Button skin is that a style like fill-colors is applied only to the un-selected state. To do what you want to do you should use skins.

          There is a chapter in the Flex docs about making skins. Applying skins can be done in a style sheet:

          Button {
          up-skin: ClassReference('my.skins.button.ToggleSkin');
          over-skin: ClassReference('my.skins.button.ToggleSkin');
          /* etc */
          }

          The skin class, ToggleSkin, can extend ProgrammaticSkin, and in the updateDisplayList function, examine its name property to see what skin it represents (eg, upSkin vs selectedUpSkin).

          You can also extend the mx.skins.halo.ButtonSkin class and override some of its public or protected functions.