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.

0 thoughts on “Setting a Flex container’s background disabled color and disabled overlay alpha

  1. An much better overlay would have been one that only covers areas where there is visible children, instead of just creating a large square the shape of the container.

  2. Do you know if its possible to set this as a style in the css for items that are typed as UIComponent?

  3. So I have a situation where I would really like to create this exact visual effect in certain situations, but not have to disable the container in order to get the overlay. Any suggestions?