En realidad este post no es una continuación de este otro: Event Bubbling en Flex. Más bien es una ampliación del código del mismo a petición de Ricardo.
Event Bubbling es el proceso por el cual Flex pasa un evento entre componentes y subcomponentes. Este ejemplo es una pequeña explicación para poder atrapar un evento generado en un componente más o menos genérico por aquellas partes de la aplicación que lo utilizan.
En este ejemplo, tenemos un selector de fechas. Su presentación en el diseñador del Flex Builder sería algo similar a lo siguiente:
El funcionamiento de este componente es muy sencillo: Introducimos dos fechas y pulsamos el boton Ir para que se realice la acción correspondiente.
El código que implementa este componente es el siguiente:
.cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cln { color: #2b91af; }.cb1 { color: blue; }.cb2 { color: maroon; }.cb3 { color: red; }.cb4 { color: gray; }1 < ?xml version=“1.0“ encoding=“utf-8“?>
2 < mx:HBox xmlns:mx=“http://www.adobe.com/2006/mxml“ width=“100%“ height=“100%“>
3 < mx:Metadata>
4 [Event(”buscar”)]
5 mx:Metadata>
6 < mx:Script>
7 < ![CDATA[
8 import flash.events.EventDispatcher;
9
10 [Bindable]
11 public var dtFechaInicial : Date;
12
13 [Bindable]
14 public var dtFechaFinal : Date;
15
16 private function onBuscar(event: Event) : void
17 {
18 dispatchEvent(new Event(”buscar”));
19 }
20 ]]>
21 mx:Script>
22 < mx:Spacer width=“20“/>
23
24 < mx:Label id=“lblFInicial“ text=“F Inicial:“ />
25 < mx:DateField id=“dtFInicial“ selectedDate=“{dtFechaInicial}“ />
26 < mx:Label id=“lblFFinal“ text=“F Final:“ />
27 < mx:DateField id=“dtFFinal“ selectedDate=“{dtFechaFinal}“ />
28 < mx:Button label=“Ir“ id=“cmdBuscar“ click=“onBuscar(event);“ />
29 mx:HBox>
Esto hará que se generé un evento que podrá atrapar un contenedor cuando en este componente se genere un click del botón: Ir.
Para atrapar dicho evento, se puede hacer de dos maneras:
- Declarativa, en el XML:
1 < ns1:controlEntreFechas height=“27“ buscar=“Alert.show(’Buscar’);“>
2 ns1:controlEntreFechas>
- Programáticamente:
.cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cln { color: #2b91af; } .cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cln { color: #2b91af; }
1 this.addEventListener(”Buscar”, onBuscarEntreFechas);
2 …
3 public function onBuscarEntreFechas (event:Event) : void {
4 // Realizar la accion de Buscar
5 }
En todo esto surge una necesidad interesante y es la de pasar parámteros a la función que se encarga de capturar los eventos. De esta manera no necesitamos consultar el contenedor que ejecuto el evento, sino directamente recibimos todos los datos necesarios. Es lo lógico, por otro lado.
Para ello, creamos una clase que herede de flash.events.Event:
.cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cln { color: #2b91af; }
1 package es.lciberica.psp.AusenciasPorteria.util
2 {
3 import flash.events.Event;
4
5 public class EntreFechasEvent extends Event
6 {
7 public var _fechaInicial : Date;
8 public var _fechaFinal : Date;
9
10 public function EntreFechasEvent(
11 type:String,
12 fechaInicial:Date,
13 fechaFinal:Date,
14 bubbles:Boolean=false,
15 cancelable:Boolean=false)
16 {
17 super(type, bubbles, cancelable);
18 _fechaInicial = fechaInicial;
19 _fechaFinal = fechaFinal;
20 }
21 }
22 }
La funcion onBuscar del componente, pasara a tener el siguiente código:
1 public function onBuscar(event : Event):void
2 {
3 dispatchEvent(new EntreFechasEvent(”Buscar”, dtFInicial.selectedDate, dtFFinal.selectedDate));
4 }
Con lo cual la función receptora del evento, puede recibir directamente las fechas:
.cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cln { color: #2b91af; }1 public function onBuscarEntreFechas (event:Event) : void {
2 // Realizar la accion de Buscar
3 var entre_fechas_event : EntreFechasEvent = event as EntreFechasEvent;
4
5 // fecha inicial: entre_fechas_event._fechaInicial
6 // fecha final: entre_fechas_event._fechaFinal
7 }
Enviar un comentario nuevo