Cuadros de diálogo en Flex Builder 3

Resulta que el domingo empecé con AIR y una de las primeras cosas que quise hacer fue crear cuadros de diálogo. ¿Por qué? Bien, el proyecto personal en el que estoy trabajando los requiere por toneladas, pero no lograba encontrar cómo hacerlos. Por suerte, luego de inspeccionar bien a fondo el componente Alert (que tiene justo el comportamiento que deseaba), logré armar mis propias ventanas.

Requerimientos

• Mínimos conocimientos de Adobe Flex Builder, así como manejarse con cierta soltura por la interface del programa.
  
• Este código también sirve para aplicaciones en Adobe AIR, si quieres implementarlo, necesitas conocimientos básicos en esa tecnología.

Pasos a seguir

1. Creamos un proyecto de AIR o Flex vacío (en este caso lo llamaremos "DialogTest") y un componente de Flex:
   
   
   
   
   
   También vamos a hacer que se base en Panel, para que herede el look de este componente
   
   
   
   
   
   Los componentes de Flex son básicamente componentes personalizados. Que, luego de haberlos creado, vamos a poder encontrar en la carpeta "Custom" del panel de componentes (si, ya sé que el "luego de haberlos creado" suena a Capitán Obvio, pero por si acaso...).
   
   
   
2. Diseñamos nuestro componente . En este caso, vamos a incluir la opción de no volver a verlo, por comodidad
   
   
   
   
   
   
   
3. Creamos nuestra aplicación principal como estamos acostumbrados, si no estamos acostumbrados, sería bueno empezar por éste tutorial.
   
   
   
4. También creamos una clase con una propiedad estática booleana y pública "mostrarDialogo" que usaremos para decidir si mostramos o no el diálogo. La clase no podría ser más simple:
   

   Código :

   package
   {
      public class DialogConfig
      {
         public static var mostrarDialogo:Boolean = true;
      }
   }

   
   
   
   
5. Ahora al resto del código, usando el tag <mx:Script> vamos a agregar acciones al botón que mostrará el diálogo:
   

   Código :

   import mx.managers.PopUpManager;
   private function mostrarDialogo ():void
   {
      if (DialogConfig.mostrarDialogo)
      {
         var escena:Sprite = Sprite (Application.application)
         var miDialogo:DialogoDePrueba = new DialogoDePrueba ();
                  
         PopUpManager.addPopUp (miDialogo, escena, true);
         PopUpManager.centerPopUp (miDialogo);
      }
   }

   
   
   En este caso, le pasamos al PopUpManager tanto la instancia que queremos convertir en popUp como el escenario. Pero la clave del funcionamiento de la ventana se encuentra en el true que le pasamos como parámetro al PopUpManager. Ese true significa que el popUp es modal, o lo que es lo mismo, que retendrá el foco hasta ser cerrado. Una cosa bonita de Flex es que se encarga del blureado sin que tengamos que hacer nada. Quizá en un futuro tutorial, explique cómo personalizar ese efecto.
   
   
   
6. No nos olvidemos de ubicar un código importantísimo en el diálogo, el que usamos para cerrarlo. En este caso, también se encargará de usar la información del CheckBox:
   

   Código :

   import mx.managers.PopUpManager;
   private function close ():void
   {
      if (noMostrar.selected) DialogConfig.mostrarDialogo = false;
      PopUpManager.removePopUp (this);
   }

   
   
   
7. Compilamos y listo. Nuestra aplicación queda más o menos así:
   

Quizás también te interesen estos otros tutoriales :

• Personalizar el panel Alert de Flex con CSS
  
• Función Trace en Flex de forma fácil
  
• Tu primera aplicación en Flex
  

 

Tweet