instructivo dia 2_curso_flex

Centro de Estudios de Ingeniería en Software Rossana Contreras, [email protected]

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

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

Centro de Estudios de Ingeniería en Software Rossana Contreras, [email protected]

Í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

5

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.

6

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.

7

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.


8

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>).

9

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.


10

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”.

11


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.

12

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”.

13

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.

14

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.



15

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.


16


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

17

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.

18

Navegue a la siguiente dirección en su equipo Escritoriolibrerí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.

19

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.

20

Ilustración 27. Proyecto en funcionamiento.

instructivo dia 2_curso_flex

Documents