Changing a Button control’s icon when the button is disabled at Flex Examples

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.

View MXML

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

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

November 2007
M	T	W	T	F	S	S
« Oct		Dec »
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

November 2007

« Oct

Dec »

4 Responses to “Changing a Button control's icon when the button is disabled”

Feed for this Entry View blog reactions

1 David Beale Nov 3rd, 2007 at 5:34 am

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/
2 Gregui Shigunov Dec 13th, 2007 at 9:15 am

Great Blog!
Congratulation!!!
3 Visi Apr 25th, 2008 at 5:37 am

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