I think I saw somebody ask this on the FlexCoders mailing list, but thought I’d post the solution here since I don’t think I’ve covered it before.
The following example shows how you can set the disabledIcon style on a Flex Button control to set a different icon for when the Button control’s enabled property is set to false.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/02/changing-a-button-controls-icon-when-the-button-is-disabled/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.addButton {
icon: Embed(source="images/bullet_add.png");
disabledIcon: Embed(source="images/bullet_delete.png");
}
</mx:Style>
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="enabled:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:Button label="Add"
enabled="{checkBox.selected}"
styleName="addButton" />
</mx:Application>
View source is enabled in the following example.
{ 5 comments… read them below or add one }
I posted about how to do this automatically here http://www.bealearts.co.uk/blog/2007/07/29/automatic-disabled-icon-with-flex-button-control/
Great Blog!
Congratulation!!!
It is really a nice attempt to hide the text.
In addition to this I have a query .
I want to display a button only when data is present in the data field.
Button will not appear when there is no data in the data field.
Thanks in Advacnce for the help
Hope to hear soon
Visi
Visi,
Does this work for you?
<mx:Script> <![CDATA[ private function hasData(btn:Button):Boolean { return (btn.data != null) && String(btn.data).length > 0; } ]]> </mx:Script> <mx:Form> <mx:FormItem label="button 1 (default - null):"> <mx:Button id="btn1" label="Que?" visible="{hasData(btn1)}" /> </mx:FormItem> <mx:FormItem label="button 2 (empty):"> <mx:Button id="btn2" data="" label="Que?" visible="{hasData(btn2)}" /> </mx:FormItem> <mx:FormItem label="button 3 (defined):"> <mx:Button id="btn3" data="value" label="Que?" visible="{hasData(btn3)}" /> </mx:FormItem> </mx:Form>Peter
Hello,
To supplement this solution, I provide alternative solutions:
You can apply a colormatrixfilter on the main icon when the button is disabled. The main advantage is that you don’t need to embed another icon (only if you really require a different icon for disabled button) and the rendering is similar : everything is gray, the button, the label and the icon also.
Check this links :
http://afoucal.free.fr/index.php/2008/01/25/imagebutton-gray-disabled/
Or the following for a more customizable icon with other kind of filter:
http://afoucal.free.fr/index.php/2008/12/03/flex-enhancedbutton-free-the-icon/
Regards