GUI’s

Interface grafica de usuarios usando

GridBagLayout y clases ocultas en la
implementación de la actividad de los
componentes
 Objetivo de la practica
Crear un interface grafica mediante la cual podamos calcular el
pago mensual que se hará cuando se otorgue un préstamo por
cierta cantidad de Bs. , el cual se cancelara en un periodo
determinado de meses a una determinada tasa de interés
anual. Para lograr esto se creara un proyecto el cual generara la
ventana que se muestra en la figura.
 Diseño
Diseñar la interface grafica que se mostro en la figura anterior, para
cumplir con este objetivo crearemos un proyecto llamado
CalculadoraPrestamo, en el cual definiremos la clase Calculadora en
el paquete gridbag, con las siguientes características:
 La clase deriva de un JFrame.
 En el contenedor colocaremos 4 etiquetas, 4 cuadros de texto
y tres botones con la deposición mostrada. En el ultimo
cuadro de texto no se permite modificar su contenido.
 Todos los componentes serán distribuidos usando un
GridBagLayout en el Container de la ventana.
 Cada botón tendrá su propio listener para “escuchar” el click.
 Botón Calcular calculara el pago mensual.
 Botón Borrar borrara el contenido de los cuadros de texto.
 Botón Cerrar cerrara la ventana y termina la ejecucion del
proyecto.
Para el calculo del monto a pagar mensual emplearemos la
siguiente formula:
 GridBagLayout
El GridBagLayout es uno de los Layout de java más potente, vamos a construir
una ventana en la que situaremos determinados componentes, etiquetas,
cuadros de texto y botones, en determinadas posiciones usando
el GridBagLayout.
Todos los contenedores en java tienen en su interior una clase, de nombre
genérico "layout", que es la encargada de distribuir los componentes dentro
del contenedor. Por ejemplo, la clase FlowLayout se encarga de hacer que los
componentes vayan todos seguidos de izquierda a derecha, el GridLayout los
coloca en forma de matriz, y el BorderLayout permite que los componentes
sean distribuidos en 5 regiones.
El GridBagLayout coloca los componentes en una serie de filas y columnas,
permite a los componentes ocupar varias filas y/o columnas y las filas y las
columnas no tienen porque tener la misma altura o anchura. Finalmente, el
layout calcula estas alturas y anchuras dependiendo de las restricciones de los
componentes, estos indican al GridBagLayout sus restricciones mediante un
objeto del tipo GridBagConstraints , usando los siguientes atributos:
GridBagConstraints.gridx nos dice la posición X del componente, es decir, el
número de columna en la que está el componente, siendo la columna 0 la
primera columna de la izquierda. Si el componente ocupa varias columnas
debemos indicar la columna en la que está la esquina superior izquierda del
componente.
GridBagConstraints.gridy nos dice la posición Y del componente, es decir, el
número de fila en la que está el componente, siendo la fila 0 la primera fila
de la parte de arriba. Si el componente ocupa varias debemos indicar la fila
en la que está la esquina superior izquierda del componente.
GridBagConstraints.gridwidth nos dice cuántas celdas en horizontal debe
ocupar el componente. El ancho del componente.
GridBagConstraints.gridheight nos dice cuantas celdas en vertical debe
ocupar el componente. El alto del componente.
El primer paso es hacernos una imagen de la rejilla donde queremos colocar
nuestros componentes, simularemos esto trazando líneas horizontales y
verticales, para tratar de delimitar nuestra rejilla en la que irán colocados los
componentes.
 Rejilla
Como todos los componentes
ocupan una sola celda en la
cuadricula los atributos:
gbc.gridwidth, gbc.gridheight seran
iguales a 1 para todos los
componentes, ahora los atributos
para el posicionamiento en cada
celda seria así:
Para el cuadro de texto Monto

Sus coordenadas serian gbc.gridy = 0, gbc.gridx = 0; empieza en la fila cero columna cero
para el cuadro de esto ubicado al lado las coordenadas serian gbc.gridy = 0, gbc.gridx = 1
empieza en la fila cero columna, para la siguiente etiqueta gbc.gridy = 1, gbc.gridx = 0,
para el cuadro de texto gbc.gridy = 1, gbc.gridx = 1 y así para el resto de las etiquetas y
cuadros de texto. Para el boton Calcular gbc.gridy = 4, gbc.gridx = 0, Borrar gbc.gridy = 4 ,
gbc.gridx = 1 y Cerrar gbc.gridy = 4, gbc.gridx = 2.
Clase Calculadora
Clase Principal
 Probar del proyecto

 Probar con los datos mostrados en la figura.

 Terminado el calculo y usando la tecla Tab desplace el Foco por la
interface grafica, vea lo que ocurre.
 Seleccione el botón Borrar vea lo que ocurre.
 Puede terminar la aplicación de dos forma seleccionando el botón
para cerrar la aplicación ubicado en la esquina superior derecha o
simplemente seleccionando el botón Cerrar de la ventana.
 Intente cambiar el tamaño de la ventana.
 De se cuenta que el contenido de el cuadro de texto donde se
muestra el pago no se puede modificar.