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:
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application
-
initialize="init()"
-
xmlns:mx="http://www.adobe.com/2006/mxml"
-
layout="horizontal"
-
horizontalAlign="center" verticalAlign="middle"
-
>
-
<mx:Script>
-
<![CDATA[
-
import mx.controls.Button;
-
private var btn:Button;
-
-
private function init():void
-
{
-
//Aqui llegamos cuando la aplicación se inicie. Controlamos el evento de inicio de la aplicación
-
-
//Crearemos un nuevo botón, para probar en el, el control de eventos
-
btn = new Button();
-
btn.label = "Click Me";
-
//Agregamos un escuchador para el evento click, en el nuevo botón
-
btn.addEventListener(MouseEvent.CLICK, onClick);
-
addChild(btn);
-
}
-
private function onClick(event:MouseEvent):void
-
{
-
//Controlamos el evento del click de nuestro botón
-
//Cada que se dispara el evento, aumentamos el tamaño del botón
-
btn.width += 20;
-
btn.height += 20;
-
}
-
]]>
-
</mx:Script>
-
-
</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.
[…] con el tema de los eventos, del post anterior, pasaremos a la parte de crear nuestros propios eventos. Para ejemplificar de mejor forma, […]