How to skin buttons in flex 3?

Just out of curiosity, I am making an effort to optimize every part of our flex app (which is a small part of our app in general). Currently, I am working on optimizing all of the buttons/skins. I have linked a few of the buttons that I use, and some sample code I am using to generate them.

Please advise on how to make this more effi开发者_开发技巧cient, usable, and just better overall. Thanks!

As you can see, our buttons can be pretty different, but have a similar look and feel. Currently, I am creating 'stateful skins,' by setting up something like this:

skin: ClassReference('com.mysite.assets.skins.NavigationButtonSkin');

Then, NavigationButtonSkin looks something like this:

public class NavigationButtonSkin extends UIComponent {

  // imports, constructor, etc

  protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

    // initialize fillColors, fillAlphas, roundedCorners, etc

    switch( name ){
      case 'upSkin':
      fillColors = [getStyle('backgroundColor'),getStyle('backgroundColor2')];      
      break;
      // do the same for overSkin, downSkin, disabledSkin, etc
    }

    // use this.graphics to draw background
    // use this.graphics to draw border on top of background

  }

}

I commented out some of the straight forward parts, but let me know if this is a bad/inefficient way of doing this - and how to improve.

Thanks!

In terms of performances, it would be better that your skin inherits from ProgrammaticSkin instead of UIComponent. ProgrammticSkin itself inherits from Shape and provides utility methods for skinning such as verticalGradientMatrix, drawRoundRect, ...

That's all I can say looking at your code.

Good point is you use programmatic skin instead of bitmap/swf based skins.

Okay, I'm not getting where you're getting at with this. You just want to know if you're doing it right? I'm assuming that your skin: ClassReference('com.mysite.assets.skins.NavigationButtonSkin'); is added to the css of a Button, which is good, however I don't see why you're doing it all in Actionscript. Seems inefficient and essentially you're losing all the ability of mxml layouts and support for Catalyst (if you'd ever need it in the future).

Try creating a skin in Flash Builder, it'll create an MXML with the default button skin where you can just edit it as you please. It's also A LOT easier to do state based design using mxml over actionscript. You should modify from there on and have a separate skin for each button types.

EDIT: oh crap, didn't see this was Flex 3... Get with the program ;) Just listen to what Florian said.