Modifying the corner white box on an MX Container when scroll bars are visible in Flex

The following example shows how you can modify the visibility and alpha of the white box in the lower-right corner of an MX Container in Flex when both the horizontal and vertical scroll bars are visible by using the rawChildren property and getChildByName() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ -->
<mx:Application name="MX_Container_whiteBox_alpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundGradientColors="[#FF0000,#FF00FF]">
 
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            protected var wBox:DisplayObject;
 
            protected function hBox_creationCompleteHandler(evt:FlexEvent):void {
                wBox = hBox.rawChildren.getChildByName("whiteBox");
            }
 
            protected function sldr1_changeHandler(evt:Event):void {
                wBox.alpha = sldr1.value;
            }
 
            protected function chckBx_changeHandler(evt:Event):void {
                wBox.visible = chckBx.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="whiteBox alpha:">
                <mx:HSlider id="sldr1"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="sldr1_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="whiteBox visible:">
                <mx:CheckBox id="chckBx"
                        selected="true"
                        change="chckBx_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="HBox backgroundAlpha:">
                <mx:HSlider id="sldr2"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="HBox backgroundColor:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="green" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HBox id="hBox"
            backgroundAlpha="{sldr2.value}"
            backgroundColor="{clrPckr.selectedColor}"
            horizontalScrollPolicy="on" verticalScrollPolicy="on"
            width="240" height="160"
            paddingLeft="10" paddingRight="10"
            paddingTop="10" paddingBottom="10"
            creationComplete="hBox_creationCompleteHandler(event);">
        <mx:Button label="MX Button" width="300" height="100%" />
    </mx:HBox>
 
</mx:Application>