Como crear una simple conexión Flex - Java
En este post mostraré como crear una simple conexión entre Flex y Java. Las herramientas necesarias para el desarrollo las puedes encontrar aquí. En adelante asumo que cuentas con lo necesario.
La aplicación contiene dos partes: una parte cliente, que es la que desarrollaré en Flex y una parte servidor, la que será una aplicación Web. Para establecer la comunicación entre estas dos aplicaciones usaré BlaseDS, que es quien provee una serie de servicios que nos permitirán comunicar datos del cliente al servidor y viceversa.
Para alojar la aplicación web usaré el servidor de aplicaciones JBoss.
Configurando Eclipse y JBoss.
El servidor JBoss no requiere instalación, basta con descomprimir el contenido a un directorio de nuestra elección. La versión que se usará en este ejemplo es jboss-4.0.5.GA.
Vamos a configurar eclipse para que publique nuestras aplicaciones en el servidor. Abre la pestaña Servers, (sino esta a la vista, la puedes abrir desde el menú Windows/Show Views/Other…/Server/Servers) haz clic en la opción New /Server, en el cuadro de diálogo emergente elige la opción JBoss v4.0 y luego Next.
En la siguiente pantalla, busca la ubicación en donde descomprimiste JBoss y elige su carpeta raíz y luego Finish.
Desarrollando la parte Servidor.
En el siguiente paso es crear la parte servidora en Eclipse, la que llamaremos ServerDemo. Para crear la aplicación ve al menú File/New /Project y en diálogo elige el tipo de proyecto Dinamic Web Project.
Una vez creada nuestra aplicación necesitamos que esta sea capaz de comunicarse con la aplicación que desarrollemos en Flex, para hacer esto posible debemos agregar a nuestro proyecto BlazeDS, siguiendo estos sencillos pasos:
- Agregar los archivos JAR BlazeDS de la carpeta lib a la carpeta WEB-INF/lib del proyecto.
- Agregar la carpeta flex y todo su conteido a la carpeta WEB-INF del proyecto.
- Remplazar el archivo de la carpeta WEB-INF/web.xml del proyecto, por web.xml de BlazeDS.
Nota: Los archivos mencionados se encuentran dentro del archivo blazeds.war, para extraerlos puedes usar winrar.
Una vez hecho lo anterior, tu proyecto debe tener una estructura como la que se muestra en la figura.
Una vez hecho lo anterior, tu proyecto debe tener una estructura como la que se muestra en la figura.
Ahora el proyecto tiene todo lo necesario para comunicarnos con Flex, solo hace falta nuestra lógica.
Antes de continuar verifiquemos si hemos hecho todo correctamente hasta aquí. Haz click sobre la carpeta raíz y elige la opción Run As/Run on Server, en el diálogo emergente elige Finish, seguido de esto debiera abrirse la siguiente url http://localhost:8080/DemoServer, para verificar si BlazeDS ha sido agregado correctamente a nuestro proyecto abriremos las siguiente url http://localhost:8080/DemoServer/messagebroker/amf, si hemos logrado ver las anteriores urls sin ningún mensaje de error por parte del servidor, entonces lo hemos hecho bien, sino verifica si haz hecho correctamente los pasos anteriores.
Creando Mi Primer Service
Ahora que nos hemos asegurado que todo esta correcto procederemos a crear nuestro primer service.
La parte del proyecto donde estarán las clases o la lógica de nuestra aplicación es dentro de la carpeta scr, dentro de esta carpeta crearemos una nueva carpeta o paquete al que llamaremos services, en ella crearemos una clase a la que llamaremos EchoService.
package services;
public class EchoService
{
public String echo(String text)
{
return "Server says: I received '" + text + "' from you";
}
}
Este es el servicio que invocaremos desde Flex y como podrán observar lo único que hace es, recibir un texto, concatenarle un mensaje y devolverlo al cliente que lo invocó. Para que el servicio que acabamos de implementar sea accesible necesitamos agregar al archivo WEB-INF/flex/remoting-config.xml el siguiente bloque de código.
<xml version="1.0" encoding="UTF-8"?/>
<service id="remoting-service" class="flex.messaging.services.RemotingService">
<adapters>
<adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
</adapters>
<default-channels>
<channel ref="my-amf"/>
</default-channels>
<destination id="EchoService">
<properties>
<source>services.EchoService</source>
</properties>
</destination>
</service>
En este código se asigna un id con el cual será invocado el servicio, y en el elemento source se hace referencia a la clase java que dará respuesta a dichas peticiones.
Hasta aquí hemos aprendido a:
- Configurar eclipse con el servidor JBoss
- Agregar la lógica de BlazeDS a nuestro proyecto para poder comunicarnos con clientes Flex.
- Crear y publicar un servicio.
Estamos en condiciones de decir que la parte servidora esta lista para nuestro sencillo ejemplo, ahora el siguiente paso es crear un cliente en Flex para poder invocar el servicio que acabamos de crear.
Ahora vamos a crear la parte cliente en Flex Builder, la que llamaremos ClienteDemo. Para crear la aplicación ve al menú File/New /Flex Project y en diálogo eliges el tipo de proyecto Web Application. Una vez creado el proyecto ve al menú window y abre la perspectiva Flex Navigator, expande el proyecto y sobre la carpeta scr al igual que hicimos en el proyecto servidor crea una carpeta y ponle por nombre services.
Los programadores inteligentes usan menos código.
En la carpeta services crearemos una clase a la que llamaremos GenericService (New/Action Script Class), en este servicio pondremos la lógica mínima que necesita un service para poder comunicarse con el servidor, y para no estar repitiendo este mismo código en cada service que hagamos, todos deberán heredar de GenericService, y de esta forma evitaremos líneas demás, lo que hará más entendible y legible nuestro código.
package services
{
import mx.controls.Alert;
import mx.messaging.ChannelSet;
import mx.messaging.channels.AMFChannel;
import mx.rpc.events.FaultEvent;
import mx.rpc.remoting.mxml.RemoteObject;
public class GenericService extends RemoteObject
{
public function GenericService()
{
super();
var channel:ChannelSet=new ChannelSet();
var amfChannel:AMFChannel=new AMFChannel("my-amf",
"http://localhost:8080/ServerDemo/messagebroker/amf");
channel.addChannel(amfChannel);
this.channelSet=channel;
this.addEventListener(FaultEvent.FAULT,onFault);
}
public function onFault(event:FaultEvent):void
{
Alert.show( "Error comunicando con "+this.destination+
" \nDetalle:"+event.fault.message);
}
}
}
Como te habrás dado cuenta la clase hereda de mx.rpc.remoting.mxml.RemoteObject, que es la clase nativa de Flex que nos permite invocar objetos remotos. El constructor de la clase invoca al constructor de la super clase y en el se especifica en canal de comunicación de nuestro servicio, nota que la url suministrada corresponde al servicio de BlaseDS alojado en nuestro proyecto servidor, y por último se agrega un listener que permite avisar de los errores que puedan ocurrir en cualquier service que herede de GenericService, cuando se produzca un error se invocara al método onFault, el cual lanzara una alerta indicando en que service se produjo el error y la razón de este.
Nuevamente en la carpeta services crearemos una clase a la que llamaremos EchoService, este servicio será el que nos permitirá poder comunicarnos con el servicio EchoService definido en el proyecto servidor. Coma ya se había mencionado esta clase debe heredar de GenericService.
package services
{
public class EchoService extends GenericService
{
public function EchoService()
{
super();
this.destination="EchoService";
this.source="services.EchoService";
}
public function echo(message:String):void
{
this.getOperation("echo").send(message);
}
}
}
En el constructor de la clase se define destination, este es el nombre con el que se publica en el archivo remoting-config la clase del servidor que atenderá nuestras peticiones, y source es el paquete en donde se encuentra dicha clase. También se define el método echo que es quien nos permite enviar nuestro mensaje al servidor.
Ok, nuestros servicios están listos, ahora solo nos hace falta una interfaz que nos permita usarlos, y lo que haremos será una muy simple que conste de un botón que envié la información contenida en un inputText al servidor mediante el servicio EchoService.
Este es el aspecto de nuestra interfaz …
Y este es el código:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="init()">
<mx:Button x="442" y="186" label="Send" id="sendButton" click="{sendMessage()}"/>
<mx:TextInput x="504" y="186" id="messageInput"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import services.EchoService;
private var echoServ:EchoService;
private function init():void
{
echoServ=new EchoService();
echoServ.addEventListener(ResultEvent.RESULT,echoServResult);
}
private function echoServResult(event:ResultEvent):void
{
var serverMessage:String= event.result as String;
Alert.show(serverMessage,"Message From Server");
}
private function sendMessage():void
{
echoServ.echo(messageInput.text);
}
]]>
</mx:Script>
</mx:Application>
En esta aplicación se definen tres sencillos métodos:
- init() que es el encargado de inicializar la instancia de GenericService y de agregarle un listener para recibir las respuestas provenientes del servidor, este método es llamado por el evento inicialize de la aplicación.
- echoServResult(event:ResultEvent) Este método captura los eventos result del service que contienen las respuestas del servidor.
- sendMessage() método se invoca al hacer click en el botón y envía el texto contenido en el inputText al servidor.
Listo hemos creado una simple conexión Flex-Java.
Fuentes:
ClienteDemo.rar
ServerDemo.rar (No incluye las librerias de BlazeDS)
Fuentes:
ClienteDemo.rar
ServerDemo.rar (No incluye las librerias de BlazeDS)
Comentarios
Publicar un comentario