Setting a Flex container’s background disabled color and disabled overlay alpha

The following example shows how to use the backgroundDisabledColor and disabledOverlayAlpha styles to add a nice overlay to a container when the container’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/09/16/setting-a-flex-containers-background-disabled-color-and-disabled-overlay-alpha/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            private function init():void {
                var col:uint = panel.getStyle("backgroundColor");
                colorPicker.selectedColor = col;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="enabled"
                selected="true" />

        <mx:Spacer width="50%" />

        <mx:Label text="backgroundDisabledColor:" />
        <mx:ColorPicker id="colorPicker" />

        <mx:Spacer width="50%" />

        <mx:Label text="disabledOverlayAlpha:" />
        <mx:HSlider id="slider"
                minimum="0"
                maximum="1"
                value="0.6"
                liveDragging="true"
                tickInterval="0.1"
                showTrackHighlight="true" />
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            title="Panel title"
            status="Panel status"
            enabled="{checkBox.selected}"
            backgroundColor="red"
            backgroundDisabledColor="{colorPicker.selectedColor}"
            disabledOverlayAlpha="{slider.value}">
        <mx:Form>
            <mx:FormHeading label="LOGIN" />
            <mx:FormItem label="Username:">
                <mx:TextInput id="userame" />
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput id="password"
                        displayAsPassword="true" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Login" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

Tagged as: backgroundDisabledColor, disabledOverlayAlpha