Automatic Disabled Icon with Flex Button Control
The Flex Button control provides the means to add an icon to the button, in one of several states disabled/hover etc. However it does not automatically provide a disabled version of the icon you add for its normal enabled state. i.e. A “grayed out” version, which most other visual RAD tools would provided.
After hacking around in the Flex SDK, I found the following code which accomplishes this;
// Fade Disabled Icon DisplayObject(this.getChildByName("disabledIcon")).alpha = 0.4;
This could be used as follows to produce an EditButton class;
<?xml version="1.0" encoding="utf-8"?> <mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" icon="@Embed('EditButton.png')" label="Edit" creationComplete="init();" > <mx:Metadata> [IconFile("EditButton.png")] </mx:Metadata> <mx:Script> <![CDATA[ private function init():void { // Fade Disabled Icon DisplayObject(this.getChildByName("disabledIcon")).alpha = 0.4; } ]]> </mx:Script> </mx:Button>
As I believe this to be a very valuable behavior, I have created a new IconButton Flex Component class to download, which provides a Button control which does automatically provided a disabled version of its main icon.
December 12th, 2007 at 9:15 pm
This is a neat trick; thanks for publishing it.
At runtime, I had immediately received “TypeError: Error #1009: Cannot access a property or method of a null object reference.” on the line that sets the alpha in the IconButton class.
It turns out that if I have a button whose default initial state is enabled, the error occurs. If I make the button’s default initial state disabled and enable the button later, the error goes away; that’s certainly an easy enough workaround for my needs.
I hope this helps someone if they run into the same issue.
Thanks
[gb]
January 5th, 2008 at 11:57 pm
@Glen
Thanks for the comment.
I have updated the IconButton component to fix this issue.
September 22nd, 2008 at 2:53 pm
Hi !
I tryed to use your component, but when the Button is at the beginning disabled, strangely it is displayed as enabled when lauching the application.. So it doesn’t think to work fine yet..
September 23rd, 2008 at 10:54 am
Okay, finaly I don’t know why it wasn’t working but it is working again.. I just have had a lign in case the Button doesn’t have an icon defined :
// Fade Disabled Icon
if(this.getStyle(”icon”) != null) {
DisplayObject(this.getChildByName(”disabledIcon”)).alpha = 0.4;
}