GUI

Interfaz Gráfica de Usuario

RECORRIDO DE APRENDIZAJE

¡INTERFACES CON MUCHO SWING!.............................................................................................................................3

Paquetes............................................................................................................................................................................ 3
¿CÓMO CONSTRUIMOS INTERFACES GRÁFICAS EN JAVA?...................................................................................3
CONTENEDORES Y COMPONENTES.............................................................................................................................3
CONTENEDORES DE JAVA SWING................................................................................................................................3
ADMINISTRADOR DE ESQUEMAS.................................................................................................................................4
Flowlayout........................................................................................................................................................................4
BorderLayout....................................................................................................................................................................5
GridLayout........................................................................................................................................................................ 5
COMPONENTES SWING...................................................................................................................................................5
Tabla Resumen de Componentes SWING.........................................................................................................................6
Componentes Atómicos....................................................................................................................................................7
Componentes de Texto......................................................................................................................................................7
Componentes de Menús....................................................................................................................................................7
Componentes de Menús....................................................................................................................................................8
EXCEPCIONES....................................................................................................................................................................8
EVENTOS............................................................................................................................................................................ 8
Tabla Resumen de Eventos...............................................................................................................................................9
DESAFÍO PRÁCTICO 1....................................................................................................................................................10
DESAFÍO PRÁCTICO 2....................................................................................................................................................14
DESAFÍO PRACTICO 3....................................................................................................................................................19
¡INTERFACES CON MUCHO SWING!

Swing es una biblioteca de interfaces gráficas de usuario (GUI) para Java, viene incluida con el entorno de
desarrollo de Java (JDK). Extiende a otra librería gráfica más antigua llamada AWT.

Paquetes:
o javax.swing
o java.awt
o java.awt.event

Las AWT y SWING proveen componentes básicos para una GUI (Graphics User Interface - Interface Gráfica
de Usuario) y son utilizados en las aplicaciones de Java. Una de las ventajas de usar AWT es que la interface es
independiente de la plataforma o interface gráfica de la máquina. Esto nos asegura que lo que se vea en una
computadora aparecerá igual en otra computadora.

¿CÓMO CONSTRUIMOS INTERFACES GRÁFICAS EN JAVA?

Utilizando clases incluidas en el paquete: package javax.swing;

Necesitamos importar esas clases en nuestro programa:
import javax.swing.NombreDelComponente;

Donde NombreDelComponente lo sustituimos por el nombre de un componente de la librería

SWING.

Ejemplo: import javax.swing.JFrame;

CONTENEDORES Y COMPONENTES

Existen tres (03) elementos básicos para la creación de interfaces gráficas de usuario usando Swing:

 Contenedores: Elementos capaces de albergar otros elementos.

 Administrador de esquemas: Permiten la distribución y organización de componentes en una
interfaz.
 Componentes: Elementos que se añaden a contenedores. Usualmente los componentes tienen
aspecto gráfico, como un botón, etiqueta entre otros.

CONTENEDORES DE JAVA SWING

Como vimos en entradas anteriores, un contenedor es el tapiz donde pintaremos nuestros componentes gráficos,
existen contenedores principales, entre estos se encuentran JFrame y JDialog pero también existen otros
contendedores incluidos dentro de los mencionados.

 JFrame – Es la Ventana de aplicación, el contenedor principal

 JDialog – Una ventana de tipo Ventana de diálogo, también puede ser un contenedor principal.
  JPanel – Permite la creación de paneles independientes donde se almacenan otros componentes.
 JScrollPane – permite la vinculación de barras de desplazamiento en un contenedor.
 JSplitPane – permite la creación de un contenedor dividido en 2 secciones.
 JTabbedPane – Permite la creación de pestañas, cada pestaña representa un contenedor
independiente.
 JDesktopPane – Permite crear ventanas dentro de una ventana principal
 JToolBar – Permite introducir una Barra de herramientas

ADMINISTRADOR DE ESQUEMAS.

El administrador de esquemas controla la posición de los componentes dentro de un contenedor. Java ofrece
varios administradores de disposición. La mayoría son provistas por AWT (dentro de java.awt), pero SWING
agrega algunas propias.

Flowlayout

Es el predeterminado para java.awt.Applet, java.awt.Panel y javax.swing.JPanel. Coloca los

componentes secuencialmente, de izquierda a derecha, en el orden en que se agregaron, también es posible
especificar el orden de los componentes. Para usar este esquema debemos importar la siguiente librería:
Import java.awt.FlowLayout;
BorderLayout

El Administrador de esquemas BorderLayout ordena los componentes en regiones (NORTH, SOUTH, EAST,
WEST, CENTER).

BorderLayout puede mostrar hasta 5 componentes, uno por región. El componente que se coloca en cada región
puede ser un contenedor, al cual se pueden adjuntar otros componentes. Para usar este esquema debemos
importar la siguiente librería:
import java.awt.BorderLayout;

GridLayout

El administrador de Esquemas GridLayout divide el contenedor en una especie de grilla o cuadricula de manera
que los componentes pueden acomodarse en filas y columnas, es importante recalcar que todo objeto
componente en un objeto GridLayout tiene la misma anchura y altura, y cada objeto se agrega empezando en la
celda superior izquierda. Para usar este esquema debemos importar la siguiente librería:
import java.awt.GridLayout;

COMPONENTES SWING.

Son clases o interfaces que permiten crear los objetos gráficos que componen una GUI tales como; botones,
listas desplegables, cuadros de texto, casillas de verificación, botones de opción, campos de texto, etiquetas,
menús. La siguiente tabla resume los componentes de la categoría SWING.
 Tabla Resumen de Componentes SWING

Cabe destacar que la forma más habitual para crear los componentes SWING por ser objetos es la sintaxis:

NombreDeLaClase nomenclaturaNombreDelObjeto = new

Método_Constructor_De_La_Clase([PARÁMETROS])

Donde nomenclatura es el acrónimo usado por buena costumbre de programación, para identificar el tipo de
componente. En el siguiente ejemplo instanciamos un objeto JLabel y la nomenclatura usada es “lbl” para
indicar que es un Label: JLabel lblNombre = new JLabel(“Nombre: ”);
Componentes Atómicos

Los componentes atómicos son los elementos que no pueden almacenar otros objetos o componentes gráficos,
por ejemplo, un JPanel no es Atómico, ya que en el podemos almacenar JButtons, JTextField entre otros...
 JLabel – Permite Vincular Etiquetas, tanto de texto como de imágenes
 JButton – Permite vincular Botones simples.
 JCheckBox – Son Casilla de verificación, ideal para selección múltiples.
 JRadioButton – Permite presentar opciones de selección similares a las checkbox.
 JToggleButton – Botón que se queda presionado hasta que se ejecute otro evento.
 JComboBox – Permite mostrar una lista de elementos como un combo de selección.
 JScrollBar – Permite mostrar una barra de desplazamiento.
 JSeparator – Permite separar opciones, es una barra simple.
 JSlider - Permite vincular un Deslizador en nuestra ventana.
 JSpinner – permite vincular una caja de texto con botones integrados para seleccionar algún valor.
 JProgressBar – Establece una barra de progreso.

Componentes de Texto

Son todos aquellos que nos permiten procesar cadenas de texto, sea como entrada o salida de información.
 JTextField – Permite introducir un campo de texto simple.
 JFormattedTextField – Permite introducir un campo de texto con formato, (si definimos que solo
recibe números no permitirá letras...)
 JPasswordField – Campo de texto que oculta los caracteres ingresados.
 JTextArea – Permite vincular un área de texto donde el usuario ingresara información o
simplemente para presentar cadenas de texto.
 JEditorPane –Permite vincular un área de texto con propiedades de formato.
 JTextPane – Similar al anterior, permitiendo otras opciones de formato, colores, iconos entre otros.
Componentes de Menús

Estos componentes permiten vincular opciones de menú en nuestras ventanas, tipo menú principal, como por
ejemplo el conocido Inicio, Archivo, Edición etc.
 JMenuBar – Permite vincular una barra de menús.
 JMenu– Permite vincular botones o enlaces que al ser pulsados despliegan un menú principal.
 JMenuItem – Botón u opción que se encuentra en un menú.
 JCheckBoxMenuItem– Elemento del menú como opciones de checkbox.
 JRadioButtonMenuItem– Elemento del menú como botón de selección.
 JPopupMenu– Opciones de menús emergentes.
Componentes de Menús

Estos son componentes un poco más avanzados, cumplen con funciones más enfocadas a procesos específicos y
complejos, como por ejemplo obtener gran cantidad de información de una base de datos, trabajo con nodos,
colores entre otros.
 JTable – Permite vincular una tabla de datos con sus respectivas filas y columnas.
 JTree - Carga un árbol donde se establece cierta jerarquía visual, tipo directorio.
 JList – Permite cargar una lista de elementos, dependiendo de las propiedades puede tenerse una lista
de selección múltiple.
 JFileChooser – Es un componente que permite la búsqueda y selección de ficheros entre otras.
 JColorChooser – Componente que permite cargar un panel selector de color
 JOptionPane – No es algo complejo sino más un componente independiente que permite mostrar
un cuadro de diálogo personalizable.

EXCEPCIONES

En Java los errores en tiempo de ejecución (cuando se está ejecutando el programa) se denominan excepciones,
y esto ocurre cuando se produce un error en alguna de las instrucciones de nuestro programa, como por ejemplo
cuando se hace una división entre cero, cuando un objeto es 'null' y no puede serlo, cuando no se abre
correctamente un fichero, etc.

Por suerte Java nos permite hacer un control de las excepciones para que nuestro programa no se pare
inesperadamente y aunque se produzca una excepción, nuestro programa siga su ejecución. Para ello tenemos la
estructura "try – catch – finally" que la mostramos a continuación:

try {

// Instrucciones cuando no hay una excepción

} catch (TypeException ex) {

// Instrucciones cuando se produce una excepción

} finally {

// Instrucciones que se ejecutan, tanto si hay como si no hay excepciones

EVENTOS.

Son las clases o interfaces que permiten crear objetos que capturen y manejen los eventos. Un evento es una
acción sobre algún componente, por ejemplo, clic a un botón, pulsar la tecla de enter en un botón, mover un
elemento con las teclas de navegación, eventos especiales como los
programados por tiempo, etc. Sin los eventos las GUI serían interfaces gráficas sin vida, y por lo tanto no
serían muy útiles que digamos.
Tabla Resumen de Eventos
DESAFÍO PRÁCTICO 1.

Para este primer ejemplo, crearemos un proyecto con el nombre “GUILogin”, un paquete con el nombre
“Login”, una clase llamada “GUILogin.java” y otra “Programa_Login.java” tal como se observa en la
figura:

Código fuente: GUILogin.java

/*
*Autor: Julio Castillo
*Fecha: 06/07/19
*GUILogin.java
*Clase que contienen un JFrame con componentes SWING
*/
package Login;

/*Líbrerías AWT*/
import java.awt.BorderLayout;
import java.awt.Container;
import java.awt.GridLayout;

/*Líbrerías SWING*/
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;
 public class GUILogin {
/*Definición de los componentes que conforman la GUI*/
private JFrame frmLogin;
private JLabel lblUser,lblPass;
private JTextField txtUser; private
JPasswordField pswPass;
private BorderLayout brdEsquema;
private JPanel pnlUser, pnlBoton;
private JButton btnLogin, btnSalir;
private Container cntContenedor;

public GUILogin() {
/*Invocamos un método que instancias lo componentes de la GUI y otro método para ordenarlos y
mostrarlos en pantalla*/
inicializarComponentes();
insertarComponentes();
}//fin de método constructor

private void inicializarComponentes() {

/*Este método se encargar de crear cada componente de la GUI Dentro de este método se Instanciará
cada componentes SWING y se agregaran a los esquemas de diseño*/ frmLogin = new
JFrame("Login Usuario");
Manejador manejaEvento = new Manejador();
cntContenedor = new Container(); brdEsquema =
new BorderLayout();
pnlUser = new JPanel();
pnlBoton = new JPanel();
lblUser = new JLabel("Usuario :");
lblPass = new JLabel("Password:");

txtUser = new JTextField("",10); pswPass

= new JPasswordField("",10);

btnLogin = new JButton("Login");

btnSalir = new JButton("Salir");

btnLogin.addActionListener(manejaEvento);
btnSalir.addActionListener(manejaEvento);
}//fin de método inicializarComponentes()

private void agruparLblTxt(JPanel panel, JLabel etiquetaA, JTextField cajaTexto, JLabel etiquetaB,
JPasswordField cuadroPass) {

/*Este método recibe como parámetros un Panel, 2 etiquetas, un cuadro de texto simple y uno para
password Luego signa al panel un esquema de tipo GridLayout de 2 filas, 2 Columnas.
Por último, agrega los componentes en orden*/
 panel.setLayout(new GridLayout(2,2));
panel.add(etiquetaA);
panel.add(cajaTexto);
panel.add(etiquetaB);
panel.add(cuadroPass);

}// Fin de método agruparLblTxt()

private void agruparBotones(JPanel panel, JButton botonA, JButton botonB) {

/*Este método recibe como parámetros un Panel, 2 botones Luego signa al panel un esquema de tipo
BorderLayout. Por último, agrega un botón del lado OESTE y otro del lado ESTE del panel*/

panel.setLayout(new BorderLayout());
panel.add(botonA, BorderLayout.WEST);
panel.add(botonB, BorderLayout.EAST);

}// Fin de método agruparBotones()

private void insertarComponentes() {

/*Este método se encargar de insertar los componentes en los paneles y visualizar la GUI*/

/*Obtenemos el panel del JFrame*/

cntContenedor= frmLogin.getContentPane();
/*Asignamos el esquema de tipo BorderLayout*/
cntContenedor.setLayout(brdEsquema);

/*Invocamos los método para agrupar las etiquetas, cuadros de texto y botones*/ agruparLblTxt(pnlUser
,lblUser ,txtUser,lblPass,pswPass); agruparBotones(pnlBoton,btnLogin,btnSalir);
/*Agregamos los paneles con los componentes agrupados en el lado NORTE y SUR del Contenedor
principal*/
cntContenedor.add(pnlUser, BorderLayout.NORTH);
cntContenedor.add(pnlBoton, BorderLayout.SOUTH);

/*Compactamos el JFrame al tamaño del componentes*/

frmLogin.pack();

/*Posicionamos el JFrame en el cntro de la pantalla*/

frmLogin.setLocationRelativeTo(null);

/*Con esta instrucción el JFrame se cerrará al pulsar en el botón (X)*/

frmLogin.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
/*Hacemos que nuestro JFrame pueda verse en pantalla*/
frmLogin.setVisible(true);
}//fin de método insertarComponentes()
 private class Manejador implements ActionListener{ @Override
/*El método actionPerformed recibe un objeto de tipo ActionEvent, este objeto trae información sobre el
botón que ha sido pulsado, por medio del método de retorno getSource()*/
public void actionPerformed(ActionEvent evento){

/*Teniendo en cuenta que los valores de un JPasswordField vienen en forma de array, lo convertimos a
string para compararlo posteriormente*/

String valorPass = new String(pswPass.getPassword()); if

(evento.getSource()==btnLogin){

/*Si el boton presionado es btnLogin, verificamos el usuario y el password ingresado*/ if

(txtUser.getText().equals("usuario")&& valorPass.equals("1234")){
System.out.println("¡**ACCESO AUTORIZADO**!");
}Fin de if interno
else{
System.out.println("¡**ACCESO DENEGADO**!");
}//fin de else

}//Fin de if externo
if (evento.getSource()==btnSalir){
/*Si el botón pulsado es btnSalir invocamos el método System.exit(0)*/ System.exit(0);
}//Fin de if externo
}//finde actionPerformed
}//fin de clase manejador

}//Fin de la clase frmLogin

Luego creamos la clase Programa_Login que contendrá el método main(), desde donde instanciaremos
un objeto de la clase GUILogin.

Código fuente de la clase Programa_Login.java

public static void main(String[] args){

GUILogin loginUsuario = new GUILogin();
}//Fin de método main

El resultado es el siguiente:
DESAFÍO PRÁCTICO 2.

El siguiente ejemplo crearemos un nuevo proyecto denominado Trabajador que mostrará una ventana con dos
campos de texto, uno para ingresar las horas de trabajo y Horas extras laboradas por un empleado. Para ello
creamos 2 clases una llamada GUICalculaSalario y una que contenga el método main() llamada
Programa_CalculaSalario.

Código fuente: GUICalculaSalario.java

package CalculadoraSalario;

/*Librerias AWT*/
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Container;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.GridLayout;

/*Librerias SWING*/
import javax.swing.border.Border;
import javax.swing.BorderFactory;
import javax.swing.JButton; import
javax.swing.JFrame; import
javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
/**
*Fecha: 06/07/19
* @author UPEL
* GUICalculaSalario.java
*/
public class GUICalculaSalario {
/*Definir los componentes de la GUI*/
private Container cntContenedor; private
BorderLayout brdEsquemaPpal;
 private GridLayout grdEsquema;
private JFrame frmEmpleado;
private JLabel lblCodigo, lblNombre, lblHrsTrab, lblHrsExt, lblSalario,lblTtalSalario; private
JTextField txtCodigo, txtNombre, txtHrsTrab, txtHrsExt;
private JPanel pnlDatos, pnlBotones;
private JButton btnCalcular, btnSalir;
private Border linea;
private Manejador manejaEvento;
/*Definición de constantes que almacenan el valor de la horas convencionales y horas extras*/ private
final double VHORASTRAB=5000;
private final double VHORASEXT=7000;

/*Creamos el método constructor para invocar los métodos crearComponentes() e

insertarComponentes()*/
public GUICalculaSalario() {
crearComponentes();
insertarComponentes();
}//Fin del método constructor

private void crearComponentes() {

frmEmpleado cntContenedor
= new JFrame("Calculadora Salario");
= new Container();

brdEsquemaPpal grdEsquema
= new BorderLayout();
= new GridLayout(5,2);

linea manejaEvento = BorderFactory.createLineBorder(Color.DARK_GRAY,4);

= new Manejador();

lblCodigo lblNombre lblHrsTrab

= new JLabel("Código:");
lblHrsExt lblTtalSalario lblSalario
= new JLabel("Nombre:");
= new JLabel("Horas Trabajadas:");
= new JLabel("Horas Extras:");
= new JLabel("Total a Cobrar:");
= new JLabel("Bs. ");
lblSalario.setBorder(linea);

txtCodigo txtNombre txtHrsTrab

= new JTextField(4);
txtHrsExt pnlDatos pnlBotones
= new JTextField(15);
= new JTextField("0",2);
= new JTextField("0",2);
= new JPanel();
= new JPanel();

btnCalcular btnSalir = new JButton("Calcular");

= new JButton("Salir");
 btnCalcular.addActionListener(manejaEvento);
btnSalir.addActionListener(manejaEvento);

}//fin del método crearComponentes()

private void insertarComponentes() {

cntContenedor = frmEmpleado.getContentPane();
cntContenedor.setLayout(brdEsquemaPpal);

agruparDatos(pnlDatos,lblCodigo,txtCodigo,lblNombre,txtNombre,lblHrsTrab,txtHrsTrab,
lblHrsExt,txtHrsExt,lblTtalSalario,lblSalario);

agruparBotones(pnlBotones,btnCalcular,btnSalir);

cntContenedor.add(pnlDatos, BorderLayout.NORTH);
cntContenedor.add(pnlBotones, BorderLayout.SOUTH);

/*Compactamos el JFrame al tamaño del componentes*/

frmEmpleado.pack();

/*Posicionamos el JFrame en el cntro de la pantalla*/

frmEmpleado.setLocationRelativeTo(null);

/*Con esta instrucción el JFrame se cerrará al pulsar en botón (X)*/

frmEmpleado.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

/*Hacemos que nuestro JFrame pueda verse en pantalla*/

frmEmpleado.setVisible(true);

}//fin del método insertarComponentes()

private void agruparDatos(JPanel panel, JLabel etiquetaA, JTextField textoA, JLabel etiquetaB, JTextField
textoB, JLabel etiquetaC, JTextField textoC,JLabel etiquetaD, JTextField
textoD,JLabel etiquetaE, JLabel etiquetaF) {
panel.setLayout(grdEsquema);
panel.add(etiquetaA);
panel.add(textoA);
panel.add(etiquetaB);
panel.add(textoB);
panel.add(etiquetaC);
panel.add(textoC);
panel.add(etiquetaD);
panel.add(textoD);
 panel.add(etiquetaE);
panel.add(etiquetaF);

}//fin de método agruparDatos()

private void agruparBotones(JPanel panel,JButton botonA,JButton botonB) {

panel.setLayout(new GridLayout(2,1));
panel.add(botonA);
panel.add(botonB);
}//fin de método agruparBotones()

private class Manejador implements ActionListener{

@Override
/*El método actionPerformed recibe un objeto de tipo ActionEvent, este objeto trae información sobre el
botón que ha sido pulsado, por medio del método de retorno getSource()*/
public void actionPerformed(ActionEvent evento){

if (evento.getSource()==btnCalcular){
/*Si el botón pulsado es btnCalcular invocamos el método calcular() y le asignamos el
resultado a la etiqueta lblSalario*/
lblSalario.setText("Bs. "+calcular());
}
if (evento.getSource()==btnSalir){
/*Si el botón pulsado es btnSalir
invocamos el método System.exit(0)*/
System.exit(0);
}
}//fin de actionPerformed
}//fin de clase manejador private
double calcular() {
/*Variable que almacenará el salario calculado*/
double salario=0;
/*Los bloques Try y Catch, se usan para el tratamiento de errores*/

try {
/*Declaramos las variables locales hTrab y hExt para capturar los valores de las cajas de texto.
*/
int hTrab = Integer.parseInt(txtHrsTrab.getText()); int
hExt = Integer.parseInt(txtHrsExt.getText());
salario = (VHORASTRAB*hTrab)+(VHORASEXT*hExt);
}//fin de try
catch (NumberFormatException e) {
/*En caso de algún error, se genera un mensaje en consola*/
System.out.println("Error en la lectura de datos..."); System.out.println("Error:
"+e);
}//fin de cacth
 return salario;
}//fin de método calcular()
}//fin de la clase GUICalculaSalario

Luego creamos la clase Programa_Salario que contendrá el método main(), desde donde instanciaremos
un objeto de la clase GUISalario.

Código fuente de la clase Programa_Salario.java

public static void main(String[] args){

GUICalculaSalario nomina = new GUICalculaSalario ();
}//Fin de método main

El resultado es el siguiente:
 DESAFÍO PRACTICO 3

Analice la siguiente interfaz gráfica.

https://www.thaicreate.com/java/java-gui-swing-jtable.html