Video Tutorial Eventos Flex

En este tutorial vamos a profundizar un poco mas en la utilización de los eventos con flex, la utilización de eventos en este framework es primordial para interactuar entre componentes o controles, por ejemplo, si queremos que un botón borre un campo de un formulario, debemos utilizar eventos (en este caso especifico el evento click).

Cada control en flex posee sus propios eventos definidos (los eventos que puede lanzar o disparar) y para saber cuales son solo debemos ir a la documentacion de su clase respectiva y ver de que eventos dispone.

En este tutorial vamos a estar trabajando especificamente con el control Button ya que es muy utilizado en las aplicaciones y me parecio apropiado, se va a utilizar especificamente 4 eventos, Mouse Over, Mouse Out, Creation Complete y Click (cabe destacar que practicamente todos los controles de flex poseen estos 4 eventos).

1. Mouse Over: Ocurre cuando colocamos el mouse sobre el botón.
2. Mouse Out: Ocurre cuando retiramos el mouse del botón.
3. Click: cuando hacemos click en el botón.
4. Creation Complete: cuando el botón termina de cargarse en la aplicación.

Estos eventos pueden ejecutar cualquier bloque de código (funcion) que nosotros definamos (esta función que se ejecuta es llamada Handler) dentro y fuera de la misma clase. Cabe destacar que la clase botón dispone de muchos otros eventos, y cada uno de ellos aporta una funcionalidad y oportunidad para realizar nuevas interaciones con el usuario.

Bueno les dejo un rar con el codigo fuente del ejemplo ademas del video y el ejemplo en funcionamiento en este post:



Código

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
public function limpiar() : void
{
 LabelClick.text = "";
 LabelMouseOver.text = "";
 LabelMouseOut.text = "";
 LabelCreationComplete.text = "";
}

public function clickHandler() : void
{
 LabelClick.text = "Click";
}

public function mouseOverHandler() : void
{
 LabelMouseOver.text = "Mouse Over";
}

public function mouseOutHandler() : void
{
 LabelMouseOut.text = "Mouse Out";
}

public function creationCompleteHandler() : void
{
 LabelCreationComplete.text = "Creation Complete";
}
]]>
</mx:Script>
<mx:Button x="190" y="103" label="Boton de prueba" click="clickHandler()" mouseOver="mouseOverHandler()" mouseOut="mouseOutHandler()" creationComplete="creationCompleteHandler()"/>
<mx:Label id="LabelClick" x="44" y="57" text="Label"/>
<mx:Label id="LabelMouseOver" x="125" y="57" text="Label"/>
<mx:Label id="LabelMouseOut" x="212" y="57" text="Label" />
<mx:Label id="LabelCreationComplete" x="299" y="57" text="Label" />
<mx:Button x="92" y="103" label="Limpiar" click="limpiar()"/>

</mx:Application>

Ejemplo