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

Flex Tips – Fermer une Pop-Up lorsqu'un utilisateur clique à l'extérieur (mouseDownOutside)

Dans ce "flex tips", je vais simplement présenter un évènement du framework Flex qui je ne connaissais pas: FlexMouseEvent.MOUSE_DOWN_OUTSIDE. Comme son nom l'indique presque, il sert à détecter un click en dehors d'un objet graphique (MouseEvent.MOUSE_CLICK représentant le click dans l'objet graphique).

Le cas d'utilisation est un cas que j'ai rencontré ce matin est qui est le cas d'utilisation le plus vraisemblable pour l'utilisation de ce type d'évènement, l'utilisation de Pop-Up. Dans mon cas, il fallait fermer une pop-up non modale quand l'utilisateur cliquait ailleurs sur la scène ou qu'il appuyait sur la touche ECHAP.

Pour l'utilisation du clavier, il suffit d'ajouter un eventListener sur le stage et de regarder si à chaque frappe, le code caractère est celui de la touche ECHAP. Pour capter le clic en dehors en revanche, j'avais commencé par capter le clic sur "stage" et à regarder si ma Pop-Up était dans la liste des objets graphiques présents sous le point de clic (avec la méthode getObjectsUnderPoint(pt:Point):Array. Cela était plutôt laborieux et un peu crade d'un point de vue programmation.

Heureusement, Flex met à disposition l'évènement FlexMouseEvent.MOUSE_DOWN_OUTSIDE qui représente exactement le type d'évènement que je voulais capter.

Voici un exemple de son utilisation:

<!-- Fenetre en pop-up ModalTitleWindow.mxml -->

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="absolute" width="400" height="300" showCloseButton="true"
      close="PopUpManager.removePopUp(this)"
      mouseDownOutside="PopUpManager.removePopUp(this)">

<mx:Script>
  <![CDATA[
           import mx.managers.PopUpManager;
  ]]>
</mx:Script>
            <mx:Text text="Click, on Modal to close this PopUp."  />
</mx:TitleWindow>

<!--
    Fichier MXML applicatif principal
    ModalClose.mxml
-->

<mx:Application
   xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute"
   backgroundGradientColors="{[0xabcdef, 0x123456]}"
   xmlns:tempAlert="tempAlert.*"
   creationComplete="onCreationComplete()">

<mx:Script>

  <![CDATA[
       import mx.managers.PopUpManager;
      private function onCreationComplete():void
     {
        PopUpManager.centerPopUp(PopUpManager.createPopUp(this,ModalTitleWindow,false));
     }
  ]]>

</mx:Script>

</mx:Application>

Et voilà, c'est tout ce dont vous aurez besoin. Notez que cela fonctionne aussi sur les pop-up modales (en cliquant sur le "voile").