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/.

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.

Auto-Resizable TextInput and TextArea Flex Controls

Well, title says it all. Simple extension of TextInput and TextArea controls in Flex 3 to enable auto resize.

package components {
  import flash.events.Event;
  import flash.text.TextFieldAutoSize;
  import mx.controls.TextInput;
  public class AutoSizeTextInput extends TextInput {
    public function AutoSizeTextInput() {
      super();
      this.addEventListener(Event.CHANGE, function(event:Event) {
        invalidateSize();
      });
    }
    override protected function childrenCreated():void {
      this.textField.autoSize = TextFieldAutoSize.LEFT;
      super.childrenCreated();
    }
  }
}

package components {
  import flash.events.Event;
  import flash.text.TextFieldAutoSize;
  import mx.controls.TextArea;
  public class AutoSizeTextInput extends TextArea {
    public function AutoSizeTextInput() {
      super();
      horizontalScrollPolicy = "off";
      verticalScrollPolicy = "off";
      this.addEventListener(Event.CHANGE, function(event:Event) {
        invalidateSize();
      });
    }
    override protected function childrenCreated():void {
      this.textField.autoSize = TextFieldAutoSize.LEFT;
      this.textField.wordWrap = false;
      super.childrenCreated();
    }
    override protected function measure():void {
      super.measure();
      measuredWidth = textField.width;
      measuredHeight = textField.height;
    }
  }
}