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.

10 thoughts on “Determining if a Flex application has focus using the activate and deactivate events

  1. This doesn’t work in safari 3 on a mac the way it’s supposed to. The browser doesn’t know when the OS regains focus. It works on Firefox on a mac though. So if you are going to have an important feature in your app. using this feature beware.

  2. Peter,
    thanks for the previous reply.

    I’ve tried the “about-you” and noticed the “hasScreenBroadcast”. (mine is set to false)
    What is that? Can I broadcast my screen like using FMS without instaling a third-party program?

    And I have an application that uses languages in an external .xml file.

    How can I detect autmaticaly the language (like you did in the about-you) and load the respective .xml language file. (Now the users have to choose in each login using a ComboBox).

    I think it would be something like: if language is pt, we load the portugues.xml and so on…

    Thank you very much for your attention and this blog that I read every day,

    Gustavo

  3. Gustavo,

    My Capabilities.hasScreenBroadcast property is false also. According to the documentation (link), the hasScreenBroadcast property:

    Specifies whether the system does (true) or does not (false) support the development of screen broadcast applications to be run through Flash Media Server.

    As for the languages, the code in the About You page just uses the Capabilities.language property (which returns “en” on my system).

    trace(Capabilities.language); // en
    

    I imagine it should be pretty easy to use a switch statement on the Capabilities.language property and load the appropriate language XML file (just make sure you set up a default block in case a user is using a language you don’t have an XML file for. For more information on the language property, see http://livedocs.adobe.com/flex/3/langref/flash/system/Capabilities.html#language.

    Peter

  4. Thank you very very much.

    I’m new to computer programming as my focus is design.

    Thanks to you now I know how I can probably set the languages automatically.

    The screen broadcast is very important to me.

    Do you know how this can be set to true? (because I don’t want to install a program just to simulate a camera that broadcasts my screen).

    And if it’s not asking too much: what would be the approach for using this with FMS.
    You can forget about this one if you don’t know :)

    Thanks again and hope helping you one day,

    Gustavo

  5. Great test. Do you know of any way to force the flex app to “activate” (so that this event will be fired and keyboard focus enabled) without the user having to click on the application?

  6. Thanks, this seems to work great for me except for one case: in Internet Explorer 7, while in application, when pressing an ‘ALT’ button, the application seems to loose focus (the browser goes to its menu: File, Edit, View, etc.), but the Event.DEACTIVATE doesn’t fire, even though the application doesn’t respond to mouse events anymore.
    Do you know of any solution that can solve this?

  7. Hello,

    Nice example, but it just doesn’t work anymore is Flex 3…

    No response from activate and deactivate in the application header.

  8. Upgraded flash yesterday and DEACTIVATE doesn’t work anymore in the same browser.
    Guess what happends when you try to make a website,
    You design it to work in 5 main browsers each having at least 5 versions. So thats at least 25 versions of your website.
    Now guess what happends when you try to put flash into your website. Flash functionality breaks from one subversion to another.
    So if we only think about flash player 9 and 10, each having like 10 subversions … thats like 2 * 10 * 25.
    I know i exagerate when i say 500 versions (quirks) of your website because it means your flash movie would need all the functionality of as3. But still .. if from 20 subversions you would have 3 functions affected .. that will triple your problems. Thank you adobe for making a developers life more easy with your “displayed the same in all browsers” super feature.

Comments are closed.