Event Bubbling en FLEX

Si se quiere crear un componente complejo, pero que sirva para realizar diversas operaciones, lo mejor es atrapar sus eventos y aplicarle operaciones concretas, según se utilice dicho componente.

Esto me ha pasado recientemente. He desarrollado un componente que muestra dos selectores de fechas y un boton de busqueda. Es muy comun hacer busquedas entre dos fechas, luego es muy común utilizar un control de este tipo. La gran diferencia aparecerá cuando, al darle al boton de buscar por rango de fechas, me haga cosas distintas segun el lugar donde se encuentre dicho control.

Para ello, se indica que este control va a generar un evento cuando se pulse el click del boton de busqueda. Esto implica, atrapar primero el evento click del boton y relanzarlo al contenedor del componente como si un evento propio fuese. Esto es lo que se conoce como Event Bubbling y no es más que un encadenamiento de eventos.
Para ello, definimos dentro del componente que vamos a lanzar un evento:

.cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cb1 { color: blue; }.cb2 { color: maroon; }

<mx:Metadata>

[Event(”buscar”)]

mx:Metadata>

Indicamos al boton que vamos a atrapar el evento click:

.cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cb1 { color: blue; }.cb2 { color: maroon; }.cb3 { color: red; }

<mx:Button label=Ir id=cmdBuscar click=onBuscar(event); />

Y, por último codificamos la funcion onBuscar:

private function onBuscar(event: Event) : void
{
dispatchEvent(new Event(”buscar”));
}

Sin olvidarnos de incluir el paquete: flash.events.EventDispatcher.

A partir de este momento, en cualquier lugar de nuestro codigo podremos incrustar el componente completo y atrapar el evento del boton para realizar busquedas específicas, según el lugar donde hayamos puesto el nuevo componente:

.cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cb1 { color: blue; }.cb2 { color: maroon; }.cb3 { color: red; }
.cf { font-family: Courier New; font-size: 8pt; color: black; background: white; }.cl { margin: 0px; }.cb1 { color: blue; }.cb2 { color: maroon; }.cb3 { color: red; }

<ns1:controlEntreFechas height=27 buscar=Alert.show(’Buscar’);>

ns1:controlEntreFechas>

Todavía no hay comentarios

Enviar un comentario nuevo

El contenido de este campo se mantiene privado y no se mostrará públicamente.
  • Etiquetas HTML permitidas: <a> <blockquote> <br> <cite> <code> <dd> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <img> <li> <ol> <p> <pre> <span> <strong> <swf> <table> <tbody> <td> <th> <tr> <ul>
    Allowed Style properties: background-color, background-image, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, color, direction, font, font-family, font-size, font-style, font-variant, font-weight, height, left, line-height, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, padding, padding-bottom, padding-left, padding-right, padding-top, right, text-align, text-decoration, top, width
  • Syntax highlight code surrounded by the {syntaxhighlighter OPTIONS}...{/syntaxhighlighter} tags.
  • E-Mail addresses are hidden with reCAPTCHA Mailhide.

Más información sobre opciones de formato

CAPTCHA
Esta pregunta es para comprobar si eres un ser humano y evitar el envío automático desde sistemas de spam