CREACION DE INTERFACES GRAFICAS DE USUARIO

Contenido:

Interfaces Graficas de Usuario - GUI

• Componentes gráficos - API
• Jframe
• Jlabel
• JTextField
• Jbutton
• JTabedPane
• Layout
• FlowLayout
• BoxLayout
• BorderLayout
• GridLayout

Aprendizajes Esperados: En esta guía se desarrollaran Interfaces Graficas de Usuario, se crearan

ventanas a través de los componentes JFrame y JDialog. Se introducirá el concepto de Layout
(Layouts, FlowLayout, BorderLayout,GridLayout,BoxLayout) y su taxonomía.

La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface) es
un programa informático que actúa de interfaz de usuario, utilizando 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 permitir la comunicación con el
sistema operativo de una máquina o computador.

1. Componentes gráficos

En java todos los elementos que se utilizan son objetos (excepto los tipos de datos primitivos), por
lo que se puede inferir que los componentes gráficos necesarios para la creación de una GUI,
también lo son.

Es pues necesario los nombre de las clases y paquetes que contienen tales definiciones y lo que
representan cada una de ellas

NOMBRE DE LA CLASE DESCRIPCION

javax.swing.Jframe Modela el componente grafico de la ventana

javax.swing.JLabel Área donde puede mostrarse iconos o texto no editable.

 javax.swing.JTextField Área en la que el usuario introduce datos desde el teclado.

javax.swing.JButton Área que, cuando el ratón hace clic ella, dispara un evento.

javax.swing.JCheckbox Componente de la GUI que puede o no estar seleccionado.

javax.swing.JComboBox Lista desplegable de elementos.

javax.swing.JList Área que contiene una lista de elementos.

javax.swing.JPanel Contenedor de elementos gráficos. Permite establecer la

posición y tamaño de los componentes registrados a través del
uso de un objeto de la interface java.awt.LayoutManager.

1.1. Componente JFrame

Los componentes gráficos, deben reposar dentro de una ventana. Por eso iniciaremos con uno de
los componentes más importantes en la creación de las GUI, el JFrame.

Analice el siguiente código:

1. JFrame ventana = new JFrame();

2. ventana.setSize(500,300);
3. ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
4. ventana.setVisible(true);

La línea 1 crea un objeto JFrame

La línea 2 establece un tamaño de 500 pixels de ancho por 300 de alto.
La línea 3 establece que al hacer clic en el botón cerrar se debe terminar la aplicación.
La línea 4 hace visible el objeto (ventana).

Nota: si no se establece la instrucción setDefaultCloseOperation, el botón cerrar, no

finaliza la aplicación, sino que vuelve invisible esta ventana.

Digite, compile y ejecute el siguiente código.

Archivo: Ventana.java

import javax.swing.JFrame;

public final class Ventana extends JFrame {

Ventana() {
setSize(500,300);
 setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

}
}

Archivo: AplicacionPrincipal.java

public class AplicacionPrincipal {

public static void main(String args[]) {

Ventana ventana = new Ventana();

}
}

El anterior código, genera la siguiente ventana.

1.2. Componente JPanel

Como se mencionó anteriormente, JPanel es un contenedor de componentes. Veamos un

ejemplo: desarrollemos el código necesario para mostrar la siguiente ventana.
Digite, compile y ejecute el siguiente código.

Archivo:Ventana.java

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;

public final class Ventana extends JFrame {

JPanel panel;

Ventana() {
setSize(500,300);
setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
creaPanel();
getContentPane().add(panel);

void creaPanel() {
panel = new JPanel();
panel.add(new JButton("Boton1"));
panel.add(new JButton("Boton2"));
panel.add(new JButton("Boton3"));

}
}

Archivo: AplicacionPrincipal.java

public class AplicacionPrincipal {

public static void main(String args[]) {

Ventana ventana = new Ventana();

 }
}

1.3. Diseño y desarrollo de las GUI

Hoy por hoy, la gran mayoría - por no decir todos - de lenguajes de programación, proveen Entornos
de Desarrollo Integrados o IDE (por sus siglas en inglés integrated development environment), los
cuales consisten en un editor de código, un compilador, un depurador y un diseñador de interfaces
gráficas; las cuales permiten crear GUIs, tan solo arrastrando los elementos a un formulario, para
después asociarles un determinado comportamiento como respuesta a los eventos de estos; lo cual
da origen a los siguientes problemas:

1. Duplicación de código: Imagine el siguiente escenario: un programador necesita desarrollar dos

interfaces de usuario que en esencia son muy parecidas (suponga que una de ellas se diferencia
de la otra en que adicionan un campo extra). El desarrollador, seguramente empleará la
herramienta de diseño para crear la primera de las interfaces, y luego copiará y pegará la
distribución grafica en la otra. En la segunda interfaz, adicionará los elementos que sean
necesarios. Prácticamente el código de la primera interfaz se ha duplicado en la segunda. La
duplicación de código no es inherentemente mala; el problema comienza cuando se requiere
realizarle algún tipo de ajuste o modificación, pues esta misma modificación debe ser extendida
a los restantes lugares donde se haya duplicado el código. Lo que generalmente termina
sucediendo es que un programador olvida realizar el cambio en el código en alguno de los
lugares.

2. Generación de interfaces graficas de componentes estáticos. Después de finalizar el desarrollo

de un GUI bajo el enfoque que se está presentando, un diseñador se enfrenta ante el dilema de
si bloquea o no el tamaño de la interfaz gráfica. Si no lo hace, cuando el usuario cambie el
tamaño de la ventana, aparecerá un gran espacio desaprovechado. La alternativa de modificar
el código, ni siquiera por los desarrolladores, debido al gran trabajo que demanda.

1.4. Layouts

Un Layout es un algoritmo que establece la ubicación y tamaño de una serie de componentes

gráficos.
En ninguno de los layouts se permite especificar una coordenada xy para un componente o control
visual, solo se permite especificar si va primero o va al norte etc.

//Antes de iniciar el manejo de Layouts es importante tener claro:

 Un JPanel, solo puede tener un Layout.

 Para asignar un Layout a un JPanel, es necesario asignarlo a través del método setLayout()
de la clase JPanel. Pasando como parámetro null, se especificará que JPanel, no trabajara
con un Layout, de manera que será necesario definir para cada componente grafico su
ubicación y respectivo tamaño a través del método setBounds().
  Para agregar elementos gráficos a un panel, se emplea el método add(), y se pasa como
parámetro la variable de referencia del objeto que se desea adicionar.
 Para definir que una ventana debe desplegar una serie de objetos gráficos especificados en
un JPanel, debe emplearse el método getContentPane().add y debe pasarse como
referencia al JPanel que se desea mostrar.

1.4.1. FlowLayout

Este es uno de los algoritmos de asignación de ubicación más sencillos de utilizar.

FlowLayout acomoda los componentes de izquierda a derecha, hasta que se acaba la pantalla y
entonces empieza en el siguiente renglón. Este es el Layout por defecto.
Digite, compile y ejecute el siguiente código.

Archivo: VentanaEmpleado.java

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.JButton;
import java.awt.FlowLayout;

public final class VentanaEmpleado extends JFrame {

private JPanel panel;

VentanaEmpleado() {
setSize(300,200);
setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
creaPanel();
getContentPane().add(panel);
}

void creaPanel() {
panel = new JPanel();
panel.setLayout(new FlowLayout());
panel.add(new JLabel("Cedula : "));
panel.add(new JTextField(20));
panel.add(new JButton("Haga clic aquí"));
}
}

Archivo: AplicacionPrincipal.java

public class AplicacionPrincipal {

 public static void main(String args[]) {
VentanaEmpleado ventanaEmpleado = new VentanaEmpleado();
}
}

El resultado del anterior código es el siguiente:

Al redimensionar la ventana (haciendola mas ancha) se obtiene lo siguiente.

Este Layout posee los siguientes tres constructores:

 FlowLayout(int alineacion). Crea un nuevo objeto FlowLayout, el parametro que se

suministra indica como se alinearan los componentes que se adicionen. Se puede
especificar que los componentes queden centrados o que se alineen hacia la derecha o
hacia la izquerda.

 FlowLayout(int alineacion, int espacioHorizontal, int espacioVertical). El primer para indica

como se alinearan los componentes, el segundo especifica la cantidad de pixeles que
separaran los componentes en forma horizontal y el tercer parametro, especifica la cantidad
de pixeles que separaran los componentes en forma vertical.
  FlowLayout(). Crea un nuevo objeto FlowLayout. Por defecto los objetos se centraran en el
JPanel.

Analice y observe como el siguiente código, alinea a la derecha y separa más (30 pixeles) los
componentes.

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.JButton;
import java.awt.FlowLayout;

public final class VentanaEmpleado extends JFrame {

private JPanel panel;

VentanaEmpleado() {
setSize(700,200);
setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
creaPanel();
getContentPane().add(panel);
}

void creaPanel() {
panel = new JPanel();
panel.setLayout(new FlowLayout(FlowLayout.RIGHT,30,30));
panel.add(new JLabel("Cedula : "));
panel.add(new JTextField(20));
panel.add(new JButton("Haga clic aquí"));
}
}

Al ejecutar el siguiente código aparece la siguiente ventana.

1.4.2. GridLayout

GridLayout divide el área del JPanel en una cuadricula o tabla cuyas dimensiones deben ser
especificadas por el usuario. Los componentes que se añadan al JPanel se ubican en cada una de
las celdas de esta cuadricula y toman todo el espacio disponible de la celda.

Este Layout, posee los siguientes constructores:

 GridLayout (int numFilas, int numCols). Crea un nuevo objeto GridLayout y especifica la
cantidad de filas y columnas del panel.

 GridLayout(int numFilas, int numCols, int espacioHorizontal, int espacioVertical). Crea un

nuevo objeto GridLayout y especifica la cantidad de filas, columnas y la cantidad de píxels
que separaran los componentes tanto horizontal como verticalmente.
 GridLayout(). Crea un objeto GridLayout con una fila y una columna.

Analice el siguiente código y pruebe su salida.

Archivo: VentanaGridLayout.java

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.GridLayout;

public final class VentanaGridLayout extends JFrame {

JPanel panel;

VentanaGridLayout() {
setSize(300,200);
creaPanel();
getContentPane().add(panel);
setVisible(true);
setLocationRelativeTo(null);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}

void creaPanel() {
panel = new JPanel();
panel.setLayout(new GridLayout());
panel.add(new JButton("1"));
panel.add(new JButton("2"));

}
}
Archivo: AplicacionPrincipal.java

public class AplicacionPrincipal {

public static void main(String args[]) {

VentanaGridLayout ventanaGridLayout = new VentanaGridLayout();

}
}

La salida del anterior código es la siguiente:

Ejercicio 1: Desarrolle el código necesario para generar la siguiente GUI.

1.4.3. BorderLayout

Este algoritmo divide el área del JPanel en 5 regiones: norte, sur, este(oriente), oeste( occidente) y
centro. Cuando se adicionen componentes, se debe especificar el área en el que irá.

Este Layout posee los siguientes constructores:

 BorderLayout(). Crea un nuevo objeto BorderLayout.

  BorderLayout(int espacioHorizontal, int espacioVertical). Crea un objeto Border Layout. Los
parámetros determinan el número de pixeles que separaran los componentes verticales
(área este, oeste y centro) y horizontales (área norte, centro y sur).

Ejercicio 2: Desarrolle el código necesario para generar las siguientes GUI.

BoxLayout

Coloca los componentes en el contenedor, en una única fila o columna, ajustándose al espacio que
haya.

BoxLayout (panel, BoxLayout.Y_AXIS)

BoxLayout (panel, BoxLayout.X_AXIS)

A continuación el código que genera la anterior ventana:

package gui353582;

import java.awt.*;
import javax.swing.*;

//@author Fernando

public class VentanaBoxLayout extends JFrame {

JPanel panelBox;

public VentanaBoxLayout() {
setSize(350,300);
setLocation(100,100);
creaPanel();
getContentPane().add(panelBox);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}

public void creaPanel() {

panelBox = new JPanel();
JPanel panelIzquierdo = new JPanel();
JPanel panelDerecho = new JPanel();
JPanel panelSuperior = new JPanel();
JPanel panelInferior = new JPanel();
JTextArea area = new JTextArea(10,5);
JScrollPane scroll = new JScrollPane(area);
Icon icono = new ImageIcon("D:/merlin.gif");

//Area de textos

area.append("ESTA ES EL AREA DE TEXTO");

panelIzquierdo.setLayout(new BoxLayout(panelIzquierdo,BoxLayout.Y_AXIS));
panelIzquierdo.add(new JButton("A1"));
panelIzquierdo.add(new JButton("A2"));
panelIzquierdo.add(new JButton("A3"));
panelIzquierdo.add(new JButton("A4"));
panelIzquierdo.add(new JButton("A5"));
panelIzquierdo.add(new JButton("A6"));
panelIzquierdo.add(new JButton("A7"));
panelIzquierdo.add(new JButton("A8"));

panelDerecho.setLayout(new BoxLayout(panelDerecho,BoxLayout.Y_AXIS));
panelDerecho.add(new JButton("A"));
 panelDerecho.add(new JButton("B"));
panelDerecho.add(new JButton("C"));
panelDerecho.add(new JButton("D"));
panelDerecho.add(new JButton("E"));
panelDerecho.add(new JButton("F"));
panelDerecho.add(new JButton("G"));
panelDerecho.add(new JButton("H"));

panelInferior.setLayout(new BoxLayout(panelInferior,BoxLayout.X_AXIS));
panelInferior.add(new JButton("A"));
panelInferior.add(new JButton("B"));
panelInferior.add(new JButton("C"));
panelInferior.add(new JButton("D"));
panelInferior.add(new JButton("E"));
panelInferior.add(new JButton("F"));
panelInferior.add(new JButton("G"));
panelInferior.add(new JButton("H"));

//Configuramos el panel principal(panelBox)

panelBox.setLayout(new BorderLayout());
panelBox.add(new JButton("ESTE ES UN EJEMPLO DE BoxLayout"),BorderLayout.NORTH);
panelBox.add(panelIzquierdo,BorderLayout.WEST);
panelBox.add(scroll,BorderLayout.CENTER);
panelBox.add(panelDerecho,BorderLayout.EAST);
panelBox.add(panelInferior,BorderLayout.SOUTH);

}
}

public static void main(String[] args) {

new VentanaBoxLayout().setVisible(true);
}
1.6 Jerarquía de clases

Object

Component

Container

Window JComponent

Frame
JTextComponent AbstractButton JLabel JPanel

JFrame
JTextField JButton

La clase JFrame extiende la clase Frame, que a su vez extiende la clase Window, que a su vez
extiende la clase Container, que a su vez extiende la Component. Esto significa que JFrame es un
tipo de Frame, que a su vez es un tipo de Window, que a su vez es un tipo de Container, que a su
vez es un tipo de Component.
Al analizar el anterior planteamiento, se puede inferir que:

 JFrame, como JButton, como JLabel, como JPanel terminan siendo tipos de Component.
 La clase Container de forma indirecta, termina siendo superclase de JFrame, JTextField,
JButton, JLabel y JPanel.
 Es totalmente valido, incluir un panel dentro de otro JPanel.

1.7 Utilizando varios Layouts

La utilizacion independiente de los Layout presentados en este documento, ayuda a crear interfaces
graficas de usuario sencillas. Para crear interfaces mas complejas debe utilizar los Layouts en forma
conjunta; incluyendo paneles dentro de paneles.

A continuación el código necesario para generar la siguiente GUI.

package varioslayouts;

import java.awt.*;
import javax.swing.*;
import javax.swing.BoxLayout;

public class VentanaVariosLayouts extends JFrame{

JPanel panelBox;

public VentanaVariosLayouts() {
setSize(700,300);
setLocation(100,100);
creaPanel();
getContentPane().add(panelBox);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}

public void creaPanel() {

panelBox = new JPanel();

JPanel panelFormulario = new JPanel();

JPanel panelIzquierdo = new JPanel();
JPanel panelCentral = new JPanel();
JPanel panelInf = new JPanel();
JPanel panelInferior = new JPanel();
JPanel panelInferior2 = new JPanel();

panelIzquierdo.setLayout(new GridLayout(9,1));
panelIzquierdo.add(new JLabel("Ceula"));
panelIzquierdo.add(new JLabel("Apellidos"));
panelIzquierdo.add(new JLabel("Nombres"));
 panelIzquierdo.add(new JLabel("Sueldo Hora"));
panelIzquierdo.add(new JLabel("Horas Trabajadas"));
panelIzquierdo.add(new JLabel("Sueldo Basico"));
panelIzquierdo.add(new JLabel("Porcentaje"));
panelIzquierdo.add(new JLabel("Ventas Totales"));
panelIzquierdo.add(new JLabel("Sueldo Fijo"));

panelCentral.setLayout(new GridLayout(9,1));
panelCentral.add(new JTextField());
panelCentral.add(new JTextField());
panelCentral.add(new JTextField());
panelCentral.add(new JTextField());
panelCentral.add(new JTextField());
panelCentral.add(new JTextField());
panelCentral.add(new JTextField());
panelCentral.add(new JTextField());
panelCentral.add(new JTextField());

panelInferior.setLayout(new FlowLayout());
panelInferior.add(new JButton("Adicionar Empleado por Hora"));
panelInferior.add(new JButton("Adicionar Empleado por Comision"));
panelInferior.add(new JButton("Adicionar Empleado Sueldo Fijo"));

panelInferior2.setLayout(new FlowLayout());
panelInferior2.add(new JButton("Calcular Nomina"));

//Configuramos el panel principal(panelBox)

panelBox.setLayout(new BorderLayout());
add(panelFormulario, BorderLayout.NORTH);
panelFormulario.setLayout(new BorderLayout(10,0));
panelFormulario.add( panelIzquierdo, BorderLayout.WEST );
panelFormulario.add( panelCentral, BorderLayout.CENTER);

add(panelInf, BorderLayout.SOUTH);
panelInf.setLayout(new GridLayout(2,1));
panelInf.add(panelInferior);
panelInf.add(panelInferior2);
}
}

public class VariosLayouts {

public static void main(String[] args) {

new VentanaVariosLayouts().setVisible(true);
}

}
1.8 Borders

Cada JComponent puede tener uno o más borders, los cuales proveen una manera de dar un
espacio alrededor de los componentes, así como para dibujar los lados de los componentes Swing.
Ejemplo:

import java.awt.*;
import javax.swing.*;

class GuiBorder {

public static void main (String[] args) {

JFrame ventana = new JFrame();
JPanel panel = new JPanel();
panel.setLayout(new GridLayout());
panel.add(new JButton("UNO"));
panel.setBorder(BorderFactory.createEmptyBorder(10,10,10,10));
ventana.getContentPane().add(panel);
ventana.setSize(300,200);
ventana.setVisible(true);
ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}

El anterior código, muestra la siguiente ventana:

Observaciones:

 Para establecer un borde a un JPanel se emplea el metodod setBorder que posee esta clase
que recibe como parametro una referencia de tipo Border.

 La creacion de un borde se hace invocando el metodo estatico javax.swing.BorderFactory.

 El borde que se crea depende del método que se invoque, en el ejemplo se crea un borde
vacío utilizando el método createEmptyBorder que permite especificar el espacio de los
cuatro lados (izquierda, derecha, arriba y abajo).
Ejercicio 3: Fije un borde para la GUI de la nómina, así.

1.9 Componente JTabbedPane

Esta clase permite agregar una pestaña (tab) a una ventana.

Observaciones:

 Solo se puede poner un componente en cada folder o tab, así que de preferencia, si se
puede poner un panel en cada folder.
 Los Tabs/componentes son añadidos al este panel usando los métodos addTab e
insertTab.
 Cada Tab (folder) tiene asociado un numero índice y el primer tab tiene como índice el
numero 0 (cero).

Constructores:

JTabbedPane()
Crea un TabbedPane vacío, con una posición predeterminada superior.
JTabbedPane(int tabPlacement)
Crea una pestaña vacia pero con la posicion del entero del paramétro. Los posibles valores son:
JTabbedPane.TOP
JTabbedPane.BOTTOM
JTabbedPane.LEFT
JTabbedPane.RIGHT.
JTabbedPane(int tabPlacement, int tabLayoutPolicy)
Crea una pestaña vacia con la posicion daba(igual al anterior) y definimos loa norma de diseño. Los valores
de tabLayoutPolicy son:
JTabbedPane.WRAP_TAB_LAYOUT
JTabbedPane.SCROLL_TAB_LAYOUT

Métodos:
add(Component component)
agrega el componente a la pestaña, que de titulo llevara el nombre del componente
add(Component component, int index)
agrega el componente al numero de pestaña indicado en el indice
add(String title, Component component)
agrega el componente y le da el nombre a la pestaña con el string
addTab(String title, Component component)
al parecer es igual a add() pero debe haber alguna diferencia minima que no conozco
addTab(String title, Icon icon, Component component)
agrega el componente, con un titulo y icono

package pestañas;
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;

public class Pestañas {

static JFrame marco = new JFrame();
static JTabbedPane pestaña = new JTabbedPane();
static JPanel panel1 = new JPanel();
static JButton saludo = new JButton("Bienvenido");
static JLabel etiqueta = new JLabel("Adios");

public static void main(String[] dar10){

marco.setTitle("Pestañas en Java");
marco.setSize(350,200);
marco.setLocationRelativeTo(null);
marco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
marco.setLayout(new BorderLayout() );

panel1.add(saludo);
pestaña.addTab("Pestaña 1", panel1);

pestaña.add("Pestaña2", etiqueta);
marco.getContentPane().add(pestaña,BorderLayout.CENTER);

marco.setVisible(true);
}
}
El anterior código muestra la siguiente interfaz:

Videos de Apoyo:
 https://www.youtube.com/watch?v=7q2VBGIKeYc&list=PLU8oAlHdN5BktAXdEVCLUYzvDy
qRQJ2lk&index=55

Webgrafia:

 https://elvex.ugr.es/decsai/java/pdf/D0-gui.pdf
 https://www.fdi.ucm.es/profesor/jpavon/poo/Tema6resumido.pdf
 http://www.it.uc3m.es/java/gitt/units/interfaces-
graficas/guides/2/guide_es_solution.html