martes, 30 de marzo de 2010

Flex y JAVA con BlazeDS

Uno de los grandes enemigos de Flex, es su “imposibilidad” para acceder directamente a las bases de datos o al disco duro de usuario cuando se utiliza en entornos web (SWF), por lo que siempre es necesario utilizar lenguajes diferentes del lado del servidor, lenguajes como JSP, PHP, ASP, ColdFusion entre otros, y en la mayoría de las oportunidades se hace por medio de archivos XML, que para iniciar son muy buenos, pero cuando se manejan grandes volúmenes de datos, es necesario manejar herramientas más poderosas, por eso es que vamos a trabajar con BlazeDS, como puente entre Flex y JAVA.

imagen Flex y JAVA



--

Antes de empezar, tenemos que definir que es BlazeDS, y porque debemos trabajar con él.

BlazeDS: es un servidor remoto, hecho con JAVA para la interacción entre los lenguajes ActionScript 3.0 y JAVA, sirve como un puente de comunicación que se encarga de “traducir” de un lenguaje a otro, para que la interacción entre lenguajes y tecnologías sea transparente y no sea necesario hacer trucos raros a la hora de enviar información de una lado para otro.

¿Cómo empiezo? Es fácil (no me pareció tan fácil al comienzo, sufrimos mucho con unos aprendices para lograrlo, pero esto es para que no le pase a los demás…muchos soldados murieron en la guerra solo para que TU, si TU puedas hacer las cosas sin dificultades, lo menos que puedes hacer es al final de esto dejar tus comentarios!... ese fue el último deseo de los caídos en guerra), primero que todo debes ir a la página de proyectos de código abierto de Adobe, donde encontraras información del SDK de Flex, del proyecto BlazeDS y el proyecto Tamarin, que es un proyecto en conjunto con Mozilla Foundation para el manejo del estándar ECMAScript para el lenguaje ActionScript 3.

Lógicamente debemos ir al link de BlazeDS, donde se encuentra una leve descripción de la herramienta, el link de descarga de los archivos ejecutables y del código fuente del proyecto. Después de presionar donde dice Download BlazeDS now, iremos a la página de detalles de la descarga, donde se explican los términos de uso y nuevas posibilidades para descargar buscamos la primera opción (Release Builds), esto nos lleva a una nueva página donde debemos descargar el BlazeDS Turnkey.

Es un archivo .ZIP que contiene una serie de carpetas y archivos, .WAR, estos últimos archivos, son aplicaciones que nos permiten ver ejemplos de prueba, una consola para el monitoreo de nuestros proyectos y el BlazeDS que cuenta con el código que debemos utilizar para crear los proyectos, sin embargo no vamos a utilizar estos archivos.

Antes de empezar recomiendo crear una copia de seguridad del paquete que descargamos, ya que por efecto de las pruebas varios de esos archivos se pueden dañar.

Después de hacer la copia de seguridad vamos a la carpeta Tomcat, que contiene las carpetas habituales dentro de un Servidor Tomcat Instalado, la idea de este paquete, es instalarlo ya que tiene incorporadas todas las herramientas de BlazeDS sin embargo en ocasiones esto resulta muy dispendioso y genera muchos problemas, así que no vamos a utilizar este tomcat sino que vamos a utilizar uno instalado con el instalador del tomcat que se puede encontrar en su sitio web.

Nota: a la hora de instalar el apache tomcat, recuerda poner usuario y contraseña, preferiblemente admin, admin, ya que es la configuración más utilizada.

Dentro de la carpeta Tomcat que estábamos viendo, vamos a ir a esta ruta: Tomcat/webapps/samples/ en ella encontraremos todos los ejemplos que vienen con este paquete y dos carpetas muy comunes de los proyectos WEB de java, encontramos la carpeta WEB-INF y META-INF, ahora copiamos la carpeta WEB-INF y la pegamos en una nueva carpeta, que puede estar en cualquier sitio dentro de nuestro sistema de archivos, recomiendo poner una carpeta llamada con el nombre de nuestro proyecto, luego una nueva carpeta con el mismo nombre, que es donde vamos a almacenar el código del proyecto y dentro de esa carpeta ponemos la carpeta WEB-INF que acabamos de copiar.

En este caso voy a trabajar con esta ruta: D:/TestBlazeDS/TestBlazeDS

Para la carpeta WEB-INF esta: D:/TestBlazeDS/TestBlazeDS/WEB-INF

Además de eso debemos crear una carpeta para las páginas así: D:/TestBlazeDS/TestBlazeDS/WebPages

Ahora abrimos el IDE Netbeans, también es posible hacerlo con Eclipse o el IDE de desarrollo que utilicen para JAVA, primero que todo debemos crear un nuevo proyecto de JAVA de esta manera:

En Netbeans, Proyecto Nuevo, en categorías seleccionamos JAVA Web y en los tipos de proyectos, ponemos la opción Aplicación Web con código existente (Web Application with existing sources), siguiente.

En la siguiente ventana: Nombre y Ubicación, dejamos los valores de este modo:

Location: Se busca la carpeta que creamos dentro del disco D en mi caso

D:\ TestBlazeDS\ TestBlazeDS

Project name: Es el nombre de nuestro proyecto, podemos poner cualquier nombre, sin embargo es preferible manejar el nombre de la carpeta.

TestBlazeDS

Project folder: Es la misma ubicación del proyecto.

D:\ TestBlazeDS\ TestBlazeDS

Presionamos siguiente, ahora se deben poner los valores del nuevo servidor.

La última ventana de configuración del proyecto es quizás la más importante, debemos dejarla de esta manera:

Web Pages Folder: D:/TestBlazeDS/TestBlazeDS/WebPages

WEB-INF content: D:/TestBlazeDS/TestBlazeDS/WebPages/WEB-INF – Se debe especificar la carpeta WEB-INF que habíamos copiado hace un rato.

Libraries Folder: D:/TestBlazeDS/TestBlazeDS/WebPages/WEB-INF/lib – Se especifica la ubicación de las librerías, que se encuentran dentro de la carpeta WEB-INF.

Source Package Folders: D:/TestBlazeDS/TestBlazeDS/WebPages/WEB-INF/src -- Se indica la ubicación del código de nuestro proyecto, debe ser la carpeta src.

Presionamos terminar y ahora creamos un nuevo paquete llamado Test y una clase de prueba donde debemos crear un método simple que retorno un valor sin recibir parámetros y otro que reciba parámetros y retorne un dato.

clase Prueba con métodos

Tenemos dos métodos, el primero retorna un String y el segundo recibe un par de enteros y devuelve la suma de los dos.

Al tener los métodos listos, ahora debemos registrar la clase en un archivo de configuración. El archivo se encuentra en WEB-INF/flex/remoting-config.xml, al abrirlo debemos ir al final del archivo, antes del último nodo y poner esto:

Nodos destination

Nota: No olviden poner el atributo id para el primer nodo.

Finalmente en el archivo web.xml que se encuentra dentro de la carpeta Configuration Files, debemos poner esto al final, y antes del último nodo:

Configuración de web.xml

Limpiamos y construimos el proyecto y lo cargamos en el Tomcat, por medio del archivo .WAR que se crea cuando seleccionamos la opción Clean And Build, este es todo el proyecto por parte de JAVA.

Ahora, abrimos Flash Builder 4 (con respecto a Flex Builder 3 no hay muchos cambios) y creamos un nuevo proyecto WEB y en la opción de tecnologías del servidor, seleccionamos J2EE, Use remote object Access service y seleccionamos BlazeDS.

Presionamos siguiente y ahora debemos configurar la información del servidor de esta manera:

En Root Folder: C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\TestBlazeDS

En Root URL: http://localhost:8080/TestBlazeDS/

Context Root:/TestBlazeDS/

Cuando hacemos esta configuración, debemos presionar el botón Validate Configuration, que evalúa si la información es adecuada y si se puede hacer la conexión, en la parte inferior el campo Output Folder, debe quedar asi:

C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\TestBlazeDS\TestBlazeF-debug

Presionamos finalizar ya que no vamos a añadir librerias al proyecto y creamos un formulario de esta manera:


formulario Flash Builderr 4

RemoteObject, es el encargado de generar la conexión entre JAVA y Flex, y el atributo destination debe llamarse igual a como está en la configuración de JAVA. finalmente agregamos el código:


El método init() se llama desde la propiedad applicationComplete de la etiqueta Application, el método saludar() es llamado por el evento click del botón saludar y el método sumar() es llamado por el botón sumar.

Esto es TODO, realmente es solo un poco comparado con todo lo que permite hacer BlazeDS, en un próximo tutorial mostraré como enviar objetos entre clases, y manejar vectores de JAVA como proveedores de datos para controles de Flex.

Espero que les sirva, y dejen sus comentarios!
------

34 comentarios:

  1. Muy bien compañero pero ¿para que es la adicion del ultimo nodo al XML?

    ResponderEliminar
  2. se usa para dar permisos a la aplicación de Flex, para que acceda al servidor, esta es una autenticación básica, por lo que no se pide nada.

    ResponderEliminar
  3. hola que tal saludos buen tutorial, pero podrias hacerlo sin utilizar netbeans estos es usando solamente el Flex Builder 3 con el WTP para java, es mas sencillo yo lo he echo solo que no me copia los valores en el servidor algo debo estar haciendo mal

    ResponderEliminar
  4. Shadonwk, dentro de un tiempo pondré un tutorial para crear proyectos desde eclipse (para java y para Flex), sin embargo por la manera como trabajo con mis aprendices debía hacerlo así por ahora.

    Un saludo

    ResponderEliminar
  5. Listo compa lo logre si conecto todo bien. Gracias por la ayuda y vamos a hacer de Flex un buen lenguaje para el desarrollo.


    @FlexJRL <-Twitter :)

    ResponderEliminar
  6. Que tal Juan S. sabes he estado revisando mucho la conexion de Flex-Java via BlazeDS y esta genial de echo ya logrue integra tambien postgresSQL, solo tengo un detalle, cada vez que hago una modificación a mi codigo java en este caso desde NetBeans tengo que:

    1.- Generar el war.
    2.- Quitar el war actual del tomcat
    3.- Cargar el nuevo war al tomcat

    o hay una manera mas sencilla de hacerlo??

    Saludos

    ResponderEliminar
  7. La alternativa, sería hacer que el proyecto de flex no se ejecutara en el Servidor, sino en el proyecto no compilado de JAVA, de esa manera se podría ejecutar el proyecto directamente desde el IDE de desarrollo de JAVA, sin embargo es mejor ejecutarlo en el servidor.

    ResponderEliminar
  8. si yo tambien pense en esa alternativa sin embargo se me hace demasiado engorroso, bueno ahora con lo que se de java dificilmente cometo errores lo que me va ayudar bastante, sin embargo debe haber una forma!

    ResponderEliminar
  9. Shadonwk una forma seria configurando el NetBeans para que el .WAR lo genere diractamente en el servidor

    ResponderEliminar
  10. :o y como puedo hacer eso Fabia serias tan amable de compartir la respuesta?

    ResponderEliminar
  11. (...y manejar vectores de JAVA como proveedores de datos para controles de Flex...)

    gracias, mira estoy trabajando en una aplicación que usa exactamente vectores mas precisamente ArrayList, pero cada vez que accedo a ellos desde la aplicación flex es como si la creara la primera vez

    ResponderEliminar
  12. Diego, al cargar los datos que provienen desde JAVA, el Array se debe cargar en un ArrayCollection de AS, está es la función que se debe utilizar para que la información quede completa:

    function resultLista(e:ResultEvent):void{
    lista = e.result as ArrayCollection;
    }

    el resultado de la función se debe castear como un ArrayCollection y se obtiene el valor desde e.result.

    Espero que esto te sirva!

    ResponderEliminar
  13. Shadonwk

    precisamente estoy empezando en flex y java, de hehco quiero conectarme a una bd en postgres, podrias ayudarme con eso...

    te lo agradezco

    ResponderEliminar
  14. en cuanto a la conexión con Postgres, no sé como ayudarte, sin embargo le preguntaré a mis amigos a ver si saben algo al respecto, por la parte de Flex con Java, no hay diferencia alguna entre el manejo de datos desde una BD de Postgres, MySQL, SqlServer o la que sea, ya que toda la información finalmente es enviada como objetos o como vectores que son fácilmente reconocibles por AS3.

    Intentare ayudarte!

    ResponderEliminar
  15. Estoy en un problema. No me parece andar reiniciando el servidor para poder acceder a la aplicación. He tratado de deployar la aplicación de NetBeans pero no pude por algún problema con la carpeta web. Si se deploya se generan los .class sin tener que reiniciar. Una pregunta... ¿Cómo sabe Flex donde se encuentran los .class?

    ResponderEliminar
  16. Hola Leandro,

    Lo importante para que Flex reconozca los archivos que debe manejar, es configurar muy bien al inicio del proyecto, además debes revisar la parte de configuración de los archivos xml que están en el proyecto de java. Recuerda que se debe generar un archivo .WAR y ese es el que se sube al servidor de aplicación, de lo contrario puede que no sirva.

    ResponderEliminar
  17. bueno,el post esta genial.solamente que eso es el principio,lo que plantearon de java cuando genera el .war no queda otra que limpiarlo en el apache tomcat y volver a cargarlo cada vez que modificas algo,creeme es una tortura.
    con respecto a como llamas a los objetos remotos de java.recomiendo usar los services y los callresponder. son mas claros a la hora de que tengas que invocar al menos 10 metodos remotos.

    debes invocar 1 services por cada llamado a cada clase qe tengas.si tenes 2 clases (en java) 1 insert y otra select. entonces usas un services con instancia a select y otro a insert,cada uno con un id ="" . luego usas los callresponder por cada metodo que quieres invocar

    cito algo



    y cuando llamas haes getEmpleados.token = select.getempleados ---> metodo en java . entre otras cosas.

    ResponderEliminar
  18. Excelente tutorial, felicidades.

    Solo con misma duda d arriba, alguna manera d no tener q copiar y pegar el archivo .war en el tomcat server despues d recompilar en netbeans?

    ResponderEliminar
  19. px87 creo que no hay otra forma, a menos claro que se cree el proyecto directamente en la carpeta Webapps del Tomcat, sin embargo no lo recomiendo mucho, prefiero tener los proyectos en ubicaciones más accesibles

    ResponderEliminar
  20. Juan Sebastian, muchas gracias por la rapida respuesta.

    Pues bien creo q es un pequeño detalle q se contraresta con la facilidad d la intregracion.

    2 preguntas más...

    - Que archivos debo subir al servidor real cuando ya tenga mi aplicacion terminada?

    - Que tan perjudicial es tener un nivel de seguridad 'basico' como el q se establece en el archivo web.xml?

    Por ultimo t dejo un link con un tutorial parecido al tuyo, tal vez mas delante puedas actualizar el tuyo y hacerlo mejor d lo q ya esta.

    http://www.horochovec.com/2010/03/29/flash-builder-flex-sdk-4-java-blazeds-tutorial/

    Saludos.

    ResponderEliminar
  21. px87, en cuanto a los archivos, debes subir el. war que es el compilado de java y en flex, la carpeta bin-release, la obtienes al darle clic derecho al proyecto, exportar bin-release, eso si se puede configurar para que sea directamente en el servidor.

    por el lado de la seguridad, he investigado al respecto pero no he encontrado mucha información al respecto, si encuentras algo sería de gran utilidad para la comunidad si decides compartirlo.

    el link está excelente nunca lo había visto, mi idea es empezar a subir vídeos sin embargo no he tenido mucho tiempo para el blog (creo que se nota a leguas)...

    Gracias por los comentarios y todo aporte que quieras hacer es bienvenido!

    ResponderEliminar
  22. oye perdon que los moleste es que soy nuevo en flex y java pero lo que queria saber es como puedes integrar el entorno de java al flex 3.0 yo se que si se puede por que lo he visto en algunas empresas por fa espero sus respuestas

    ResponderEliminar
  23. Hola, para integrar los dos entornos se hace por medio de Eclipse, de hecho, ese IDE es uno de los más utilizados para programar en Java y desde la pagina de Adobe puedes descargar el IDE con Flex integrado o si ya tienes instalado el eclipse te puedes bajar el plugin.

    ResponderEliminar
  24. hola gracias por la respues pero de casualidad no tendras algun tutorial para instalarle el entorno de eclipse en flex 3.0 te dejo mi correo eram06_zeus@hotmail.com

    ResponderEliminar
  25. Juna Sebastian, es un tutorial muy bueno, pero tengo un problema, hago toda la secuencia y llego a ver el html resultado del flex, pero cuando doy click en el boton se queda cargando, esperando la respuesta del localhost. Cuando lo corro en el explorador de Flash Builder, sale el siguiente error:
    http://img88.imageshack.us/img88/340/errorflex.jpg

    ResponderEliminar
  26. Hola Cris,
    El error aparentemente está en el tomcat o en el servidor que estás usando para subir la app de JAVA, intenta crear un archivo .jsp para probarlo sin la interfaz de flex, es decir para probar que la aplicación en el servidor si esta funcionando al subirlo al servidor

    ResponderEliminar
  27. Juan,
    Gracias por tu interes y rápida respuesta. Lamentablemente no creo que el servidor(TomCAT) este mal, nunca me falla. Probe usando un jsp, para llamar a los métodos creados(como me recomendaste), sin usar la interfaz de Flex y si funciono :(. cristhiancuya@gmail.com. Por favor agregame. Saludos a todos!!

    ResponderEliminar
  28. juan sebastian por favor un tutorial para instalarle a flex3.0 el plugin de java

    ResponderEliminar
  29. despues de que haya termminado mi proyecto de java y flex que tengo que hacer para poderlo subir a un servidor
    esperare una respuesta del foro o de usted juan sebastian

    ResponderEliminar
  30. Hola, AYUUUUUUUUUUUUUUUUDA PORFAVOR... yo eh echo una aplicacion para AIR en Flex usando RemoteObject, y en local con tomcat me funciona de maravilla... pero cuando lo subo a un servidor que encontre me sale un error ...

    eh ahi el codigo:



















    ALGUNA IDEA ????

    ResponderEliminar
  31. hola colegas, he terminado un proyecto de flex4/java, cuando generé mi .war lo subi a un webhost que tiene tomcat instalado y todo iba bien, donde me he atorado es en configurar tomcat y flex. Lo tenia en localhost pero ahora lo quiero subir a la red, alguien sabe como hacerlo? gracias

    ResponderEliminar
  32. Oye de donde sale el archivo WEB-INF/flex/remoting-config.xml el Flex me lo pide pero no se que herramienta me lo genera

    ResponderEliminar
  33. Hola oye segui paso a paso tu guia y ya logro conectarme de Flex a JAva pero despues no me retorna ningun valor a Flex, es mas ni siquiera regresa a la function result pordras indicarme que hice mal?

    ResponderEliminar
  34. hola podrias ayudarme, quiero pasar un arraycollection de flex atravez de una webservice a netbeans. Como podria hacerlo, sera posible?.

    Espero su ayuda con suma urgencia, Gracias.

    ResponderEliminar