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

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

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.


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.


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


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.

10


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.


11

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.

12


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


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


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


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


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


16

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


.

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.


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

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

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

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


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.

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.

Instructivo dia 1_curso_flex

Documents

Transcript of Instructivo dia 1_curso_flex