Determining if a Flex application has focus using the activate and deactivate events

The following example shows how you can determine if a Flex application has focus or not by listening for the activate and deactivate events on the <mx:Application /> container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/determining-if-a-flex-application-has-focus-using-the-activate-and-deactivate-events/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        activate="application_activate(event);"
        deactivate="application_activate(event);">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;

            private function application_activate(evt:Event):void {
                arrColl.addItemAt({type:evt.type, time:getTimer()}, 0);
            }

            private function time_labelFunc(item:Object, col:DataGridColumn):String {
                return numberFormatter.format(item[col.dataField]);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:NumberFormatter id="numberFormatter"
            useThousandsSeparator="true" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="320"
            rowCount="8"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="type" />
            <mx:DataGridColumn dataField="time"
                    headerText="time (ms)"
                    labelFunction="time_labelFunc" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

To test the previous example, try clicking within the Flex application and then click on the surrounding HTML, you should see the “activate” and “deactivate” events get dispatched and create new items in the DataGrid control.

Tagged as: activate, deactivate