Fx4 VII: Flash Builder

Ha costado pero ya volvemos con un nuevo capítulo de la serie Flex 4. En este nuevo post de la serie Fx4 hablaremos de las nuevas características que se han incorporado en el nuevo IDE. Veremos las features de Flash Builder, en las que se incluyen cosas tan interesantes como: nuevas opciones de refactor, generación de event handlers, nuevas opciones de debugger y integración de Flex unit testing entre muchas otras.

Antes de empezar, decir que en este artículo se quiere dar una pincelada de las novedades de Flash Builder, no se pretende entrar en profundidad debido a la extensión de dicha información.

Flex Package Explorer

Flex Package Explorer substituye al Flex Navigator que teníamos en Flex Builder. Package Explorer nos proporciona tres visualizaciones diferentes sobre las vistas física y lógica.

Otras características a resaltar de Flex Package Explorer son:

Nuevas opciones de refactoring

Nos permite nuevas opciones de refactoring sobre componentes MXML y ficheros ActionScript. En el diálogo de Refactor (en el menú contextual), se nos mostrarán todas las opciones posibles: actualización de referencias, renombrado de variables, etc.

Soporte para proyectos creados en Catalyst

Flash Builder proporciona soporte para la integración de proyectos creados con Flash Catalyst. Una aplicación creada con Catalyst se exporta en un fichero FXP, que puede ser importado directamente a Flash Builder.
De momento, los proyectos creados con Flash Builder y exportados como FXP, no pueden ser cargados en Catalyst. Se prevee que sea posible en el futuro.

Generación de getters y setters

Con esta opción se nos permite tener una propiedad privada de una clase y ser accesible mediante funciones de acceso. Flash Builder puede generar los getters y setters de las clases ActionScript. Al generarlos, Flash Builder proporciona las siguientes opciones:

Customización de file templates

Flash Builder nos permite customizar la información que queremos mostrar en nuestros ficheros, ya sean MXML, ActionScript o ficheros CSS. Nos permite especificar diferentes cosas, como por ejemplo, el autor, la fecha, las diferentes partes del fichero, prefijos de los namespaces, etc.

Para configurar el template para cada tipo de fichero, debemos ir a Preferences > Flash Builder > File Templates.
A continuación adjunto un ejemplo de un template para clases AS3:

Obtendremos una clase con la cabecera siguiente:

Generación event handlers

Las aplicaciones de Flex son, básicamente aplicaciones que responden a eventos. Cuando programamos event handlers, le decimos a la aplicación como debe responder a determinados eventos.

Flash Builder nos proporciona un generador de event handlers para crear la respuesta a los eventos.

¿Cómo se generan los event handlers?

Cuando Flash Builder genera un event handler, lo coloca en el script block del fichero ( bloque fx:script ). Este event handler es de tipo protected y acepta un parámetro de tipo event, adecuado al evento para el cual ha sido programado.

Flash Builder genera un nombre basado en el nombre de la clase que dispara el evento y de la propiedad a la que se refiere. Evidentemente se puede cambiar el nombre al event handler que se genera.

Podemos generar event handlers desde diferentes vías, que son:

Soporte para ASDoc

Flash Builder nos mostrará comentarios ASDoc en el editor de MXML y ActionScript, cuando usemos el asistente de contenidos o cuando nos coloquemos encima de un componente en el editor. El suporte para ASDoc de Flash Builder incluye comentarios generados por el programador, o comentarios que estén contenidos dentro de ficheros SWC.

Comentarios ASDoc en el asistente de contenidos

En Flash Builder, el Content Assist nos muestra cualquier comentario ASDoc que esté en un componente MXML o ActionScript.
Para explicar de manera rápida como generar comentarios ASDoc, podemos decir que depende de donde se quiera poner, se hace de una manera o de otra. Un ejemplo:

Creación y edición de Flash components

Adobe Flash CS4 Professional nos permite crear aplicaciones compatibles con Adobe Flash Player 10. Las aplicaciones Flex también soportan Flash Player 10, lo que significa que podemos importar desde Flash CS4 Professional para usar en aplicaciones Flex. Podemos crear controls, containers, skins, etc. en Flash CS4 Professional y importarlo en Flash Builder como ficheros SWC.

Mejoras en el debugger

Breakpoints condicionales

Ahora podemos especificar condiciones para forzar la parada del debugger. Cuando se especifica un breakpoint condicional, estamos especificando una expresión ActionScript que será evaluada durante la sesión de debug.

Vista de expresiones

La vista de evaluación de expresiones ha sido mejorada en esta versión del IDE. Podemos usar la vista de expresiones para observar variables. Podemos añadir a la vista de variables cualquier expresión que queramos checkear durante el debug.
Mientras estemos debugando podremos inspeccionar y modificar el valor de las variables que estamos observando.

Network Monitor

Esta utilísima herramienta nos permite monitorizar y debuggar las aplicaciones Flex que tienen acceso a data services. De esta manera podremos examinar tráfico SOAP, AMF, Remote Object, XML o HTTP entre la aplicación Flex y el data service.
Esta herramienta está activa solamente en la perpectiva de debug.

limitaciones del Network Monitor

Esta herramienta no puede monitorizar la red en los siguientes casos:

• LiveCycle Data Services: no puede monitorizar el tráfico que usa las clases mx:DataService o mx:MessageService de LiveCycle Data Services.
• Datos encriptados o comprimidos: no puede monitorizar datos enviados por protocolo HTTPS, ni datos enviados bajo compresión ZIP o GZIP.

Mejoras del Profiler

Flash Builder ha aportado mejoras en el ámbito de la usabilidad al Profiler para permitirnos un mejor uso de esta herramienta. De esta forma es más fácil diagnosticar cosas como objetos residentes en memoria o memory leaks: para cada objeto en memoria, podremos ver su detalle. Así es más sencillo inspeccionar las “back references” a los objetos.

Entorno de testeo con FlexUnit

Este entorno nos permitirá generar y editar tests que podrán ejecutarse mediante scripts o des del mismo Flash Builder.
Flash Builder nos da la posibilidad de:

• Crear casos y suites de unit test.
• Ejecutar estos casos y suites de unit test.
• Navegatr al código resultante del text mediante la vista de Flex Unit Results.

Soporte para FlexUnit 4

Flash Builder soporta Flex Unit 4, el framework open source para testing. Para ésto Flash Builder añade las librerías de Flex Unit 4 a nuestro proyecto para poder sacar jugo de este framework.

Conclusión

Aquí termina este post, que aunque es largo espero que no os haya aburrido mucho .
Como se ha dicho al prinicpio del post, se ha querido dar una pincelada de lo que es el nuevo IDE de Flex, Flash Builder. Para ver en profundidad estas características os recomiendo ver el help de Flex 4, que se puede descargar en pdf.