Comunidad de diseño web y desarrollo en internet

Web Services mediante WebServiceConnector de Flash

  1. I.- Introducción a los Servicios Web.
  2. II.- Desarrollo de una aplicación en Macromedia Flash MX 2004 Pro con Web Services.
  3. III.-Conclusiones.

I.- Introducción a los Servicios Web.

¿Qué es un Web Service?

Los Servicios Web (Web Service) permiten a las aplicaciones compartir
información e incluso invocar funciones de otras aplicaciones independientes, sin
importar el sistema operativo, plataforma en la que se ejecuten o incluso el
dispositivo que se utilice para acceder a ellos. Los Web Services aunque son
independientes pueden tener comunicación entre ellas y formar grupos de
colaboración para poder realizar una tarea específica.

¿Para que sirve un Servicio Web?

Todos sabemos que una rutina encierra cierto proceso o algoritmo, y que
cumple una función clara. Muchas rutinas y un guión central componen un
programa en lo que se llama "programación estructurada". Un Servicio Web viene a
ser una rutina en Internet.

Pero, ¿por qué se llama "Servicio Web" y no "Rutina en Internet"? Los
protocolos que soportan los servicios web se comunican normalmente por el puerto
80, basándose en HTTP. Esto hace que podamos acceder a ellos al igual que lo
hacemos con una página web. La diferencia entre una página web y un Servicio
Web, es que la página es visitada por cualquier individuo interesado, mientras que
el servicio sólo lo visitan programas que lo requieren.

Referencia: http://web-services.bankhacker.com/

II.- Desarrollo de una aplicación en Flash MX 2004 Pro con Web Services.

La aplicación que se va a desarrollar es para saber el tipo de cambio con
diferentes tipos de divisas, para lo cual se usará el siguiente Servicio Web ubicado
en la dirección http://www.webservicex.net/CurrencyConvertor.asmx?WSDL
En este servicio web si abrimos la liga directamente nos muestra su
estructura y que datos son los que se deben enviar para que el servicio nos
devuelva una respuesta. En este caso los parámetros que nos pide este servicio es
los dos tipos de divisas o monedas de los cuales se quiere saber el tipo de cambio,
por ejemplo el Peso Mexicano tiene una nomenclatura de MXN, mientras que la del
Dollar Americano es USD. Por lo tanto mandaremos a través de Flash MX 2004 Pro
ambas nomenclaturas para que el servicio web nos devuelva una respuesta.
Al igual que en una receta de cocina necesita de ingredientes, necesitaremos
varios componentes y objetos para realizar nuestra aplicación.

  1. Arrastra al escenario un componente WebServiceConnector, ubicado en el
    panel Componentes en la sección “Data Components”. Si no tienes abierto dicho
    panel, selecciona el menú Ventana / Paneles de desarrollo / Componentes.

Figura 1.- componente WebServiceConnector
  1. Selecciona dicho componente y dale un nombre de instancia. Para el ejemplo se
    usará el nombre de instancia “wsConversor ”.
  2. Arrastra dos componentes ComboBox al escenario. Dicho componente se
    encuentra ubicado en la sección “UI Components”.
  3. Selecciona cada uno de los Combobox y dales a cada uno un nombre de instancia respectivamente, para el ejemplo los he llamado “cmbMoneda1” y“cmbMoneda2”.
  4. Arrastra al escenario un componente TextInput y dale un nombre de instancia.
    Por ejemplo “txtCambio”.
  5. Arrastra un componente Button al escenario y de igual forma hay que
    nombrarlo con un identificador de instancia, en este caso lo llamaremos
    “botCambio”.
  6. Por ultimo agrega unos rótulos con la herramienta texto para identificar cual es
    la primera divisa y cual es la segunda.
Hasta ahora va todo bien, solo tenemos la parte gráfica de nuestra aplicación, por el momento olvidándonos del diseño gráfico, nuestra aplicación debe lucir algo así…

sFigura 2.- Apariencia de la aplicación.

Vamos ahora a enlazar nuestra aplicación con el WebService (Para los siguientes pasos es necesario estar conectado a Internet).

Abre el panel Servicios Web, ubicado en el menú Ventana / Paneles de desarrollo / Servicios Web.


Figura 3.- Panel Servicios Web

En dicho panel, da clic en el menú desplegable ubicado en la esquina superior derecha y selecciona la opción "Definir servicios Web…"


Figura 4.- Definición de servicios web
Al aparecer la siguiente ventana, da clic en el signo más e introduce en el campo la dirección del servicio Web. Para el ejemplo usaremos la siguiente URL http://www.webservicex.net/CurrencyConvertor.asmx?WSDL

Figura 5.- Añadiendo la URL del servicio Web
Al momento que damos clic en el botón ACEPTAR, nuestro panel de Servicios Web se va actualizar y nos desplegara información necesaria de dicho Web Service.

Figura 6.- Panel Servicios Web ya con un WebService encontrado
Bueno, pero ¿qué información nos despliega este panel?

Figura 7.- Información del servicio Web

La mayoría de los servicios Web presentan una estructura muy parecida, por lo tanto se te hará fácil identificar cada una de las partes de dicho servicio.

Con referencia a la figura anterior:

  1. Despliega el nombre del servicio Web, en este caso se llama “CurrencyConvertor”.
  2. Establece la función o procedimiento que se ha de realizar cuando se le mandan datos al servicio Web. En este caso la función para hacer la conversión de divisas se llama ConversionRate(), dicha función esta acompañada de una descripción de lo que realiza.
  3. Params. Establece qué datos son requeridos para poder realizar la función. En este caso se necesitan dos datos, la divisa primaria y la divisa a la cual se quiere convertir, ambas en tipo de datos String o cadena.
  4. Results. Establece el resultado de la función que se mando llamar, indicando también el tipo de datos devuelto, en este caso es de tipo numérico doble.

Hasta ahora ya hicimos como quien dice el enlace con el servicio Web y obtuvimos la información necesaria para poder obtener un resultado, ahora necesitamos configurar nuestros componentes para que envíen y reciban información del servicio Web. Para esto continuemos con los siguientes pasos.

Selecciona el componente WebServiceConnector que se encuentra en el escenario, haciendo uso del panel Propiedades selecciona la pestaña Parámetros y en el campo “WSDLURL”, introduce la misma dirección del servicio Web (http://www.webservicex.net/CurrencyConvertor.asmx?WSDL). Y en el campo “operation”, selecciona la función “ConversionRate”.


Figura 8.- Propiedades del componente WebServiceConnector
Con el componente seleccionado, abre el panel Inspector de Componentes (Ventana / Panel de desarrollo / Inspector de componentes) y posiciónate en la pestaña de Vinculaciones.

Figura 9.- Panel Inspector de componentes / pestaña de vinculaciones
Da clic en el signo más ( + ) para que aparezca la siguiente ventana. Si al hacer este paso te genera un error, es por que probablemente no has nombrado el componente.

Figura 10.- Añadir vinculación.

Selecciona el primer parámetro ( FromCurrency:String ) y da clic en el botón Aceptar.

En la pestaña de “Vinculaciones” del panel Inspector de componentes debe de aparecer el parámetro que seleccionaste. Da clic en la lupa que aparece cuando das clic en el campo “bound to”.


Figura 11.- Propiedades del parámetro
Aparecerá la ventana “Vinculado a…”, ahí selecciona el primer ComboBox en el panel “Ruta de componente”. Al hacer esto aparecerán unos datos en el panel “Ubicación del esquema”, en donde debes seleccionar la opción “value:String” y da clic en el botón Aceptar.

Figura 12.- Ventana de Vinculado a…
¿Qué hicimos en estos pasos?

Bueno, simplemente le dijimos al componente WebServiceConnector que el primer parámetro lo va a proporcionar el ComboBox llamado cmbMoneda, a su vez que el dato proporcionado es el valor seleccionado del combo y que es del tipo String o cadena.

Ahora repite los mismos pasos para vincular el segundo parámetro con el segundo combobox.

Ya que ambos parámetros han sido vinculados con los combobox, ahora es necesario vincular el resultado del servicio web con el componente TextInput. Para ello volvemos a dar clic en el signo ( + ) de la pestaña vinculaciones, y en la siguiente ventana selecciona el ultimo dato “results:Number”, para finalizar presiona el botón Aceptar.


Figura 13.- Añadir vinculación

Dar clic en la opción “bound to”. Al aparecer la ventana “Vinculando a” en el panel “Ruta del componente” selecciona el TextInput y en el panel “Ubicación del esquema” selecciona la única opción disponible “text:String”.


Figura 14.- Vinculando el resultado con la caja de texto

De esta forma terminamos de vincular el sevicio Web con nuestros respectivos componentes.

Ahora habrá que configurar los componentes ComboBox para que puedan enviar los datos requeridos por el servicio Web.

Selecciona el primer ComboBox (“cmbMoneda1”) y con ayuda del panel Propiedades da clic en la opción “Data” y vuelve a dar clic sobre la lupa que aparece de lado derecho.


Figura 15.- Propiedades del componente ComboBox
En la siguiente ventana agrega las siguientes nomenclaturas dando clic en el botón mas ( + ), Dichas nomenclaturas fueron extraídas de la pagina Web donde se encuentra el servicio Web.

Figura 16.- Valores del ComboBox cmbMoneda1

Una vez que se hayan asignado las nomenclaturas al Combobox, habrá que agregar las etiquetas en el mismo orden en que fueron incluidas las nomenclaturas, para ello se debe de dar clic en la lupa que aparece en el campo “labels” del panel Propiedades.

Repite los pasos anteriores con el segundo ComboBox para que ambos componentes tengan las mismas nomenclaturas y etiquetas. (Si lo prefieres, copia y pega el primer combobox y únicamente cambia el nombre de instancia a “cmbMoneda2” y elimina el otro que esta vacío).

Ya estamos por finalizar nuestra aplicación, ahora nos falta únicamente configurar el botón para que mande los parámetros y recibamos el resultado.

Selecciona el botón y cambia su etiqueta con un mensaje descriptivo a lo que va a realizar, este caso le puse “Ver tipo de cambio”. Hay que asegurarnos que le hayamos dado un nombre de instancia.

Creamos una capa nueva en la línea de tiempo principal y seleccionado el frame 1 presionamos la tecla F9 para abrir el panel Acciones.

Ingresa el siguiente código:

//Creamos un objeto nuevo del tipo objeto 
var on_Release = new Object();
//Declaramos la función que se va a realizar cuando se haga clic
on_Release.click = function(evt) {
//Limpiamos la caja de texto
txtCambio.text = "";
//Lanza la función del webservice
_root.wsConversor.trigger();
};
//Asignamos el Listener al componente botón
botCambio.addEventListener("click", on_Release);

Guarda tu documento y presiona Ctrl + Enter para publicar tu SWF y ver como funciona tu conversor de divisas mediante WebService.

De esta forma finalizamos con los pasos para elaborar nuestra aplicación. Ya contando con algo de diseño pues es posible que nos quede algo así o mucho mejor, eso es cuestion de su creatividad.


Figura 17.- Aplicación terminada y publicada.
Qué te parece si intentas hacer un traductor de palabras a diferentes idiomas. Si te interesa este pequeño ejercicio, la liga del webService es http://www.webservicex.net/TranslateService.asmx?WSDL


Figura 18.- Interfaz para un traductor de palabras

III.- Conclusiones.

El proceso para conectar un Web Service con Flash MX 2004 Pro es bastante sencillo como se puede apreciar, simplemente se necesita la dirección del Web Service, saber cual es la función que realiza, los parámetros que necesita y que resultado es el que arroja, de igual forma debemos indicar de que componentes u objetos se obtendrán los parámetros y en donde queremos recoger el resultado.

Espero que les haya sido de utilidad, nos leeremos después. Sus dudas o comentarios, por favor, dirijanlos al foro

Atentamente
Ing. Julio Heberto González Morales

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate