Flex 4

Depurar Aplicaciones Flex

Depuración básica
‡ Depurar significa que cuando run la aplicación, queremos información espacial que ayude a entender la aplicación. ‡ Para depurar con Flex necesitamos usar un fichero correcto y un correcto entorno en tiempo de ejecución ‡ Debemos comprobar:
± si estamos usando una versión debug de Flash Player ± si estamos usando una verisón debug de la aplicación ± si la aplicación está running en debug mode

Flash Player debugger
‡ En cualquier presentación de flash, botón derecho y vemos si aparece una opción Debugger en el menú contextual

Versión debug de la aplicación
‡ Al crear un Flex Project se crea una carpeta debug. ‡ El tamaño del fichero en versión debug es más pesado que en versión release para Web o Escritorio porque incluye info especial y funcionalidad que se pueden usar en sesiones de depuracíón con herramientas debugging en Flash Builder. ‡ la carpeta por defecto se llama bin-debug. ‡ el nombre del fichero es el mismo que el original pero con extensión swf

Aplicación running en debug mode
‡ Abrir la aplicación ‡ Run Debug ‡ Tenemos una opción flash Debug que nos facilita las opciones de depuración

Terminar sesión debug
‡ Debemos terminar una sesión debugging explícitamente
± Run - Terminate. ± clic en cuadrado rojo de vista Console ± clic en cuadrado rojo en vista Debug (visible en Flex Debugging) ± Cerrar en la navegador de la aplicación que se ejecuta (para aplicación Web) ± cerrar la aplicación (para aplicación de escritorio)

trace
‡ función global en Flash Player. ‡ Su propósito es enviar un mensaje para registrar algo
± trace( A tracing message );

‡ Cuando depuras una aplicación Flex en Flash Builder, el valor pasado a trace se muestra en la vista Consola

Ejemplo trace
<?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 > <s:layout> <s:VerticalLayout horizontalAlign= center paddingTop= 20 /> </s:layout> <s:Button label= Call Trace click= trace( Button Clicked ) /> </s:Application>

‡ click en Debug y vuelve a la vista Consola ‡ ahora vemos el mensaje del trace

flashlog.txt
‡ Los mensajes del trace se pueden guardar en un fichero de texto llamado flashlog.txt. ‡ este fichero se crea por el depurador de Flash Player en una carpeta de nuestro sistema ‡ Debemos configurarlo para que se use desde el fichero de texto mm.cfg. ‡ Este fichero mm.cfg contiene parámetros para controlar los mensajes que se envian y se guardan en el flashlog ‡ el fichero mm.cfg suele estar en Documents and Settings / username (si es Windows 7 en Users/username)

‡ Para guardar los mensajes enviados por trace añadimos estas líneas
± ErrorReportingEnable=1 ± TraceOutputFileEnable=1

‡ La próxima vez que debug la aplicación se crea automáticamente el fichero flashlog y guarda cada llamada a trace()

‡ flashlog.txt suele estar en:
± C:\Documents and Settings\username\Application Data\Macromedia\FlashPlayer\Logs ± C:\Users\username\AppData\Roaming\Macrome dia\Flash Player\Logs

Breakpoints

‡ Podemos usar vista BreakPoints ‡ Tb podemos inspeccionar variables y expressiones con sus vistas ‡ Vista Debug

Profiling Flex

‡ Flash Builder incluye herramientas para seguir las aplicaciones Flex en runtime ofreciendo info sobre:
± frecuencia y duración de las llamadas a métodos ± tamaño y número de instancias en memoria ± uso de memoria

‡ Estas herramientas están incluidas en Flash Profile perspective

Profiling
‡ Cerrar la ventana del navegador ‡ Run Profile
± se establece la conexión y se lanzan las opciones ± Seleccionamos las opciones y Resume

‡ Ejecutamos la aplicación y volvemos a Flash Builder para ver el comportamiento interno

NetWork Monitor
‡ Se utiliza para depurar el tráfico de red entre una aplicación Flex running desde Web o escritorio que se comunica con una aplicación servidor en runtime. ‡ Trabaja con una request no encriptada HTTP incluyendo las URLRequest de Flash Player y los componentes RPC de Flex SDK (HTTPService, WebService, y RemoteObject).

‡ Podemos usar Network Monitor para inspeccionar el tamaño y contenido de los requests y responses enviados entre cliente Flex y aplicación servidora ‡ Hay que Activar el monitor con el botón de la Vista NetWork Monitor

Ejemplos
‡ ColdFusion ofrece todos los servicios sobre los que trabaja Network Monitor: ‡ REST-style data exchange con XML,
± SOAP-based Web services ± AMF (Action Message Format) con Flash Remoting

Configurar Flex Project para usar Coldfusion
‡ Boton derecho en el Project Properties Flex Server ‡ Seleccionamos Application Server type con ColdFusion con Flash Remotint ‡ Seleccionamos la ubicación de la carpeta raíz de ColdFusion.
± para la versión 9 suele estar en C:\ColdFusion9

Ejemplo HTTPService HTTPServiceDemo
‡ Aplicación que recibe de un fichero XML estático con una instancia de la clase HTTPService y guarda los datos en un ArrayCollection cuando el evento result se ha disparado ‡ Los muestra en un DataGrid

Solució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" xmlns:components="components.*"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="20"/> </s:layout> <fx:Script> <![CDATA[ import mx.controls.Alert; ]]> </fx:Script> <fx:Declarations> <s:HTTPService id="service" url="data/contacts.xml" result="arData = event.result.contacts.row" fault="Alert.show(event.fault.faultString, event.fault.faultCode)" showBusyCursor="true"/> <s:ArrayCollection id="arData"/> </fx:Declarations> <components:ContactGrid dataProvider="{arData}"/> <s:Button label="Get Data" click="service.send()"/> </s:Application>

Ejemplo Web Service WebServiceDemo
‡ Aplicación que recibe datos de un servidor con una llamada SOAP basada en una operación Web service usando una instancia de la clase WebService

Solució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" xmlns:components="components.*"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="20"/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; ]]> </fx:Script> <fx:Declarations> <s:WebService id="service" wsdl="cfc/ContactService.cfc?wsdl" result="arData = event.result as ArrayCollection" fault="Alert.show(event.fault.faultString, event.fault.faultCode)" showBusyCursor="true"/> <s:ArrayCollection id="arData"/> </fx:Declarations> <components:ContactGrid dataProvider="{arData}"/> <s:Button label="Get Data" click="service.getData();"/> </s:Application>

RemoteObject - RemoteObjectDemo
‡ Aplicación que recibe datos de un servidor con una llamada Flash Remoting a una ColdFusion Component (CFC) function, usando una instancia de clase RemoteObject

Solució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" xmlns:components="components.*" xmlns:valueObjects="valueObjects.*"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="20"/> </s:layout> <fx:Script> <![CDATA[ import mx.controls.Alert; ]]> </fx:Script> <fx:Declarations> <s:RemoteObject id="service" destination="ColdFusion" source="depurar.cfc.ContactService" result="arData.source = event.result as Array" fault="Alert.show(event.fault.faultString, event.fault.faultCode);" showBusyCursor="true"/> <s:ArrayCollection id="arData"/> <valueObjects:Contact id="dummyVO"/> </fx:Declarations> <components:ContactGrid dataProvider="{arData}"/> <s:Button label="Get Data" click="service.getData()"/> </s:Application>

Sign up to vote on this title
UsefulNot useful