Introducción a Web Services con .NET y 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.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.
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.
Acerca de esta entrada
Usted está leyendo “Introducción a Web Services con .NET y FLEX,” una entrada de MadeInFlex
- Autor: Israel Gaytan
Israel Gaytán es un Adobe Certified Professional y desarrollador enfocado en la creación de RIAs. Desarrolla bajo la plataforma.NET y ha trabajado con Flash, Flash remoting (AMFPHP, .NET) y Flash Media Server.
- URL del Autor:
- http://riata.wordpress.com
- Publicada:
- 30.10.06 / 10am
- Categorías:
- .NET, Tutoriales
- Entradas relacionadas:
- LiveCycle Data Services 2.5.1
- Disponible Adobe LiveCycle Data Services 2.5
- Flash Platform Services
- Introducción a Apollo de Lynda.com
- Número de visitas:
- 38613
73 Comentarios
Ir al formulario de comentarios | rss (comentarios) [?] | trackback url [?]