Tuesday, December 15, 2009

Borderless Flex Button Control

In our recent project with RIA Flex client we are using button icons with little neat shadow below. But inside button control with border enabled these shadows look ugly (even to me - developer). Unfortunately, in Flex 3 you can’t disable border of the button control. Yes, I did not believe it myself, but that is what we have. As getting new icons is much more trouble for me than hacking button control, I started to explore the ways to do it.

First, I tried to extend Button control class, but soon remembered that all the border and background drawings is done in the Skin classes. mx.skins.halo.ButtonSkin is the skin class for Button control in Flex 3. So, my second attempt was to extend this skin class. Unfortunately, all the drawings are done in the same method with no simple point of extension. That is extending this class meant coping 200 lines method and commenting out a few lines. It is not good at all. With no choice of easy elegant solution I was about to break that DRY rule. Fortunately (at last), I found simple, almost empty mx.skins.Border class and that was it - simple solution.

To disable borders in button control you need to simply set skin property to this mx.skins.Border class. Something like this:

<mx:Button skin="mx.skins.Border" />

In addition, button control provides you a way to specify skin classes for various states individually:

  • upSkin
  • overSkin
  • downSkin
  • disabledSkin
  • selectedUpSkin
  • selectedOverSkin
  • selectedDownSkin
  • selectedDisabledSkin

So, if you need to disable borders but still enable them for cases like mouse-over, click, etc… you only need to set upSkin property.


tomgutz said...

instead of using this procedure, the use of LinkButton would be better.

Vitaliy Tsvayer said...

Thanks for your comment. In this scenario LinkButton looks great without borders at all.

Post a Comment