Your SlideShare is downloading. ×
UNIVERSIDAD DE LA FRONTERA     DEPARTEMENTO DE EDUCACIÓN MUNICIPAL DE TEMUCO“DESARROLLO DE INTERFACES DE USUARIO WEB EN AD...
RESUMENEl presente documento corresponde a un instructivo técnico que busca proporcionar alalumno la información paso a pa...
ÍNDICE DE CONTENIDO1.   Creación de Proyecto Flex Vacío. ....................................................................
ÍNDICE DE FIGURASIlustración 1. Icono IDE Flex. .............................................................................
1. Creación de Proyecto Flex Vacío.Este primer paso consiste en la creación de la estructura visual que tendrá el formular...
En esta nueva pestaña debe elegir “Siguiente”.                     Ilustración 3. Abriendo IDE Adobe Flash Builder para Fl...
Ilustración 4. Creando un nuevo proyecto.La siguiente pantalla aparecerá, donde debe reemplazar el nombre del proyecto con...
Ilustración 5. Creación proyecto Flex.De esta forma habrá creado su primer proyecto Flex vacío en el cual se procederá aco...
2. Creación de Estructura para Formulario de Ingreso de Datos.A continuación se procede a mostrar los pasos para la creaci...
Ilustración 7. Proyecto Flex vacío creado.Aparecerá en el lado izquierdo de la herramienta la barra “Components”.         ...
El primer componente a incorporar en el formulario es un efecto que permite dividir elespacio en varias pestañas, éste se ...
Una vez dividido el espacio, se procederá a crear la caja de texto donde se escribirá elnombre y el RUT de la persona, bus...
Ilustración 12. Vista de diseño Flex.Arrastre otro “TextInput” de la barra de componentes y escriba en el campo “ID” “dv”,...
Ilustración 14. Vista de diseño Flex.Ahora debe buscar un componente para que el usuario pueda seleccionar entreFemenino y...
Arrástrelo al espacio de trabajo y proporciónele por ID “sexo”.                               Ilustración 16. Vista de dis...
Ilustración 17. Vista de diseño Flex.Esto lo llevará a ver el código fuente del objeto “Combobox”, el cual tiene el siguie...
Ilustración 19. Vista de código Flex.Ahora escriba la siguientes líneas entre las etiquetas <s:ComboBox> </s:ComboBox>.   ...
De esta forma la lista mostrará “Femenino y Masculino” para que el usuario puedaelegir el sexo de la persona que está ingr...
Ilustración 22. Barra de componentes Flex.Arrástrelo al espacio de trabajo y cambie el texto por defecto por “Guardar”.   ...
Finalmente faltan los textos que indicaran que se debe escribir o seleccionar en cadacomponente. Busque el componente “Lab...
3. Conexión del Formulario de Ingreso de Datos con el Servicios Web.Para que esta pantalla de ingreso de datos pueda funci...
Ilustración 27. Asistente de conexión a servicios web de Flex.La siguiente pantalla aparecerá, debe elegir los métodos que...
Ilustración 28. Asistente de conexión a servicios web de Flex.De esta forma habrá conectado el proyecto con el servicio we...
Ilustración 29. Diseño de IDE FLEX.El siguiente asistente aparecerá, debe seleccionar los valores que muestra la imagen yp...
Ilustración 31. Vista de código Flex.Modifique el código como se muestra en la siguiente imagen (Recuerde guardar loscambi...
Ilustración 33. Vista de Diseño Flex.Aparecerá un alerta debe dar click en “OK”.                        Ilustración 34. Al...
Ilustración 35. Asistente de asociación de datos Flex.De esta forma se ha finalizado la interfaz y su conexión para guarda...
Esto mostrará su interfaz funcionando en un explorador web como Internet Explorer,pruebe su interfaz ingresando datos.    ...
Upcoming SlideShare
Loading in...5
×

Instructivo dia 1_curso_flex

221

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
221
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Instructivo dia 1_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 1: FORMULARIO DE INGRESO DE DATOS. ROSSANA ALEJANDRA CONTRERAS HIDALGO. 2012
  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, almacenar datos tales como nombre,RUT y sexo de una persona en una base de datos. Todo esto en el marco de los cursosde verano impartidos por parte de la Universidad de la Frontera en conjunto con elproyecto Explora para el Departamento de Educación Municipal de Temuco. Centro de Estudios de Ingeniería en Software Rossana Contreras, rossana.contreras@ceisufro.cl
  3. 3. ÍNDICE DE CONTENIDO1. Creación de Proyecto Flex Vacío. ......................................................................................... 12. Creación de Estructura para Formulario de Ingreso de Datos. .............................................. 53. 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
  4. 4. ÍNDICE DE FIGURASIlustración 1. Icono IDE Flex. ......................................................................................................... 1Ilustración 2. Abriendo IDE Adobe Flash Builder para Flex. .......................................................... 1Ilustración 3. Abriendo IDE Adobe Flash Builder para Flex. .......................................................... 2Ilustración 4. Creando un nuevo proyecto. ................................................................................... 3Ilustración 5. Creación proyecto Flex. ........................................................................................... 4Ilustración 6. Proyecto Flex vacío creado...................................................................................... 5Ilustración 7. Proyecto Flex vacío creado...................................................................................... 6Ilustración 8. Barra de componentes Flex..................................................................................... 6Ilustración 9. Barra de componentes Flex..................................................................................... 7Ilustración 10. Vista de diseño Flex. .............................................................................................. 7Ilustración 11. Barra de componentes Flex................................................................................... 8Ilustración 12. Vista de diseño Flex. .............................................................................................. 9Ilustración 13. Vista de diseño Flex. .............................................................................................. 9Ilustración 14. Vista de diseño Flex. ............................................................................................ 10Ilustración 15. Barra de componentes Flex................................................................................. 10Ilustración 16. Vista de diseño Flex. ............................................................................................ 11Ilustración 17. Vista de diseño Flex. ............................................................................................ 12Ilustración 18. Vista de código Flex. ............................................................................................ 12Ilustración 19. Vista de código Flex. ............................................................................................ 13Ilustración 20. Vista de código Flex. ............................................................................................ 13Ilustración 21. Vista de código Flex. ............................................................................................ 14Ilustración 22. Barra de componentes Flex................................................................................. 15Ilustración 23. Vista de diseño Flex. ............................................................................................ 15Ilustración 24. Barra de componentes Flex................................................................................. 16Ilustración 25. Vista de diseño Flex. ............................................................................................ 16Ilustración 26. Vista de diseño Flex. ............................................................................................ 17Ilustración 27. Asistente de conexión a servicios web de Flex. .................................................. 18Ilustración 28. Asistente de conexión a servicios web de Flex. .................................................. 19Ilustración 29. Diseño de IDE FLEX. ............................................................................................. 20Ilustración 30. Asistente de llamado a método de servicio Web. .............................................. 20Ilustración 31. Vista de código Flex. ............................................................................................ 21Ilustración 32. Vista de código Flex. ............................................................................................ 21Ilustración 33. Vista de Diseño Flex............................................................................................. 22Ilustración 34. Alerta de asociación a datos Flex. ....................................................................... 22Ilustración 35. Asistente de asociación de datos Flex. ................................................................ 23Ilustración 36. Probando proyecto.............................................................................................. 23
  5. 5. 1. Creación de Proyecto Flex Vacío.Este primer paso consiste en la creación de la estructura visual que tendrá el formulariodonde 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 quepara 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
  6. 6. 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 aFileNewFlex Project, como muestra la siguiente imagen. 2
  7. 7. Ilustración 4. Creando un nuevo proyecto.La siguiente pantalla aparecerá, donde debe reemplazar el nombre del proyecto con sunombre, su apellido y el colegio al que pertenece Ej.MARIO_PEÑA_TIBURCIOSAAVEDRA. Luego de esto presione “Finish”. 3
  8. 8. Ilustración 5. Creación proyecto Flex.De esta forma habrá creado su primer proyecto Flex vacío en el cual se procederá aconstruir el formulario de ingreso de datos. 4
  9. 9. 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 visualque 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 nuevoproyecto 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 archivoprincipal de un proyecto “Flex” éste se crea automáticamente vacío. Esta herramienta ofreceuna 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
  10. 10. 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
  11. 11. El primer componente a incorporar en el formulario es un efecto que permite dividir elespacio en varias pestañas, éste se llama “Accordion”, búsquelo en la barra decomponentes 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 deIngreso”, en el panel de la derecha de la herramienta en el campo “Label”. Ilustración 10. Vista de diseño Flex. 7
  12. 12. Una vez dividido el espacio, se procederá a crear la caja de texto donde se escribirá elnombre y el RUT de la persona, busque el componente “TextInput” de la barra decomponentes. Ilustración 11. Barra de componentes Flex.Arrastre uno a su espacio de trabajo dentro de la pestaña “Formulario de Ingreso” yproporciónele un identificador “id” para diferenciarlo de los demás, esto lo debe realizaren la barra de la derecha, escribiendo “rut” en el campo “ID”, como muestra la imagen. 8
  13. 13. 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. 9
  14. 14. Ilustración 14. Vista de diseño Flex.Ahora debe buscar un componente para que el usuario pueda seleccionar entreFemenino 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. Busqueel componente “Combobox” en la barra de componentes, como muestra la siguienteimagen. Ilustración 15. Barra de componentes Flex. 10
  15. 15. 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 modificarel código fuente de la interfaz. En la parte superior de esta misma ventana se puedeseleccionar vista de diseño que es sobre la cual hemos trabajado hasta ahora y la vista decódigo donde se encuentra el código que se ha ido generando al ir arrastrando todos loscomponentes. Seleccione el componente “Combobox” en su vista de diseño y luegopresione el botón “Source” (código en inglés), como muestra la siguiente imagen. 11
  16. 16. Ilustración 17. Vista de diseño Flex.Esto lo llevará a ver el código fuente del objeto “Combobox”, el cual tiene el siguienteaspecto. 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
  17. 17. 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. 13
  18. 18. De esta forma la lista mostrará “Femenino y Masculino” para que el usuario puedaelegir el sexo de la persona que está ingresando. Vuela a la vista de diseño de laaplicació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 diferentescomponentes. Busque en la barra de componentes “Button”. 14
  19. 19. 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. 15
  20. 20. Finalmente faltan los textos que indicaran que se debe escribir o seleccionar en cadacomponente. 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.. 16
  21. 21. 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 enlos 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 lPara conectar con este servicio diríjase al menú superior de la herramienta y elijaDataConnect to Web Service. Ilustración 26. Vista de diseño Flex.Aparecerá la siguiente pantalla, donde debe pegar la dirección entregada anteriormentey pulsar “Next”. 17
  22. 22. 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 enla siguiente imagen y pulsar “Finish”. 18
  23. 23. 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 alpresionar el botón “Guardar” se invoque al método del servicio web que guarda losdatos, presione click secundario sobre el botón y seleccione “Generate Service Call”(generar llamada a servicio en inglés). 19
  24. 24. Ilustración 29. Diseño de IDE FLEX.El siguiente asistente aparecerá, debe seleccionar los valores que muestra la imagen ypresiona “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 queindique 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 estosvalores serán escritos en los diferentes componentes de la interfaz se debe indicar quetome dichos valores y los envié al método del servicio web. 20
  25. 25. Ilustración 31. Vista de código Flex.Modifique el código como se muestra en la siguiente imagen (Recuerde guardar loscambios 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 decomponentes de la herramienta. En esta etiqueta de texto (Label) se recibirá el mensajede éxito y de error que envía de vuelta el servicio web, por Ej. Si se han guardado losdatos correctamente retornara un mensaje de éxito “Se ha agregada a Juan Peréz”. Paraasociar este mensaje con el Label, debe dar click derecho sobre éste y elegir “Bind toData”, como muestra la siguiente imagen. 21
  26. 26. 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
  27. 27. 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 unapersona, para probar su aplicación sitúese sobre el archivo principal de su proyecto y declick secundario, elija Run AsWeb Application. Ilustración 36. Probando proyecto. 23
  28. 28. Esto mostrará su interfaz funcionando en un explorador web como Internet Explorer,pruebe su interfaz ingresando datos. 24

×