Thursday, December 17, 2009

Toolbar Flex Button Control

In the previous post I have found a way how to remove borders from the Button control. But often in your toolbar buttons you have some of the buttons disabled and need to visually mark them as that. With borders it was obvious, as borders were drawn black/white. But what can we do without borders? If you look at some standard desktop applications, disabled buttons are completely drawn black/white and maybe with some lowered alpha value. In Flex we can do just that.

Below you can see complete example of Button control:

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
       width="22"
       height="20"
       upSkin="mx.skins.Border"
       disabledSkin="mx.skins.Border">
  <mx:Script>
    <![CDATA[
      private static var bwMatrixArray:Array = [.33, .33, .33, 0, 0,
                                                .33, .33, .33, 0, 0,
                                                .33, .33, .33, 0, 0,
                                                0, 0, 0, 0.7, 0];
      private static var bwFilter:ColorMatrixFilter = new ColorMatrixFilter(bwMatrixArray);
      override public function set enabled(value:Boolean):void {
        super.enabled = value;
        this.filters = value ? [] : [bwFilter];
      }
    ]]>
  </mx:Script>
</mx:Button>


Borders are removed by setting upSkin and disabledSkin to mx.skins.Border value. Black/white and alpha effect is achieved through ColorMatrixFilter with equal RGB values 0.33 and with alpha value set to 0.7. If you need icons for your toolbar buttons, there is a free icon set available at http://www.famfamfam.com/.

No comments:

Post a Comment