Instructivo dia 2_curso_flex

315 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
315
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Instructivo dia 2_curso_flex

  1. 1. 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
  2. 2. RESUMENEl presente documento corresponde a un instructivo técnico que busca proporcionar alalumno la información paso a paso para la construcción de una interfaz de usuario webque permita, al conectarla con un servicio web, visualizar los datos de personaalmacenados. Todo esto en el marco de los cursos de verano impartidos por parte de laUniversidad de la Frontera en conjunto con el proyecto Explora para el Departamentode Educación Municipal de Temuco.
  3. 3. ÍNDICE DE CONTENIDO1. Creando Estructura de Interfaz para Visualizar Registros Almacenados. ............................. 52. Conexión de la Pantalla de Visualización de Datos con el Servicio Web........................... 12
  4. 4. ÍNDICE DE FIGURASIlustración 1. IDE FLEX. .................................................................................................................. 5Ilustración 2. Vista diseño Flex. ..................................................................................................... 5Ilustración 3. Vista diseño Flex. ..................................................................................................... 6Ilustración 4. Barra de componentes Flex..................................................................................... 6Ilustración 5. Vista diseño Flex. ..................................................................................................... 7Ilustración 6. Barra de componentes Flex..................................................................................... 7Ilustración 7. Vista de diseño Flex. ................................................................................................ 8Ilustración 8. Vista de código Flex. ................................................................................................ 9Ilustración 9. Vista de código Flex. ................................................................................................ 9Ilustración 10. Vista de código Flex. ............................................................................................ 10Ilustración 11. Barra de componentes Flex................................................................................. 10Ilustración 12. Vista de diseño Flex. ............................................................................................ 11Ilustración 13. Barra de componentes Flex................................................................................. 11Ilustración 14. Vista de diseño Flex. ............................................................................................ 12Ilustración 15. Asistente de conexión Flex. ................................................................................. 13Ilustración 16. Vista de código Flex. ............................................................................................ 13Ilustración 19. Vista de código Flex. ............................................................................................ 14Ilustración 17. Vista de código Flex. ............................................................................................ 14Ilustración 18. Vista de código Flex. ............................................................................................ 14Ilustración 20. Vista de código Flex. ............................................................................................ 15Ilustración 21. Vista diseño Flex. ................................................................................................. 16Ilustración 22. Propiedades del proyecto. .................................................................................. 17Ilustración 23. Asistente de búsqueda de librerías. .................................................................... 17Ilustración 24. Asistente de búsqueda de librerías. .................................................................... 18Ilustración 25. Vista código Flex. ................................................................................................. 19Ilustración 26. Probando Proyecto.............................................................................................. 19Ilustración 27. Proyecto en funcionamiento. .............................................................................. 20 Centro de Estudios de Ingeniería en Software Rossana Contreras, rossana.contreras@ceisufro.cl
  5. 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 alcomponente que divide el espacio llamado “Accordion”, debe dar un click sobre éste yverá que aparece una barra superior con el signo “+” debe presionar éste y dar unnombre a su nueva pestaña “Visualizar Registros”. Ilustración 2. Vista diseño Flex. 5
  6. 6. La siguiente pantalla aparecerá, configure como muestra la imagen y pulse “OK”. Ilustración 3. Vista diseño Flex.De esta forma ha creado una nueva pestaña donde se creará la interfaz que buscará ymostrará los registros que ha ingresado en la etapa anterior. El siguiente paso es añadirlos componentes que tendrá la interfaz, busque un “TextInput” en la barra decomponentes y arrástrelo dentro de la pestaña recién creada. Ilustración 4. Barra de componentes Flex. 6
  7. 7. Identifique este campo de texto como “filtro”, como se muestra a continuación. Ilustración 5. Vista diseño Flex.Busque el componente “DataGrid” en la barra de componentes y arrástrelo a su espaciode trabajo. Ilustración 6. Barra de componentes Flex. 7
  8. 8. Posteriormente seleccione la grilla (DataGrid) y diríjase a la vista de código de laaplicación. Ilustración 7. Vista de diseño Flex.El código que se muestra a continuación seleccionado es el correspondiente a laDataGrid (se encuentra entre las etiquetas <s:DataGrid></s:DataGrid>). 8
  9. 9. Ilustración 8. Vista de código Flex.La herramienta proporciona datos de muestra para este componente que no nos serviránen este caso, así que debe proceder a borrar el siguiente código marcado en amarillo. Ilustración 9. Vista de código Flex. 9
  10. 10. Posteriormente se debe cambiar el valor de la propiedad “dataField” que identifica quedatos van a ser mostrados en esa columna y “headerText” que corresponde al título quetendrá dicha columna, modifíquelos de la siguiente manera. Ilustración 10. Vista de código Flex.Vuelva a la vista de diseño de su proyecto pulsando “Design” y agregue un Botón a suespacio de trabajo. Ilustración 11. Barra de componentes Flex.Y cambie el texto por defecto por “Buscar”. 10
  11. 11. Ilustración 12. Vista de diseño Flex.Finalmente agregue una Label o etiqueta de texto para señalar al usuario que debeescribir en el campo de texto, que corresponde a un filtro por el cual se buscara unregistro el cual puede ser el nombre o el rut de la persona. Ilustración 13. Barra de componentes Flex.Cambie su texto por “RUT o NOMBRE”. De esta forma se finalizó la construcción dela estructura de la interfaz de usuario para visualizar los datos de personas almacenadas. 11
  12. 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 losdatos almacenados en la Base de Datos.Sitúese sobre el botón “Buscar” y de click secundario eligiendo “Generate ServiceCall”. Ilustración 14. Vista de diseño Flex.Lo cual lo llevará a la siguiente pantalla, configure como muestra la imagen y pulse“OK”. 12
  13. 13. Ilustración 15. Asistente de conexión Flex.Este proceso lo llevará automáticamente a la vista de código para que pueda configurarel parámetro que necesita enviar al servicio web, que corresponde al filtro por el cualrealizará la búsqueda de un registro de persona, modifique el código de la siguientemanera. Ilustración 16. Vista de código Flex.Ahora empieza un paso muy importante, para el tratamiento de objetos JSON, que es eltipo de datos que nos devolverá el servicio web, hay que realizar un tratamiento especialpara convertirlo en un tipo de datos que la interfaz pueda manejar. Proceda a bajar en lavista código del proyecto (donde se debiera encontrar) y busque las etiquetas<fx:Declaration> y haga lo que indica la siguiente figura. 13
  14. 14. Ilustración 17. Vista de código Flex.Ahora modifique la propiedad “id” de éste código y llámelo “personaSOA2” y agreguelo siguiente  resulta= “recibeResultadoVisualizar(event)” Ilustración 18. Vista de código Flex.Un error aparecerá en su proyecto, no debe preocuparse. Ahora vuelva al código que segeneró automáticamente al realizar la asociación del botón “Buscar” con el servicioweb, esta función se llama “button2_clickHandler” y cambie su código como semuestra a continuación. Ilustración 19. Vista de código Flex.Algunos de los errores fueron solucionados, ahora debe crear la función“recibeResultadoVisualizar”, es el primer trozo de código de programación directa quedebe realizar, corresponde a una función que recibirá el resultado del llamado al servicioweb 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 elsiguiente código. 14
  15. 15. Ilustración 20. Vista de código Flex.Aparecerán nuevos errores, no debe preocuparse, falta agregar una librería que permiteesta transformación, agréguela dando click secundario sobre su proyecto. 15
  16. 16. Ilustración 21. Vista diseño Flex.La siguiente pantalla aparecerá, elija las opciones marcadas en amarillo. 16
  17. 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. 17
  18. 18. 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
  19. 19. Ilustración 25. Vista código Flex.De esta forma habrán desaparecido todos los errores y puede probar el funcionamientode su interfaz. Ilustración 26. Probando Proyecto. 19
  20. 20. Ilustración 27. Proyecto en funcionamiento. 20

×