Flex 4

Aplicaciones básicas en Flex

 Cambiar workspaces
• File - Switch Workspace
• Selecciona una carpeta en tu disco duro y OK
• Flash Builder se reinicia
• El nuevo workspace muestra la Flash Builder
Start Page y por defecto Flash perspective.
• El recién creado workspace está vacío y no
contiene proyectos
 Crear el proyecto
• File - New - Flex Project
• Ponemos un nombre al proyecto
• Selecciona la ubicación del proyecto
• Seleccionamos Web application (corre en Flash Player) en el tipo
de Aplicación
• Seleccionamos Use default SDK (Flex 4.0) en Flex SDK version
• No utilizamos aplicación de servidor
• Dejamos la carpeta bin-debug para compilación
• la carpeta principal será src
• el fichero principal de la aplicación le pones el nombre que
consideres
• Finish
• Las aplicaciones Flex 4 utiliza una arquitectura nueva
para mostrar los objetos hijos de la aplicación.
• En Flex 3, el componente <mx:Application> tenía la
propiedad layout para establecer un valor String
absolute, horizontal o vertical.
• En Flex 4, la etiqueta <s:Application> determina el
layout por una instancia de la clase Layout.
– Podemos aplicar la propiedad layout con la etiqueta
<s:layout>.
• El layout por defecto es basic layout.
• Es similar a absolute layout en Flex 3.
• Los objetos visuales retienen sus posiciones relativas
a la esquina superior izquierda de la aplicación.
• Podemos añadir la propiedad paddingTop y
horizontalAlign en la etiqueta Vertical, Horizontal…

• <s:VerticalLayout paddingTop=”20”
horizontalAlign=”center”/>
 Ejemplo s:layout
<?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" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout>

</s:HorizontalLayout>
</s:layout>
<s:Button label="Button"/>
<s:CheckBox label="CheckBox"/>
<mx:ColorPicker/>
</s:Application>
 Práctica
• Coloca un texto en el centro de la página pero
con un margen o sangría superior
• Y en el centro perfecto de la página?
 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">
<s:layout>
<s:VerticalLayout paddingTop="100" horizontalAlign="center"/>
</s:layout>
<mx:DateChooser/>

</s:Application>
 Carpeta html-template
• Cada proyecto Flex diseñado para ser desplegado en la Web contiene
una carpeta llamada html-template
• Contiene modelos para HTML y soporta ficheros que corren en el
navegador
• Cuando guardamos los cambios en nuestro código fuente, Flash Builder
construye de nuevo nuestra aplicación usando el modelo HTML
• Al mismo tiempo, copia el contenido de la carpeta html-template a la
carpeta output que contiene la aplicación compilada.

• La carpeta html-template y su contenido no necesita ser copiado en

nuestro servidor Web para desplegar la aplicación
• Estos ficheros sólo son usados durante el proceso de compilación
 Build Automatically
• Esta propiedad indica que las aplicación serán
compiladas automáticamente cada vez que se
guardan los cambios del fichero de código
fuente.
• Podemos desactivarla para que sean
recompiladas sólo cuando se elija.
• En el proceso de compilación, la mayoría de los
ficheros de la carpeta html-template sólo se copian
en la carpeta output que contiene la versión
depurada de nuestra aplicación.
• El fichero HTML contenedor que se usa en tiempo de
ejecución se genera basado en un fichero modelo de
html-template llamado index.template.html
• Muchos ficheros de esta carpeta sólo sirven como
base y modelo para los ficheros generados en la
carpeta de salida.
 Contenido de html-template
• index.template.html
– fichero modelo que es la base para generar la envoltura HTML
a la que llama la aplicación en runtime
• swfobject.js.
– biblioteca JavaScript que contiene funciones usadas en tiempo
de ejecución para cargar Flash Player
– Contiene código sniffer que detecta si Flash Player ya está
cargado en el escritorio del usuario y si es así, qué versión
• playerProductInstall.swf
– apliación flash usada para actualizar el sistema del usuario si
está instalado Flash Player 6.65 o superior
• subcarpeta history
– contiene ficheros que implementan la gesión de
histórico de la aplicación (sólo para navegadores NO IE)
• historyFrame.html
– modelo para la página HTML que se carga en un <iframe> en la
página principal
• history.js
– biblioteca de JavaScript que contiene las funciones llamadas por el
historyFrame.html.
• history.css
– contiene las reglas CSS para suprimir la visibilidad de history frame
en la página principal
 index.template.html
• si abrimos el fichero vemos que contiene
– codigo html
– llamadas a funciones en el fichero swfobjects.js
– historial de ficheros
– …..

– hemos dicho que en tiempo de compilación, este

fichero es usado para generar el envoltorio HTML
de nuestra aplicación
• La versión de Flash Player requerida puede
indicarse en este fichero o desde propiedades
del proyecto
– Project – Properties – sección Flex Compiler
 flex-config.xml
• Cuando creamos un proyecto, la versión Flash Player
está determinada por la configuración de Flex SDK
• Se establece en el fichero frameworks/flex-
config.xml dentro del elemento <target-player>
– <target-player>10.0.0</target-player>
• Si cambio el contenido de flex-config.xml, debemos
limpiar todos los proyectos para forzar a su
recompilación.
– Project – Clean - Clean all projects
Desplegar la aplicación
• Aplicación creada
• Se Ejecuta correctamente en el entorno de
desarrollo y test
• Desplegamos la aplicación para compartirla
con otros usuarios
• La versión de la aplicación creada en nuestra
carpeta output y que hemos usado durante el
testeo y depuración en la fase de desarrollo es
la versión debug de la aplicación.
• Este fichero swf compilado es más pesado que
la versión a desplegar puesto que contiene
info adicional que sólo es usada durante la
depuración
Crear un release de un aplicación Flex Web
• Project – Export Release Build
– Seleccionamos la aplicación a exportar
– Indica si queremos permitir View source
– selecciona una carpeta a donde exportar
• podemos dejar bin-release
– Finish

– la versión de la apliación está optimizada para entregar

al usuario. No contiene información de depuración y es
menos pesada que la versión debug.
• la carpeta release build contiene una única
aplicación y sus ficheros de soporte
• la carpeta bin-debug contiene las versiones
debug de todas las aplicaciones del proyecto
• En Flex 4, las clases As y otros elementos del SDK que son
compartidos por todas las aplicaciones Flex se compilan en
ficheros RSL (Runtime Shared Library) que están separados
del fichero SWF de aplicación.
• Estos ficheros con una extensión swz o swf se cargan por la
aplicación en tiempo real cuando sus clases son necesarias.
– framework_4.0.0.12685.swf, spark_4.0.0.12685.swf
• el número incrustado en su nombre cambia en función de la
versión del SDK con que la aplicación es compilada
• Al desplegar la aplicación, debemos copiar todos los ficheros
de la carpeta release a la carpeta de nuestro sitio Web
 Probar el release construido
• En la vista Package Explorer, abrimos la
carpeta release y localiza el fichero HTML
envoltorio.
– el fichero se llama como la aplicación con la
extensión html
• botón derecho y seleccionamos Open With -
Web Browser.
Diseñar Web usando Flex y
Dreamweaver CS5