Asignatura: Lenguajes de la WEB I

Prof.: Julio Castillo

GUI
Interfaz Gráfica de Usuario

Unidad I. Componentes Swing Java.

Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo

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
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
¡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.
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
 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;
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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.
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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: ”);
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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.
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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;
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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*/
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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()
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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:
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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;
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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 = new JFrame("Calculadora Salario");
cntContenedor = new Container();

brdEsquemaPpal = new BorderLayout();

grdEsquema = new GridLayout(5,2);

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

lblCodigo = new JLabel("Código:");

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

txtCodigo = new JTextField(4);

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

btnCalcular = new JButton("Calcular");

btnSalir = new JButton("Salir");
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo

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);
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
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){

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

El resultado es el siguiente:
Asignatura: Lenguajes de la WEB I
Prof.: Julio Castillo
DESAFÍO PRACTICO 3

Analice la siguiente interfaz gráfica.