Todos los temas de: Flash

October 26th, 2007

Creación de eventos personalizados, en Flex. Segunda parte.

Continuando con el tema de los eventos, del post anterior, pasaremos a la parte de crear nuestros propios eventos. Para ejemplificar de mejor forma, estableceré una problemática y la trataré de resolver creando un evento.

Problemática
Crear un evento que controle el momento en el que un usuario escribe el número 23 dentro de un NumericStepper.

Caso de uso
1 El usuario entra a editar el valor de un NumericStepper.
2 El usuario escribe un número.
3 El usuario presiona el botón validar.
4 La aplicación verifica si el número es igual a 23, en caso de cumplirse esta condición, se dispara un evento.

Solución:
Pueden ver en el siguiente link, la solución a este problema, usando un evento personalizado. El demo incluye el código fuente.
Ver Demo

Como podrán ver, en el código, el evento solo se dispara cuando el NumericStepper tiene valor de 23.

PLAIN TEXT
Actionscript:
  1. if( nsValue.value == 23 )
  2. {
  3. var NuestroEvento:MyEvent;
  4. //Creamos el evento, y le decimos el tipo
  5. NuestroEvento = new MyEvent( MyEvent.EVENTO_USUARIO_ESCRIBIO_23);
  6. //Disparamos el evento, todos los escuchadores serán notificados
  7. dispatchEvent( NuestroEvento );
  8. }

Este es un ejemplo, pero en realidad hay una infinidad de casos donde los eventos son muy útiles. Solo es cuestión de perderles el miedo, para sacarles el mejor provecho.

• Posted in Flash, Flex
October 19th, 2007

Como ciclar el Flash Player, de forma inocente

Hace algunos meses un compañero de la oficina, me solicitó ayuda, en un problema que tenía en Flex 2. Al probar la aplicación, sin razón "aparente", el navegador se congelaba, después de un buen rato de estar revisando el código, vi algo en los estilos que me llamo la atención. La aplicación tenía por nombre "Generador", por lo que se generaban dos archivos, uno era Generador.html y el otro su correspondiente Generador.swf. En algún momento mi compañero(que en ese entonces estaba aprendiendo Flex), se puso a jugar con el CSS e inocentemente puso esta línea:

PLAIN TEXT
Actionscript:
  1. backgroundImage="Generador.swf"

Lo que mas me llamó la atención es que de alguna forma el navegador se congelaba(creí que era imposible bloquear una pc con el Flash Player). No aparecía la famosa ventanita para detener el script, ya que semánticamente el código estaba bien y este tipo de "errores" lógicos, no entran dentro del alcance de revisión del Flash Player.

• Posted in Flash, Flex
October 18th, 2007

Insertar un componente MXML dentro de otro, en Flex 2

Una forma muy fácil de meter un componente MXML dentro de otro, es la siguiente:

  1. Crear un nuevo proyecto en Flex.
  2. Agregar un nuevo componente MXML, nombrarlo "Nuevo.mxml".
  3. Dentro de "Nuevo.mxml" agrega un Datagrid o el componente que quieras, solamente es para que no este vacio.
  4. Ve al archivo principal de tu aplicación(generalmente main.mxml)
  5. En la vista de código escribe "<"(signo menor que) y presiona las teclas "Ctrl + Espacio"
  6. Te saldra un listado, pero también puedes escribir. Escribe "Nuevo" y presiona la tecla "Enter".

Yo uso mucho esta técnica para agregar componentes en mis proyectos.

• Posted in Flash, Flex
October 11th, 2007

Creación de eventos personalizados, en Flex. Primera parte.

En Flex es muy sencillo el manejo de eventos. Para empezar explicaré lo que significa un evento(hablando en términos de programación), según la wikipedia la programación dirigada a eventos es:

Un paradigma de programación en el que tanto la estructura como la ejecución de los programas van determinados por los sucesos que ocurran en el sistema o que ellos mismos provoquen.

En otras palabras, un evento, no es mas que un suceso, que ocurre fuera del contexto de una ejecución de código normal. Para aclarar mas el tema, veamos ejemplos de lo que es un evento, en actionscript:

  • Un click del usuario
  • El inicio de lectura de datos, de un archivo remoto
  • El término de lectura de datos, de un archivo remoto
  • La creación completa de un componente.

¿Cómo podemos controlar el momento en el que un usuario hace click? Tenemos que agregar un escuchador(listener) que este al pendiente de cuando ocurra el evento. Por ejemplo, para saber y controlar el momento exacto en que un usuario da click en un botón nuestro, podrías utilizar el siguiente código:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application
  3.     initialize="init()"
  4.     xmlns:mx="http://www.adobe.com/2006/mxml"
  5.     layout="horizontal"
  6.     horizontalAlign="center" verticalAlign="middle"
  7.     >
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Button;
  11.             private var btn:Button;
  12.  
  13.             private function init():void
  14.             {
  15.                 //Aqui llegamos cuando la aplicación se inicie. Controlamos el evento de inicio de la aplicación
  16.                
  17.                 //Crearemos un nuevo botón, para probar en el, el control de eventos
  18.                 btn = new Button();
  19.                 btn.label = "Click Me";
  20.                 //Agregamos un escuchador para el evento click, en el nuevo botón
  21.                 btn.addEventListener(MouseEvent.CLICK, onClick);
  22.                 addChild(btn);
  23.             }
  24.             private function onClick(event:MouseEvent):void
  25.             {
  26.                 //Controlamos el evento del click de nuestro botón
  27.                 //Cada que se dispara el evento, aumentamos el tamaño del botón
  28.                 btn.width += 20;
  29.                 btn.height += 20;
  30.             }
  31.         ]]>
  32.     </mx:Script>
  33.    
  34. </mx:Application>

De hecho en el código anterior, controlamos dos eventos. El primero, el de inicio completo de la aplicación, y el segundo, el del click sobre un botón. Para probar el código, solamente copia y pega el código en una nueva aplicación de Flex 2.

En la siguiente entrega, explicaré como podemos crear nuestros propios eventos y la forma de controlarlos.

• Posted in Flash, Flex