Instructivo dia 1_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 1: FORMULARIO DE INGRESO 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, 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, rossana.contreras@ceisufro.cl

Í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

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

Í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 14. Vista de diseño Flex. ............................................................................................ 10
Ilustración 15. Barra de componentes Flex................................................................................. 10
Ilustración 18. Vista de código Flex. ............................................................................................ 12
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 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. 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.

1

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
FileNewFlex Project, como muestra la siguiente imagen.

2

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

3

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.

4

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

5

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.

6

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.


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.

7

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.


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.

8


Arrastre otro “TextInput” de la barra de componentes y escriba en el campo “ID” “dv”,
como muestra la siguiente imagen.


Arrastre otro “TextInput” donde se almacenará el nombre de la persona y dele por ID
“nombre”, como muestra la siguiente imagen.

9


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.


10

Arrástrelo al espacio de trabajo y proporciónele por ID “sexo”.


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.

11


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.

12


Ahora escriba la siguientes líneas entre las etiquetas <s:ComboBox> </s:ComboBox>.


13

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


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

14


Arrástrelo al espacio de trabajo y cambie el texto por defecto por “Guardar”.


15

Finalmente faltan los textos que indicaran que se debe escribir o seleccionar en cada
componente. Busque el componente “Label” en la barra.


Arrastre una “Label” para cada componente y cambie el texto por “RUT:”,
“NOMBRE:”, “SEXO:”.


.

16

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:

http://londres.ceisufro.cl:8080/PruebaMil/services/PersonaSOA?wsd
l

Para conectar con este servicio diríjase al menú superior de la herramienta y elija
DataConnect to Web Service.


Aparecerá la siguiente pantalla, donde debe pegar la dirección entregada anteriormente
y pulsar “Next”.

17

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

18

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

19

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.

20


Modifique el código como se muestra en la siguiente imagen (Recuerde guardar los
cambios en su proyecto periódicamente).


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.

21

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

22

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 AsWeb Application.

Ilustración 36. Probando proyecto.

23

Esto mostrará su interfaz funcionando en un explorador web como Internet Explorer,
pruebe su interfaz ingresando datos.

24

Instructivo dia 1_curso_flex

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Instructivo dia 1_curso_flex

Similaire à Instructivo dia 1_curso_flex (20)

Plus de Victor Aravena

Plus de Victor Aravena (17)

Instructivo dia 1_curso_flex