Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Tips – Détecter la perte de focus de l'application (Event.ACTIVATE et DEACTIVATE)

Pour un nouveau composant Flex que je développe, j'avais besoin de savoir quand l'utilisateur était en train de se servir de l'application ou s'il avait switché sur un autre onglet ou une autre fenêtre. En effet, ce composant va afficher un élément graphique à l'écran pendant un certain temps (quelques secondes) et si l'utilisateur n'a pas le focus sur l'application Adobe Flex, il pourrait ne jamais voir cet élément apparaître.

Adobe Flash Player et Adobe AIR proposent pour cela des évènements indiquant la perte ou la reprise du focus sur l'application. Ces évènements sont de type Event.ACTIVATE et Event.DEACTIVATE. Cet évènement est un évènement broadcast, ce qui signifie qu'il est dispatché par tous les objets de type EventDispatcher (ou qui en héritent). Cela signifie donc que tous les composants visuels dispatchent cet évènement car ils héritent de EventDispatcher.

Vous pouvez donc vous abonner directement à l'évènement depuis votre composant graphique avec:

addEventListener(Event.ACTIVATE, onActivate);
addEventListener(Event.DEACTIVATE, onDeactivate);

Application de démonstration

Voici une petite application Adobe Flex pour montrer ce comportement. Quand vous allez changer de fenêtre ou d'onglet, cet application va tracer la perte / reprise du focus.

Notez que l'application n'aura pas le focus à la création tant que vous n'aurez pas cliqué dessus!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete()">
 <mx:Script>
 <![CDATA[
 private function onCreationComplete():void {
   addEventListener(Event.ACTIVATE, onActivate);
   addEventListener(Event.DEACTIVATE, onDeactivate);
 }

 private function onActivate(event:Event):void {
   monitor.text += "onActivate::" + event.toString() + "\r";
 }

 private function onDeactivate(event:Event):void {
   monitor.text += "onDeactivate::" + event.toString() + "\r";
 }
 ]]>
 </mx:Script>
 <mx:Panel title="Event Monitor">
   <mx:TextArea id="monitor" width="550" height="300"/>
 </mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application