Este documento describe cómo incrementar la usabilidad y la interactividad con el usuario mediante Flex. Flex es una plataforma de desarrollo de Adobe para crear aplicaciones ricas basadas en Flash. Se puede integrar Flex con Flash y utilizar ambas tecnologías combinadas. También explica cómo comunicar aplicaciones Flex con servicios web y remotos utilizando Apache CXF, BlazeDS y Spring.

1. Incrementando la usabilidad y la interactividad con el usuario

3. ¿Qué es flex?
Plataforma de desarrollo de Adobe
especializada en la creación de
aplicaciones ricas basadas en su
motor flash.
Usa un estilo de código por un lado
usado xml y etiquetas igual que html
(denominados archivos MXML) y por
otro lado el uso de ActionScript Depende de
similar a java que ya venia usándose
en productos flash.

4. Flex y Flash
Flex y flash generan el mismo
contenido en esencia:
 El motor de flash detecta por
igual:
 Cuando se usa flex 3
 Cuando se usa flash CS3
 Cuando combinas ambas
tecnologias.
Combinando el talento de flash y la
metodolofia de flex se puede crear :
 La mejor experiencia visual y
usabilidad.
 Integracion de funcionalidad y
data de negocio.
 Usar “arte” flash dentro de
aplicaciones flex.
 Comunicación entre aplicaciones
hechas en flash con flex.

5. Plataforma Flex versión 3
Flex SDK 3 (FREE) Flex Builder 3
MXML and ActionScript 3.0 Visual Layout
Flex Framework and Class Library Code Hinting
Command-line Compiler & Debugger
Debugging
Flex Skinning and Styling
Extensible Charting Components
Charting
Flex Data Services 3
Message Service
Data Management Service
RPC Services

6. Como funciona flex
MXML y ActionScript Componentes flex

7. Como funciona flex
Flex Builder IDE Browser
Flash Player
Flex SDK
MXML ActionScript
.swf
Flex Class Library
Data Data
Web Server
Compilar
XML/HTTP Flex Data Services 2
REST
SOAP Web Services
J2EE Application Server
.swf
Aplicaciones e infraestructura existente

8. Flex Builder 3
Es un IDE basado en eclipse para
desarrollar aplicaciones basadas en
flex sdk, flash player 9, actionscript
3, livecycle DataServices y flex
charting.
Actualmente se encuentra
disponible para windows, mac OS X
y linux.
Puedes instalar el flex builder o un
plugin para un entorno de eclipse ya
existente.

10. IShares
http://exploringetfs.com/

11. Google Financial
http://www.brightpointinc.com/Gallery/GoogleFinance.asp

12. Degrafa Map demo
http://www.degrafa.org/source/DegrafaMapSample/DegrafaMapDemo.html

13. Ilog Elixir demo : Organization Chart
http://visudemos.ilog.com/webdemos/orgchart/orgchart.html

14. Empresas que ofrecen consultoria en flex

15. Librerias Flex
BirdEye

16. Frameworks Flex
• Usa patron mvc
Cairgormn • Uso de commands y eventos
• Framework oficial de Adobe
• Orientado plenamente a eventos
• “Inyecta” las referencias a la GUI
• Usa patron mvc con 5 capas.
• Usado para varios lenguajes no solo
AS3

18. Tipos de comunicación con flex
Incrustar parametros (FlashVars) directamente en el HTML que
carga el SWF
HTTPService: Usado para carga de data desde una URL sobre
HTTP. Mayormente usado para carga de archivos y de
servicios web REST.
WebService : Clase que usa un WSDL para la llamada de
metodos remotos.
RemoteObject : Usado para llamadas flash remoting. Similar a
los webservices pero la comunicación es sobre el protocolo
AMF3 (mas compacto y rapido para parsear data xml).
Flex Distributed Messaging : Incluido solo en LiveCyle para uso
de mensajeria (JMS)

19. Usando Spring
Para los ejemplos practicos Apache CXF
usaremos solo 2 de los 5 tipos de
comunicación :
• Servicios web : Usando el
framework Apache CXF (basado en
Xfire).
•Remote Object : Usando BlazeDS

21. Sobre el uso de WebServices en Flex
• La clase WebService permite
controlar tanto el resultado como el
error al momento de llamar a un
metodo de un servicio web.
•Los parametros son definidos en un
Array al momento de enviarlos al
metodo.
•Si el servicio web no se encuentra
en el mismo dominio de la aplicación
web (colgada previamente en un
servidor) no podra conectarse. Para
eso es necesario el uso del archivo
crossdomain.xml en el root del
dominio del servicio web.

22. Ejemplo de un crossdomain.xml

23. Software a usar
Para nuestra demo usaremos
•Apache CXF 2.2.1 ( es uno de los mas
usados en java junto con Axis, tiene
como predecesor a Xfire).
•JDK 1.5
•FlexBuilder 3
•Eclipse 3.4
•Spring 2.0 (incluido en las librerias de
CXF)
•Tomcat 6.0
Esta demo mostrara un hola mundo
con nuestro nombre enviado como
parametro

24. Integrando CXF con Spring
Para integrar CXF con spring
necesitamos :
•Las dependencias usadas por CXF.
Son aproximadamente 25 jars
•Escribir nuestros servicios usando
Anotaciones ( necesario java 1.5).
•Declarar dichos servicios como
beans en spring.
•Declarar el servlet de CXF usado
para la creacion y publicacion del
WSDL a partir del codigo java.

25. Desarrollando los servicios en Flex
Para la parte Flex se desarrollara :
• Crear nuestro proyecto y editar el
archivo mxml por defecto.
•Crear un panel y una caja de texto y
un boton para realizar la llamada.
•Crear una instancia de la clase
WebService que llame a nuestro
metodo creado en el servicio java.
•Crear el metodo que recibira el
resultado en el caso de éxito.

26. Poniendo todo en marcha!

28. Sobre el uso de RemoteObjects en Flex
•Transmite y recibe data binaria por •Los servicios que ofrecen soporte a
medio del protocolo AMF (Action AMF son
Message Format) , propietario de
Adobe liberado recientemente. • Adobe LiveCycle Data
•Este protocolo permite eliminar la
Services (version de
necesidad de parsear informacion pago)
XML transformando los objetos • Blaze Data Services
directamente a objetos AS. (version libre)
•El protocolo AMF es mas rapido y
• Adobe ColdFusion
tiene mejor rendimiento que usar
HTTP y webservices. • AMFPHP
•Para obtener la direccion del punto • SabreAMF
de acceso para el servidor , la clase
remoteobject usa canales en este
• Midnight Coders
caso un canal AMFChannel. WebORB (para .Net)

29. Que es Blaze DS ?
Es un set de servicios que ofrece
conectividad a protocolos AMF3.
BlazeDS provee los siguientes
servicios:
• Remoting Service (uso de
objetos remotos)
• Message Service. (uso de
mensajeria tipo JMS)
• Proxy Service. (permite
acceder a servicios que se
encuentran en distintos
dominios sin usar
crossdomain.xml)

30. Como integramos BlazeDS con Spring?
Como veiamos, si Blaze puede
acceder a objetos remotos, y Spring
Beans puede generar objetos java,
no seria listo para usar los objetos
spring como objetos remotos? Claro
la idea es esa pero es necesario
configuracion de por medio.
Por defecto los objetos accedidos
por Flex son objetos remotos
creados por BlazeDS .
La clave de usar la integracion es de
dejar que Spring se encarge de
instanciar los objetos y que BlazeDS
solo se encarge de publicarlos.
Ejemplo de una arquitectura
usando BlazeDS , Flex y Spring

31. Software a usar
Para nuestra demo usaremos
•Blaze DS (WAR con librerias y achivos
necesarios)
•JDK 1.5
•FlexBuilder 3
•Eclipse 3.4
•Tomcat 6.0
•Spring 2.5 (spring.jar y spring-
webmvc.)
•Flex-Spring Integration ( 1.0.0M2)
Esta demo se mostrara una lista de
alumnos y el profesor encargado para
una clase.

32. Integrando BlazeDS con Spring
Para integrar BlazeDS con spring
necesitamos hacer:
•Crear los archivos remoting-
config.xml y services-config.xml (por
defecto creadas en el war de Blaze)
•Crearemos 2 archivos xml
(appContext y webAppContext) para
manejar los beans de spring y blaze.
•Registrar los beans en dichos
archivos. Los servicios java son instanciados en
•Modificar el web.xml para que appContext.xml para luego ser
publicados por WebAppContext.xml
responda a las peticiones de spring.

33. Integrando BlazeDS con Spring
Luego de crear los archivos de
configuracion creamos 3 clases : una
que nos devolvera los alumnos y el
profesor designado y las otros 2
seran las clases Profesor y Alumno.
Como ven en la figura, los archivos
que se encuentran en la carpeta flex
estan relacionado a cada tipo de
servicio : messaging, proxy ,
remoting y services ; este ultimo se
encarga de manejar los 3 anteriores.

34. El resultado ?

36. Cuales son las ventajas de usar spring con flex?
Entre las principales ventajas
tenemos :
•Usar la arquitectura que nos ofrece
Spring y sus framework relacionados
para crear soluciones ricas ,
escalables y solidas.
•Ofrecer al usuario una experiencia
nueva en terminos de usabilidad,
flexibilidad e interaccion.
•Ofrecer una solucion completa y al
mismo tiempo modularizable para
ser integrado con otros sistemas.
•Transparencia al momento de
publicar nuestros servicios para flex.

37. Referencias
Libros:
•Flex in Action (2009)
•The Essential Guide for Flex 3 (2008)
•A Beginner´s guide Flex 3 (2008)
Links
•http://blog.flexexamples.com/
•http://merhl.com/
•http://ntt.cc/
•http://www.dehats.com/drupal/
•http://coenraets.org/blog/
Mi blog
•http://blog.govisualperu.com/
Twitter :
@govisualperu (RIA, Ajax, Flex, Grails, etc)
Consultoria? Desarrollo? Cursos Flex, AIR , RIA?
http://govisualperu.com/