Instructivo dia 2_curso_flex

UNIVERSIDAD DE LA FRONTERA

DEPARTEMENTO DE EDUCACIÓN MUNICIPAL DE TEMUCO

“DESARROLLO DE INTERFACES DE USUARIO WEB EN ADOBE FLEX 4.5”

ETAPA 2: INTERFAZ DE VISUALIZACIÓN DE DATOS.

ROSSANA ALEJANDRA CONTRERAS HIDALGO.

2012

Centro de Estudios de Ingeniería en Software
Rossana Contreras, rossana.contreras@ceisufro.cl

RESUMEN

El presente documento corresponde a un instructivo técnico que busca proporcionar al
alumno la información paso a paso para la construcción de una interfaz de usuario web
que permita, al conectarla con un servicio web, visualizar los datos de persona
almacenados. Todo esto en el marco de los cursos de verano impartidos por parte de la
Universidad de la Frontera en conjunto con el proyecto Explora para el Departamento
de Educación Municipal de Temuco.

ÍNDICE DE CONTENIDO

1. Creando Estructura de Interfaz para Visualizar Registros Almacenados. ............................. 5
2. Conexión de la Pantalla de Visualización de Datos con el Servicio Web........................... 12

ÍNDICE DE FIGURAS

Ilustración 1. IDE FLEX. .................................................................................................................. 5
Ilustración 2. Vista diseño Flex. ..................................................................................................... 5
Ilustración 4. Barra de componentes Flex..................................................................................... 6
Ilustración 6. Barra de componentes Flex..................................................................................... 7
Ilustración 7. Vista de diseño Flex. ................................................................................................ 8
Ilustración 8. Vista de código Flex. ................................................................................................ 9
Ilustración 9. Vista de código Flex. ................................................................................................ 9
Ilustración 10. Vista de código Flex. ............................................................................................ 10
Ilustración 11. Barra de componentes Flex................................................................................. 10
Ilustración 12. Vista de diseño Flex. ............................................................................................ 11
Ilustración 13. Barra de componentes Flex................................................................................. 11
Ilustración 14. Vista de diseño Flex. ............................................................................................ 12
Ilustración 15. Asistente de conexión Flex. ................................................................................. 13
Ilustración 21. Vista diseño Flex. ................................................................................................. 16
Ilustración 22. Propiedades del proyecto. .................................................................................. 17
Ilustración 23. Asistente de búsqueda de librerías. .................................................................... 17
Ilustración 24. Asistente de búsqueda de librerías. .................................................................... 18
Ilustración 25. Vista código Flex. ................................................................................................. 19
Ilustración 26. Probando Proyecto.............................................................................................. 19
Ilustración 27. Proyecto en funcionamiento. .............................................................................. 20

Centro de Estudios de Ingeniería en Software
Rossana Contreras, rossana.contreras@ceisufro.cl

1. Creando Estructura de Interfaz para Visualizar Registros Almacenados.

Abra la herramienta de trabajo desde el escritorio.

Ilustración 1. IDE FLEX.

Y sobre el proyecto creado en la etapa anterior proceda a agregar una nueva pestaña al
componente que divide el espacio llamado “Accordion”, debe dar un click sobre éste y
verá que aparece una barra superior con el signo “+” debe presionar éste y dar un
nombre a su nueva pestaña “Visualizar Registros”.

Ilustración 2. Vista diseño Flex.

5

La siguiente pantalla aparecerá, configure como muestra la imagen y pulse “OK”.


De esta forma ha creado una nueva pestaña donde se creará la interfaz que buscará y
mostrará los registros que ha ingresado en la etapa anterior. El siguiente paso es añadir
los componentes que tendrá la interfaz, busque un “TextInput” en la barra de
componentes y arrástrelo dentro de la pestaña recién creada.

Ilustración 4. Barra de componentes Flex.

6

Identifique este campo de texto como “filtro”, como se muestra a continuación.


Busque el componente “DataGrid” en la barra de componentes y arrástrelo a su espacio
de trabajo.


7

Posteriormente seleccione la grilla (DataGrid) y diríjase a la vista de código de la
aplicación.

Ilustración 7. Vista de diseño Flex.

El código que se muestra a continuación seleccionado es el correspondiente a la
DataGrid (se encuentra entre las etiquetas <s:DataGrid></s:DataGrid>).

8

Ilustración 8. Vista de código Flex.

La herramienta proporciona datos de muestra para este componente que no nos servirán
en este caso, así que debe proceder a borrar el siguiente código marcado en amarillo.


9

Posteriormente se debe cambiar el valor de la propiedad “dataField” que identifica que
datos van a ser mostrados en esa columna y “headerText” que corresponde al título que
tendrá dicha columna, modifíquelos de la siguiente manera.


Vuelva a la vista de diseño de su proyecto pulsando “Design” y agregue un Botón a su
espacio de trabajo.


Y cambie el texto por defecto por “Buscar”.

10


Finalmente agregue una Label o etiqueta de texto para señalar al usuario que debe
escribir en el campo de texto, que corresponde a un filtro por el cual se buscara un
registro el cual puede ser el nombre o el rut de la persona.


Cambie su texto por “RUT o NOMBRE”. De esta forma se finalizó la construcción de
la estructura de la interfaz de usuario para visualizar los datos de personas almacenadas.

11

2. Conexión de la Pantalla de Visualización de Datos con el Servicio Web.

Ahora se conectará con el servicio web quien recibirá un nombre o un RUT y realizará
una búsqueda de persona, si no se escribe nada en el campo de texto mostrará todos los
datos almacenados en la Base de Datos.

Sitúese sobre el botón “Buscar” y de click secundario eligiendo “Generate Service
Call”.


Lo cual lo llevará a la siguiente pantalla, configure como muestra la imagen y pulse
“OK”.

12

Ilustración 15. Asistente de conexión Flex.

Este proceso lo llevará automáticamente a la vista de código para que pueda configurar
el parámetro que necesita enviar al servicio web, que corresponde al filtro por el cual
realizará la búsqueda de un registro de persona, modifique el código de la siguiente
manera.


Ahora empieza un paso muy importante, para el tratamiento de objetos JSON, que es el
tipo de datos que nos devolverá el servicio web, hay que realizar un tratamiento especial
para convertirlo en un tipo de datos que la interfaz pueda manejar. Proceda a bajar en la
vista código del proyecto (donde se debiera encontrar) y busque las etiquetas
<fx:Declaration> y haga lo que indica la siguiente figura.

13


Ahora modifique la propiedad “id” de éste código y llámelo “personaSOA2” y agregue
lo siguiente  resulta= “recibeResultadoVisualizar(event)”


Un error aparecerá en su proyecto, no debe preocuparse. Ahora vuelva al código que se
generó automáticamente al realizar la asociación del botón “Buscar” con el servicio
web, esta función se llama “button2_clickHandler” y cambie su código como se
muestra a continuación.


Algunos de los errores fueron solucionados, ahora debe crear la función
“recibeResultadoVisualizar”, es el primer trozo de código de programación directa que
debe realizar, corresponde a una función que recibirá el resultado del llamado al servicio
web y lo transformará en un objeto legible para la aplicación Flex. Diríjase fuera de la
última llave de la función que muestra la imagen anterior y procesa a escribir el
siguiente código.

14


Aparecerán nuevos errores, no debe preocuparse, falta agregar una librería que permite
esta transformación, agréguela dando click secundario sobre su proyecto.

15


La siguiente pantalla aparecerá, elija las opciones marcadas en amarillo.

16

Ilustración 22. Propiedades del proyecto.

El siguiente asistente aparecerá, elija la opción marcada en amarillo.

Ilustración 23. Asistente de búsqueda de librerías.

17

Navegue a la siguiente dirección en su equipo Escritoriolibrería_JSON.

Ilustración 24. Asistente de búsqueda de librerías.

Abra la carpeta y elija el archivo “corelib.swc” y pulse “OK” y nuevamente “OK”. Lo
último que debe hacer es agregar el siguiente trozo de código.

18

Ilustración 25. Vista código Flex.

De esta forma habrán desaparecido todos los errores y puede probar el funcionamiento
de su interfaz.

Ilustración 26. Probando Proyecto.

19

Ilustración 27. Proyecto en funcionamiento.

20

Instructivo dia 2_curso_flex

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Instructivo dia 2_curso_flex

Ähnlich wie Instructivo dia 2_curso_flex (20)

Mehr von Victor Aravena

Mehr von Victor Aravena (16)

Instructivo dia 2_curso_flex