Web Services en Flex
De acuerdo a WikiPedia, un Servicio Web es un conjunto de protocolos y estándares que permiten intercambiar datos entre aplicaciones desarrolladas en diferentes lenguajes de programación y ejecutadas sobre cualquier plataforma.
Dentro de Flex existe la clase WebService, al cual nos permite acceder a Servicios Web en SOAP. En esta entrada usaremos un servicio web que, de acuerdo a nuestra consulta, nos regresa el número teléfonico (lada) internacional (International Dialing code) del país que seleccionemos.
Para este ejercicio usaremos Flex Builder 3 y Flash CS3.
Tutorial
1. Abre Flex Builder 3 y crea un nuevo proyecto (En tipo de aplicación selecciona Aplicación Web). Ponle como nombre de proyecto LadaInternacional. Haz click en el botón de Finalizar.
2. Da click en el botón vista de <em>Diseño</em> y arrastra los siguientes elementos al área de diseño:
- 1 Componente SWFLoader
- 3 Controles Label con los siguientes textos: País, Lada y Respuesta
- 2 Controles Label sin texto; el ID del primero deberá ser pais_lb, y del segundo lada_lb
- 1 Control TextArea con ID info_txt
La distribución deberá ser similar a la siguiente imagen:
3. Baja el siguiente archivo SWF y guardalo en la carpeta raíz de tu proyecto (LadaInternacional).
 |
 |
La imagen del mapa la bajé de FlashKit en esta dirección.
El archivo de Flash está formado por un mapa y unos botones rojos, los cuales muestra el nombre del país al ponerse encima de ellos (rollOver). Los nombres de instancia de cada uno de estos botones son:
- mex_btn: Botón para México
- can_btn: Botón para Canadá
- usa_btn: Botón para Estados Unidos
- arg_btn: Botón para Argentina
- bra_btn: Botón para Brasil
- esp_btn: Botón para España
El código ActionScript que contiene el archivo de Flash es:
-
mex_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
-
can_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
-
usa_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
-
arg_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
-
bra_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
-
esp_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
-
-
function muestraCodigo(evento:MouseEvent):void {
-
var pais:String = "";
-
switch(evento.target.name){
-
case "mex_btn":
-
pais = "Mexico";
-
break;
-
case "can_btn":
-
pais = "Canada";
-
break;
-
case "usa_btn":
-
pais = "United States";
-
break;
-
case "arg_btn":
-
pais = "Argentina";
-
break;
-
case "bra_btn":
-
pais = "Brazil";
-
break;
-
case "esp_btn":
-
pais = "Spain";
-
break;
-
}
-
root.parent.parent['parentApplication'].llamadaServicio(pais);
-
}
El código anterior modifica el valor de la variable pais de acuerdo al botón que se hizo click, y se realiza la llamada a la función llamadaServicio que se encuentra en nuestra aplicación de Flex.
4. Selecciona el SWFLoader y en el panel de propiedades haz click en el botón Browse del lado derecho de Source (Fuente). Selecciona el archivo SWF que acabas de bajar (mapa-en-flash.swf) y haz click en el botón abrir.
5. Haz click en el botón de vista Source. Agrega las siguientes líneas de código
-
<mx:WebService id="codigoLada" wsdl="http://www.webservicex.net/country.asmx?wsdl" fault="Alert.show(event.fault.faultString);" showBusyCursor="true">
-
<mx:operation name="GetISD" result="callResultHandler(event)" fault="callFaultHandler(event)">
-
<mx:request>
-
<CountryName>{pais}</CountryName>
-
</mx:request>
-
</mx:operation>
-
</mx:WebService>
En el código anterior primero creamos el tag WebService y establecemos sus propiedades. En este caso, el servicio web que vamos a usar se encuentra en http://www.webservicex.net/country.asmx?wsdl.
La propiedad fault nos permite especificar qué acciones se llevarán a cabo cuando se presente un error. En este caso estamos mostraremos un mensaje de alerta con la información del error.
La propiedad showBusyCursor cuando está en true mostrará como cursor un reloj mientras se esté ejecutando el servicio.
Dentro del tag de operación (operation) especifícamos el nombre de la función que usaremos como servicio. En este caso la función u operación se llama GetISD y el resultado se usará en la función callResultHandler.
El tag de request nos permite especificar el valor de los párametros que se deben enviar al ejecutar el servicio. En el caso de este Web Service, sólo requeremos enviar un párametro cuyo nombre es CountryName. Este parámetro va a tomar el valor de la variable pais.
El nombre de la función (GetISD) y de los parámetros (CountryName) vienen especificados en el descriptor del servicio. Dentro de este archivo se pueden observar las siguientes líneas:
-
<s:element name="GetISD">
-
<s:complexType>
-
<s:sequence>
-
<s:element minOccurs="0" maxOccurs="1" name="CountryName" type="s:string"/>
-
</s:sequence>
-
</s:complexType>
-
</s:element>
6. Ahora veremos el código necesario para recibir la respuesta del servicio web y hacer uso de los datos recibidos. Añade el siguiente código a tu aplicación de Flex:
-
<mx:Script>
-
<![CDATA[
-
/* Importamos las librerías que requerimos */
-
import mx.controls.Alert; /* Para mostrar el mensaje de Alerta si hubo algún error */
-
import mx.rpc.events.FaultEvent; /* Necesario para cuando se presente un error en el evento al tratar de ejecutar el servicio */
-
import mx.rpc.events.ResultEvent; /* Lo utilizamos para manejar los resultados del evento */
-
-
[Bindable]
-
public var pais:String = ""; /* Variable que usaremos como parámetro para la llamada del servicio */
-
-
/* Esta función es llamada desde el archivo de Flash cuando se hace click en alguno de los botones de los países */
-
public function llamadaServicio(country:String):void {
-
pais = country; /* Recibimos como parámetro el nombre del país de acuerdo al botón al que le hizo click el usuario */
-
codigoLada.GetISD.send(); /* Hacemos la llamada al servicio enviando los datos necesarios.
-
Observa que la variable país ya estaba ligada al servicio (Línea 4 del último código ActionScript que puse) */
-
}
-
-
/* Esta función es llamada cuando hubo un error al tratar de ejecutar el servicio */
-
private function callFaultHandler(error:FaultEvent):void {
-
/* Mostramos el error en consola, con un mensaje de alerta y en el campo de texto info_txt */
-
trace("Error: " + error.fault.toString());
-
Alert.show(error.fault.toString(), "Error");
-
pais_lb.text = error.fault.toString();
-
}
-
-
/* Esta función es llamada cuando no hubo error y el servicio web nos regresa la respuesta */
-
private function callResultHandler(event:ResultEvent):void {
-
// Guardamos en una variable de texto el resultado que trae el evento
-
var respuesta:String = event.target.lastResult.toString();
-
/* Debido a que el Servicio Web nos regresa un XML, estos datos se los pasamos a una variable de tipo XML */
-
var XMLresult:XML = new XML(respuesta);
-
-
/* Mostramos el resultado en las diversas cajas de texto */
-
info_txt.text = XMLresult.Table[0].toXMLString(); /* Mostramos el XML regresado */
-
lada_lb.text = XMLresult.Table[0].code.toString(); /* Mostramos el valor del nodo code */
-
pais_lb.text = XMLresult.Table[0].name.toString(); /* Mostramos el valor del nodo name */
-
}
-
-
]]>
-
</mx:Script>
Aquí va de nuevo todo el código junto de la aplicación en Flex (LadaInternacional.mxml):
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
-
<mx:Script>
-
<![CDATA[
-
import mx.controls.Alert;
-
import mx.rpc.events.FaultEvent;
-
import mx.rpc.events.ResultEvent;
-
-
[Bindable]
-
public var pais:String = "";
-
-
public function llamadaServicio(country:String):void {
-
pais = country;
-
codigoLada.GetISD.send();
-
}
-
-
private function callFaultHandler(error:FaultEvent):void {
-
trace("Error: " + error.fault.toString());
-
Alert.show(error.fault.toString(), "Error");
-
info_txt.text = error.fault.toString();
-
}
-
-
private function callResultHandler(event:ResultEvent):void {
-
var respuesta:String = event.target.lastResult.toString();
-
var XMLresult:XML = new XML(respuesta);
-
-
info_txt.text = XMLresult.Table[0].toXMLString();
-
lada_lb.text = XMLresult.Table[0].code.toString();
-
pais_lb.text = XMLresult.Table[0].name.toString();
-
}
-
-
]]>
-
</mx:Script>
-
<mx:WebService id="codigoLada" wsdl="http://www.webservicex.net/country.asmx?wsdl" fault="Alert.show(event.fault.faultString);" showBusyCursor="true">
-
<mx:operation name="GetISD" result="callResultHandler(event)" fault="callFaultHandler(event)">
-
<mx:request>
-
<CountryName>{pais}</CountryName>
-
</mx:request>
-
</mx:operation>
-
</mx:WebService>
-
<mx:SWFLoader y="18" horizontalCenter="14" source="../mapa-en-flash.swf"/>
-
<mx:Label y="284" text="País:" fontWeight="bold" color="#F3F7F8" fontSize="14" horizontalCenter="-132"/>
-
<mx:Label y="315" text="Lada:" fontWeight="bold" color="#F3F7F8" fontSize="14" horizontalCenter="-129"/>
-
<mx:Label y="284" fontWeight="bold" color="#77180E" fontSize="14" width="129" id="pais_lb" horizontalCenter="-24"/>
-
<mx:Label y="315" fontWeight="bold" color="#77180E" fontSize="14" width="129" id="lada_lb" horizontalCenter="-24"/>
-
<mx:TextArea y="356" width="345" height="126" id="info_txt" horizontalCenter="84"/>
-
<mx:Label y="356" text="Respuesta:" fontWeight="bold" color="#F3F7F8" fontSize="14" horizontalCenter="-149" textDecoration="underline"/>
-
<mx:LinkButton click="navigateToURL(new URLRequest('www.codigometropoli.com'))" label="www.codigometropoli.com" horizontalCenter="35" bottom="50" fontSize="12" color="#E1E4E4" themeColor="#00BAFF"/>
-
-
</mx:Application>
Hemos llegado al final del tutorial, no olvides bajar los archivos y visitar la página de ejemplo.
 |
 |
Post Relacionados:
Enlaces recomendados:
» Servicio Web en WikiPedia
» Clase WebService (Adobe® Flex® 3 Language Reference)
» Adobe® Flex® 3 Language Reference
Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.
Comentarios
Hola Gaston,
Creo que el problema está en la configuración de seguridad de tu Flash Player. Para solucionarlo te recomiendo que abras en tu navegador cualquier página que contenga algún elemento de Flash, le des click con el botón derecho sobre el SWF y selecciones la opción de "Configuración..." y luego en el botón "Avanzado..." (o bien, puedes entrar directamente haciendo click en esta página: http://www.macromedia.com/support/documentation/es/flashplayer/help/settings_manager04.html
En esa página verás una ventana que dice "Parámetros de seguridad global". Selecciona el botón de radio "Permitir siempre" y luego selecciona la opción "Agregar..." del combo que aparece abajo. Da click en el botón "Buscar carpeta..." y selecciona la carpeta de tu workspace.
Después de hacer lo anterior vuelve a correr tu proyecto para ver si ya no te aparece el error.
Saludos.
Carla
Saludos
Son mis primeros pinos en flex.
En programacion llevo muchos años.
Estoy siguiendo tu ejemplo de la pagina de Ingresos / Gastos, y la tome como guia, pero necesito saber como agregar un componente mas. He tratado pero no he podido agregar mas.
Espero me puedas ayudar. De antemano gracias
Desde Bogota, Colombia
Hola Roberto,
Creo que este comentario debería ir en el post de "Sistema de Gastos en Flex con AMFPHP y MySQL", después lo moveré a ese post por si no lo encuentras.
Si te refieres a un campo de texto, combobox, botón de radio, etc. solamente deberás abrir, con el Flex Builder 3, el archivo mxml donde lo quieras añadir (por ejemplo Servicios, Divisas, AltaGasto, etc.). Si al abrir el archivo se ve el código fuente haz click en el botón de Design que se encuentra debajo de las pestañas de los documentos abiertos.
Una vez estando en la vista de diseño, haz click en el botón de Window -> Components. De lado inferior izquierdo estará el panel de Componentes, arrastra el componente que quieras al área de trabajo, asignale un nombre de ID dentro del panel Propiedades y listo, ya podrás hacer uso de las propiedades y métodos de ese componente dentro de tu código.
Saludos.
Hola Carla,
Muy bueno tu ejemplo, pero no me funciona con un webservice que tengo yo que necesito obtener los valores de cada nodo, lo que me retorna el webservice es la siguiente estructura xml:
12
Informática
Analista de Calidad
Maria
el código actionScript que utilizo es el sgte:
[Bindable]
public var xdata:XML = new XML();
private function callResultHandler(event:ResultEvent):void{
xdata = XML(event.result);
var obElement:Object;
txtresult.text = xdata.toString();
txtresult.text = data.Table[0].toXMLString();
txtCodArea.text = xdata.Table[0].codAraO.toString();
txtNomArea.text = xdata.Table[0].nomAraO.toString();
txtNomCargo.text = xdata.Table[0].nomCrgO.toString();
txtNomUsuario.text = xdata.Table[0].nomUsuO.toString();
}
el código para el webservice que utilizo es el sgte:
Ups un error en el copy-paste, aca va la estructura del xml, que retorna mi webservice:
12
Informática
Analista de Calidad
Creador
Maria de las Mercedes
(vaya hay un problema al copiar)
Bueno los nodos son los siguientes:
//
//
// 12
// Informática
// Analista de Calidad
// Creador
// Maria de las Mercedes
//
//
ok muchas gracias Carla, aqui esta el código que me genera el webservice:
-
12
-
Informática
-
Analista de Calidad
-
Creador
-
Maria de las Mercedes
Hola Angie,
¿Cuál es el problema?
¿Qué te muestra la aplicación cuando se ejecuta la siguiente línea?
-
txtresult.text = data.Table[0].toXMLString();
Escribe un trace o un Alert dentro de la función callResultHandler para ver si está entrando ahí.
Saludos.
Estimada Carla,
Muchas gracias por responderme, he probado y sí, entra correctamente a la función callResultHandler, pero cuando llega a esta linea
txtresult.text = data.Table[0].toXMLString();
No hace nada ni siquiera me da error...
Mira mi duda en sí, es cómo obtener los datos del XML, por el nombre de los tags xml, encontre esa forma que doy como ejemplo, pero no me está resultando.
Gracias por tu ayuda.
Hola Angie,
¿Podrías poner una imagen de tu XML o pasarlo a un .txt y subirlo a rapidshare, megaupload, imageshack o alguno de esos?
Saludos.
Hola Carla,
Muchisimas gracias por ayudarme, acá te dejo el link del archivo txt con el xml:
http://rapidshare.com/files/180243250/LoginWeb_wsdl.txt.html
Escribe un comentario
Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.
Hola estoy intentando hacer que funcione el ejemplo que dejaste pero me sale el siguiente error:
"ecurityError: Error #2047: Violación de la seguridad Sandbox: parent: file://C:\workspace\Unidad_17\mapa-en-flash.swf no puede acceder a file://C:\workspace\Unidad_17\bin-debug\Unidad_17.swf.
at flash.display::DisplayObject/get parent()
at mapa_fla::MainTimeline/muestraCodigo()"
Te lo agreadeceria si me ayudas con este tema muchismas gracias...