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\Macromed
ia\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>