UNIVERSIDAD DE LA FRONTERA
DEPARTEMENTO DE EDUCACIÓN MUNICIPAL DE TEMUCO
“DESARROLLO DE INTERFACES DE USUARIO WEB EN ADOBE FLEX 4.5”
ETAPA 1: FORMULARIO DE INGRESO DE DATOS.
ROSSANA ALEJANDRA CONTRERAS HIDALGO.
2012
Centro de Estudios de Ingeniería en Software Rossana Contreras, [email protected]
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, almacenar datos tales como nombre,
RUT y sexo de una persona en una base de datos. 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.
Centro de Estudios de Ingeniería en Software Rossana Contreras, [email protected]
ÍNDICE DE CONTENIDO
1. Creación de Proyecto Flex Vacío. ......................................................................................... 1
2. Creación de Estructura para Formulario de Ingreso de Datos. .............................................. 5
3. Conexión del Formulario de Ingreso de Datos con el Servicios Web. ................................ 17
ÍNDICE DE FIGURAS
Ilustración 1. Icono IDE Flex. ......................................................................................................... 1
Ilustración 2. Abriendo IDE Adobe Flash Builder para Flex. .......................................................... 1
Ilustración 3. Abriendo IDE Adobe Flash Builder para Flex. .......................................................... 2
Ilustración 4. Creando un nuevo proyecto. ................................................................................... 3
Ilustración 5. Creación proyecto Flex. ........................................................................................... 4
Ilustración 6. Proyecto Flex vacío creado. ..................................................................................... 5
Ilustración 7. Proyecto Flex vacío creado. ..................................................................................... 6
Ilustración 8. Barra de componentes Flex. .................................................................................... 6
Ilustración 9. Barra de componentes Flex. .................................................................................... 7
Ilustración 10. Vista de diseño Flex. .............................................................................................. 7
Ilustración 11. Barra de componentes Flex. .................................................................................. 8
Ilustración 12. Vista de diseño Flex. .............................................................................................. 9
Ilustración 13. Vista de diseño Flex. .............................................................................................. 9
Ilustración 14. Vista de diseño Flex. ............................................................................................ 10
Ilustración 15. Barra de componentes Flex. ................................................................................ 10
Ilustración 16. Vista de diseño Flex. ............................................................................................ 11
Ilustración 17. Vista de diseño Flex. ............................................................................................ 12
Ilustración 18. Vista de código Flex. ............................................................................................ 12
Ilustración 19. Vista de código Flex. ............................................................................................ 13
Ilustración 20. Vista de código Flex. ............................................................................................ 13
Ilustración 21. Vista de código Flex. ............................................................................................ 14
Ilustración 22. Barra de componentes Flex. ................................................................................ 15
Ilustración 23. Vista de diseño Flex. ............................................................................................ 15
Ilustración 24. Barra de componentes Flex. ................................................................................ 16
Ilustración 25. Vista de diseño Flex. ............................................................................................ 16
Ilustración 26. Vista de diseño Flex. ............................................................................................ 17
Ilustración 27. Asistente de conexión a servicios web de Flex. .................................................. 18
Ilustración 28. Asistente de conexión a servicios web de Flex. .................................................. 19
Ilustración 29. Diseño de IDE FLEX. ............................................................................................. 20
Ilustración 30. Asistente de llamado a método de servicio Web. .............................................. 20
Ilustración 31. Vista de código Flex. ............................................................................................ 21
Ilustración 32. Vista de código Flex. ............................................................................................ 21
Ilustración 33. Vista de Diseño Flex............................................................................................. 22
Ilustración 34. Alerta de asociación a datos Flex. ....................................................................... 22
Ilustración 35. Asistente de asociación de datos Flex. ................................................................ 23
Ilustración 36. Probando proyecto. ............................................................................................. 23
1
1. Creación de Proyecto Flex Vacío.
Este primer paso consiste en la creación de la estructura visual que tendrá el formulario
donde se ingresarán los datos de una persona, su nombre, su RUT, su sexo.
Diríjase al “Escritorio” de su equipo y pulse doble “click” sobre el siguiente icono.
Ilustración 1. Icono IDE Flex.
La siguiente pantalla aparecerá debe dar click en “CONTINUAR EN MODO DE PRUEBA”, ya que
para utilizar esta herramienta hay que pagar, pero entrega un período de prueba gratis.
Ilustración 2. Abriendo IDE Adobe Flash Builder para Flex.
2
En esta nueva pestaña debe elegir “Siguiente”.
Ilustración 3. Abriendo IDE Adobe Flash Builder para Flex.
Una vez dentro de la herramienta debe crear un nuevo proyecto para Flex, diríjase a
FileNewFlex Project, como muestra la siguiente imagen.
3
Ilustración 4. Creando un nuevo proyecto.
La siguiente pantalla aparecerá, donde debe reemplazar el nombre del proyecto con su
nombre, su apellido y el colegio al que pertenece Ej.
MARIO_PEÑA_TIBURCIOSAAVEDRA. Luego de esto presione “Finish”.
4
Ilustración 5. Creación proyecto Flex.
De esta forma habrá creado su primer proyecto Flex vacío en el cual se procederá a
construir el formulario de ingreso de datos.
5
2. Creación de Estructura para Formulario de Ingreso de Datos.
A continuación se procede a mostrar los pasos para la creación de la estructura visual
que tendrá el formulario de ingreso de datos de una persona: nombre, rut, y sexo.
En el espacio de trabajo en la pestaña titulada “Package Explorer” aparecerá el nuevo
proyecto creado, se verá de la siguiente forma.
Ilustración 6. Proyecto Flex vacío creado.
El archivo marcado en amarillo corresponde a donde se creará todo el formulario, es el archivo
principal de un proyecto “Flex” éste se crea automáticamente vacío. Esta herramienta ofrece
una serie de componentes visuales que pueden arrastrarse y soltarse en el área de diseño.
Diríjase a la vista de diseño de la herramienta, dando click en “Design”.
6
Ilustración 7. Proyecto Flex vacío creado.
Aparecerá en el lado izquierdo de la herramienta la barra “Components”.
Ilustración 8. Barra de componentes Flex.
7
El primer componente a incorporar en el formulario es un efecto que permite dividir el
espacio en varias pestañas, éste se llama “Accordion”, búsquelo en la barra de
componentes y arrástrelo a su espacio en blanco de diseño de la derecha.
Ilustración 9. Barra de componentes Flex.
Luego debe cambiar el titulo por defecto que trae el componente por “Formulario de
Ingreso”, en el panel de la derecha de la herramienta en el campo “Label”.
Ilustración 10. Vista de diseño Flex.
8
Una vez dividido el espacio, se procederá a crear la caja de texto donde se escribirá el
nombre y el RUT de la persona, busque el componente “TextInput” de la barra de
componentes.
Ilustración 11. Barra de componentes Flex.
Arrastre uno a su espacio de trabajo dentro de la pestaña “Formulario de Ingreso” y
proporciónele un identificador “id” para diferenciarlo de los demás, esto lo debe realizar
en la barra de la derecha, escribiendo “rut” en el campo “ID”, como muestra la imagen.
9
Ilustración 12. Vista de diseño Flex.
Arrastre otro “TextInput” de la barra de componentes y escriba en el campo “ID” “dv”,
como muestra la siguiente imagen.
Ilustración 13. Vista de diseño Flex.
Arrastre otro “TextInput” donde se almacenará el nombre de la persona y dele por ID
“nombre”, como muestra la siguiente imagen.
10
Ilustración 14. Vista de diseño Flex.
Ahora debe buscar un componente para que el usuario pueda seleccionar entre
Femenino y Masculino que son los dos sexos posibles, para esto se utilizará un
“Combobox” que proporciona una lista de la cual se puede seleccionar un valor. Busque
el componente “Combobox” en la barra de componentes, como muestra la siguiente
imagen.
Ilustración 15. Barra de componentes Flex.
11
Arrástrelo al espacio de trabajo y proporciónele por ID “sexo”.
Ilustración 16. Vista de diseño Flex.
Para que esta lista pueda mostrar los valores Femenino y Masculino, se debe modificar
el código fuente de la interfaz. En la parte superior de esta misma ventana se puede
seleccionar vista de diseño que es sobre la cual hemos trabajado hasta ahora y la vista de
código donde se encuentra el código que se ha ido generando al ir arrastrando todos los
componentes. Seleccione el componente “Combobox” en su vista de diseño y luego
presione el botón “Source” (código en inglés), como muestra la siguiente imagen.
12
Ilustración 17. Vista de diseño Flex.
Esto lo llevará a ver el código fuente del objeto “Combobox”, el cual tiene el siguiente
aspecto.
Ilustración 18. Vista de código Flex.
Borre el “/” que se encuentra marcado en azul y escriba en la línea siguiente
“</s:ComboBox>” como muestra la siguiente imagen.
13
Ilustración 19. Vista de código Flex.
Ahora escriba la siguientes líneas entre las etiquetas <s:ComboBox> </s:ComboBox>.
Ilustración 20. Vista de código Flex.
14
De esta forma la lista mostrará “Femenino y Masculino” para que el usuario pueda
elegir el sexo de la persona que está ingresando. Vuela a la vista de diseño de la
aplicación eligiendo “Design” (diseño en inglés).
Ilustración 21. Vista de código Flex.
Hace falta un botón el cual se pulsará para guardar los datos ingresados en los diferentes
componentes. Busque en la barra de componentes “Button”.
15
Ilustración 22. Barra de componentes Flex.
Arrástrelo al espacio de trabajo y cambie el texto por defecto por “Guardar”.
Ilustración 23. Vista de diseño Flex.
16
Finalmente faltan los textos que indicaran que se debe escribir o seleccionar en cada
componente. Busque el componente “Label” en la barra.
Ilustración 24. Barra de componentes Flex.
Arrastre una “Label” para cada componente y cambie el texto por “RUT:”,
“NOMBRE:”, “SEXO:”.
Ilustración 25. Vista de diseño Flex.
.
17
3. Conexión del Formulario de Ingreso de Datos con el Servicios Web.
Para que esta pantalla de ingreso de datos pueda funcionar y deje de solo ser una
“Maqueta” debe ser conectado con el servicio web que tomará los datos ingresados en
los campos de la interfaz y los guardar en la base de datos.
La dirección donde el servicio web está funcionando es:
Para conectar con este servicio diríjase al menú superior de la herramienta y elija
DataConnect to Web Service.
Ilustración 26. Vista de diseño Flex.
Aparecerá la siguiente pantalla, donde debe pegar la dirección entregada anteriormente
y pulsar “Next”.
http://londres.ceisufro.cl:8080/PruebaMil/services/PersonaSOA?wsd
l
18
Ilustración 27. Asistente de conexión a servicios web de Flex.
La siguiente pantalla aparecerá, debe elegir los métodos que se muestran en amarillo en
la siguiente imagen y pulsar “Finish”.
19
Ilustración 28. Asistente de conexión a servicios web de Flex.
De esta forma habrá conectado el proyecto con el servicio web. Para indicar que al
presionar el botón “Guardar” se invoque al método del servicio web que guarda los
datos, presione click secundario sobre el botón y seleccione “Generate Service Call”
(generar llamada a servicio en inglés).
20
Ilustración 29. Diseño de IDE FLEX.
El siguiente asistente aparecerá, debe seleccionar los valores que muestra la imagen y
presiona “OK”
Ilustración 30. Asistente de llamado a método de servicio Web.
Esta acción lo llevará de forma automática a la vista de código de la aplicación para que
indique cuales son los valores que guardará, ya que el método guardar llamado “add”
espera que le envíen el nombre, rut, digito verificador y sexo de la persona, como estos
valores serán escritos en los diferentes componentes de la interfaz se debe indicar que
tome dichos valores y los envié al método del servicio web.
21
Ilustración 31. Vista de código Flex.
Modifique el código como se muestra en la siguiente imagen (Recuerde guardar los
cambios en su proyecto periódicamente).
Ilustración 32. Vista de código Flex.
Vuelva a la vista “Design” de su proyecto y arrastre una “Label” desde la barra de
componentes de la herramienta. En esta etiqueta de texto (Label) se recibirá el mensaje
de éxito y de error que envía de vuelta el servicio web, por Ej. Si se han guardado los
datos correctamente retornara un mensaje de éxito “Se ha agregada a Juan Peréz”. Para
asociar este mensaje con el Label, debe dar click derecho sobre éste y elegir “Bind to
Data”, como muestra la siguiente imagen.
22
Ilustración 33. Vista de Diseño Flex.
Aparecerá un alerta debe dar click en “OK”.
Ilustración 34. Alerta de asociación a datos Flex.
Posteriormente configure como muestra la siguiente imagen y dar click en “OK”.
23
Ilustración 35. Asistente de asociación de datos Flex.
De esta forma se ha finalizado la interfaz y su conexión para guardar los datos de una
persona, para probar su aplicación sitúese sobre el archivo principal de su proyecto y de
click secundario, elija Run AsWeb Application.
Ilustración 36. Probando proyecto.
24
Esto mostrará su interfaz funcionando en un explorador web como Internet Explorer,
pruebe su interfaz ingresando datos.
Top Related