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

Visual Web Developer Express
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.

Visual Web Developer Express
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.

[FTF W="450" H="200"]using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

[WebService(Namespace = "http://tempuri.org")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
public Service () {

//Eliminar la marca de comentario de la línea siguiente si utiliza los componentes diseñados
//InitializeComponent();
}

[WebMethod (Description="Método que me devuelve la cadena hola a todos")]
public string HelloWorld() {
return “Hola a todos”;
}

}
[/FTF]

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
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
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
Servidor de ASP.NET

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

Web Service en Navegador
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
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
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
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
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:

[FTF W="450" H="200"]using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

[WebService(Namespace = "http://www.madeinflex.com/",
Description="Servicio web proporcionado por el equipo de madeinflex")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
public Service () {

//Eliminar la marca de comentario de la línea siguiente si utiliza los componentes diseñados
//InitializeComponent();
}

[WebMethod (Description="Método que me devuelve la cadena hola a todos")]
public string HelloWorld() {
return “Hola a todos”;
}

}
[/FTF]

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
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í

Nombre de proyecto en FLEX
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
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
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)

[FTF W="450" H="200"]

width="201" click="mifWebService.HelloWorld()" />

wsdl="http://localhost:2876/WebSite3/Service.asmx?WSDL" />

[/FTF]

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

Correr aplicación
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
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.

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.

Sitio Web:http://riata.wordpress.com

77 Comentarios

  1. JAVI

    La verdad ha sido un buen punto de partida.
    Segui mirando y encontre un tutorial que implementaba codesmith y weborg pero ya que codesmith crea una wsdl.. me dije por que no usar el servicio web ?
    El caso es que los metodos del SWeb no devuelven un string simple y no se como tratar los objetos q me vienen en flex.

  2. kamui

    estimado no hay un manual q explique mas a fondo sobre el tema de punto net a flex y de action script ??¿¿?

  3. Israel

    Me temo que yo desconozco , que tema profundize más sobre .net a Flex. Aqui la pregunta sería que tanto nececistas de .NET, ya que también esta la parte de Fluorine y lo que te sugeriria es tomar cualquier libro de .NET y Flex.

    Saludos!

  4. Isabel

    gracias estubo muy bueno, solo que tengo un problema me podrian ayudar? si si pueden se los agradecere mucho, lo que pasa es que tengo que consumir un web service desde un portal podria ayudarme? se que tal vez sea una pregunta muy facil para ustds. pero soy nueva en esto disculpen las molestias gracias….

  5. gonzalo

    Genial explicado, Israel. Yo necesito hacer un cliente del web service en vb.net.

    Tu sabes como puedo hacerlo con el Visual Web Developer 2005 Express ?

    Muuuchas gracias!!

  6. PAOLA

    Hola estoy empezando a desarrollar con Web Services en Asp.Net y creé una aplicación cliente desde la cual se invoca un metodo dentro de un servicio web pero me da error al querer invocar el metodo, siguiendo la traza y atachandome al servicio web pude verificar que da el error exactamente en la invocación al metdo
    El error es el siguiente:
    “Message = “Object reference not set to an instance of an object.”
    Si bien yo se que este error se debe a que falta un New en general no creo que este sea el caso
    Puede ser que el New tenga un tiempo de retardo en generarse o algo así?
    el tema es que he hecho infinidad de pruebas para para descubrir que falta pero es muy raro que cuando genera el error si vuelvo la ejecucuión atrás varias veces en algun momento se ejecuta bien el metodo y me da el resultado correcto como si al fin generara el new o algo asi.
    Ademas si ejecuto el metodo directamente sin hacerlo a través del web service el metodo funciona correctamente.
    Tambien probe llamar al metodo con parámetros literales y tambien me genera error
    Cualquier ayuda que me puedan dar estaré infinitamente agradecida
    Desde ya muchas gracias
    Hace varios dias que estoy con este problema y no puedo encontrarle solución

  7. Victor

    hola !!!

    Soy nuevo en utilizar flex 3, me piden consumir un web service realizado en .net, mi problema es que el tipo de objeto es un dataset, para recibirlo si puedo, lo que no puedo es enviar un dataset… alguien tiene idea como hacerlo ??? …estoy ocupando flexTense… pero aun asi no se como enviarlo

    Ojala alguien pueda ayudarme… :S

  8. Lichyta

    Hola a todos genial el artículo soy nueva en Flex….
    Muchas gracias lo llegue a ejecutar y me salio todo bien..
    Bueno tengo mi web service en .net y con capas sin ninguna interfaz. quiero mostrar en una datagrid la lista de datos como llamo mis metodos hecho en el .net como lo hago flex.

  9. Lichyta

    Muchas gracias Israel
    Lo estoy implementando con la ayuda de los otros tutoriales pero sabes al momento de ejecutarlo no me llena el datagriden el textarea que es donde se muestra el error sin greso en el textbox (codigo) un valor q si exsite me arroja ojbect,object,onject a se debe …..siuendo 5 clunmunas no entiedo este error por favor si alguien me podra audar

  10. Oscar Cesar

    Estamos tratando de acceder a un web service, utilizando flex. Pero no logramos hacerlo, obtenemos algunos archivos al importar conextensión .as pero no sabemos como aplicarlos. Prodrias ayudarnos. La inofrmación que se obtiene es sobre los docentes de la Universidad de Guerrero. Mexico

  11. Elizabeth Medina

    Hola q tal?

    Es mi primer contacto con Web Service y la verdad lo explicaste super sencillo. Tenia muchas duda pero gracias a ti han sido disipadas.

    Tendras algun otro ejemplo, ejercicio o tutorial q pueda consultar para seguir practicando?

    Gracias!

  12. artanis

    Bueno bueno el articulo. Solo tengo una pregunta,¿como llego a los siguentes tutoriales? Me refiero a la segunda y tercera parte.

    Saludos

  13. Flug Australien

    Me gusta tu artículo sobre este tema. Tus consejos son muy útil y ahora sé más sobre Web Servicios con Net y Flex. Además es muy ínstructivo para mi porque soy de Alemania y he encontrado tu página. He leido alguno sobre este tema en aleman y inglés y ahora intento comprender el tema en español. Muchas gracias para la publicación y muchas gracias que yo tengo permiso de aprender más español :smile:
    Y, lo siento para mis faltas pero no he hablado y escrito alguno en español desde mayo.

  14. Alfonso Gómez Toledo

    :smile: Excelente artículo, apenas comienzo con el tema pero es muy practico el proceso, realmente es un buen punto de partida.

  15. Mikel

    Hola,

    Estoy desarrollando una aplicación con Flex utilizando Web Services (acceso a base de datos). La aplicación está en 3 capas (presentación, lógica y datos). Las llamadas a los Web Services en Flex se hacen asíncronamente y mi problema es el siguiente:

    Desde la capa de datos, necesito llamar a un Web Service y la misma función me tiene que devolver el resultado del Web Service. Es una función de LOGIN:
    public static function login(nombreUsuario:String, contrasena:String):String {
    var ws:WebService=new WebService();
    ws.wsdl=”http://localhost:8080/ode/processes/UsuariosMySQL?wsdl”;
    ws.login.addEventListener(“result”, emaitzaResultHandler);
    ws.addEventListener(“fault”, faultHandler);
    ws.loadWSDL();
    ws.login(nombreUsuario, contrasena);
    return “”;
    }

    public static function emaitzaResultHandler(event:ResultEvent):void {
    Alert.show(event.result.toString());
    }

    public static function faultHandler(event:FaultEvent):void {
    Alert.show(“ERROREA”);
    }

    Muchas gracias

  16. Alfredo Aoyama

    hola antes que nada un saludo.

    Que tal Israel.

    Estoy inciando en aprender Flex y lo mas complicado en lo que estoy rebotando es como configurar los servicios con flourine.
    Me gustaria ver si me puedes apoyar con algun material y algun link para poder estudiar.

    Si deseas agregarme en tu msn seria bueno

  17. Pingback: Introducción a Web Services con .NET y FLEX « Consultoria y formacion Adobe

  18. Daniel

    Gracias por el articulo es muy interesante, ahora tengo un problema, estoy haciendo mi webservice en una red, localmente dandole play en el vs.net anda perfecto, ahora lo publico y lo ejecuto poniendo la direccion ip de la maquina en donde lo estoy ejecutando y sale el siguiente error:
    Error de parseo XML: malformado
    Lugar: http://192.168.10.45/webservice/service.asmx
    Línea 1, Columna 2:

    -^

    Alguien me puede ayudar?

  19. ELIAS

    Hola Isrrael Buen trabajo voy a trabajar con esta plataforma espero contar con tu ayuda mas seguido manejo el asp de hecho me encanta flex por la forma de como interctura los efectos, que tengas buen dia

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

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