Flex 4

Introducción a Flash Builder

‡ Flash Builder 4 es la herramienta de desarrollo preferida por Adobe para construir aplicación con Flex 4 SDK. ‡ Flash Builder se conocía nates como Flex Builder en las versiones anteriores a la 4

Versiones
‡ Flash Builder 4 Standard Edition ‡ Flash Builder 4 Premium Edition
± Incluye las características de la Standard y además ± charting controls y AdvancedDataGrid y OLAPDataGrid. ± Flex Profiler y Flex Test Automation framework, que nos permite usar con HP QuickTest Professional (Mercury QuickTest) para personalizar test automatizado del lado de cliente para una aplicación Flex.

‡ Flash Builder combina las capacidades del espacio de trabajo de Eclipse con las herramientas personalizadas que permiten aumentar la productividad en el desarrollo de una aplicación Flex.

Eclipse workspace
‡ Consiste en un conjunto de proyectos más configuraciones basadas en Eclipse ‡ Cuando arrancamos Eclipse, nos proponen seleccionar un espacio de trabajo. ‡ La carpeta de esta workspace es diferente si usamos Flash Builder stand-alone o el plug-in, pero su ubicación es nuestra carpeta personal.
± Windows XP
‡ C:\Documents and Settings\[username]\My Documents\Flash Builder 4

± Windows Vista y Windows 7
‡ C:\Users\[username]\Documents\Flash Builder 4

‡ El workspace sirve como una tabla de contenidos para colocar los proyectos. ‡ Pero tb mantiene toda la info necesaria para gestionar los proyectos, como la configuración de Eclipse, Flash Builder y otros plugins que podemos instalar. ‡ Desde File - Switch Workspace podemos cambiar de workspaces.

Eclipse projects
‡ Contiene todos los recursos necesarios para un aplicación concreta. ‡ Un proyecto básico Eclipse sólo contiene referencia a una carpeta root ‡ Un sólo proyecto puede estar referenciado a varios workspaces

Eclipse views
‡ Es un panel de interfaz de usuario que permite especificar una función. ‡ Algunas vistas que usamos en Flash Builder son parte del workbench de Eclipse. ‡ Otras son únicas en Flash Builder y se usan sólo para aplicaciones Flex. ‡ Para abrir una vista
± Window - Other Views
‡ nos muestra todas las vistas disponibles en función de los plugins instalados

Eclipse editors
‡ Un editor es un tipo especial de vista que ha sido diseñado para soportar el desarrollo de un lenguaje de programación. ‡ La instalación básica incluye un editor de texto que se puede usar para editar cualquier fichero de texto. ‡ En Flash Builder se incluye un editor para MXML y AS. ‡ Podemos abrir nuevas fichas de editor haciendo clic boton derecho del ratón en la pestaña del nombre del fichero

Eclipse perspective
‡ Es un conjunto de vistas. ‡ Cada plugin incluye una o más perspectivas predefinidas. ‡ Flash Builder 4 incluye:
± Flash ± Flash Debug ± Flash Profile

‡ Desde window - Perspective

Configuraciones
‡ Window Preferences
± Cambiar fuentes
‡ podemos cambiar el texto que aparece en los editores desde la categoría General Appearence Colors and Fonts

± Seleccionar el navegador Web
‡ General Web browser

Crear un proyecto

‡ Un proyecto es una colección de aplicaciones y sus recursos asociados. ‡ Podemos crear nuestro proyecto, usando Flash Builder, como un recurso conocido como Flex project.
± File New Flex Project

Asistente
‡ En la primera pantalla del asistente debemos dar la siguiente información:
± Nombre de proyecto
‡ con letras, números y simbolo _

± Project location.
‡ Cualquier lugar en nuestro disco ‡ la ubicación por defecto es una carpeta nombrada como el proyecto, ubicada bajo la carpeta del workspace ‡ Esta ubicación será donde la configuración del proyecto coloca los ficheros de código fuente y las aplicaciones compiladas

± Application type.
‡ Nos indica si se trata de una aplicación Web o de escritorio. ‡ Flash Builder NO permite crear un único proyecto que pueda ser desplegado en Web y en Escritorio ‡ Flash Builder permite convertir un proyecto creado inicialmente para Web en Escritorio y viceversa
± botón derecho en nombre de proyecto Add/change Project Type

‡ Flex SDK version.
± Establece por defecto el SDK (Flex 4) u otra versión específica de SDK ± Flex 4.0 usa los nuevos componentes Spark pero tb puede usar los antiguos componentes Halo ± Flex 3.4 no tiene acceso a los nuevos componentes Spark y usa la vieja sintaxis del estado de vista

‡ Server technology.
± Flash Builder soporta las siguientes aplicaciones de servidor:
‡ ‡ ‡ ‡ ASP.NET ColdFusion J2EE (tb conocido como Java EE o simplemente JEE) PHP

‡ Cuando seleccionamos J2EE podemos elegir Adobe LiveCycle Data Services ES o el producto open-source BlazeDS. ‡ Cuando seleccionamos ColdFusion podemos tb elegir como opciones de comunicación:
± LiveCycle Data Services ES ± BlazeDS ± ColdFusion Flash Remoting
‡ www.adobe.com/support/coldfusion

Tecnología de servidor
‡ En Flex Builder 3 debemos instalar y testear la aplicación de servidor antes de crear el Flex project pq no podemos cambiar la tecnología de servidor después. ‡ Flash Builder 4 nos permite cambiar una aplicación de servidor a posteriori
± Project - Properties - Flex Server

‡ La siguiente pantalla del asistente de Flex Project trata de Compiled Flex application location, tb conocida como Output folder. ‡ Por defecto es una subcarpeta dentro del proyecto principal llamada bin-debug.
± contiene la versión compilada de la aplicación que usaremos para depurar y testear ± La versión de producción de la aplicación se crea en un paso posterior después de que el proyecto haya sido creado

‡ Los nombres de los ficheros (sin mxml) se convierten en clases AS en el proceso de compilación
± cuidado al nombrar ± o al cambiar el nombre de un fichero

Interfaz de Flash Builder

Editores en Flash Builder
‡ Flash Builder incluye dos editores
± editor MXML
‡ al crear un proyecto, el fichero mxml siempre se abre con el editor mxml ‡ tiene dos modos de trabajo
± source ± Design

± editor AS
‡ al abrir un fichero as se abre con este editor

‡ Para dar formato al código
± Source correct indentation

Vistas en Flash Builder
‡ Package Explorer view
‡ muestra un árbol de carpetas, ficheros y paquetes de código ‡ nos permite localizar y abrir los recursos del proyecto ‡ Aparece por defecto tanto en las perspectivas de Flash como Flash Debug ‡ en Flash Builder podemos abrir la vista con Window Package Explorer ‡ botón derecho en la vista y podemos crear nuevos proyectos

‡ Outline view
± muestra un árbol de los objetos que han sido declarados en MXML o en un fichero AS ± Window Outline ± nos permite localizar el código representado por variables u objetos
‡ clic en el objeto de árbol y nos lo señala en Source o Design

‡ Problems view
± muestra los errores de compilación y los warnings ± doble clic en el problema, nos lleva al código que origina el problema

‡ Podemos cerrar proyectos. ‡ si tenemos proyectos abiertos y activado Build Automatically, recompila todos los proyectos abiertos ‡ si tenemos proyectos con errores, ralentiza la compilación

‡ Design views
± solo se usan cuando el editor está en Design
‡ Properties view
± permite establecer las propiedades del objeto con un interfaz más simple y generar el código MXML necesario

‡ Appearance view
± permite editar algunas opciones de los estilos de los objetos MXML

‡ Components view
± permite arrastar y soltar componentes de interfaz de usuario incluyendo Containers y Controls en nuestra aplicación

‡ States view
± permite gestionar altenativos estados de vista a través de Design y genera el código que representa estos nuevos estados

‡ Debugging views
± estas son las vistas utilizadas para depurar una aplicación Flex en primer lugar
‡ Console view
± muestra información de traza y otros mensajes detallados de depuración

‡ Debug view
± contiene controles para navegar por el código paso a paso, terminar y depurar una sesión.

‡ Variables view
± muestra los valores de todas las variables pre-declaradas que están actualmente en la ejecución de la aplicación

‡ Breakpoints view
± permite gestionar los puntos de ruptura

‡ Expressions view
± permite evaluar y inspeccionar expresiones AS mientras la ejecución de la aplicación está parada en un punto de ruptura

‡ Network Monitor
± permite monitorizar llamadas a servicios remotos

Generar código
‡ Podemos declarar propiedades publicas y usar Flash Builder para convertirlas en privadas ‡ Los pasos a seguir son:
± Crear una nueva clase AS
‡ File new class AS

± Declarar una variable pública del tipo que quieras
‡ package
± { » public class MyClass ± { » public var nombre:String; ± } ± }

± coloca el cursor sobre el nombre de la variable ± Source - Generate Getter/Setter.
‡ aparece un cuadro de dialogo que nos permite seleccionar varias opciones

Generar manejadores de eventos
‡ Flash Builder permite definir event handlers (métodos que son llamados como reacción a un evento que se ha disparado en la aplicación) como atributos de etiquetas MXML. ‡ Arrastra un componente a Design
± clic en sus propiedades en Common

‡ <s:Button label= enviar click= button1_clickHandler() />

Integrar Flash Builder con Flash Professional CS5

Sign up to vote on this title
UsefulNot useful