PDF de programación - Tutoriales de datos (sólo para Flash Professional)

Tutoriales de datos
(sólo para Flash Professional)

Los tutoriales siguientes ilustran varias formas de utilizar la vinculación de datos y los
componentes de datos en Macromedia Flash MX Professional 2004. Muchos de los tutoriales
utilizan servicios Web públicos y, por lo tanto, requieren una conexión a Internet. Asimismo, los
tutoriales no funcionarán en un navegador debido a las restricciones de libre configuración, pero
funcionarán en el entorno de edición de Flash o Flash Player.
• Tutorial de servicios Web: Babel Fish
• Tutorial de servicios Web: Cotizaciones de valores
• Tutorial de servicios Web: Actualización del servicio Web de cotizaciones de valores
• Tutorial XUpdate: Horario
Nota: para completar el tutorial de horarios, debe descargar el archivo data.xml.
Estos tutoriales son modelos de trabajo que ilustran la utilización de los componentes de datos
(XMLConnector, conector WebServices, RDMBSResolver y XUpdateResolver) con la
vinculación de datos en Flash MX Professional 2004. No están diseñados como aplicaciones listas
para la producción.
Nota: la utilización de servicios Web públicos en estos tutoriales no implica en ningún caso que deba
utilizarlos para aplicaciones del mundo real. De hecho, Macromedia no recomienda el uso de
servicios Web públicos directamente desde una aplicación del lado del cliente. Para obtener más
información, consulte “Aplicaciones y servicios Web” en el capítulo “Integración de datos” de la
publicación Utilización de Flash (en Flash, seleccione Ayuda > Utilización de Flash).
Si tiene problemas al descargar o descomprimir los archivos, consulte la nota técnica 13686.

Tutorial de servicios Web: Babel Fish

En este tutorial, utilizará el panel Servicios Web para conectarse al servicio Web público de Alta
Vista, Babel Fish, que se utiliza para traducir texto de un idioma a otro. A continuación, utilizará
componentes para configurar una interfaz de usuario simple.
Completará las tareas siguientes:
• “Conexión a un servicio Web público” en la página 2
• “Creación de una interfaz de usuario y vinculación de los componentes con el servicio Web” en

la página 3

1

Conexión a un servicio Web público

Empezará definiendo un servicio Web para conectarse a un servicio Web público.
1 Cree un documento de Flash nuevo mediante Flash MX Professional 2004. Asegúrese de que el

equipo esté conectado a Internet.

2 Abra el panel Servicios Web (Ventana > Paneles de desarrollo > Servicios Web) y haga clic en el

botón Definir servicios Web.

3 En el cuadro de diálogo Definir servicios Web que aparecerá, haga clic en el botón Añadir

servicio Web (+) y, a continuación, en la línea resaltada para editarlo.

4 Especifique el URL http://www.xmethods.net/sd/2001/BabelFishService.wsdl y haga clic en

Aceptar.

5 En el panel Servicios Web, inspeccione los métodos, parámetros y resultados del servicio Web

Babel Fish.

Hay dos parámetros: translationmode y sourcedata. En el paso siguiente, conectará estos
parámetros con los cuadros de entrada de texto de la aplicación. También conectará los
resultados con la aplicación.

2

Tutoriales de datos (sólo para Flash Professional)

6 Haga clic con el botón derecho del ratón en el método BabelFish y seleccione en el menú

contextual Añadir llamada de método.
Se añadirá una instancia del componente WebServiceConnector al escenario.

7 En el inspector de propiedades, introduzca el nombre de instancia babelFish.

Ahora, el componente está configurado y en el escenario. Puede colocarlo en cualquier lugar
dentro o fuera del escenario. Cuando ejecute la aplicación, será invisible.

Creación de una interfaz de usuario y vinculación de los componentes con el
servicio Web

A continuación, utilizará los componentes para crear una interfaz de usuario simple en la que los
usuarios podrán escribir una palabra en un idioma, hacer clic en un botón y ver los resultados en
otro. Esto se consigue vinculando los componentes de la interfaz de usuario del escenario con los
parámetros y resultados del servicio Web Babel Fish.
1 En el panel Componentes, seleccione UI Components > TextInput. Arrastre un componente

TextInput al escenario. En el inspector de propiedades, introduzca el nombre de instancia
source.

2 Arrastre otro componente TextInput al escenario. En el inspector de propiedades, introduzca el

nombre de instancia mode.

3 En el panel Componentes, seleccione UI Components > TextArea. Arrastre el componente al

escenario. En el inspector de propiedades, introduzca el nombre de instancia result.

4 En el panel Componentes, seleccione UI Components > Label y arrastre un componente Label

al escenario. Colóquelo a la izquierda del componente TextInput de origen.

5 En el campo Nombre de instancia del inspector de propiedades, escriba textLabel y escriba

Texto para el tipo de propiedad de texto, tal como se muestra a continuación:

Inspector de propiedades con el nombre de instancia textLabel y el texto Texto.

6 Del mismo modo, arrastre otro componente Label a la izquierda del componente de modo

TextInput. En el inspector de propiedades, escriba el nombre de instancia languageLabel y en
el tipo de campo de texto escriba Idioma.

Tutorial de servicios Web: Babel Fish

3

7 Por último, arrastre otro componente Label a la izquierda del componente TextArea del

resultado. En el inspector de propiedades, escriba el nombre de instancia resultLabel y en el tipo
de campo de texto escriba Resultado.

Ahora, agregue un vínculo para el componente de conexión WebService del modo de
traducción BabelFish al componente de modo TextInput que permitirá al usuario especificar el
idioma de traducción.

8 En el escenario, seleccione el componente WebServiceConnector. Abra el panel Inspector de
componentes y haga clic en la ficha Vinculaciones. Haga clic en el botón Añadir vinculación
(+). En el cuadro de diálogo Añadir vinculación, seleccione translationMode:String (debajo
de params:Objet) y haga clic en Aceptar.

4

Tutoriales de datos (sólo para Flash Professional)

9 En el panel Inspector de componentes, haga doble clic en el valor vacío del campo Bound To

y, en el cuadro de diálogo Vinculado a, seleccione TextInput, <mode> para la ruta del
componente y text:String para la ubicación del esquema. Haga clic en Aceptar.

Campo Bound To en el panel Inspector de componentes

Selección de la ruta del componente y la ubicación del esquema en el cuadro de diálogo Vinculado a

A continuación, vinculará el parámetro sourcedata del conector de servicios de Web al
componente de origen del escenario.

10 En el panel Inspector de componentes, vuelva a hacer clic en el botón Añadir vinculación (+).

En el cuadro de diálogo Añadir vinculación, seleccione sourcedata:string y haga clic en
Aceptar. En el panel Inspector de componentes, haga doble clic en el valor vacío del campo
Bound To y, en el cuadro de diálogo Vinculado a, seleccione TextInput, <source> para la
ruta del componente y text:String para la ubicación del esquema. Haga clic en Aceptar.
A continuación, vinculará results del conector de servicios de Web al componente de
resultado del escenario.

11 En el panel Inspector de componentes, vuelva a hacer clic en el botón Añadir vinculación (+).
En el cuadro de diálogo Añadir vinculación, seleccione results:String y haga clic en Aceptar.
En el panel Inspector de componentes, haga doble clic en el valor vacío del campo Bound To
y, en el cuadro de diálogo Vinculado a, seleccione TextArea, <results> para la ruta del
componente y text:String para la ubicación del esquema. Haga clic en Aceptar.
Por último, creará un botón Enviar. Para ello, utilizará un componente Button y el
comportamiento Activar origen de datos. Este comportamiento permite establecer como
destino cualquier componente conector de la aplicación. Si se agrega a un botón, el conector
intentará recuperar datos cuando se pulse dicho botón.

12 Arrastre un componente Button al escenario y asígnele el nombre de instancia submit_btn en

el inspector de propiedades. En el panel Inspector de componentes, haga clic en la ficha
Parámetros. En el campo Label, escriba Enviar.

Tutorial de servicios Web: Babel Fish

5

13 Con el botón seleccionado en el escenario, abra el panel Comportamientos (Ventana > Paneles

de desarrollo > Comportamientos). Haga clic en el botón Añadir comportamiento (+) y
seleccione Datos > Activar origen de datos. En el cuadro de diálogo Activar origen de datos,
seleccione el componente babelFish. Haga clic en Aceptar.

14 Guarde el archivo.
15 Pruebe la aplicación (Control > Probar película). Escriba hello en el cuadro Texto (entrada de
origen). Escriba en_es en el cuadro Idioma (entrada de modo). Haga clic en el botón Enviar.
Los resultados deberían ser algo parecido a lo que se muestra en el gráfico siguiente:

Haga más pruebas escribiendo otras palabras o frases en inglés y haciendo clic en Enviar.

Tutorial de servicios Web: Cotizaciones de valores

En este tutorial, utilizará el panel Servicios Web para conectarse a un sitio público de cotizaciones
de valores. A continuación, creará y modificará una interfaz de usuario.
Completará las tareas siguientes:
• “Conexión a un sitio público de cotizaciones de valores” en la página 7
• “Creación de una interfaz de usuario que se integre con el sitio de cotizaciones de valores” en

la página 8

• “Cambio de visualización de la información de cotizaciones” en la página 11
• “Visualización del volumen de cotización” en la página 12
• “Visualización de información de cotizaciones adicional” en la página 13
• “Acceso a los datos mediante el componente DataSet” en la página 15
• “Adición de cierta navegación” en la página 19
• “Edición de los datos” en la página 20
• “Utilización de un componente resolver para actualizar los datos” en la página 20

6

Tutoriales de datos (sólo para Flash Professional)

Conexión a un sitio público de cotizaciones de valores

Empezará creando una interfaz de usua