Flex - Manejo de eventos
Flex utiliza el concepto de evento para pasar datos de un objeto a otro dependiendo del estado o la interacción del usuario dentro de la aplicación.
ActionScript tiene un genérico Eventclase que define gran parte de la funcionalidad necesaria para trabajar con eventos. Cada vez que ocurre un evento dentro de una aplicación Flex, se crean tres tipos de objetos de la jerarquía de clases de eventos.
El evento tiene las siguientes tres propiedades clave
| No Señor | Descripción de propiedad |
|---|---|
| 1 | Type los typeindica qué tipo de evento acaba de suceder. Esto puede ser hacer clic, inicializar, pasar el mouse, cambiar, etc. Los valores reales estarán representados por constantes como MouseEvent.CLICK. |
| 2 | Target los target La propiedad de Event es una referencia de objeto al componente que generó el evento.Si hace clic en un botón con una identificación de clickMeButton, el destino de ese evento de clic será clickMeButton |
| 3 | CurrentTarget los currentTargetla propiedad varía la jerarquía del contenedor. Se ocupa principalmente del flujo de eventos. |
Fases de flujo de eventos
Un evento pasa por tres fases en busca de controladores de eventos.
| No Señor | Fase y descripción |
|---|---|
| 1 | Capture En la fase de captura, el programa comenzará a buscar controladores de eventos desde el padre externo (o superior) hasta el más interno. La fase de captura se detiene en el padre del objeto que desencadenó el evento. |
| 2 | Target En la fase de destino, el componente que desencadenó el evento se verifica para un controlador de eventos. |
| 3 | Bubble La fase de burbuja es inversa a la fase de captura, trabajando hacia atrás a través de la estructura, desde el padre del componente objetivo hacia arriba. |
Considere el siguiente código de aplicación:
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500" >
<s:Panel>
<s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
</s:Panel>
</s:Application>Cuando el usuario hace clic en el Botón, también hace clic en el Panel y la Aplicación.
El evento pasa por tres fases en busca de asignaciones de controladores de eventos.
Sigamos los pasos a continuación para probar la gestión de eventos en una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function reportEvent(event:MouseEvent):void {
var target:String = event.target.id;
var currentTarget:String = event.target.id;
var eventPhase: String;
if(event.target is Button) {
var button:Button = event.target as Button;
target = button.label + " Button";
} else if(event.target is HGroup) {
var hGroup:HGroup = event.target as HGroup;
target = hGroup.id + " HGroup";
} else if(event.target is Panel) {
var panel:Panel = event.target as Panel;
target = panel.id + " Panel";
}
if(event.currentTarget is Button) {
var button1:Button = event.currentTarget as Button;
currentTarget = button1.label + " Button";
} else if(event.currentTarget is HGroup) {
var hGroup1:HGroup = event.currentTarget as HGroup;
currentTarget = hGroup1.id + " HGroup";
} else if(event.currentTarget is Panel) {
var panel1:Panel = event.currentTarget as Panel;
currentTarget = panel1.id + " Panel";
}
var eventPhaseInt:uint = event.eventPhase;
if(eventPhaseInt == EventPhase.AT_TARGET) {
eventPhase = "Target";
} else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
eventPhase = "Bubbling";
} else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Event Handling Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Main Parent"
click = "reportEvent(event)" width = "500"
height = "100" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:HGroup id = "mainHGroup" click = "reportEvent(event)">
<s:Button label = "Click Me" click = "reportEvent(event)" />
</s:HGroup>
</s:Panel>
<s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
<mx:Text id = "reports" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ ]
