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

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.

5 thoughts on “Changing a Button control’s icon when the button is disabled

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

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

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

Comments are closed.