miércoles, 23 de enero de 2008

Eventos en Flex

Los eventos en AS3 son a mi parecer la clave que permite crear RIAs interactivas, agradables y completas.
Un evento es generado la mayor cantidad de veces por la interaccion del usuario (tambien conocido como gestos) con el sistema (un boton, un campo de texto, cualquier interaccion que se haga por mouse o teclado). Algunos eventos son generados por el sistema automaticamente.
Los eventos son maneras eficaces para realizar aplicaciones con un acoplamiento bajo, esto debido a que la comunicacion se da a traves de ellos, un componente dispara un evento y solo se preocupa por eso. Si algun otro componente o contenedor ocupa de ese componente recibira el evento y procedera a realizar la funcionalidad que requiera con ese evento y la informacion que el contenga, sin conocer absolutamente nada del componente ni siquiera saber quien lo envio.
Otra cosa muy interesante de los eventos es que uno puede crear sus propios eventos customizados, descendiendo de la clase Event. Aqui un ejemplo:

package{
import flash.events.Event;

public class miEvento extends Event{
public static const AGREGAR_PERSONA:String = "AgregarPersona";

public var nombre:String;
public var apellidos:String;
public var action:String;

public function miEvento(action:String,nombre:String,apellidos:String,bubbles:Boolean=false,cancelable:Boolean=false){
super(action,bubbles, cancelable);
this.action = action;
this.nombre = nombre;
this.apellidos = apellidos;
}

override public function clone():Event{
return new EventoEvent(action, nombre, apellidos, evento);
}
}
}

En este ejemplo simple y chapucero, se pasan dos variables, nombre y apellidos que seran seteadas por el disparador del evento y que podran ser recolectadas por cualquier componente O o contenedor que este interesado en recibirlo. Nota, se pueden incluir clases para encapsular la informacion o incluso clases de cualquier tipo que se hayan creado.

Existen 3 fases de propagacion, durante los eventos:

1. Capturing: De arriba a abajo.
Un componente dispara un evento y Flex se encargara de buscar desde el contenedor mas afuera de ese objeto (generalmente el application) hasta el contenedor directo del componente mismo. Cada vez que va cambiando de componente, la variable currentTarget del event va cambiando. Cabe aclarar que los eventos tienen dos propiedades importantes: target y currentTarget.
El target en los eventos de AS3 se refiere al que emitio o disparo el evento y el currentTarget se refiere al nodo u objeto que se esta chequeando por EventListeners. No se, talvez a los de Adobe no les dio mas para ponerle otros nombres pues es algo confuso... Con estas dos propiedades podemos averiguar quien hizo quien y quien va a encargarse de...
Ejemplo:
Tenemos esto:
Application -->
Canvas -->
Button

El Capturing buscaria por event listeners en este orden: Application, Canvas.
Si existieran mas capas arriba del button, pues se revisaria en cada una de estas si tenian event handlers en cada una de ellos. El default del capturing es false.

2. Targeting:

Es el mas sencillo, solo se revisa por event listeners dentro del componente que dispara el evento, como cuando se define en el boton la propiedad click="funcion()". Esto ademas indica que el target y currentTarget son los mismos.

3. Bubbling: De abajo para arriba.
Es el contrario al Capturing
Ejemplo:
Tenemos esto:
Application -->
Canvas -->
Button

El Bubbling buscaria por event listeners en este orden: Canvas, Application.
Flex buscara event listeners hasta que se le permita. Puede ser que llegue hasta al application o puede ser que se le pare en el contenedor siguiente al componente que despacha el evento, en este caso el Canvas. El default del bubbling es false.

Tanto para capturing como para bubbling, es posible el parar la propagacion desde un listener que se quiera, con stopPropagation() y stopImmediatePropagation().

Lo mejor en la propagacion es ver cual es la que mejor sirve para su aplicacion para optimizar tiempos. Por ejemplo si solo ocupa targeting, deje bubbling y capturing en false. Si ocupa capturar un evento solamente desde el contendor del componente, pues user bubbling. Si lo ocupa hacer desde mas afuera, pues hagalo con capturing. Si ocupa capturar el evento por alguien mas que el target y no usen bubbling o targetting no se va a poder capturar los eventos lanzados a no ser que agregue el listener al contenedor, pero no siempre se puede hacer.

Esto es algo muy basico, pero necesario y que hay que estar revisando casi todos los dias para comprenderlo mejor. Cuando se dominen los eventos en Flex, estoy seguro que tendra un 80% de lo escencial dominado.

5 comentarios:

Smake54 dijo...

Hola,

Estoy aprendiendo Flex por mi cuenta a base de prueba y error. Estoy deacuerdo que los Eventos en flex es muy escencial comprenderlos pues eso me esta deteniendo mucho en mi curva de parendizaje. Quisiera pedier en voz de nosotros los novatos que pusierar algunos diagramas... algunos somo más visuales... tal vez tontos jajajaj... ojala tengas un tiempo para esto.
Felicidades por tu blog,
bytes!

Absulit dijo...

mae una pregunta ahi, tomando por ejemplo que los eventos son mejores o necesarios para los controles que estan en pantalla, como se yo cuando es necesario crear mi propio evento como en tu ejemplo, en el que nosotros o el usuario no veriamos cuando sea ejecutado?
Es óptimo solo crearlo para controles que hemos desarrollado?

Ivan dijo...

Hols!!! La desicion de utilizar o no eventos customizados va a recaer solamente en la necesidad que tengas para un dado caso.
Por ejemplo, puedes crear un componente compuesto por un label y por un boton y desde el cual deseas solamente notificar que el boton fue presionado, a pesar de que estas creando un componente nuevo, no significa que no puedes usar los eventos que por default que ya traen los botones por ejemplo.
Sin embargo..si tienes otro componente con 2 campos de texto, uno para username y otro para password y un boton que cuando le das click deseas que envie esa informacion a otro componente aparte, lo mejor es crear un evento customizado que mantenga esos dos valores en el evento y que sea disparado cuando el boton genere el evento click...
Como puedes ver en este ultimo caso, nosotros detectaremos cuando la informacion sera enviada al hacer click en el boton, sera desde ahi que despacharemos un nuevo evento el que sera customizado... entonces lo bueno con los eventos es que podemos mezclar entre eventos ya construidos y eventos customizados, lo que perseguimos en ambos casos es evitar el acoplamiento entre componentes....
Espero que te sirva y cualquier duda, no dudes (valga la redundancia en decirme).
Quisiera tambien invitarte a estar revisando el blog pues pronto anunciare la fecha del evento en el que vendra el Evangelista de Adobe Mike Downey (http://madowney.com/blog/) aqui a Costa Rica a darnos una charla sobre Flex, Flash y Air...sera completamente gratis
Saludos

Absulit dijo...

Gracias por la respuesta, voy a estar pendiente a ver si me escapo del brete a ver al gurú jeje

Buena falta me hace empaparme mas de as3 que soy uno de los que siguen aferrado al as2 por no tener tiempo

Saludos

eXeQuIeL dijo...

gracias amigo es bueno encontrarconceptos en castellano ..

aca ba para lo que les sirvan y todavia no lo encontarron las API's de Flex en castellano.

http://livedocs.adobe.com/flash/9.0_es/ActionScriptLangRefV3/index.html?package-summary.html&all-classes.html