La idea de este artículo es mostrar como con Flex podemos utilizar WebServices y a su vez comprimir lo que el webservice nos devuelve.

Todos sabemos que una de las principales ventajas que RemoteObject tiene ante WebServices es que al ser un protocolo binario, la información que viaja desde el backend a Flex es mucho menor. Debido a esto empezamos a investigar la posibilidad de “reducir” esa cantidad de información.

Esta claro que la mejor forma de “reducir” la información es comprimiéndola, así que encaramos la investigación por ese lado.

Primero empezamos por Flex y nos llevamos la grata sorpresa que la clase ByteArray tiene el metodo “compress” que realiza la compresión del bytearray utilizando zLib. Como personalmente en .Net tengo experiencia en haber utilizado zLib, nos decidimos por esta opción.
En resumen, los que les voy a mostrar es como comprimir el “response” de un webservice utilizando zlib en el backend (en este caso .NET) y luego descomprimirlo en Flex.

BackEnd (.net)

Primero veamos como comprimir con zLib en .Net.
Para esto lo primero que tenemos que hacer es bajarnos el archivo zlib.dll y copiarlo al system32 de nuestra carpeta Windows o bien al Bin de nuestro proyecto .Net.

Luego de esto debemos escribir una clase que nos ayude a realizar la compresión, puede ser:

Un vez que tenemos esto, en el WebServices debemos comprimir los datos antes de devolverlos. Para esto debemos tener en cuenta dos factores.
1. Para la codificación del string utilizaremos UTF8 en ambos extremos.
2- Los datos deben ir en formato Base64. De esta manera no tendremos problemas con caracteres no imprimibles en SOAP.
Entonces, un WebServcie de ejemplo quedaría así:

Compresión en Flex

Ya tenemos los datos comprimidos en el backend, ahora veamos como descomprimirlo cuando llegan a nuestra aplicación Flex.
Al igual que en el paso anterior, hagamos una pequeña clase AS que nos facilite el uso de la descompresión.
Esta quedaría:

De esta manera, antes de utilizar los datos que provienen de nuestro WebService, nos quedaría descomprimirlos de la siguiente manera:

Conclusión

Para concluir puedo comentarles que actualmente utilizo este método en dos proyectos grandes en los que trabajo y me dio muy buenos resultados, reduciendo significativamente el ancho de banda utilizado a cambio de un pequeño incremento tanto en el Cliente como en el BackEnd para realizar las tareas de compresión-descompresión.
Espero que les sea de interés y lo puedan implementar.
Suerte!!!

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.

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:

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.

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.

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.

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:

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:

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.

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.

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?

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.

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

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

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.

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.

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!

En las partes uno y dosde nuestros tutoriales vimos como podemos crear un Web Service con .NET, desplegarlo en Flex y posteriormente mediante nuestro Web Service acceder a una base de datos SQL2005. Aunque en el tutorial pasado tenemos una excelente manera de desplegar los datos no es la manera o el camino más adecuado para representar o traer nuestros datos, ya que si son demasiados datos podemos bajar el rendimiento y tiempo de respuesta de nuestra aplicación tanto del lado del cliente como del servidor. En esta última parte de la saga veremos como podemos manejar esta situación además de desplegar resultados y posibles fallas con eventosResultEvent y FaultEvent, además implementaremos un J2EE design pattern llamado DataTransfer Object (Value Object) que me permite un mayor performance en la aplicación en ambos lados, cliente y servidor.

Data Transfer Object (Value Object)

El patron Data Transfer Object tambien conocido como Value Object (VO) es un patrón que me permite optimizar la transferencia de datos atraves de las capas de la aplicación. Este patrón es muy efectivo ya que en lugar de mandar o recibir datos de manera individual, contiene todos los datos en una estructura única (estructura de datos) solicitada ya sea por la petición o la respuesta. Para ver más información acerca de este patrón pueden ir al sitio de Sun o pulsando aqui.. También Xavi escribio un articulo acerca de CAIRNGORM explicando este patrón y lo puedes ver pulsando aqui.

Lo primero que debemos hacer entonces es regresar a nuestro código (.NET) y escribir la siguiente estructura de datos en Service.cs. Tenemos entonces ahora implementando el patron VO, veamos pues el código

Posteriormente vamos a cambiar ahora el método que teniamos anteriormente, es decir el metódo getDataTable (tutorial pasado) por un método llamado obtenProductos para regresar un arreglo de objetos e inerpretarlo directamente en Flex como un ArrayCollection, en este caso de productos, entonces en las lineas n y n dentro del bloque try declaro un Reader que me
leera los datos de mi consulta. Enseguida declaro un ArrayList, no se olviden importar la clase System.Collections para tal efecto , y este ArrayList es el que me almacenara los datos que vaya leyendo el DataReader uno por uno. Con el método Read, del DataReader ire leyendo todos y cada uno de los registros que tengo disponibles, recuerden que para consultas de solo lectura usemos DataReader y no Dataset ya que el DataReader es mucho más rápido que el DataSet.

Ahora en las lineas n y n creo un nuevo objeto por cada uno de los datos o registros que encuentre mi datareader y asigno las propiedades que ya defini en mi estructura de datos. Estas propiedades seran igual al valor obtenido por el DataReader y si se dan cuenta van de manera secuencial es decir de 0 a 6 y lo más importante de todo que que el dr tiene tipos de datos para obtener, lo cual esto es caso sensible ya que si se que en mi tabla de la base de datos tengo un tipo de dato Int y quiero obtener un dr.GetString (n) me mandara un error el compilador. Para esto también es importante definir el tipo de datos correcto en mi estructura de datos si no me puede ocasionar problemas posteriores. Ahora una vez que ya tengo cada uno de los registros en un objeto , voy agregando esos objetos a mi ArrayList, es importante recalcar que hasta este punto no estamos regresando nuestros VOs o Value Objects.

Ahora nuestra intención es regresar los VOs entonces en la línea n declaro un tipo de Dato Product (estructura de datos que ya definimos) y que sera un array y le asigno un nombre de variable que sera igual al mismo pero con una dimensión preestablecida y que es igual a la dimensión de el ArrayList que ya llene con mis registros. Es entonces el momento de regresar mi estructura de datos dentro de un ciclo for y diciendole que cada elemento i de productFlex sera igual a un tipo de dato Product (elemento i del arreglo). Si notamos tenemos un parentesis, esto esta haciendo una conversion de datos del ArrayList a Product, de esta manera ya podemos regresar nuestras estructuras de datos y Flex las interpretara como un ArrayList!.

Finalmente en la línea n regreso mi estructura de Datos y Listo.

Manejo de Resultados (ResultEvent) y Errores (FaultEvent)

En todas las aplicaciónes al dia de hoy es necesario además de desplegar los resultados de manera eficiente, tambien manejar las posibles fallas que se nos pueden presentar a lo largo de la aplicación. Algunas de las fallas pueden ser que el servidor no este disponible, que el nombre del método que tengo del lado de mi WebService no corresponde al que estoy asignando en flex y esto es muy común osea que mucho cuidado, o algun otro tipo de error. Entonces siempre que trabajemos con WebServices u Objetos Remotos por que esto tambien aplica a objetos Remotos es manejar eventos de Tipo ResultEvent y FaulEvent uno para los resultados y otro para posibles fallas. Como recomendación entonces siempre manejaremos ResultEvent y FaultEvent, ya sea para WebServices o Para Objetos Remotos.

En Flex entonces modificaremos el código de la siguiente manera:

En mi etiqueta operation que se encuentra en la línea n tengo un atributo llamado name que es igual al nombre del método que tengo de manera remota, es decir en .NET , esto hay que tener mucho cuidado para no tener posibles errores. Los siguientes dos atributos son result que es igual a una función y que esa funcion se encargara de llenar un ArrayCollection con los resultados para el DataGrid ya que declaramos este ArrayCollection con el Metatag [Bindable]. Posteriormente tengo otro atributo llamado fault que es igual a una función que en caso de cualquier falla, me dira en una ventana de Alerta, la posible falla en la que estoy incurriendo.

Puedo tener más etiquetas operation es decir más operaciones para efectuar , además es muy conveniente y comodo manejar por cada etiqueta operation sus resultados es decir escribir las funciones pertinentes para manejar los resultados y podemos tener de alguna manera solo un faulEvent es decir uno genérico o podriamos implementar uno por cada operacion.

Esta es la manera más apropiada de trabajar con WebServices y .NET, ya que me va a ofrecer un rendimiento mucho mejor del lado del cliente y servidor. No obstante implica más código pero es la mejor manera de hacerlo. A los WebServices podemos mandarles también parámetros para una mayor interacción con el servicio Remoto y que estos esperen el parámetro o parametros para efectuar las operaciones solicitadas con este parametro. En la próximo tutorial veremos como puedo accesar directamente a un objeto Remoto es decir a una dll hecha en .NET atraves de WEBORB

Estos amigos de themidnightcoders no se han tentado el corazón y han liberado la versión 3.0 Release Candidate 1 para .NET. Si alguien no sabe que es WebORB bueno, es una implementación de Flex Data Services para desarrolladores en .NET, y creanme que es una posibilidad muy fuerte para la creación de desarrollos corporativos ("Enterprise") con esta herramienta. Además conecta clientes Flex,Flash o AJAX a .NET dlls (.NET Assemblies or Objects) y Web Services. Tiene la implementación por ejemplo de AMF3 (Action Messaging Format), que es un protocolo binario mucho mas rápido y más eficiente que SOAP (Web Services) ya que consume menos ancho de banda.

Es importante que tengan instalado el .NET Framework 2.0 para la correcta instalación y funcionamiento de WebOrb 3.0 y la última versión del flash player.

Primeramente la interfaz esta basada completamente en Flex, un muy buen punto para empezar a gozar de todas las nuevas funcionalidades que trae.

Pestaña de servicios de WebORB

Como ustedes pueden observar tenemos varias pestañas, una por ejemplo de Getting Started donde podemos empezar si somos desarrolladores nuevos , desarrolladores expertos en .NET o cualquiera que desea conectar nuestro Front-End con un objeto .NET (dll) cuenta con una guia bastante completa y comprensible de como hacer nuestra clase de .NET, el proceso de Instalación,la implementación de la dll,Inspeccionar la clase mediante la pestaña services (esto lo tocaremos más adelante en conjunto con un módulo nuevo llamado TestDrive), la creación del proyecto en Flex, además de una introduccion géntil y muy resumida de que es lo que hace WebOrb a grandes rasgos.

Una de las nuevas implementaciones y más poderosas es la pestaña services, y dentro de estas TestDrive, esta permite invocar cualquier método del lado del servidor directamente desde aqui pasandole argumentos (genial ¿no creen?)

TestDrive dentro de la carpeta Servicios

Y por si fuera poco bueno pues podemos bajar el código en ActionScript 3.0 dependiendo en que contexto nos encontremos por ejemplo Flex con Remoting,Flash con Remoting Flex con CAIRNGORM,ARP etc.

Descargar código

Por el momento no esta disponible generar código para CAIRNGORM, o ARP, seguramente cuando lo liberen totalmente tendremos todos estos beneficios. Les pongo aqui un fragmento de código de lo que genera en el caso de Flex con Remoting y AS 3.0

Tambien tenemos la parte de implementación (pestaña deployment) para nuestras aplicaciónes y es muy sencillo, solo arrastramos la carpeta de nuestra aplicación y listo

Implementación

En cuanto a la parte de problemas (TroubleShooting) y documentación esta impecable y muy sencilla de usar.

Documentación

Entre otras cosas cosas intersantes que trae es más ejemplos de remoting,soporta seguridad por parte del cliente Flex (RemoteObject.SetCredentials),Manejo de excepciones mejorado etc.

En conclusión creo que los desarrolladores en .NET tenemos una buena opción para empezar a generar nuestras aplicaciones con WebORB a nivel corporativo.No olviden que lo más importante de una aplicación es la planeación y un buen análisis , esto nos lleva a tomar como herramienta una buena metodología como puede ser UML, implementación de Patrones de diseño etc.

En la primera parte de nuestro tutorial vimos como podemos elaborar un Web Service con .NET que es capaz de devolver un mensaje y como generar la aplicación en FLEX para consumir el mismo y mostrarlo. En esta parte del tutorial veremos algo mucho mas interesante y de mucha utilidad para nuestras aplicaciones que consiste en enlazar datos de nuestro Web Service a una base de Datos SQL Server 2005 Express Edition, entender los conceptos básicos de ADO.NET y como desplegarlos de igual manera en FLEX.

Herramientas y conceptos básicos

SQL Server 2005 Express Edition es un manejador de bases de datos ideal para almacenar los datos de aplicaciones pequeñas y personales. Cuenta con el SQL Server Management Studio Express que es el IDE para elaborar nuestras consultas, procedimientos almacenados, seguridad, funciones etc. La base de datos con la que trabajaremos se encuentra en el QuickStart del SDK del .NET Framework 2.0 llamada Store.Te invitamos a descargar las herramientas necesarias para completar el tutorial.

Sql Server Management Studio Express

Una vez que ya tenemos las herramientas necesarias para empezar a desarrollar debemos de entender lo esencial de ADO.NET . ADO.NET es una colección de clases y objetos del .NET Framework que nos proporciona acceso a fuentes de datos. Cuando estamos en un desarrollo y nos enfrentamos al acceso a datos existen varias maneras de hacerlo, una es mediante el DataSet o la otra posibilidad es el DataReader, que debemos de igual manera saber emplear dependiendo de nuestra situación, es decir si ocupamos una u otra o la combinación de las 2, ya que cada una de estas tienen sus ventajas y desventajas.

Si tu proyecto requiere de acceso rápido a datos es decir solo lectura y no vas a hacer ninguna operación de inserción (INSERT) o actualización (UPDATE) lo más recomendable es usar un DataReader ya que es mucho más rápido que un DataSet. Una de sus desventajas es que lo hace en modo conectado y como mencionamos anteriormente solo es de modo lectura.

Por el otro lado tenemos a el DataSet, este nos permite hacer operaciones tanto de lectura como de escritura es decir (SELECT, INSERT Y UPDATE).Normalmente trabaja en conjunto con un DataAdapter para efectuar estas operaciones y este se encarga de procesar la sentencia SQL, la conexión y el resultado pasarlo al DataSet. Además el Dataset trabaja en modo desconectado ya que guarda temporalmente todos los datos como un objeto en el servidor. Es importante mencionar que los Datasets los ocupamos para hacer operaciones complejas en la base de datos, incluso el Dataset puede tener múltiples DataTables o lo que es lo mismo tablas de la base de datos, lo que el DataReader es incapaz de hacer ya que solo soporta una tabla de la base de datos. Las desventajas del Dataset es que el acceso a los datos es más lento.

En resumen si quieren acceso rápido y de solo lectura les recomiendo el DataReader , si lo que quieren es efectuar operaciones de inserción o actualización o quieren combinar múltiples tablas de la base de datos lo que les recomiendo es el Dataset.

Conexión del Web Service a una base de datos

Ahora que contamos con la parte teórica necesaria empecemos a codificar nuestro Web Service para acceder a nuestros datos. Lo primero que haremos es un sencillo método para verificar si mi conexión con la base de datos es correcta. Aislaremos la cadena de conexión en el archivo Web.config, este archivo es para configurar parámetros de la aplicación y que es donde almacenaremos nuestra cádena de conexión y utilizaremos el Configuration Manager para acceder a este. Es importante mencionar que es buena práctica poner nuestras cadenas de conexión en el archivo Web.Config y no embeberla en nuestro código ,ya que de esta manera si cambia el motor de base de datos no será necesario volver a compilar nuestra aplicación.

En VWD dirijamonos a archivo abrir y abramos el proyecto del tutorial pasado, si no cuentas con el te recomendamos pegar el siguiente código en un nuevo proyecto de ASP.NET Web Service (para la creación de un nuevo proyecto ve la primera parte del tutorial aqui).

Primeramente en la línea 6 y 7 de nuestro código tenemos que importar dos librerias, una para mi acceso a datos (System.Data.SqlClient)y la última para poder acceder a la configuración de la aplicación (Web.Config) mediante el ConfigurationManager.

En la línea 25 generamos un método que me regresa solamente un valor booleano y me dira si mi conexión con el motor de base de datos es correcta. En la línea 28 declaro una variable de tipo cadena que es la que le pasare a mi objeto SQL de conexión posteriormente y que es igual a la cadena de conexión con el identificador "StoreSQL" que se encontrara en el archivo Web.Config. Antes de continuar asignemos en el archivo Web.config nuestra cadena de conexión. El archivo Web.config está en el explorador de soluciones, si no lo pueden ver y es nuevo su proyecto inicien la depuración (F5) y les aparecerá una pantalla diciendoles si lo quieren agregar. Existe otra manera de agregarlo y es dando clic derecho sobre nuestro URL den el explorador de soluciones>agregar nuevo elemento>Archivo de configuración web.

Explorador de soluciones

Una vez que estamos en el archivo Web.config en el nodo de connectionstrings asignaremos el siguiente código.

Primero lo que hacemos es añadir una etiqueta add con un atributo name para asignar un identificador a nuestra conexión con datos y posteriormente el atributo connectionString para la cadena de conexión pertinente con el nombre de nuestra base de datos en este caso llamado Store. Existen varias cadenas de conexión dependiendo el contexto donde se encuentren , una buena fuente para consultar cadenas de conexión de distintos manejadores de bases de datos es www.connectionstrings.com

Una vez finalizado la configuración en Web.Config regresemos a nuestro archivo Service.cs y continuemos analizando el código. En la línea 31 declaro un objeto de conexión y posteriormente le paso la propiedad ConnectionString que sera igual a la variable strConn. Enseguida en la línea 36 abro un bloque try para ocupar el método open del objeto de conexion. Si todo marcha bien me regresara true el Web Service, de lo contrario saltara a la línea número 36 y cachara la excepción y me regresara false. En nuestro bloque finally pase lo que pase cerrara la conexión. Generalmente cuando abrimos conexiones con datos es casi obligado para desarrolladores meterlos en bloques try, catch, finally por si ocurre una excepción cacharla y manejala.

Probemos nuestro Web Service iniciando la depuración (F5) y nos debe aparecer en nuestro navegador predeterminado 2 métodos, nuestro famoso HelloWorld y ahora nuestro método TestConnection.

Navegador mostrando métodos del Web Service

Demos clic en TestConnection y si todo está correcto deberá devolvernos nuestro método el valor de true. En caso contrario nos devolverá false. Los errores más comunes que podemos encontrar aquí son que la cadena de conexión este mal escrita en el archivo Web.Config, que el nombre al que nos referimos en el Configuration Manager no sea igual al nombre llave ("StoreSQL") que asignamos en el archivo Web.Config.

Conexión exitosa del Web Service

Ahora pasemos a la parte interesante que es acceder a los datos y desplegaros en nuestro WebService para posteriormente consumirlo en FLEX con un DataGrid. Para este ejemplo ocuparemos el DataSet en conjunto con un DataTable para devolver los datos a FLEX.

Lo interesante de ocupar y regresar un tipo de datos DataTable en un Web Service de .NET es que FLEX lo interpretara como un ArrayCollection, y obvio este atributo lo podemos hacer [Bindable] para posteriormente asignarlo a un componente que en este caso será un DataGrid.

Agregaremos un método llamado getDataTable que me regresará un DataTable apartir de un DataSet. Recordemos que los DataSets son capaces de guardar múltiples tablas.Nuestro Web Service se debe ver como el siguiente código con el nuevo método.

Como pueden observar es muy sencillo el código, tengo entonces un método que me regresara un DataTable. Dentro del método primero declaro una variable que contendra la cadena de conexión (línea 65) almacenada en el archivo Web.config. Posteriormente declaro un objeto de conexión (línea 68) y con la propiedad ConnectionString del objeto de conexión lo asigno (línea 71) a mi variable que contiene la cadena. Una vez hecho esto declaro en una variable la consulta que deseo ejecutar (línea 74), en este caso a la tabla de PRODUCTS. Enseguida declaro un adaptador de datos (línea 77) y le paso como parametros la consulta y el objeto de conexión. Despues declaro un DataSet (línea 80) y con el método Fill del SqlDataAdapter lleno el DataSet (línea 83) con los registros. Finalmente regreso el DataTable (línea 86) haciendo referencia al método Tables con el índice en 0 ya que no tenemos más tablas en está consulta.

Me despliega un XML en un formato llamado DiffGram, este tipo de formato es para representar a un DataSet y además es capaz de identificar cambios en el DataSet. Además nos muestra ya los datos provenientes de la base en una mánera fácil de leer.

DiffGram

Una vez desplegando nuestra tabla de Datos en nuestro navegador pasemos a FLEX implementar lo último para desplegar los datos.

Consumir el Web Service en FLEX

Primeramente iniciaremos con agregar un botón y un DataGrid. Al botón le asignaremos una etiqueta llamada "Obtener DataSet".Estos los ubicaremos en la parte inferior de nuestros primeros componentes que hicimos en la parte 1 del tutorial como se ve en la figura.

Botón y Datagrid en FLEX

Pasaremos a la vista de código y veremos que tenemos el botón y el DataGrid. Lo que deseamos es que al dar click al botón mande llamar a mi Web Service y llene de registros el DataGrid. Empecemos por agregar un script justo debajo de la etiqueta de application y modificar algunas cosas en mi MXML. El código es el siguiente:

Después de agregar la etiqueta script importamos las clases necesarias, ArrayCollection y ResulEvent para manejar los resultados de mi llamado.Posteriormente declaro con el metadatag [Bindable] una variable arrProductos de tipo ArrayCollection y que será igual a los resultados obtenidos por el Web Service. Noten que despues de event.result tengo diffgram.NewDataSet.Table que es como me lo regresa el Web Service (ver figura de diffgram).Enseguida lo que hacemos es declarar una función llamada llenaDataGrid que le pasamos como parámetro una variable llamada event de tipo ResultEvent.

Nota importante
Para ver el comportamiento del tipo de datos que me esta interpretando event dentro de la función, comentemos la línea donde asignamos la variable arrProductos y asignemos un punto de interrupción en la fúncion llenaDataGrid. Iniciemos la depuración y encontraremos principalmente dos objetos this y event. Si hacemos una exploración el en objeto event vean como el DataTable de .NET es interpretado como un ArrayCollection

Sesión de depuración

En lo que respecta al MXML tenemos la etiqueta WebService asignandole un id para referenciarlo y el WSDL donde reside nuestro Web Service. Dentro de la etiqueta Web Service abro una etiqueta llamada operation y con el atributo name hago referencia a la operación o al método en mi Web Service (getDataTable) si tuvieramos mas operaciones y las quiero convocar puedo abrir tantas etiquetas de tipo operation como yo desee para diferentes métodos , además tiene el atributo result que es igual a la funcion que ya declaramos dentro del bloque script y que maneja los resultados.

En líneas posteriores encontramos las etiquetas correspondientes a el botón y el DataGrid que agregamos. El botón tiene el atributo click que es igual al identificador del Web Service con el método que pretendemos llamar (getDataTable). Por último la etiqueta DataGrid tiene el atributo dataprovider que es igual a la variable arrProductos.

Si todo esta correcto corramos la aplicación , demos click en el boton obtenerDataSet y veamos los resultados como se ve en la figura

DataGrid con resultados

Conclusión:
Esta es una manera de trabajar con Web Services de .NET y FLEX accediendo a datos. No obstante existe una mejor manera que nos beneficia en desempeño tanto del lado del cliente como del lado del servidor si la cantidad de datos es mayor, aunque implica un poco de mayor código. En el siguiente tutorial veremos como podemos implementar esta manera para mejorar el rendimiento, además de manejar posibles fallas del lado del servidor dentro de FLEX.

Los Web Services o servicios web por su traducción al español son aplicaciónes que nos permiten el intercambio de datos por XML.La virtud de estos radica en que cualquier aplicación puede consumirlos , es decir si el servicio web esta contruido bajo .NET, Java, PHP, CFML , cualquier cliente que use estas tecnologías puede consumirlo lo que lo hace multiplataforma y sobre todo muy portable.

La base de los Web Services para el intercambio de datos es SOAP (Simple Object Access Protocol), el cual es usado a menudo para intercambiar información entre las operaciones del Web Service, además usa XML para codificar las llamadas de RPC (Remote Procedure Calls).

También existe WSDL(Web Service Definition Language) que no es mas que la descripción de los mensajes y de los tipos de mensajes que el Web Service recibirá o enviara, en concreto WSDL nos dice que métodos podemos consumir, así como lo que debemos de enviar y recibir, además nos puede presentar una descripción de funcionalidad de estos métodos.

Descarga e instalación de las herramientas

Primero que nada debemos contar con las herramientas de desarrollo necesarias para nuestro pequeño tutorial. Para poder ejecutar aplicaciones elaboradas en .Net 2.0 requerimos descargar el .NET Framework 2.0 redistribuible.

Posteriormente debemos obtener el Visual Web Developer 2005 Express y SqlServer 2005 Express Edition descargables aquí. Visual Web Developer 2005 o VWD es una herramienta de desarrollo para aplicaciones web (ASP.net o Web Services) enfocada a estudiantes, desarrolladores nuevos o a alguien que quiere aprender esta tecnología y SqlServer 2005 Express Edition es una versión de sqlserver 2005 a menor escala y muy eficiente para desarrollos personales (si cuentas con Microsoft Access no es necesario que descargues SqlServer Express) lo mejor de todo es que estas herramientas son totalmente gratuitas como lo son todas las Express Editions de Microsoft.

Por último descargaremos Flex Builder de http://www.adobe.com/downloads/

Nota: Algo importante y de mucha flexibilidad es que no es necesario contar con Windows XP professional o 2000 o 2003 server que cuentan con IIS(Internet Information Services que es el servidor de http de Microsoft), ya que si estas trabajando bajo Windows XP Home Edition , Visual Web Developer Express edition cuenta con su propio servidor de HTTP, en pocas palabras no hay mas impedimento para empezar a desarrollar.

Una vez instaladas las herramientas empecemos a generar nuestro Web Service.

Creación de Web Services en .NET.

Abramos Visual Web Developer Express edition y seleccionemos Archivos>Nuevo Sitio Web y seleccionemos la opción servicio web ASP.NET, después especifiquemos donde queremos guardar los archivos y por último seleccionemos el lenguaje en el que vamos a desarrollar. En este caso lo haremos con C# pero también se puede desarrollar con VisualBasic.NET

Creación de Web Service ASP.NET

Demos clic en aceptar y automáticamente Visual Web Developer nos genera una plantilla automática de un Web Service. Ahora exploremos brevemente lo que se nos presenta en pantalla.

Vista de código de Web Service

Primeramente tenemos el código en la parte central, esto es lo que VWD nos genera automáticamente en C# para empezar a crear nuestros Web Services.

Este archivo se encuentra dentro de la carpeta App_Code de nuestro proyecto, inicialmente se llama Service.cs, noten que la extensión hace referencia al lenguaje que esta escrito, si estuviera en vb.net seria Service.vb

También se encuentra un archivo a nivel del proyecto llamado Service.asmx, este archivo con esa extensión (asmx) es la de un Web Service construido en .net y Visual Web Developer lo crea de igual manera por nosotros.

Ahora enfoquémonos en la parte importante que es el código.

Esté es un método que ha sido creado por VWD para nosotros y si queremos hacer una comparación, ¡se parece mucho a actionscript!, en la línea 17 quiere decir que es un método Web, esto es muy importante ya que cada vez que queramos generar un método nuevo debemos escribir una línea idéntica a [Webmethod]

La siguiente línea es una función pública llamada "HelloWorld" que lo que me regresará es una cadena y en la línea 19 la cadena correspondiente "Hola a todos". Si el modificador de acceso lo ponemos como private no funcionara, solo el Web Service en si mismo podría consumir este método private y no así para el consumidor en general.

Ahora es tiempo de probar como se ve mi Web Service en el navegador. Para esto nos dirigiremos al botón de iniciar depuración.

Iniciar depuración

o presionando la tecla F5. Nos aparecerá una leyenda si deseamos agregar un archivo web.config con la depuración habilitada, seleccionemos la opción aceptar

Agregar archivo de configuración

Noten que en la parte inferior izquierda aparece habilitado y trabajando nuestro servidor de desarrollo de ASP.NET , aquí es donde trabajaremos continuamente en este tutorial.

Servidor de ASP.NET

Posteriormente me aparece mi navegador predeterminado y vemos nuestro Web Service con el método "HelloWorld"

Web Service en Navegador

Está página que podemos observar listará todos los métodos disponibles que yo construya en mi Web Service de una manera que se pueda leer fácilmente y humanamente posible, ya que si damos clic en la descripción de servicios me desplegara el archivo WSDL que no es nada fácil entender y leer.

Web Service Definition Language

Ahora copiaremos la dirección del archivo WSDL de nuestro Web Service que se encuentra en la barra de direcciones del Navegador,o la anotaremos en algún lado ya que esta la ocuparemos posteriormente para hacer el llamado al Web Service desde FLEX.

Por el momento no nos importa y seguramente en muchas ocasiones no tendremos que lidiar con este archivo. Lo que haremos ahora es regresar a nuestro Service.asmx y daremos clic en el método "HelloWorld"

Web Service en Navegador

Enseguida nos aparece el nombre del método y un botón de invocar para probar nuestro Web Service. Demos clic en el botón y nos aparecerá el resultado de haber invocado nuestro método "HelloWorld"

Web Service que me regresa una cadena

Esto quiere decir que hemos ejecutado con éxito el método "HelloWorld" de nuestro Web Service. Detengamos la depuración por el momento regresando al entorno de desarrollo de VWD presionando el siguiente botón:

Detener depuración

Nota:
Si estas usando Internet Explorer, cuando cierras el navegador la depuración se detiene automáticamente y regresamos al ambiente de desarrollo.

El navegador se cerrara y por el momento debemos de hacer algunas consideraciones antes de poner esto en un servidor de producción.

Es importante que en ambientes de producción se cambie el espacio de nombres (Namespace) al nombre de dominio donde se publicara por ejemplo http://www.madeinflex.com, pero para ambientes de desarrollo y pruebas lo podemos dejar de esta manera (http://tempuri.org).No menos importante es asignar un atributo de descripción al Web Service, además agregaremos tambien un atributo de descripción a nuestro método "HelloWorld", por lo consiguiente nos acostumbraremos a dar una descripción breve pero muy informativa acerca de nuestros métodos.

En resumen , cambiemos el espacio de nombres (Namespace), asignemos atributos de descripcion tanto al Web Service como al método "HelloWorld" como se puede apreciar en el código:

Una vez concluido esto podemos empezar a consumir nuestro método desde FLEX.

Consumir un Web Service desde FLEX

Bien ahora vayamos a FLEX y abramos Flex Builder. Enseguida dirijamonos a File>New>Mxml Application

Creación de aplicación en FLEX

Enseguida nos aparecerá el siguiente asistente que nos ayudará a configurar la aplicación.

Tenemos 3 tipos de proyectos , el primero es el que ocuparemos para conectar FLEX con nuestro Web Service, el segundo es para acceder a datos mediante coldfusion y flash remoting, y por último flex data services (FDS) que requiere de un servidor Java para aplicaciones mas robustas por ejemplo data pushing, colaboración en tiempo real etc. Si quieren saber más acerca de Flex Data Services den un vistazo al artículo que Carlos público aquí

Asignación de nombre de proyecto en FLEX

Damos clic en siguiente y ahora asignamos un nombre de proyecto, en este caso se llamara mifwebservice, puedes llamarlo como tu quieras y damos clic en finalizar.

Boton finalizar para comenzar proyecto FLEX

Enseguida nos aparecerá la vista en código en la parte central y en la parte superior izquierda el nombre del proyecto con los archivos. Ahora vamos a cambiarnos a la vista de diseño dando clic en el botón design que se encuentra arriba de mi código MXML.

Al dar clic en design la perspectiva cambia y ahora estamos en modo de diseño. Para este tutorial arrastraremos 2 componentes, un botón y un label. Estos componentes se encuentran del lado izquierdo justo debajo de donde se encuentra el panel de navegación.

Arrastraremos un botón al área de trabajo y le asignaremos la etiqueta "LLamar a web service de .NET" dirigiendonos al panel de common que se encuentra del lado derecho como se muestra en la figura.

Asignar etiqueta a botón

Ahora volveremos a cambiar la vista y nos pasaremos a la perspectiva de código dando clic en source. En nuestro código MXML tenemos dos etiquetas una de un botón y una de una etiqueta. Lo que queremos es que al dar clic al botón mande llamar a nuestro Web Service y el control de etiqueta nos despliegue el mensaje "Hola a todos".

Lo primero que vamos a hacer es crear una etiqueta de tipo webservice asignándole un id y diciéndole donde es la dirección del Web Service o mejor dicho del WSDL que anotamos con anterioridad, si no recordamos cual es nuestra dirección WSDL regresemos a VWD y presionemos F5, posteriormente daremos clic en descripción de servicios y copiaremos la dirección que se presenta en la barra de direcciones del navedador.

Enseguida, en la etiqueta del botón asignaremos una acción clic, esta accionara la comunicación con mi Web Service.

Por último ligaremos el atributo text a nuestro resultado en la etiqueta label, y asignaremos una referencia al resultado de mi webservice con la propiedad lastresult. Esto es importante ya que lastresult no pertenece al Web Service sino a la clase webservice de FLEX.

El código se debe de ver como aquí(en su máquina la dirección WSDL puede variar)

A continuación probemos nuestra aplicación ya sea con las teclas CTRL+F11 o con el botón run.

Correr aplicación

Nota importante.
Si al correr la aplicación les marca un error de seguridad les recomiendo que echen un vistazo al tip que Carlos público aqui

Nos aparecerá nuestro botón, al dar clic nos deberá aparecer un mensaje como el siguiente

Resultado del Web Service de .NET

Una vez hecho esto hemos conectado FLEX con un Web Service en .NET, en nuestro siguiente tutorial veremos como podemos enlazar datos con nuestro Web Service y desplegarlos en FLEX.