Guía que orienta en la creación de componentes gráficos en Java

1. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
1
GUÍA Nº 1 INTERFAZ GRAFICA DE DATOS
IDENTIFICACIÓN DE LA ASIGNATURA
Facultad de Estudios a Distancia - FESAD ESCUELA: Ciencias Tecnológicas
Programa: Tecnólogo en programación de Sistemas Informáticos
Asignatura/Unidad: Programación ll
Nombre de la actividad: Aprendiendo GUI
Objetivo de la temática: Conocer las librerías graficas que ofrece Java, además de los
principales elementos que las integran para desarrollo de GUI.
Docente-Tutor: Ing. Josué Nicolás Pinzón Villamil
Interfaz Grafica de Usuario
GUI
Objetivos Específicos
• Clasificar los diferentes elementos de una GUI según las funciones que desempeñen.
• Identificar qué tipo de organización y distribución se debe utilizar para el diseño de
GUI, además de sus ventajas y desventajas frente al diseño gráfico.
¿Qué es una interfaz gráfica, GUI?
La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user
interface) es un puente que conecta a la maquina con el usuario, permitiendo una interacción
mutua, mediante un conjunto de imágenes y objetos gráficos, para representar la información
y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno
visual sencillo para lograr la comunicación con el sistema operativo de un computador.

2. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
2
Java ofrece una variedad de bibliotecas gráficas entre los cuales se tiene AWT y Swing, estas
están integradas por: [1]
Elementos contenedores
Tienen como función almacenar los diferentes componentes gráficos de la aplicación.
JFrame: Es una ventana de nivel superior1 con un título y un borde (Por lo general es una
ventana principal de la aplicación2).
JPanel: Es un contenedor de componentes gráficos (botones, etiquetas, cuadro de texto etc.)
JDialog: Un diálogo es una ventana dependiente de una ventana de nivel superior con un título
y un borde que se suele utilizar para tomar algún tipo de entrada del usuario.
1
Una ventana de nivel superior no está contenida en ningún otro objeto y se encuentra directamente sobre
el escritorio.
2
Es costumbre que en la ventana principal se imponga el método main(), con ello se e invocan los recursos
necesarios para correr la aplicación.

3. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
3
Controles estándar de entrada y salida
Permiten visualizar o solicitar información.
JOptionPane: Forma práctica de construir un cuadro de diálogo estándar que pide a los
usuarios de un valor o les informa de sobre algo.
JLabel: Es una etiqueta con una área de exposición para una cadena de texto corto o una imagen,
o ambas cosas. Control pasivo que no admite ninguna interacción con el usuario.
JTextField: Es un componente que permite la edición de una línea de texto.
JTextArea: Es un componente de texto multi-línea de área, que muestra el texto sin formato.
Elementos de Botones.
Permite generar una cascada de eventos o acciones.
JButton: Es un botón que se puede configurar, para ser controlado, por acciones de teclado o
de ratón.

4. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
4
JComboBox: Es un componente que combina un campo editable o botón y una lista descendente
desplegable.
JRadioButton: Es un conjunto de botones que permiten solo seleccionar uno del grupo.
JCheckBox: Es un conjunto de botones que permiten seleccionar uno o varios botones del
grupo.
Elementos de Organización y distribución.
Permiten la ubicación de los componentes gráficos de una forma ordenada en los contenedores.
Layout: Esta clase es la que decide en qué posición van los botones y demás componentes, si
van alineados, en forma de matriz, cuáles se hacen grandes al maximizar la ventana, etc. Java

5. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
5
ofrece una serie de Layout predefinidos y da la posibilidad de crear los propios. Algunos de ellos
son:
GridLayout: Es un controlador de distribución que establece el recipiente de los componentes
(etiquetas, botones, etc.) en forma de matriz. El contenedor (panel) se divide en tamaño
rectángulos iguales y cada uno de los componentes se ubica en cada rectángulo.
BorderLayout: Es un diseño basado en fronteras para establecer un contenedor (JPanel,
JFrame, JDialog, JScrollPane, otros), organizado en cinco regiones: norte, sur, oriente, occidente
y centro. Este tipo de Layout cambia el tamaño de sus componentes (botones, paneles,
etiquetas, etc.) para adaptarlos a cada región. Puede contener más de un componente, y se
identifica por una constante que corresponde: NORTH, SOUTH, EAST, WEST, y CENTER.
Estos son algunos de los tantos elementos con los que cuenta Java, ahora teniendo una idea
clara de ellos, se pasara a una etapa de codificación, para observar sus características y
utilidades que ofrecen.

6. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
6
Para ilustrar la codificación se desea hacer la GUI de una aplicación que recoja los datos
básicos de una persona, como se muestra en las siguientes figuras:
VentanaPrincipal
- informacion PanelInformacion
Para realizar este prototipo primero se debe seguir una secuencia de pasos:
1) Crear un proyecto en IDE.
PanelInformacion
- labelNombres
- labelApellidos
- labelDocumento
- labelTipoDocumento
- textNombres
- textApellidos
- textDocumento
- comboBoxTipoDocumento
JFrame
PanelBotones
- buttonAceptar
- buttonCancelar
JPanel

7. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
7
2) Crear un package dentro del proyecto que puede ser llamado GUI, esto es para separar el
negocio de la interfaz Gráfica (GUI).
3) Dentro del package se crea una clase principal, la cual será la encargada de administrar y
manipular a los demás objetos de la GUI. En este caso se llamara Ventana Principal.

8. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
8
En esta etapa se pasará a la codificación que es el último paso.
4) Dentro de la clase VentanaPrincipal se debe realizar las siguientes acciones:
a) Importar las librerías graficas de Java que contienen los de componentes gráficos
expuestos anteriormente:
import java.awt.*;
import javax.swing.*;
b) En la clase VentanaPrincipal se extiende a la clase abstracta JFrame para heredar sus
características. Como se muestra en la figura.
c) Se crea un método constructor de la clase, en el cual se inicializará los componentes que
integren a la clase y las instancias asociadas. En este método es donde se le asignara
tamaño, titulo, además de otros atributos de la VentanaPrincipal.

9. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
9
d) Ahora se debe crear el main() de la aplicación, por lo general se acostumbra a realizarlo
en esta clase.
Al correr la aplicación se obtiene el siguiente pantallazo.

10. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
10
Teniendo en cuenta la pantalla anterior, ahora se quiere hacer los dos botones de la parte
inferior, en la clase VentanaPrincipal se agregan dos atributos para crear los botones.
Contando con estos parámetros, se deben inicializar dentro del constructor de la clase, donde
se le asignara un nombre, su ubicación y otras características. Como se puede observar en la
siguiente imagen, los botones estarán contenidos dentro de un subpanel que estará ubicado en
la región sur de la VentanaPrincipal.

11. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
11
Al correr la aplicación se obtiene:
Para construir la parte central del prototipo, se debe crear una clase que se encargue de
administrar y contener los componentes, en este caso se llamara PanelInformación.
Teniendo la clase ya creada dentro de esta se debe colocar las siguientes líneas de código:
a) Importar las librerías graficas de Java que contienen los de componentes gráficos
expuestos anteriormente:
import java.awt.*;
import javax.swing.*;
b) En la clase PanelInformación se extiende a la clase abstracta JPanel para heredar sus
características. Como se muestra en la figura.

12. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
12
El siguiente paso es digitar los atributos de la clase, en este caso serán los cuatro JLabel que
indican los nombres, apellidos, la dirección y documento de identidad, además de los tres
JTextField que corresponden a los tres primeros mencionados anteriormente y el JComboBox
del tipo de documento.

13. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
13
Inicialización de los atributos de la clase.

14. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
14
Creados los atributos JLabel, JTextField y JComboBox, se deben inicializar en el constructor de
la clase y agregarlos, además de asignarles una distribución en el panel, en este caso será una
distribución tipo GridLayout.

15. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
15
Con estas líneas de código, ya se tiene la parte central de la aplicación donde se solicitan los
datos personales, ahora hace falta hacerlos visibles, para ello se debe instanciar la clase
PanelInformación en la VentanaPrincipal. El siguiente pantallazo es de la clase
VentanaPrincipal.
Con esta asociación creada se debe inicializar y agregar el panel a la VentanaPrincipal, esto se
realiza dentro del constructor de la clase.

16. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
16
Realizadas las anteriores acciones, se puede correr la aplicación lo cual obtendrá la siguiente
imagen.
Para agregar títulos a cada uno de los paneles agregue las siguientes líneas de código a los
constructores de la clase.
En el constructor de la clase VentanaPrincipal agregar
panPrimer.setBorder(new TitledBorder("Botones"));
En el constructor de la clase PanelInformación agregar

17. Interfaz Gráfica de Usuario
Guía Nº 1
Introducción GUI
17
setBorder(new TitledBorder("Datos"));
Con estas líneas se obtiene la siguiente GUI
Bibliógrafa
[1] Java Platform SE 6. (2015). Recuperado 29 March 2020, en
https://docs.oracle.com/javase/6/docs/api/
CONTROL DE CAMBIOS
Fecha Observación Autor
28/03/2020
Se crea guía Nº 1, sobre Interfaz
Gráfica de Usuario
Mg. Josué Nicolás
Pinzón Villamil