Interfaz Gráfica en

Java
Topicos Selectos de
Programación

José Luís García Cerpas

 Interfaz gráfica de usuario

 En java, los programas basados en GUI se

implementan con el uso de las clases provenientes
Tópicos Selectos de

de los paquetes estándar javax.swing y

java.awt. A ellos se les referirá Colectivamente
como clases GUI.
Programación

 Generalmente se prefiere utilizar las clases Swing

llamadas clases de peso ligero sobre las clases AWT
llamadas clases de peso pesado.
 Diferencia entre AWT y swing

 Las clases swing proporcionan mayor

compatibilidad a través de diferentes sistemas
Tópicos Selectos de

operativos. Se implementan completamente en

Java.
 Las clases AWT se implementan con el uso de
Programación

los objetos GUI nativos. por ejemplo un AWT

button se implementa con el uso del objeto
Windows button, Macintosh button, etc
 Eventos

 Un evento ocurre cuando el usuario interactúa

con un objeto GUI. Por ejemplo, cuando usted
Tópicos Selectos de

mueve el cursor, oprime el botón o selecciona

una opción de menu.
 Los objetos se programan para responder a
Programación

dichos eventos al definir métodos de manejo

de eventos.
 Entrada / salida simple

 Una de las formas más sencillas para

proporcionar entrada y salida simple con base
Tópicos Selectos de

en GUI es el uso de la clase JOptionPane.

 JOptionPane.showMessageDialog(null,
”Hola Mundo Java”);
Programación
 Entrada / salida simple (cont..)
 Tambien se puede usar la clase
JOptionPane para entrada al usar su método
Tópicos Selectos de

showInputDialog.

String entrada;
Programación

entrada =
JOptionPane.showInputDialog(null,
“Introduce tu nombre”);
 Ejemplo de ventana
 import javax.swing.JFrame;

 class Ejemplo{
public Ejemplo()
Tópicos Selectos de

{
JFrame x = new JFrame("Primera Ventana");
x.setSize(300,300);
x.setLocation(150,200);
Programación

x.setVisible(true);
x.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
public static void main(String [] args)
{
new Ejemplo();
}
}
 Ejemplo de ventana
(usando herencia)
 import javax.swing.JFrame;

class Ejemplo extends JFrame {

Tópicos Selectos de

public Ejemplo()
{
super("Primera Ventana");//constructor JFrame
setSize(300,300);
setLocation(150,200);
Programación

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public static void main(String [] args)
{
new Ejemplo();
}
Tópicos Selectos de
Programación
Despliegue de la ventana
 Despliegue de la ventana
 Todas las propiedades de la ventana se
establecen en el constructor por defecto, para
establecer el título se pasa al método
Tópicos Selectos de

setTitle(), para establecer el tamaño

setSize(), para establecer la esquina
superior izquierda del marco en la coordenada,
Programación

se pasan los valores x y y al método

setLocation. Finalmente para terminar la
ventana cuando el marco se cierre, se llama
setDefaultCloseOperation()
 Mostrando ventana con color
 import javax.swing.JFrame;
import java.awt.Container;
import java.awt.Color;
Tópicos Selectos de

class Ejemplo extends JFrame {

public Ejemplo()
{
super("Primera Ventana");
Programación

setSize(300,300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container contenidoPanel = getContentPane();
contenidoPanel.setBackground(Color.BLUE);
setVisible(true);
}
public static void main(String [] args)
{
new Ejemplo();
}
}
 Colocando un botón
 Existen dos enfoques generales a la
colocación de botones (otros), en el panel de
contenido, uno que usa un manejador de
Tópicos Selectos de

presentación otro que no lo utiliza. El

manejador de presentación es un objeto que
Programación

controla la colocación de los objetos GUI. Si no

se usa manejador de presentación, entonces
los objetos GUI se colocan al especificar
explícitamente su posición y tamaño en el
panel de contenido posicionamiento
absoluto.
 Colocando botones
(FlowLayout)
 Primero se especifica el manejador de presentación
del panel de contenido:
Tópicos Selectos de

ContenidoPanel.setLayout(new FlowLayout());
Programación

 Después, se agregan los botones al panel.

contenidoPanel.add(botonBien);
contenidoPanel.add(botonCancela);
 Colocando botones

 Puesto que el tamaño por defecto de un botón

depende del número de caracteres en la
Tópicos Selectos de

etiqueta del botón, los tamaños de los dos

botones serán diferentes. Se puede superar si
se llama al método setSize.
Programación

botonMostrar.setSize(80,30);
botonSalir.setSize(80,30);
 Colocando botones
public Ejemplo(){
super("Primera Ventana");
setLocation(150,200);
Tópicos Selectos de

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container contenidoPanel = getContentPane();
contenidoPanel.setBackground(Color.BLUE);
contenidoPanel.setLayout(new FlowLayout());
Programación

botonMostrar = new JButton("Mostrar");

botonSalir = new JButton("Salir");
contenidoPanel.add(botonMostrar);
contenidoPanel.add(botonSalir);
botonMostrar.setSize(80,30);
botonSalir.setSize(80,30);
pack(); //toma el tamaño justo de los componentes
setVisible(true);
}
 Manejo de eventos del botón

 Un objeto GUI, donde el evento ocurre se

llama evento, o simplemente la fuente del
Tópicos Selectos de

evento.
 Cuando un evento se genera, el sistema
notifica a los receptores de eventos relevantes.
Programación

 Un objeto receptor de evento, es un objeto que

incluye un método que se ejecuta en respuesta
a los eventos generados.
 Programación del evento presionar botón en el
objeto miBoton
Tópicos Selectos de

botonMostrar.addActionListener( new ActionListener(){

public void actionPerformed (ActionEvent e){
Programación

JOptionPane.showMessageDialog (null, “Mensaje“,

"Atención", JOptionPane.INFORMATION_MESSAGE);
}});
 event source y event listener
 El modelo de eventos de Java está basado en que los
objetos sobre los que se producen los eventos (event
sources) “registran” los objetos que habrán de
gestionarlos (event listeners), para lo cual los event
Tópicos Selectos de

listeners habrán de disponer de los métodos adecuados.

 Estos métodos se llamarán automáticamente cuando se
produzca el evento. La forma de garantizar que los
event listeners disponen de los métodos apropiados
Programación

para gestionar los eventos es obligarles a implementar

una determinada interface Listener.
 Las interfaces Listener se corresponden con los
tipos de eventos que se pueden producir. los distintos
tipos de eventos y los métodos de las interfaces
Listener que hay que definir para gestionarlos.
 Eventos de alto nivel
 Los eventos de alto nivel se llaman también eventos
semánticos, porque la acción de la que derivan tiene un
significado en sí misma, en el contexto de las interfaces
Tópicos Selectos de

gráficas de usuario. Los eventos de bajo nivel son las

acciones elementales que hacen posible los eventos de
alto nivel.
Programación

 Son eventos de alto nivel los siguientes eventos: los

cuatro que tienen que ver con hacer clic sobre botones o
elegir comandos en menús (ActionEvent), cambiar
valores en barras de desplazamiento (AdjustmentEvent),
elegir valores (ItemEvents) y cambiar el texto (TextEvent)
 Eventos de bajo nivel
 Los eventos de bajo nivel son los que se
producen con las operaciones elementales con
el , teclado, containers y windows.
Tópicos Selectos de

 Las seis clases de eventos de bajo nivel son los

eventos relacionados con componentes
(ComponentEvent), con los containers
Programación

(ContainerEvent), con pulsar teclas (KeyEvent),

con mover, arrastrar, pulsar y soltar con el ratón
(MouseEvent), con obtener o perder el foco
(FocusEvent) y con las operaciones con
ventanas (WindowEvent).
Tópicos Selectos de
Programación
Jerarquía de eventos en java
 Interfaces Listener
 Cada objeto que puede recibir un evento (event
source), “registra” uno o más objetos para que los
gestionen (event listener). Esto se hace con un método
Tópicos Selectos de

que tiene la forma,

eventSourceObject.addEventListener(eventListen
erObject);
Programación

 donde eventSourceObject es el objeto en el que se

produce el evento, y eventListenerObject es el objeto
que deberá gestionar los eventos. La relación entre
ambos se establece a través de una interface Listener
que la clase del eventListenerObject debe
implementar
 Interfaces Listener
 A diferencia de una clase, una interfaz Java sólo incluye constantes y métodos
abstractos. Por ejemplo, la clase Ejemplo, se define como sigue:

 Se implementa la interfaz ActionListener

Tópicos Selectos de

class Ejemplo extends JFrame implements ActionListener

 Se llama al método addActionListener de botonMostrar

botonMostrar.addActionListener(this);
Programación

 Se escribe el código que responda al evento

public void actionPerformed(ActionEvent e) {

JOptionPane.showMessageDialog (null,"Ha presionado el botón
<mostrar>","Atención", JOptionPane.INFORMATION_MESSAGE);
}
  import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.Container;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JOptionPane;
class Ejemplo extends JFrame implements ActionListener {
public Ejemplo()
{
super("Primera Ventana");
setLocation(150,200);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container contenidoPanel = getContentPane();
Tópicos Selectos de

contenidoPanel.setBackground(Color.BLUE);
contenidoPanel.setLayout(new FlowLayout());
botonMostrar = new JButton("Mostrar");
botonSalir = new JButton("Salir");
contenidoPanel.add(botonMostrar);
contenidoPanel.add(botonSalir);
botonMostrar.setSize(80,30);
botonSalir.setSize(80,30);
Programación

botonMostrar.addActionListener(this);
pack(); //toma el tamaño justo de los componentes
setVisible(true);
}
public void actionPerformed(ActionEvent e) {
//Mostrar una caja de diálogo que muestre un mensaje...
JOptionPane.showMessageDialog (null,"Ha presionado el botón
<mostrar>","Atención", JOptionPane.INFORMATION_MESSAGE);
}
public static void main(String [] args)
{
new Ejemplo();
}
private JButton botonMostrar;
private JButton botonSalir;
}
 Clases Adapter
 Java proporciona ayudas para definir los métodos
declarados en las interfaces Listener. Una de
estas ayudas son las clases Adapter, que existen
Tópicos Selectos de

para cada una de las interfaces Listener que

tienen más de un método.
 Su nombre se construye a partir del nombre de la
Programación

interface, sustituyendo la palabra “Listener” por

“Adapter”.
 Hay 7 clases Adapter: ComponentAdapter,
ContainerAdapter, FocusAdapter, KeyAdapter,
MouseAdapter, MouseMotionAdapter y
WindowAdapter.
 import javax.swing.JFrame;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

class VentanaCerrable2 extends JFrame {

public VentanaCerrable2(String title){
super(title);
setSize(200,300);
getContentPane().setSize(500,500);
Tópicos Selectos de

CerrarVentana cv = new CerrarVentana();

this.addWindowListener(cv);
setVisible(true);
}
Programación

public static void main(String [] args){

new VentanaCerrable2("Ventana");
}
}

class CerrarVentana extends WindowAdapter {

public void windowClosing(WindowEvent e) {
System.exit(0);
}
}
 Clases Adapter
 Todavía hay otra forma de responder al evento
que se produce cuando el usuario desea cerrar
la ventana. Las clases anónimas de Java son
Tópicos Selectos de

especialmente útiles en este caso.

 En realidad, para gestionar eventos sólo hace
falta un objeto que sea registrado como event
Programación

listener y contenga los métodos adecuados de

la interface Listener.
 Las clases anónimas son útiles cuando sólo se
necesita un objeto de la clase:
new WindowAdapter()
 import javax.swing.JFrame;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

class VentanaCerrable3 extends JFrame {

public VentanaCerrable3(String title) {
super(title);
setSize(200,300);
getContentPane().setSize(500,500);
Tópicos Selectos de

CerrarVentana cv = new CerrarVentana();

this.addWindowListener(new WindowAdapter(){
public void windowClosing(WindowEvent e){
System.exit(0);
Programación

}
});
setVisible(true);
}
public static void main(String [] args){
new VentanaCerrable3("Ventana");
}
}
Tópicos Selectos de
Programación
Ventanas con imágenes
 Ventanas con imágenes
 Un objeto de tipo java.awt.Graphics define el contexto
en el que se dibuja e incluye métodos para dibujar
distintos tipos de figuras.
Tópicos Selectos de

 El método Graphics.drawImage() nos permite dibujar

imágenes en formato GIF, JPG o PNG
Programación

 Las imágenes podemos leerlas con el método

getImage() de la clase java.awt.Toolkit.
 La redefinición del método paint(), el cual se invoca
automáticamente por el sistema cuando la ventana
que lo incluye pasa a un primer plano.
 import javax.swing.JPanel;
import java.awt.Toolkit;
import java.awt.Graphics;
import java.awt.Image;
import javax.swing.JFrame;
class ImagePanel extends JPanel{
public ImagePanel() //constructor
{
img =
Toolkit.getDefaultToolkit().getImage( "java.jpg" );
}
public void paint(Graphics g){
Tópicos Selectos de

super.paint(g);
g.drawImage(img,0,0,this);
}
}
public class ImageFrame extends JFrame{
public ImageFrame(){
Programación

setSize(500,500);
panel = new ImagePanel();
getContentPane().add(panel);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String [] args){
JFrame frame = new ImageFrame();
frame.setVisible(true);
}
private ImagePanel panel;
private Image img;
}
 Componentes GUI
relacionados con el texto
 Las tres clases SWING que tratan con el texto
son : JLabel, JTextField y JTextArea, las
Tópicos Selectos de

primeras dos tratan con sólo una línea de

texto. Un objeto TextField permite al usuario
ingresar una sola línea de texto, mientras que
Programación

un objeto JLabel es para desplegar texto no

editable. Un objeto JTextArea permite al
usuario ingresar múltiples líneas de texto.
 barra de titulo controles de la ventana
Ejemplo

etiqueta
Tópicos Selectos de

borde

 Creación de la ventana
Programación

JFrame ventana = new JFrame(tituloVentana);

 Creación de una etiqueta

JLabel etiqueta = new JLabel("Mensaje en una etiqueta");

 Ligar la etiqueta a la ventana

ventana.getContentPane().add(etiqueta);
 Validar la entrada en un
JTextField
 Para validar que solamente se permitan
introducir números se añade el siguiente
Tópicos Selectos de

evento al JTextField.

 Se debe añadir al control el evento

Programación

keyTyped(KeyEvent ); el cual es invocado

cuando se pulsa una tecla.
  import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
class Validar extends JFrame{
public Validar(){
JLabel label = new JLabel("Escribe un numero");
label.setBounds(10,10,200,10);
JTextField texto = new JTextField();
texto.setBounds(10,30,100,20);
texto.addKeyListener(new KeyAdapter(){
public void keyTyped(KeyEvent e){
Tópicos Selectos de

char caracter = e.getKeyChar();

// Verificar si la tecla pulsada no es un digito
if(((caracter < '0') ||(caracter > '9')) &&
(caracter != KeyEvent.VK_BACK_SPACE)){
e.consume(); // ignorar el evento de teclado
}
Programación

}
});
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(null);
setSize(300,300);
getContentPane().add(label);
getContentPane().add(texto);
setVisible(true);
}
public static void main(String [] args){
new Validar();
}
}
Tópicos Selectos de
Programación

JTextField
Métodos relacionados
Tópicos Selectos de
Programación JCheckBox y
JCheckBoxGroup
Tópicos Selectos de
Programación
JButton
 JComboBox
 Presenta una caja de combinación. Esta clase es similar a
la clase JRadioButton en que también permite al usuario
seleccionar un ítem de una lista de posibles opciones:
Tópicos Selectos de

String [] item = {“Java”,”c++”,”Pascal”};

JComboBox caja = new JComboBox(item);
Programación

 Para encontrar el ítem actualmente seleccionado:

String x = (String) caja.getSelectedItem();

 Bibliografía

 Programación en Java
 C. Thomas Wu
Tópicos Selectos de

 Mc Graw Hill
Programación