Incrementando la usabilidad y la interactividad con el usuario
¿Qué es flex?
Plataforma de desarrollo de Adobe
especializada en la creación de
aplicaciones ricas basadas en su
motor fla...
Flex y Flash
Flex y flash generan el mismo
contenido en esencia:
       El motor de flash detecta por
        igual:
    ...
Plataforma Flex versión 3
   Flex SDK 3 (FREE)                                    Flex Builder 3
    MXML and ActionScript...
Como funciona flex
     MXML y ActionScript   Componentes flex
Como funciona flex
 Flex Builder IDE                            Browser
                                          Flash Pl...
Flex Builder 3
Es un IDE basado en eclipse para
desarrollar aplicaciones basadas en
flex sdk, flash player 9, actionscript...
IShares




          http://exploringetfs.com/
Google Financial




      http://www.brightpointinc.com/Gallery/GoogleFinance.asp
Degrafa Map demo




  http://www.degrafa.org/source/DegrafaMapSample/DegrafaMapDemo.html
Ilog Elixir demo : Organization Chart




   http://visudemos.ilog.com/webdemos/orgchart/orgchart.html
Empresas que ofrecen consultoria en flex
Librerias Flex




  BirdEye
Frameworks Flex

              • Usa patron mvc
  Cairgormn   • Uso de commands y eventos
              • Framework oficia...
Tipos de comunicación con flex
Incrustar parametros (FlashVars) directamente en el HTML que
carga el SWF


     HTTPServic...
Usando Spring
Para los ejemplos practicos         Apache CXF
usaremos solo 2 de los 5 tipos de
comunicación :


• Servicio...
Sobre el uso de WebServices en Flex
• La clase WebService permite
controlar tanto el resultado como el
error al momento de...
Ejemplo de un crossdomain.xml
Software a usar
Para nuestra demo usaremos

•Apache CXF 2.2.1 ( es uno de los mas
usados en java junto con Axis, tiene
com...
Integrando CXF con Spring
Para integrar CXF con spring
necesitamos :


•Las dependencias usadas por CXF.
Son aproximadamen...
Desarrollando los servicios en Flex
Para la parte Flex se desarrollara :

• Crear nuestro proyecto y editar el
archivo mxm...
Poniendo todo en marcha!
Sobre el uso de RemoteObjects en Flex
•Transmite y recibe data binaria por    •Los servicios que ofrecen soporte a
medio d...
Que es Blaze DS ?
Es un set de servicios que ofrece
conectividad a protocolos AMF3.
BlazeDS provee los siguientes
servicio...
Como integramos BlazeDS con Spring?
Como veiamos, si Blaze puede
acceder a objetos remotos, y Spring
Beans puede generar o...
Software a usar
Para nuestra demo usaremos

•Blaze DS (WAR con librerias y achivos
necesarios)
•JDK 1.5
•FlexBuilder 3
•Ec...
Integrando BlazeDS con Spring
Para integrar BlazeDS con spring
necesitamos hacer:


•Crear los archivos remoting-
config.x...
Integrando BlazeDS con Spring
Luego de crear los archivos de
configuracion creamos 3 clases : una
que nos devolvera los al...
El resultado ?
Cuales son las ventajas de usar spring con flex?
Entre las principales ventajas
tenemos :
•Usar la arquitectura que nos of...
Referencias
Libros:
•Flex in Action (2009)
•The Essential Guide for Flex 3 (2008)
•A Beginner´s guide Flex 3 (2008)


Link...
Integrando Flex  Y Spring
Integrando Flex  Y Spring
Integrando Flex  Y Spring
Integrando Flex  Y Spring
Integrando Flex  Y Spring
Integrando Flex  Y Spring
Integrando Flex  Y Spring
Upcoming SlideShare
Loading in …5
×

Integrando Flex Y Spring

7,335
-1

Published on

Presentacion en SpringLive2009 en el aula magna de la UNMSM. Comenten si tienen alguna pregunta o sugerencia

Codigo fuente de las demos : http://blog.govisualperu.com

Published in: Technology

Integrando Flex Y Spring

  1. 1. Incrementando la usabilidad y la interactividad con el usuario
  2. 2. ¿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.
  3. 3. 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.
  4. 4. 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
  5. 5. Como funciona flex MXML y ActionScript Componentes flex
  6. 6. 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
  7. 7. 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.
  8. 8. IShares http://exploringetfs.com/
  9. 9. Google Financial http://www.brightpointinc.com/Gallery/GoogleFinance.asp
  10. 10. Degrafa Map demo http://www.degrafa.org/source/DegrafaMapSample/DegrafaMapDemo.html
  11. 11. Ilog Elixir demo : Organization Chart http://visudemos.ilog.com/webdemos/orgchart/orgchart.html
  12. 12. Empresas que ofrecen consultoria en flex
  13. 13. Librerias Flex BirdEye
  14. 14. 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
  15. 15. 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)
  16. 16. 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
  17. 17. 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.
  18. 18. Ejemplo de un crossdomain.xml
  19. 19. 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
  20. 20. 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.
  21. 21. 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.
  22. 22. Poniendo todo en marcha!
  23. 23. 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)
  24. 24. 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)
  25. 25. 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
  26. 26. 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.
  27. 27. 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.
  28. 28. 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.
  29. 29. El resultado ?
  30. 30. 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.
  31. 31. 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/

×