Flex Remoting con .NET , WebORB y Flex I

Algunas veces cuando estamos generando aplicaciones empresariales o de alto nivel, los Web Services nos pueden quedar cortos en cuanto desempeño, desarrollo, e incluso depuración de los mismos. Recordemos que los Web Services son mensajes SOAP basados en texto, y cuando la aplicación empieza a crecer en cuanto a cantidad de datos puede ser un problema para el cliente para “parsear” todo este XML y para el servidor el envio y generación del mismo. Para solventar este problema tenemos lo que conocemos como Remoting. Remoting o en nuestro caso Flex Remoting es capaz de transportar los datos con mayor eficiencia que los Web Services, ya que usa un formato binario (AMF) para transmitir datos entre el Flash Player y nuestro código en .NET. El protocolo AMF (Action Message Format) es un protocolo binario mucho mas liviano que los Web Services y en cuanto al poder y rendimiento es mucho mayor ya que podemos accesar directamente con esta tecnología a objetos remotos como dll (dynamic link libraries) construidas en .NET , es decir podemos consumir directamente los métodos que tengamos en nuestra dll,además que consume menos ancho de banda.

En este tutorial vamos a entender lo que es WebORB y sus características principales , desarrollaremos un componente (dll) para el acceso a los datos y lo daremos de alta en WebORB, una vez finalizado crearemos el front end en Flex para ver los datos.


Herramientas Necesarias

Para completar el tutorial con éxito necesitaremos algunas herramientas para trabajar con ellas. La primera es Visual C# 2005 Express Edition, para hacer nuestro componente o .NET dll , la segunda es WebORB versión 3.0.1.3 que es el servidor que me permitirá conectarme a mi dll y desde luego antes de instalar WebORB necesitamos instalado IIS (Internet Information Services) y por último SQL Server 2005 Express Edition . Ocuparemos la base de datos (Northwind) de ejemplo que viene en el .NET Framework 2.0 . Si no cuentas con SQL Server 2005 lo puedes hacer con Microsoft Access o con otro motor de base de datos, los conceptos son los mismos. Obviamente también Flex Builder.

¿Que es WebORB y para que me sirve?

WebORB es un servidor multiprotocolo que me permite conectar clientes Flex, Flash o AJAX a objetos .NET , es decir a dlls (dynamic link libraries) o Web Services. Esto quiere decir que mi Front -End se comunica directamente con mi Back-End. En el caso de Flex , utilizaremos el protocolo AMF3 (el cual explicamos con anterioridad y en esta versión 3 viene muy mejorado ), si utilizan Flash, estarían ocupando el protocolo AMF0. Algunas de sus características de manera sintetizada y de mayor interés para desarrolladores .NET serian la completa implementación de Flex Remoting (RPC), una implementación parcial de Flex Data Management Services (Adobe FDMS para Java parte de Flex Data Services), Seguridad ya que soporta un modelo a nivel código y a nivel servicio usando credenciales (basado en roles) que podemos controlar desde el panel de Administración (Management) o direcciones IP. Además el panel provee de una manera bastante sencilla en intuitiva el acceso seguro por namespace, clase o nombre de método, Flex Messaging Service (ya sea para publicación/subscripción o push de datos) basado en el protocolo RTMP (Real Time Message Protocol). En el momento de estar escribiendo este tutorial liberaron la versión 3.1.0.2, la cual ya me permite también trabajar con VB.NET, lo cual no podía en versiones anteriores porque solo codificaba con C#.

Este servidor viene en su última versión bastante completo y muy amigable para los que quieren empezar a conectar aplicaciones con Back Ends hechos en .NET, ya que cuenta con varias pestañas bastante intuitivas, donde nos dice que es WebORB y un esquema de como trabaja, otra pestaña de ejemplos ;esta parte es muy útil para desarrolladores nuevos ya que tiene además del código MXML del Front End, el código del Back (.NET) de una manera bastante bastante simple y el ejemplo funcionando, tiene otras pestañas como instalación , manejo, licencias, monitoreo, extensibilidad etc. Además cuenta con un generador de código ya sea para CAIRNGORM O ARP según sea nuestro caso y podemos descargarlo en formato zip para su posterior implementación en Flex.

Web Orb

Para descargar WebORB diriganse al siguiente link (recuerden que necesitamos instalado WebORB en nuestras computadoras para completar con éxito el tutorial)

Creación de nuestro componente en .NET

Vamos a crear nuestro componente de acceso a datos en Visual C# 2005 Express Edition. Lo primero que debemos hacer es dirigirnos a Archivo > Nuevo > Proyecto y Seleccionaremos Biblioteca de Clases. En la parte inferior, le asignaremos el nombre al componente y se llamara mifdll. Ustedes si así lo desean pueden llamar al componente como gusten. Primero empezaremos con el viejo método de hola mundo, lo que haremos es crear una clase y dentro de esta un método que me devuelva una simple cadena. El código debe verse de esta manera:

[ftf w=”450″ h=”200″]using System;
using System.Collections.Generic;
using System.Text;

namespace mifdll
{
public class AccesoDatos
{

public String diHola()
{

return “Hola mundo”;
}

}
}

[/ftf]

Por ahora es lo único que necesitaremos. Ahora vamos a realizar la compilación o generación del proyecto. Nos dirigimos al Menú Generar > Generar Solución o podemos con la tecla F6 efectuar esta tarea.

Generar solucion

Una vez generada nuestra dll vamos a hacer el “Deploy” en WebORB. Dirijámonos al panel de WebORB esto lo podemos hacer dirigiéndonos a Inicio > Programas > WebORB > WebORB Management Console. Una vez la consola abierta , seleccionaremos el panel de Deployment.

Consola webORb

Nos aparecerán debajo dos listas, la primera son los directorios virtuales en IIS y la segunda los directorios virtuales para WebORB. Para efectos de nuestro tutorial, vamos a poner nuestra dll en el directorio de WebORB. Existen dos maneras de poner nuestro componente en WebORB , la primera es manual es decir copiamos al directorio bin de nuestro sitio nuestro componente en .NET (en este mismo panel existe la descripción por si quieren hacer la operación manualmente) o con el botón “Deploy assembly”. Demos click en “Deploy assembly”. Ahora seleccionemos donde se encuentra nuestra dll y empezara a subir la dll al directorio de WebORB. Recuerden esto es solo por caso de ejemplo nosotros podemos tener nuestro directorio virtual.

Ahora probemos nuestro método, quizás se dirán bueno pues es hora entonces de hacer el Front-End. A decir verdad no ya que directamente en WebORB podemos probar nuestra dll!!!, ¿increible no?. Lo que haremos es lo siguiente. Me voy dirigir a la pestaña que se llama Management> Services y debajo de esta tengo una lista donde están los “Deployed Services”, si no aparece nuestro componenet o dll lo que haremos es en esta lista , dar click en el botón de “Refresh” que se encuentra debajo de la misma. Nos deberá aparecer nuestro componente con sus métodos.

En esta lista puedo ver todos mis Servicios dados de alta y como mencionamos con anterioridad todos los métodos que estos tienen.

Web Orb Management

Probemos nuestro componente demos click en el método diHola y del lado derecho tengo activada una pestaña llamada Test Drive. Del lado derecho tengo un botón para invocar el servicio. Demos click en él y obtendremos lo siguiente:

Test drive

Si todo lo hicimos correctamente nos aparecerá despues de invocar el método el tipo y el valor de nuestra clase. Ahora vamos a implementar el método para el acceso a nuestra base de datos, eso nos implica que tenemos que modificar nuestro componente.
Regresemos a Visual C# Express Edition y codifiquemos lo siguiente:

[ftf w=”450″ h=”200″]using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace mifdll
{
public class AccesoDatos
{

private static string strConn = @”Data Source=localhost\SQLEXPRESS;Initial Catalog=Northwind;User id=sa;Password=lemonkiwi;”;

public String diHola()
{

return “Hola mundo”;
}

public DataTable obtenClientes()
{

DataTable dt = new DataTable();

SqlConnection cn = new SqlConnection(strConn);
SqlDataAdapter da = new SqlDataAdapter();

da.SelectCommand = new SqlCommand(“SELECT * FROM CUSTOMERS”, cn);

try
{

da.Fill(dt);
}

finally
{
cn.Close();

}

return dt;

}

}
}

[/ftf]

En el código tenemos un método que se llama obtenClientes y que me regresa un DataTable y si nos damos cuenta es un poco parecido cuando vimos el tema de WebServices, es decir un método que me regresa un DataTable con la tabla “Customers”. Lo que sigue es que compilemos nuestro componente y hagamos de nuevo el deploy en WebORB.

TIP
Como tip lo que les sugiero para no tener que estar haciendo el deploy cada vez en WebORB, en nuestro proyecto vamos a generar el resultado directamente en WebORB en la carpeta bin, es decir la dll compilada directamente en WebORB, esto lo conseguimos dirigiéndonos en Visual C# en el Menú Proyecto, Propiedades.. y posteriormente en la pestaña de Generar, del lado derecho nos aparece hasta abajo un recuadro de resultado. Demos click en Examinar y para efectos de nuestro tutorial seleccionaremos la carpeta de WebORB>bin.

Invocar

Listo ahora cada vez que compilemos nuestra dll estará directamente en WebORB.

Ahora probemos nuestro fabuloso componente en WebORB, lo que haremos es dar click en Services y daremos un click en el botón de abajo de Refresh. Una vez que hemos dado refresh nos aparecerá nuestro nuevo método que me regresara mi tabla de Datos.

Nuevo metodo

Ahora vamos a probar nuestro método. Si todo esta correcto demos click en el botón de Invoke y nos aparecerá en la parte inferior una carpeta con el Nombre de Result. Demos click en la carpeta y aparecerá en la parte de abajo un DataGrid con todos los registros de nuestra consulta. ¿Maravilloso no creen?

DataGrid

Ok listo, ahora vayamos a Flex a elaborar el Front-End, aunque a decir verdad WebORB también nos podria generar este trabajo , es decir el código mxml para ya no tener que escribir tanto; la intención del tutorial es que lo hagamos todo por el camino “largo” y después en los siguientes tutoriales utilizar todas las bondades de WebORB. Pero si quieren dar un vistazo solamente seleccionen en services la clase AccesoDatos y vean la pestaña Code Generator. El code Generator me generará dependiendo lo que necesite el código del cliente, e incluso con CAIRNGORM O ARP o simplemente Flex Remoting y podré descargarlo para su posterior implementación.

Front-End en Flex

Ahora lo que haremos será crear nuestro front-end en Flex. Lo que haremos es dirigirnos al Menú File> Flex Project y posteriormente Flex Data Services. Seleccionaremos la opción compilar la aplicación local en FLex Builder.

Fp

Daremos click en siguiente y desactivaremos la casilla use default local y seleccionaremos la carpeta de WebORB, todo se verá como muestra la figura

localhost weborb

Una vez hecho esto codifiquemos en Flex Builder el siguiente código:

[ftf w=”450″ h=”200″]




[/ftf]

Este código que tenemos aquí tiene una etiqueta con un botón que llamará al servicio remoto y posteriormente desplegará los resultados en el DataGrid, así que analicemos pues un poco el código para ver lo que esta sucediendo. Primeramente tengo una función llamada obtenDatosCliente que será activada o llamada cuando de click en el botón de Invocar. Lo más importante que debemos saber es que en la línea 26 teniendo declarado miobjetoRemoto y dentro del constructor el id del servicio llamado “GenericDestination”, aunque este id no lo hemos asignado en la parte de Remoting o Flex Remoting, lo que haremos ahora es abrir el archivo remoting-config.xml que se encuentra en C:\Inetpub\wwwroot\weborb30\WEB-INF\flex y se tendrá que ver como lo tenemos a continuación.

[ftf w=”450″ h=”200″]



weborb.examples.quickstart.ComputerInfoService

Weborb.Service.AutoUpdater

FlexStore.ApplicationManager.ProductFetcher

Weborb.Management.SecurityService

Weborb.Management.ManagementService

Weborb.Management.ConfigurationService

Weborb.Examples.InvocationTests.SecureTest

Custom

administrator



Weborb.Examples.AccountBalance

Custom

examplesuser



mifdll.AccesoDatos

[/ftf]
Nota Importante:
Algunas veces cuando agregamos mas destinos o nodos o incluso cambiamos el nombre de nuestro destino para identificar nuestros componentes, y los invocamos nuevamente desde flex por alguna razón no funciona. La solución es simple, lo que debemos hacer es reiniciar la aplicación en IIS y listo. Como buena práctica definan bien sus nombres de destino para que no tengan que estar reiniciando en caso de que cambien el nombre 🙄

Una vez asignado el id en remoting-config.xml , este id es como flex se tiene que referir o identifica el nombre del servicio y en source es el espacio de nombres completo junto con la clase que vamos a invocar. Si tenemos algún error o el nombre no corresponde al momento de invocar nos aparecerá el error. Este error se hará visible gracias a que tenemos un listener que me manejara cualquier evento Fault y lo mostrara en una ventana de error (línea 35 ) y una función que precisamente me procesara el error.

Por último tenemos un método que me procesa los resultados, tenemos un datagrid con un id de “miDG”, el cual en la función de resultados le asignamos un data Provider que es igual a los resutlados como ArrayCollection.

FlexGrid

Conclusión

WebORB me va a permitir conectar a mi Front-End en Flex con mi backEnd en .NET. Es por demás decir que WebORB son los Flex Data Services para .NET. Cuando generamos aplicaciones de alto rendimiento esta es la solución más viable (Les sugiero ver el post que Edgar Rivera puso en cuanto a rendimiento se refiere entre distintas plataformas, AJAX, Flex Remoting, etc pulsando aqui WebORB además tiene otras aplicaciones como servidor RTMP, ya que puedo hacer streaming etc. En el siguiente tutorial vamos a ver un manejo de datos con lo que conocemos WebORB Data Management.

He aqui que comienza la nueva saga de WebORB! 😎

27 Comentarios

  1. Huge

    Muy bueno el tuto… aunque yo siempre he odiado un poco el visual y el IIS… y debido a mi trabajo, me he inclinado mas por Apache y ColdFusion, que hace una pareja perfecta e incluye ya Remoting 🙂

    Saludos

  2. Sandy

    Concuerdo completamente con las opiniones anteriores, ademas de que es muy cierto que usar webservices es un poco pesado cuando a grandes cantidades de datos se refiere. Gracias israel por el tuto. 🙂

    Ahora un dato, el link que pones de weborb!. no me funciona, hay otro link alternativo a ese??.

    saludos!

  3. Dano

    Hola,

    Muy buen artículo. Yo he trabajado con:
    – AMFPHP
    – WebORB(PHP)
    – WebORB(.NET)
    – Fluorine .NET

    Y mi elección para php es “WebORB” y para .NET fluorine. La razón por la que en .NET preferí fluorine, es por que es gratuito. WebORB tiene un costo considerable.

    Saludos :mrgreen:

  4. Mark Piller

    Israel, excellent tutorial! Thank you for putting this together. I used Google Language tools to read it and it translated very well.

    Dano, WebORB Standard Edition (which is FREE to use) now includes AMF3 support, so you do not have to pay anything and can get Flex integration and all the features Israel described in the tutorial.

    Cheers,
    Mark

  5. Dano

    Awesome Mark,

    You know that I use WebORB for php, several months ago, but few months ago, when I did a project with .NET and Flex, WebORB didn’t support AMF3. So I discovered Fluorine and it works fine. Now, I will test WebORB for .NET and AMF3.

    I like your decision of free cost of the license. 🙂

    Regards,
    Dano

  6. Israel Gaytan

    Thanks for your comments Mark and Dano, I think WebORB its growing very fast, and for .NET Developers i think its an awesome tool.We are working on the next tutorials about the WebORB Data Management.

    Its really nice when people like Mark put this comments,thanks again Mark 😆 ..and by the way if you dont know who is Mark…he is part of the minightcoders team!!!!

    Gracias por sus comentarios Mark y Dano , creo que WebORB es una herramienta increible. Estamos trabajando en los siguientes tutoriales acerca del Manejo de Datos (WebORB Data Management)

    Es muy gratificante cuando gente como Mark pone estos comentarios, gracias Mark, y de la misma manera si no saben quien es Mark, Mark es parte del equipo de los midnight coders!!!!!

  7. Carlos

    Excelente tutorial, la verdad es que aqui en argentina estamos en pañales con Flex….
    una consulta, hay que tener alguna consideracion para instalar webORB? porque he instalado la version 3.1 y 3.2 y las dos me dan errores de seguridad cuando trabajo con la consola..
    Saludos y muchas gracias

  8. Israel Gaytan

    Hola Carlos…..pues no deberia, me podrias especificar bien el error que te da, así quizas es más fácil rastrear que puede estar pasando.

    Saludos

  9. albert

    Gracias por este tutorial.
    Pero una pregunta más: si queremos que al devolver el DataTable dt al apretar sobre la fila de la grid podamos convertir esos datos en una clase de VO como hacerlo?
    o sea antes de cargar una grid he de hacer un casting de lo recibido i pasarlo a un array de objetos? y si no quiero poner el dt en una grid sino simplemente guardarlo como un array de objetos VO que tienen nombre y dirección.

  10. Jose Hurtado

    Muchas felicidades por tus aportes, los he leido todos y me sirvieron de mucha ayuda Israel. Gracias por tus enseñanzas.

    Queria preguntarte 1 cositas.
    1.- Tienes algun ejemplo usando VB .net, para enlazar los datos, o puedes indicarme algun sitio donde consiga informacion?

    Muchas Gracias de antemano.

    Saludos Cordiales desde Colombia y esperamos pronto tus nuevos articulos

  11. oscar

    Amigos que sigamos con esta exelente saga de weborb y .net. les comento que logre hacer andar el eljemplo con oracle 9i es exelente todo lo que podemos hacer con weborb. saludos desde tucumán argentina

  12. Edgar

    Buenos creo que este comentario no sea muy pasado de tiempo y pueda alguien contestar mi pregunta. Hice una aplicacion con weborb y todo esta funcionando correcto, pero al paso de dos semanas, el servidor se me cae, vuelvo a reemplazar los dlls de mi aplicacion y vuelve a funcionar, espero alguien ya tenga una idea del porque pasa esto, gracias de Mexico.

  13. Jorge

    Hola.
    He seguido varis tutoriales para conce un poco mas de flex, ahora estoy en proceso de aprendizaje y tengo flex 3, hasta el punto en que lleno el datagrid en Weborb todo esta bien pero al momento de realizar el ejemplo con el datagrid en flex me sale un error.

    [MessagingError message=’Destination ‘GenericDestination’ either does not exist or the destination has no channels defined (and the application does not define any default channels.)’]

    y no puedo llenarlo.
    Espero me ayuden
    gracias

  14. Jorge

    hola de nuevo yo, ya hace tiempo que habia realizado este ejercicio, un mes mas o menos.
    Ahora estoy probando con esto del Weborb en una intranet con dominios y la verad que me esta dando batalla.
    Me gustaria recibir una ayuda de que puede cambiar con Weborb pues no puedo abrir la consola de weborb
    Gracias!!!

  15. demian

    hola!, queria saber si weborb tiene q estar corriendo en el hosting, me quede dudando con eso 😡 ya que yo uso dattatec (para usar .net framework 3.5) y no se si se puede usar con flash, siempre use las dos cosas separadas. nunca juntas. muchas gracias!

  16. angel

    saludos
    es un buen tutorial solo tengo una presunta ya hice todo lo q dice el tutorial y no me funciona tengo una base de datos q se llama region y cuando intento acceder a ella me aparece esto
    Cannot open database “region_1” requested by the login. The login failed.

    Login failed for user ‘INVDE05\ASPNET’
    me pueden ayudar

  17. angel

    hola sobre la base de datos miren hice una base de datos en sql sever segui el tutorial hasta la base de datos ,
    pongo mi cadena de conexion pero la tengo como autentificacion de windows ,ahora bien genero mi dll todo va bien la copio en weborb y ya checo la dll y cuando le doy conectar me aparece el error anterior q puedo hacer me urge saber

  18. miguel

    Por favor alguien puede proporcionarme el webORB ya que no puedo descargarlo del sitio oficial, es mas no me deja rejistrarme

  19. Armando

    Hola a todos, excelente tutorial, para conocer las bondades de WebORB con FLEX y .NET.

    Tengo una consulta que ojala puedan ayudarme.

    Estos datos cargaron el el datatable al comvertirlos array, pero si quisiera utilizar otro componente que deo hacer.

    Por ejemplo quisiera filtrar los datos y solo obtener 2 columnas y estas mandar a cargarlas en un tree, que la columna 1 sean los nodos padres y la columna 2los nodos hijos. obviamente necesitare una tercera columna que me indique que nodo es hijo de que padre.

    Pero mi consulta es como cargar los resultados en otro componente.

    Se los agradezco de antemano

  20. Franco

    hola podria indicarme un tutorial donde pueda ver paso a paso como hacer un proyecto flex con java y una bd ? tengo el flex builder 3 y estoy practicando su estructura pero no logro saber como conectar con java y base de datos

  21. oscar

    Que tal soy nuevo en flex estoy haciendo una conexion de un web service y al parecer todo marcha bien de manera local pero al poner el web service en un server comienzan los problemas ya que mi servidor de aplicacion esta bajo un proxy el cual tiene autenticacion. alguen me podria ayudar con el codigo para asignar estos parametrosa mi aplicacion. Gracias y saludos de antemano.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase