TECNOLÓGICO NACIONAL DE MÉXICO

INSTITUTO TECNOLÓGICO DE MORELIA

“JOSÉ MARÍA MORELOS Y PAVÓN”

“Practica 2: Construcción de una GUI y

eventos”
Tópicos avanzados de programación

ACTUALIZADO EL 22/09/2022
INGENIERIA EN SISTEMAS COMPUTACIONALES

Desarrollado por:
Steve Saúl Becerril Martínez (21120173)
José Osvaldo Constantino Bautista (21120188)
Ricardo Cornejo Cervantes (21120190)
Otoniel Jr. Gutiérrez García (21120214)
Jorge Cristian Pérez Rodríguez (21120244)
Alberto Vílchez Hurtado (21120265)
Introducción
Las GUI son de mucha utilidad en el diseño de las ventanas, ya que estas nos permiten darle una
vista agradable al usuario, y gracias a eso el usuario puede interactuar con una aplicación de forma
más sencilla.

La finalidad de esta práctica, consiste en crear una interfaz gráfica para usuarios (GUI), busca dar
comprensión sobre el desarrollo que hay detrás de las ventanas graficas simples, con diversas
características únicas las cuales las diferencian entre sí, estas características únicas las integraremos
a sus respectivas ventanas por medio de interfaces y métodos específicos, que nos provee Java,
tales como; JFrame para visualizar las características principales de la ventana (minimizar,
maximizar, cerrar, titulo, etc.), JButton para agregar componentes de tipo botones a las ventanas,
JCheckBox para seleccionar varios botones que implementen funcionalidades o características
específicas, JComboBox para tener una lista de objetos seleccionables con la funcionalidad que le
demos. Estas ventanas responderán a eventos simples de ratón, por medio de escuchadores
(Listener) específicos para cada método, Los componentes se podrán modificar por medio de
Layouts para editar las características de los componentes en la ventana.

Abordaremos cuatro problemáticas relacionadas con las GUI, se dará una pequeña explicación de
los códigos incluyendo imágenes para mejor comprensión, de los cuatro problemas solo se
implementará funcionalidad a dos de ellos los cuales son; el selector de color de fondo y primer
plano de la ventana y la calculadora gráfica, sin embargo, todas las ventanas reaccionaran
debidamente a los componentes que las integran.
Explicación de la Calculadora (Con función)
En la imagen 1.1 se muestra el código de la clase principal que corre a la aplicación.

1.1 Código del (Main) Creación de la GUI: En la imagen 1.2 son las librerías para usar las clases

1.2 Librerías

Después en la imagen 1.3 se muestra la ventana principal JFrame o contenedor de alto nivel es
donde se estarían colocando el JPanel y los Botones de la misma ampliación con un BoxLayout y
para el panel superior o cuadro de texto se uso JTextField como se muestra en la figura

1.3 Creación de la ventana y del panel superior:

Para la creación de los botones se llego a utilizar el JButton, como su distribución de los mismos con
un gridlayout en forma de columnas y filas<<Figura 5>>, para definir los bordes de cada botón se
uso la clase RoundBtn lo que logra es hacerlos ver mas amigables para el usuario <<Figura 6
ejemplo>>

Después para crear los botones se utilizo el JButton , y para poder distribuirlos de mejor manera en filas y
columnas se usó un gridlayout como se muestra en la imagen 1.4

1.4 Creación del panel inferior y los botones:

En la siguiente imagen que es la 1.5 agregamos la interfaz escuchadora a cada botón para que
reconozca el evento

Imagen 1.5 interfaz escuchadora para los tipos de eventos

Operaciones: Primero comenzamos importando las librerias que se muestran en la figura 1.5 , cada uno hacer
que los una función especifica y a lo cual darán funcionalidad a la aplicación, así como también se inicializan
algunas variables para realizar alguna operación por medio de los botones.

1.5 importar librerías e inicialización de variables:

En la siguiente imagen la 1.7 se muestra como se sobrescribe el actionperformed para que realice una
operación según lo que se pida, como se ve en la primera condición que evalúa si es numero puede
transformase a flota después en la siguiente condición muestra el resultado en la aplicación para ver si es un
dato valido , también después en el método de calcular recibe el número float que viene del código anterior
y lo usar para realizar las operaciones de la aplicación como en las primeras condiciones las usa para ver si
hay números insertados o no y después si hay alguno esperar a que el usuario ingrese alguna operación y
entre al swich y después muestre el resultado en el panel como se muestra en l imagen 1.7

1.6 evaluación con condiciones y método de cálculos:

Después ingresamos un método para que ejecutara las operaciones en simultaneo y hará que cada vez que
realice una operación la aplicación mande un resultado y si ya hay un resultado se mostrar el mismo y si no se
ejecutara el caso 2 como se muestra en la imagen 1.8 así como un método que valida los datos sean flotantes

1.8 método que realiza las operaciones en cadena de la ampliación

Después en el código se realiza un método en el cual validar el número introducido por el usuario es correcto
o no, si no lo es nada un mensaje “no es válido !!!!!!” como se muestra en la siguiente imagen 1.9

1.9 Comprobar numero valido

Por ultimo en el código se muestra el título de la aplicación, así como otros mensajes al usuario, la ejecución
del programa se muestra en la imagen 2.0.

2.0 Programa en ejecucion

Explicación del código “Alinear”
 Código
El código no tendrá una funcionalidad, será solo una presentación grafica (GUI) sobre alineamiento,
se comenzará definiendo las variables como se ve a continuación en la figura 1.1

Figura (1.1)

En la imagen 1.1 se puede observar en la línea 16, como se utiliza el BoxLayout, este se utiliza para
acomodar los componentes de forma vertical y no diagonal como anteriormente en el FlowLayout,
se crean 2 paneles para la organización de los elementos en forma vertical, uno para los botones y
uno para un acomodo general de la GUI.

Se crean los espacios de casillas de JCheckBox para los cuadros de opción múltiple, se agregan al
frame a través de nuestro primer Panel (Botones ajuste), después agregamos nuestro Panel para
invocar el GridLayout que es una forma de acomodar los botones de manera vertical y por columnas
(Imagen 1.1 linea 26) la funcionalidad es primero en la leyenda “Rows” es cuantos elementos se
pondrán en una columna, después e indica que tan lejos se quiere que estén los elementos uno de
otros y se procede a añadir el panel.

Se repite el mismo proceso con el JLabel creando las variables y repitiendo el mismo proceso
mencionado anteriormente, con los JButton, al final nuestra GUI se ve de la manera siguiente
(imagen 1.2)

(Imagen 2.1)
Explicación del código de la Impresora (Sin función)
 Código
La clase Main.java nos permitirá mostrar la ventana JFrame con dimensiones aplicadas, véase en la
siguiente imagen:

El programa consiste en la creación de una ventana que contenga una interfaz gráfica capaz de
manejar una impresora, solo que en este caso este programa no cuenta con función alguna, es solo
una simple vista a la apariencia de una aplicación. La creación de todos los componentes sucede de
la siguiente manera:
Explicación del código SelectorColor (Con función)
 Código
La clase Main.java nos permitirá mostrar la ventana con sus respectivas dimensiones, esto se
muestra en la siguiente imagen:

El programa tiene como funcionalidad cambiar el color de fondo y del primer plano de la ventana
de aplicación, esto dependiendo de qué color y dato desee el usuario modificar, para esto se
necesitan componentes funcionales, los cuales se muestra en las siguientes imágenes:

El programa cambia de acuerdo a la selección del usuario, su ejecución se muestra en las siguientes
imágenes:
Conclusión
Este trabajo se creó con la intención del manejo de interfaces graficas (GUI) y algunas formas
diferentes de crear dichos componentes, las GUI han explotado aún más el potencial de la
programación haciendo que los usuarios interactúen de mejor forma en el código y de una manera
más elegible.

Algunos componentes (tales como GridLayout y BoxLayout) anteriormente utilizados ya en el

proyecto son nuevos elementos no vistos antes en clase, su funcionalidad es acomodar nuestros
elementos de una manera vertical (no horizontal como el FlowLayout) dichos elementos permiten
que sea más elegible a la hora de seleccionar botones, opciones e inclusive una mayor compresión
de lo que se quiere dar a entender.

En el proceso de GridLayout se separa los botones con un cierto espacio (Definido por el usuario)
así como elegir los elementos de una columna dándole un formato diferente y más legible (véase el
caso de la calculadora) asi como pintar el fondo de un programa con BoxLayout se necesita aplicarle
todo el proceso a los JPanel ya que estos se añaden primero.

La utilidad de los JPanel a nivel industrial (y en todos los sistemas de software en general) son
demasiado importantes ya que sin estos no se podría hacer una GUI con varios componentes de una
manera legible y estructurada.