Changing a form item’s background color when a child control has focus

I recently saw this on the Interwebs and thought I’d try to rebuild the effect in Flex. It is a pretty nice way to highlight the currently active form item.

The following example shows how you can use the focusIn and focusOut events to highlight the currently focused form item.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/16/changing-a-form-items-background-color-when-a-child-control-has-focus/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        FormItem {
            paddingLeft: 4;
            paddingRight: 4;
            paddingTop: 4;
            paddingBottom: 4;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private const BACKGROUND_COLOR:Object = "haloBlue";

            private function formItem_focusIn(evt:FocusEvent):void {
                var item:FormItem = FormItem(evt.currentTarget.parent);
                item.setStyle("backgroundAlpha", 0.2);
                item.setStyle("backgroundColor", BACKGROUND_COLOR);
            }

            private function formItem_focusOut(evt:FocusEvent):void {
                var item:FormItem = FormItem(evt.currentTarget.parent);
                item.setStyle("backgroundColor", null);
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="First name:">
            <mx:TextInput id="firstName"
                    focusIn="formItem_focusIn(event);"
                    focusOut="formItem_focusOut(event);" />
        </mx:FormItem>
        <mx:FormItem label="Last name:">
            <mx:TextInput id="lastName"
                    focusIn="formItem_focusIn(event);"
                    focusOut="formItem_focusOut(event);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.