- MadeInFlex - http://www.madeinflex.com -
Introducción a Web Services con .NET y FLEX
Publicado por Israel Gaytan el 30 de Octubre de 2006 a las 10:06 en Tutoriales, .NET | 66 Comments
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.
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 [4] .NET Framework 2.0 redistribuible.
Posteriormente debemos obtener el Visual Web Developer 2005 Express y SqlServer 2005 Express Edition descargables [5] 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 [6] 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.
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.NETDemos 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 ServicePrimeramente 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.

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

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.

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

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.

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�

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�

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:

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.
Bien ahora vayamos a FLEX y abramos Flex Builder. Enseguida dirijamonos a File>New>Mxml Application

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 [7] aquÃ

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.

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.

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.

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 [8] aqui
Nos aparecerá nuestro botón, al dar clic nos deberá aparecer un mensaje como el siguiente

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.
ArtÃculo imprimido desde MadeInFlex: http://www.madeinflex.com
URL al articulo: http://www.madeinflex.com/2006/10/30/introduccion-a-web-services-con-net-y-flex/
URLs en esta entrada:
[1] Descarga e instalación de las herramientas: http://www.madeinflex.com/2006/10/30/introduccion-a-web-services-con-net-y-flex/
#toc-descarga-e-instalacion-de-las-herramientas
[2] Creación de Web Services en .NET.: http://www.madeinflex.com/2006/10/30/introduccion-a-web-services-con-net-y-flex/
#toc-creacion-de-web-services-en-net
[3] Consumir un Web Service desde FLEX: http://www.madeinflex.com/2006/10/30/introduccion-a-web-services-con-net-y-flex/
#toc-consumir-un-web-service-desde-flex
[4] .NET Framework 2.0 redistribuible: http://www.microsoft.com/downloads/details.aspx?displaylang=es&FamilyID=0856
EACB-4362-4B0D-8EDD-AAB15C5E04F5
[5] aquÃ: http://msdn.microsoft.com/vstudio/express/
[6] http://www.adobe.com/downloads/: http://www.adobe.com/downloads/
[7] aquÃ: http://www.madeinflex.com/2006/10/11/introduccion-a-flex-data-services-2/
[8] aqui: http://www.madeinflex.com/2006/10/04/flash-player-security-para-fb2/
Haz click aquí para imprimir.