Flex 4

• Adobe nos presenta con Flex 4, un nuevo camino para

implementar diseños visuales.
– Los nuevos componentes Spark
• skinning combinando la programación basada en MXML + capacidades visuales
de renderización de Flash Player
– Puede utilizar características avanzadas de Flash Player 10
• Flash Text Engine (FTE)
• Text Layout Framework (TLF)
– permiten una compleja presentación de texto y animaciones 3D
– El renombrado Flash Builder 4 es ahora un editor de Action Script tanto
para desarrolladores Flex como Flash
• incluye nuevo código y características de formato
• la herramienta de depuración Network Monitor que traza el trafico de red
cuando una aplicación Flex se comunica con una aplicación de servidor.
• Flex 4 es la versión más reciente de una
plataforma para desarrollar y desplegar
aplicaciones que corren sobre
– Adobe Flash Player para la Web
– Adobe AIR para el escritorio
• Desde la salida al mercado de Flex 3, en entorno
de desarrollo de Flex se basa en un flujo de
trabajo similar al usado por otros entornos
como Visual Studio, Delphi, NetBeans y Jbuilder.
– Se escribe un código fuente y se compila en una
aplicación local.
– Para aplicaciones diseñadas para ser desplegadas en
la Web, se sube la aplicación terminada a un servidor
Web
• Flex fue diseñado originalmente por Macromedia como una
aplicación basada en servidor.
– en las primeras versiones, un compilador de MXML/ActionScript se incluía
en una aplicación Web basada en Java alojada en el Java Enterprise Edition
(JEE)
– el código de la aplicación se almacenaba en el servidor.
– Cuando un usuario hacía una petición al servidor, la aplicación era
compilada “on request” y entragada al navegador del usuario (a través de
Flash Player)
• Esta complicación basada en el servidor y el modelo de despliegue
está todavía disponible en un componente llamado Flex Web Tier
Compiler.
– La versión de compilador de esta componente no siempre es la misma
 Aplicaciones Flex
• Una aplicación Flex se construye como una presentación basada
en Flash que creamos con Flex 4 SDK.
• Lo habitual es crear las aplicaciones Flex usando el entorno de
desarrollo integrado Flash Builder 4 (llamado formalmente Flex
Builder).
• Flash Catalyst es el puente que permite “unir” a los
desarrolladores que usan Flash Builder y los diseñadores que usan
PhotoShop o Illustrator para crear diseños.

• Una de las principales diferencias entre Flex SDK y Flash Builder es

que el SDK es free como la mayoría de los open source, mientras
que Flash Builder está disponible a través de licencia.
 Flex SDK
• Flex SDK están incluído con Flash Builder 4 pero
podemos descargar el SDK más reciente desde
• http://opensource.adobe.com/wiki/
display/flexsdk/Flex+SDK

• algunos componentes no están en el open source como

– componentes de gráficos
– ADG
– Olap Data Grid
Lenguajes de programación Flex
• Las aplicaciones Flex se escriben usando tres
lenguajes de programación
– ActionScript 3
– MXML
– FXG (Flash XML Graphics)
 ActionScript 3
• La versión más reciente de AS.
• Se trata de un lenguaje orientado a objetos
• basado en la especificación ECMAScript 4 Edición
• Incluye la mayoría de los elementos de los lenguajes
orientados a objetos
– definición de clases
– estructura de paquetes y clases
– herencia de clases
– declaración fuerte de variables
– ….
 MXML
• Es un lenguaje de etiquetas (marcas) basado
en XML
• Se usa para definir la aplicación Flex y algunos
de sus componentes
• La mayoría de los elementos MXML se
corresponden con clases AS3 que se pueden
encontrar en la biblioteca de clases Flex
 FXG
• Es un nuevo lenguaje basado en XML que permite
representar objetos gráficos como etiquetas XML.
• El nuevo Adobe Flash Catalyst genera proyectos que
describen aplicaciones funcionales y sus presentaciones
gráficas combinando MXML, FXG y AS.
• Podemos desarrollar esos proyectos en Flash Builder 4.
– MXML incluye etiquetas de dibujo de gráficos vectoriales que
permiten declarar objetos gráficos de bajo nivel en las
aplicaciones Flex.
– FXG permite utilizar otras etiquetas para gráficos más avanzados
y nos permiten tratar los ficheros FXG como imágenes.
• FXG (Flash XML Graphics) ha sido creado por Adobe como
un lenguaje que representa objetos gráficos en las
aplicaciones Flex.
• Sus capacidades tienen que ver con el modelo de
renderización de Adobe Flash Player 10.
– son muy similares a SVG (Scalable Vector Graphics), otro lenguaje
XML que representa gráficos.
• Algunos productos de Adobe Creative Suite permite
exportar gráficos como FXG
– Photoshop, Illustrator, y Fireworks
 Compilación de MXML
• Al compilar al aplicación Flex, el código MXML
se reescribe en AS3.
• MXML es un lenguaje conveniente para AS3
que hace más fácil y rápido escribir
aplicaciones
 MXML y AS3
• Podemos usar MXML y AS de manera
intercambiable en varias situaciones.
• MXML se usa habitualmente para declarar
componentes visuales, pero es una elección
de cada desarrollador.
 etiqueta Label
• <s:Label id=”myMXMLText” text=”hola”
• fontSize=”18” fontWeight=”bold”/>

• el control Label es un nuevo componente de la

colección llamada Spark
– esta etiqueta y RichText y RichEditableText son
componentes diseñados para sustituir los Mx label
y los controles de texto
 namespace s:
• El prefijo s: del espacio de nombres XML hace
referencia a nuevo espacio de nombres Spark
que se ha declarado para las nuevas
aplicaciones Flex
• xmlns:s=”library://ns.adobe.com/flex/spark”
 Declarar objetos en AS3
• Podemos instanciar y añadir Label y otros
controles usando AS3.
– debemos primero, declarar el objeto como una
variable.
– instanciamos el objeto usando el método
constructor de clase y establecemos sus
propiedades y estilos.
– añadimos el objeto al contenedor de la aplicación
para hacerlo visible.
 Ejemplo código AS3
• Podemos crear una etiqueta igual que antes con
MXML pero usando AS3.
• La diferencia en la cantidad de código necesario
y su complejidad de algunas tareas son las
razones por las que existe MXML.
• MXML puede reducir significativamente la
cantidad de código en la aplicación sin
comprometer sus características o
comportamiento.
 Código AS3
• import mx.events.FlexEvent;
• import spark.components.Label;
• protected var etiqueta1:Label;
• protected function creationCompleteHandler(event:FlexEvent):void
• {
• etiqueta1 = new Label();
• etiqueta1.text = “Hello from ActionScript”;
• etiqueta1.setStyle(“fontSize”, 18);
• etiqueta1.setStyle(“fontWeight”, “bold”);
• this.contentGroup.addElement(etiqueta1);
• }
 Aclaraciones
• El contenedor principal en Flex 4 <s:Application> coloca los
objetos hijos (child) en un Group
– se puede apuntar a estos objetos dentro del contenedor con la
propiedad contentGroup
• El nuevo contenedor Application tb es un miembro de la
colección de componentes Spark.
• El prefijo this en el método de llamada
this.contentGroup.addElement() se refiere a la aplicación
en sí misma.
• Si el código AS está en la misma clase AS, this se referirá a
la instancia actual de ese componente o clase.
Relaciones
 Desarrollo Flex y Flash
• La línea que separa Flex y Flash ha cambiado a lo largo de los años.
• Flex se refería en un principio a un producto completo:
– biblioteca de clases
– compiladores
– entorno de servidor
• El original Flex server se llama ahora LiveCycle Data Services y las
herramientas de desarrollo conocidas como flex Builder se llaman
ahora Flash Builder
– porque se usan para crear y editar código AS tanto para desarrolladores
tanto de Flex como de Flash.
• Se suele usar el término Flash para referirnos a Flash Professional
y Flex para referirnos a Flex 4
OOP en Flex
 Flex como OOP
• OOP (object-oriented programming) usa las
ténicas de
– modularidad
– encapsulación
– herencia
– polimorfismo
 Modularidad
• Una aplicación podría construirse en pequeñas piezas o
módulos.
• Un ejemplo podría ser una aplicación que recoge datos de
un usuario que podría separarse en módulos, cada una
para un propósito particular.
• El código que presenta el formulario de entrada de datos y
el código que procesa esos datos tras ser recogidos,
podrían estar en módulos de códigos separados.
• Así se permiten aplicaciones robustas en donde los
cambios en un módulo no afecta al comportamiento de
otros módulos.
 aplicacionSinmodularidad
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var myData:ArrayCollection;
//...código AS adicional...//
]]>
</fx:Script>
<s:VGroup x="67" y="39">
<mx:DataGrid dataProvider="{myData}">
<mx:columns>
<mx:DataGridColumn/>
<mx:DataGridColumn/>
<mx:DataGridColumn/>
</mx:columns>
</mx:DataGrid>
<mx:Form>
<mx:FormItem label="Nombre:">
<s:TextInput id="fnameInput"/>
</mx:FormItem>
<mx:FormItem label="Apellidos:">
<s:TextInput id="lnameInput"/>
</mx:FormItem>
<mx:FormItem label="Dirección:">
<s:TextInput id="addressInput"/>
</mx:FormItem>
</mx:Form>
</s:VGroup>
</s:Application>
• Toda la funcionalidad de la aplicación está mezclada:
– modelo de datos
– recolección de datos
– la lógica de scripting

• Aunque la aplicación podría funcionar, hacer

cambios podría introducir errores difíciles de
resolver, especialmente para un equipo de varios
desarrolladores.
 aplicación Modular
<?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:valueObjects=”valueObjects.*”
xmlns:views=”views.*”
xmlns:forms=”forms.*”>
<fx:Script source=”scriptFunctions.as”/>
<valueObjects:AValueObject id=”vo”/>
<views:ADataGrid id=”grid”/>
<forms:AForm id=”form”/>
</s:Application>
 Encapsulación
• Un objeto puede ocultarse de
laimplementación del resto de la aplicación y
podría mostrar su funcionalidad a través de
miembros documentados del objeto.
• la documentación de los miembros del objeto
se conocen como application programming
interface (API) de la clase.
• En la biblioteca de clases de Flex se incluyen:

– Constants. Propiedades cuyos valores nunca cambian.

– Events. Mensajes que el objeto puede enviar al resto de la aplicación para
compartir info sobre las acciones del usuario y los datos que quiere
compartir.
– Methods. Funciones que se pueden llamar para ejecutar ciertas acciones del
objeto
– Properties. Datos almacenados dentro del objeto.
– Skin Parts. Una parte de componentes Spark que muestran una parte del
componente y pueden ser modificados en un skin personalizado.
– Skin States. Estado de vista que un componente lanza para display, ocultarse
o cambiar en su presentación visual.
– Styles. caraterísticas visuales de un objeto que determinan su apariencia.
• La encapsulación en Flex está completamente
implementada en AS3.
• Cada miembro que defines en una clase
puede ser marcado usando un modificador de
acceso para indicar si sus métodos o
propiedades son public, private, protected, o
internal.
– un método public permite que cualquier parte de
la aplicación ejecute su funcionalidad.
 Ejemplo de encapsulación
• tenemos una clase que sabe cómo mostrar un
video en Flash Player y permite al
desarrollador start, stop, pause el video y
controlar el volumen de audio.
public class VideoPlayer()
{
public function VideoPlayer(videoFile:String):void
{ ... llama a librerías de video para cargar ... }
public function start():void
{ ... llama a librerías de video para start... }
public function stop():void
{ ... llama a librerías de video para stop... }
public function setVolume(volume:int):void
{ ... llama a librerías de video para reset el volumen ... }
}
• la aplicación que instancia y usa la clase no
necesita conocer los detalles y sólo debe
conocer cómo llamar a los métodos.
• var myVideoPlayer:VideoPlayer = new
VideoPlayer(“video1.flv”);
• myVideoPlayer.start();
• myVideoPlayer.setVolume(3);
• la clase VideoPlayer encapsula el
comportamiento complejo, ocultando los
detalles de la implementanción al resto de la
aplicación.
 Herencia
• Se refiere a la capacidad de alguna clase para
extender a otras y heredar sus propiedades y
métodos.
• Un modelo de herencia permite definir clases
con ciertos miembros (propiedades y
métodos) y entonces compartir esos
miembros con otras clases que las extienden.
• En una relación de herencia
– clase que ya tiene las capacidades que queremos
heredar se llamada superclass, base class, or parent
class.
– la clase que extiende la clase padre se llama subclass,
derived class, o child class.

• Unified Modeling Language (UML) es un lenguaje

visual estandarizado para describir relaciones y
estructuras visuales.
Diagrama UML que describe relación entre
clase padre e hija

Animal

Gato
• En Flex, el modelo de herencia de AS permite
crear versiones extendidas de los
componentes incluidos en la biblioteca de
clases Flex sin modificar los originales.
 Polimorfismo
• Podemos escribir métodos que acepten argumentos o
parámetros, y otros tipos de datos como instancias de una
superclase, entonces podemos también pasar una
instancia de una subclase al mismo método.
• Como todas las subclases extienden de una superclase y
comparten métodos, propiedades y otros objetos, el
método que espera una instancia de una superclase, tb
acepta instancias de una subclase.
• Tb se puede usar para modelos de programación conocidos
como interface.
– clase abstracta que puede ser directamente instanciada.
Diagrama UML que muestra polimorfismo

public interface Animal

Animal (interface) {
mover public function dormir()
comer {}
dormir }

una clase que

public class Gato implements implementa
Animal un interfaz
Gato { puede añadir
mover public function dormir() métodos que
comer { código para hacer dormir... } el interfaz no
dormir public function saltar() requiere
{ ... codigo para hacer saltar... }
}
• Flex soporta polimorfismo
– a través de las relaciones entre superclases y
subclases
– a través de la creación e implementanción de
interfaces en AS3
Flash Player
• Las aplicaciones Flex se ejecutan en tiempo de
ejecución con Adobe Flash Player o by Adobe AIR.
• En cualquier caso, las aplicaicones son compiladas en
un fichero con formato SWF.

– Cuando la aplicación Flex se despliega a través de la Web,

se descarga desde el servidor Web en tiempo de ejecución
como resultado de una petición del navegador Web.
– El navegador arranca entonces Adobe Flash Player y
arranca la aplicación.
• Adobe AIR incluye Flash Player como uno de sus
componentes críticos.
• Otros componentes incluyen una navegador Web para
ejecutar HTML; CSS y JavaScript y APIs para acceder a
ficheros locales.
• La versión de Flash Player que se incluye con AIR es la
misma que corre en el navegador Web como un plugin o
control ActiveX.
– cualquier funcionalidad incluída en una aplicación Flex debería
funcionar igual tanto si se despliega en Web o en escritorio.
Flash Player en Web y en AIR
Versiones de Flash Player
 Flex y tecnología movil
• El Flex Mobile SDK permite crear aplicaciones para
ser desplegadas en móviles.
http://labs.adobe.com/technologies/flex/mobile