window component

Uno de los componentes que suelo utilizar bastante es el componente Window, que nos permite lanzar ventanas emergentes, modales o no, con contenido externo (.swf) o interno (mc de la biblioteca).

Una de las características básicas que suelo implementar es que salga centrado en pantalla y que el tamaño de la ventana sea igual al tamaño del contenido que cargo.

Flash MX2004 incorpora la clase PopUpManager que nos varias características muy interesantes para el trabajo con ventanas:

• Definir el nivel en el que lanzar el popUp.
• Definir si es modal o no. Una ventana modal impide interactuar con los elementos que hay en profundidades inferiores hasta que se cierre la ventana.
• Nos permite definir unos parámetros de inicialización para el componente que lancemos.
• El uso de PopUpManager no se restringe al uso conjunto con Window

Por otro lado también tenemos el componente Window que es una simple ventana, al estilo window, con un determinado contenido. En este componente tenemos control sobre propiedades como la posición donde hacerlo aparecer, su contenido, su tamaño, botón cerrar, etc. Por defecto cuando lanzamos un popUp la posición en la que se coloca es la (0,0) y su tamaño no es el del contenido cargado sinó uno por defecto (bastante pequeño).

Una clase para agilizar este proceso sería la que planteo a continuación.

   1:import mx.managers.PopUpManager;
   2:import mx.containers.Window;
   3:
   4:class com.code4net.WindowManager {
   5:   public static function popUp(configuration:Object):Window {
   6:      var win = PopUpManager.createPopUp(_root,Window,true,configuration);
   7:      win._visible=false;
   8:      
   9:      var obj = new Object();
  10:      obj.complete = function(evtObj:Object):Void{
  11:         win.setSize(win.content._width, win.content._height + 25);
  12:         var x:Number = Math.floor((Stage.width - win._width) / 2);
  13:         var y:Number = Math.floor((Stage.height - win._height) / 2);
  14:         win.move(x,y, true);
  15:         win._visible = true;
  16:      }
  17:      
  18:      obj.click = function (evt:Object): Void{
  19:         win.deletePopUp();
  20:      }
  21:      
  22:      win.addEventListener("complete", obj);
  23:      win.addEventListener("click", obj);
  24:      return win;
  25:   }
  26:}
  27:

Su forma de uso es relativamente sencillo e intuitivo. En un fla en blanco arrastramos al escenario un componente Window y lo eliminamos para que quede sólo en la biblioteca. Dibujamos un rectangulo o cualquier cosa y lo convertimos en clip de película con nombre de vinculación 'miDibujito'. Luego en el primer frame ponemos el siguiente código:

   1:import com.code4net.WindowManager;
   2:
   3:
   4:var winConfiguration = new Object();
   5:winConfiguration.closeButton = true;
   6:winConfiguration.title = ".:: Respuesta a tu pregunta ::.";
   7:winConfiguration.contentPath =  "miDibujito";
   8:
   9:WindowManager.popUp(winConfiguration);

WindowManager es una clase estática, por lo que no es necesario instanciarla. Por otro lado el método popUp tiene un parámetro de tipo objeto. En este objeto podemos definir todos los parámetros de inicialización que queramos y que el componente Window admite.

El método popUp retorna una referencia al componente Window que se acaba de instanciar por si queremos modificar alguna de sus propiedades desde fuera de la clase o por si queremos redefinir los listeners. Los listeners implementados en la clase son:

• Complete: Disparado cuando se ha terminado la carga del componente. Aprovechamos para hacer un resize de su tamaño y que se adapte al tamaño del contenido cargado.
• click: es el evento que se ejecuta cuando pulsamos sobre el botón cerrar (en caso que decidamos mostrarlo). En el caso de la clase sólo procedemos a cerrar la ventana. Si quisiéramos añadir más funcionalidades podríamos añadir otro listener a través del valor devuelto en WindowManager.popUp

Por último comentar que el valor de winConfiguration.contentPath puede ser la ruta absoluta o relativa a un swf externo.