1Ejercicios Unidad 3.

Diseño de GUIs

Fernández Cruz Iván de Jesús

Centro de Bachillerato Tecnológico Industrial y de Servicios #79 “Maria Soto la Marina”

3°A Programación
Aplica la Metodología Espiral con Programación Orientada a Objetos
 Introducción ii

Dentro de este trabajo encontraremos 3 programas, elaborado desde nuestro JFrame como
ventana principal, con el fin de elaborar mejores interfaces de usuario, en las cuales
implementamos diversos diseños como el diseño de rejilla, diseño de flujo, diseño de borde,
entre otros, así también todos y cada uno de estos programas funcionan, por lo que le
proporcionaremos, el panel de navegación donde se encuentran los componentes, el diseño y el
código fuente de nuestro programa, sin más que decir, espero este trabajo sea de su agrado.
Gracias.
 Tabla de Contenidos iii

Capítulo 1 Programa Revision Cadena................................................................................1

Introducción.....................................................................................................................1
Ventana de Diseño...........................................................................................................1
Panel de Navegación........................................................................................................2
Código fuente...................................................................................................................3
Ejecución del Programa...................................................................................................5
Capítulo 2 Programa Menu Areas.......................................................................................6
Introducción.....................................................................................................................6
Ventana de Diseño...........................................................................................................6
Panel de Navegación........................................................................................................7
Código fuente...................................................................................................................8
Ejecución del Programa.................................................................................................10
Capítulo 3 Programa Recargas..........................................................................................13
Introducción...................................................................................................................13
Ventana de Diseño.........................................................................................................13
Panel de Navegación......................................................................................................14
Código fuente.................................................................................................................15
Ejecución del Programa.................................................................................................16
Conclusión.........................................................................................................................18
 Lista de figuras iv

Figura 1. Ventana Diseño Rev Cadena................................................................................1

Figura 2. Panel de Navegación Cadena...............................................................................2
Figura 3. Código Fuente Cadena pt.1..................................................................................3
Figura 4. Código Fuente Cadena pt.2..................................................................................3
Figura 5. Código Fuente Cadena pt.3..................................................................................4
Figura 6. Código Fuente Cadena pt.4..................................................................................4
Figura 7. Ejecución del Programa Cadena pt.1...................................................................5

Figura 8. Ejecución del Programa Cadena pt.2... 5

Figura 9. Ventana Diseño Menú Áreas... 6

Figura 10. Panel de Navegacion Menú Áreas.. 7

Figura 11. Código Fuente Menú Áreas pt.1.... 8

Figura 12. Código Fuente Menú Áreas pt.2...8

Figura 13. Código Fuente Menú Áreas pt.3...9

Figura 14. Código Fuente Menú Áreas pt.4...9

Figura 15. Código Fuente Menú Áreas pt.5...10

Figura 16. Ejecución del Programa Menú Áreas pt.1.... 10

Figura 17. Ejecución del Programa Menú Áreas pt.2... 10

Figura 18. Ejecución del Programa Menú Áreas pt.3... 11

Figura 19. Ejecución del Programa Menú Áreas pt.4... 11

Figura 20. Ventana de Diseño Recarga Celular.................................................................12

Figura 21. Panel de Navegación Recarga Celular.. 13

Figura 22. Código Fuente Recarga Celular pt.1.... 14

Figura 23. Código Fuente Recarga Celular pt.2... 14

Figura 24. Código Fuente Recarga Celular pt.3... 15

Figura 25. Código Fuente Recarga Celular pt.4... 15

Figura 26. Código Fuente Recarga Celular pt.5... 15

 v
Figura 27. Ejecución del Programa Menú Áreas pt.1.... 16

Figura 28. Ejecución del Programa Menú Áreas pt.2... 16

Figura 29. Ejecución del Programa Menú Áreas pt.3... 16

Figura 30. Ejecución del Programa Menú Áreas pt.4... 17

Figura 31. Ejecución del Programa Menú Áreas pt.5........................................................17
 1

Capítulo 1

Programa 1. Revisión de una cadena de texto.

Introducción

Dentro de este programa solicitamos una cadena de texto en el único

campo de texto que este habilitado, posterior a que el usuario la ingresa y da clic en el

botón procesar, se procesa la cadena y en cada campo de texto muestra la cantidad de

instancias de dichos elementos dentro de la cadena, el botón limpiar nos limpia todos

nuestros campos de texto y el botón Salir, cierra el programa y termina su ejecución.

Ventana de Diseño

Figura 1. Ventana Diseño Rev Cadena.

 2

Panel de navegación

Este último JPanel,

ayuda a la proporción de
los componentes.

Figura 2. Panel de Navegación Cadena.

 3

Código fuente

Figura 3. Código Fuente Cadena pt.1.

Figura 4. Código Fuente Cadena pt.2.

 4

Figura 5. Código Fuente Cadena pt.3.

Figura 6. Código Fuente Cadena pt.4.

 5

Ejecución del Programa

Figura 7. Ejecución del Programa Cadena pt.1.

Figura 8. Ejecución del Programa Cadena pt.2.

 6

Capítulo 2

Programa 1. Menú Áreas.

Introducción

Dentro de este programa solicitamos al usuario que seleccione una opción en la

JComboBox y posterior a ello de clic en el botón aceptar, para que asi se habiliten los

componentes necesarios para dicho calculo, mientras que los que no se necesiten seguirán

deshabilitados, todos y cada uno de nuestros campos de texto solo aceptan números y

punto decimal, el botón resultado recopila los datos de los campos de texto necesarios y

muestra el resultado, el botón limpiar limpia todo y deshabilita todo lo que no se necesita

en ese momento.

Ventana de Diseño

Figura 9. Ventana Diseño Menú Áreas.

 7

Panel de Navegación

Figura 10. Panel de Navegación Menú Áreas.

 8

Código Fuente

Figura 11. Código Fuente Menú Áreas pt.1.

Figura 12. Código Fuente Menú Áreas pt.2.

 9

Figura 13. Código Fuente Menú Áreas pt.3.

Figura 14. Código Fuente Menú Áreas pt.4.

 10

Figura 15. Código Fuente Menú Áreas pt.5.

Ejecución del programa:

Figura 16. Ejecución del Programa Menú Áreas pt.1.

Figura 17. Ejecución del Programa Menú Áreas pt.2.

 11

Figura 18. Ejecución del Programa Menú Áreas pt.3.

Figura 19. Ejecución del Programa Menú Áreas pt.4.

 12

Capítulo 3

Programa 3. Recarga Celular.

Introducción

Dentro de este programa al momento de ejecutarlo tenemos 3 botones disponibles,

carga celular, nueva recarga y salir de la aplicación, en el botón carga celular nos

mostrara un primer InputDialog en el que tendremos ingresar el número de teléfono, el

cual no podrá contener letras ni tendrá que sobrepasar los 10 caracteres, posterior a ello

se mostrara un segundo InputDialog, en el cual nos pedirá nuevamente el número y en

caso de que coincida con el primero, se habilitaran los demás componentes, cuando se

haya seleccionado todo lo necesario se da clic en el botón aceptar y muestra los datos

recopilados.

Ventana de Diseño

Figura 20. Ventana de Diseño Recarga Celular.

 13

Panel de Navegación

Figura 21. Panel de Diseño Recarga Celular.

 14

Código Fuente

Figura 22. Código Fuente Recarga Celular pt.1.

Figura 23. Código Fuente Recarga Celular pt.2.

 15

Figura 24. Código Fuente Recarga Celular pt.3.

Figura 25. Código Fuente Recarga Celular pt.4.

Figura 26. Código Fuente Recarga Celular pt.5.

 16

Ejecución del programa:

Figura 27. Ejecución del Programa Recarga Celular pt.1.

Figura 28. Ejecución del Programa Recarga Celular pt.2.

Figura 29. Ejecución del Programa Recarga Celular pt.3.

 17

Figura 30. Ejecución del Programa Recarga Celular pt.4.

Figura 31. Ejecución del Programa Recarga Celular pt.5.

 18

Conclusión

Para concluir, dentro de este documento, vimos cada uno de los 3 problemas con

su código fuente y documentación, panel de navegación y diseño, con el fin de que se

comprendiera que para estos programas se emplearon diversos diseños de panel para la

estructura de nuestra interfaz gráfica, sin más que decir espero que este proyecto haya

sido de su agrado, gracias por leerlo y espero que les sirva para aprender un poco sobre la

programación de GUIs en NetBeans en Java. Gracias,