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.

This entry was posted on Sunday, July 29th, 2007 at 10:19 am and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.