Introducción a Swing

Clases para interfaces gráficos de usuario

1. Interfaces gráficas de usuario

2. Swing
3. Hola Mundo
4. Eventos
1. Pulsación de un botón
2. Eventos de Teclado
5. Layouts
6. Un programa que combine todo

Fco. Javier Melero Rus

fjmelero@ujaen.es
http://wwwdi.ujaen.es/~fjmelero
Arquitectura de Ordenadores
21/05/03 2002/2003 1

Interfaces gráficas de usuario

{ Un interfaz gráfico se construye con componentes
(components, controls o widgets).
{ Un componente es un objeto con el que el usuario
interactúa mediante el ratón o el teclado

Window frame

Menu bar
Toolbar

Panel de edición

Scroll pane y scrollbar

Arquitectura de Ordenadores
21/05/03 2002/2003 2

1
 Interfaces gráficas de usuario

Window frame

Menu bar y botones

Toolbar y botones

Panel
Scroll pane
Panel de edición
Plug-in de estilo de texto

Scrollbar en scroll panel Arquitectura de Ordenadores

21/05/03 2002/2003 3

Swing
{ Las clases que se usan para crear los componentes del
GUI en Java son las clases del paquete javax.swing
{ Originalmente, los interfaces gráficos se escribían en
Java con el paquete AWT (Abstract Windowing Toolkit)
z AWT es dependiente de la plataforma (tiene distintas apariencias
en Windows que en Linux, incluso dentro de Linux, depende del
gestor gráfico que usemos)
{ Los componentes Swing permiten al programador especificar
una apariencia diferente en cada plataforma, o igual para
todas. ¡Están escritos en Java!
{ Los componentes y contenedores forman parte de una
jerarquía de objetos.

Arquitectura de Ordenadores
21/05/03 2002/2003 4

2
 La aplicación mas básica –Hola Mundo-

{ El primer elemento que debemos crear en

un interfaz gráfico es el soporte para
todos los componentes:
z Aplicación: Una ventana (JFrame)
z Applet: Un Applet
{ Lo mejor es hacer que nuestra clase-
programa descienda de JFrame o de
Applet, para que en sí misma sea una
ventana

Arquitectura de Ordenadores
21/05/03 2002/2003 5

Hola Mundo v. 0.1

JFrame: Ventana
import javax.swing.*; con barra de título y
borde
public class HolaMundo01 extends JFrame {
public HolaMundo01( ) {
super("HolaMundo 0.1");
setSize(500,400); // Ancho, alto
show( ); // Hacer visible
}
public static void main(String args[]) {
HolaMundo01 app=new HolaMundo01();
}
}

Problema: No finaliza el programa al cerrar la ventana

Solución: Gestión de eventos
Arquitectura de Ordenadores
21/05/03 2002/2003 6

3
 Hola Mundo v. 0.2
import javax.swing.*;
import java.awt.event.*;

public class HolaMundo02 extends JFrame {

public HolaMundo02( ) {
super("HolaMundo 0.2");
setSize(500,400); // Ancho, alto
show( ); // Hacer visible
}
public static void main(String args[]) {
HolaMundo02 app=new HolaMundo02();
app.addWindowListener(
new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
}
);
}
}
Otra forma:
app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Arquitectura de Ordenadores
21/05/03 2002/2003 7

Hola Mundo v. 0.3

JLabel
Permite mostrar texto en la ventana, pero el usuario no puede
modificarlo: No se puede colocar
import javax.swing.*; directamente sobre el Frame:
import java.awt.event.*; hay que crear un contenedor
import java.awt.*;

public class HolaMundo03 extends JFrame {

Declaramos,
private JLabel etiqueta; creamos y
public HolaMundo03( ) {
colocamos la
super("HolaMundo 0.2"); etiqueta
Container c=getContentPane();
c.setLayout(new FlowLayout());

etiqueta=new JLabel("Hola Mundo");

c.add(etiqueta);

setSize(500,400); // Ancho, alto

show( ); // Hacer visible
}
….
}

Arquitectura de Ordenadores
21/05/03 2002/2003 8

4
 JLabel
{ También se pueden crear etiquetas con
imágenes o imágenes y texto:
Icon img=new ImageIcon(“dibujo.gif”);
JLabel et=new JLabel(“Texto”,img, SwingConstants.LEFT);

{ Se le pueden añadir ayudas contextuales:

Et.setToolTipText(“Esto es una etiqueta”);
{ Se puede centrar el texto vertical y
horizontalmente…
{ Y muchas más cosas… (ver Manuales)

Arquitectura de Ordenadores
21/05/03 2002/2003 9

Modelo de gestión de eventos

{ Los interfaces de usuario están

gestionados por eventos:
z Mover el ratón
z Hacer click
z Pulsar una tecla…
{ Para procesar un evento, hay que hacer
dos cosas:
z Registrar un event listener
z Implementar un event handler

Arquitectura de Ordenadores
21/05/03 2002/2003 10

5
 Modelo de gestión de eventos
Event listeners
{ Un event listener es una clase que implementa una o más interfaces de
escucha de eventos
z Un objeto de esta clase “escucha” a la espera de ciertos tipos de eventos generados por
él mismo o por otros objetos en un programa.
{ Un event handler es un método que se llama automáticamente como
respuesta a un evento.
{ Cada interfaz de event-listener especifica uno o más métodos que DEBEN ser
definidos en la clase que implementa el interfaz
{ Esto se denomina gestión de eventos por delegación.
{ Cuando se produce un evento, el componente gráfico con el que el usuario ha
interactuado se lo notifica a sus listeners registrados.
{ ¿Cómo se hace?

Arquitectura de Ordenadores
21/05/03 2002/2003 11

Modelo de gestión de eventos

Event listeners y Event Handlers
import javax.swing.*;
import java.awt.event.*;
import java.awt.*;

public class HolaMundo04 extends JFrame {

private JLabel etiqueta;
private JButton boton;
public HolaMundo04( ) {
super("HolaMundo 0.4");

Container c=getContentPane();
c.setLayout(new FlowLayout());
Creamos un botón
etiqueta=new JLabel("Hola Mundo");
c.add(etiqueta);

boton=new JButton("Pulsa para obtener un saludo");

c.add(boton); Creamos un gestor
GestorEventosBoton gestor=new GestorEventosBoton(); de eventos y se lo
boton.addActionListener(gestor);
asignamos al botón
setSize(500,400); // Ancho, alto
show( ); // Hacer visible
}
… el main no cambia
private class GestorEventosBoton implements ActionListener { El gestor es una
public void actionPerformed (ActionEvent e) {
JOptionPane.showMessageDialog(null, "HOLAAA!!!");
clase privada, dentro
} de HolaMundo04
}
} Arquitectura de Ordenadores
21/05/03 2002/2003 12

6
 Modelo de gestión de eventos
Event handler
{

{ Y si quiero cambiar el texto de la etiqueta, pues lo pongo:

private class GestorEventosBoton implements ActionListener {

public void actionPerformed (ActionEvent e) {
etiqueta.setText("HOLAAA!!!");
}
}

{ Entre otros, también se pueden controlar eventos del teclado,

mediante la interfaz KeyListener, que define métodos como:

z keyPressed (KeyEvent e) // Tecla pulsada

z keyReleased (KeyEvent e) // Tecla soltada
z keyTyped(KeyEvent e) // Tecla pulsada y soltada

Arquitectura de Ordenadores
21/05/03 2002/2003 13

Handlers de cada Event Listener

ActionListener actionPerformed(ActionEvent)

keyPressed(KeyEvent)
KeyListener
keyReleased(KeyEvent)
KeyAdapter
keyTyped(KeyEvent)
mouseClicked(MouseEvent)
mouseEntered(MouseEvent)
MouseListener
mouseExited(MouseEvent)
MouseAdapter
mousePressed(MouseEvent)
mouseReleased(MouseEvent)
windowOpened(WindowEvent)
windowClosing(WindowEvent)
windowClosed(WindowEvent)
WindowListener
windowActivated(WindowEvent)
WindowAdapter
windowDeactivated(WindowEvent)
windowIconified(WindowEvent)
windowDeiconified(WindowEvent)

ItemListener itemStateChanged(ItemEvent)

Arquitectura de Ordenadores
21/05/03 2002/2003 14

7
 Ejemplo de uso de KeyListener
{ En el fichero EventosTeclado.java podemos ver un ejemplo de uso
de KeyListener
z Al pulsar una letra, ésta cambia de tamaño,y al soltarla, vuelve a su tamaño
original

public void keyPressed (KeyEvent e) {

rdo.setText(e.getKeyText( e.getKeyCode()));
index=e.getKeyCode()-65; // Índice en el array de etiquetas (A es el 65)
if (index>=0 && index<etiqueta.length) // Si es una letra ...
etiqueta[index].setFont(new Font("Serif", Font.PLAIN, 36));
}
public void keyTyped (KeyEvent e) {
rdo.setText(" -> "+e.getKeyChar()+"<-");
}

public void keyReleased (KeyEvent e) {

rdo.setText("Soltada: "+e.getKeyText( e.getKeyCode()));
if (index>=0 && index<etiqueta.length)
etiqueta[index].setFont(fuente_original);

Arquitectura de Ordenadores
21/05/03 2002/2003 15

Ejemplo de uso de KeyListener (II)

{ En el fichero EventosTeclado2.java podemos ver cómo se hace
lo mismo pero con KeyTyped
public void keyPressed (KeyEvent e) {
// En este caso no hago nada
}

public void keyTyped (KeyEvent e) {

rdo.setText(" -> "+e.getKeyChar()+"<-");
index=e.getKeyChar()-'a';
if (index>=0 && index<etiqueta.length) // Si es una letra ...
etiqueta[index].setFont(new Font("Serif", Font.BOLD, 36));
}

public void keyReleased (KeyEvent e) {

rdo.setText("-> <-");
if (index>=0 && index<etiqueta.length)
etiqueta[index].setFont(fuente_original);

}
Arquitectura de Ordenadores
21/05/03 2002/2003 16

8
 Layouts
Indican cómo se disponen los
componentes en la ventana:
z FlowLayout (Los va
colocando en orden)
z BorderLayout
(divide el contenedor en
Norte, Sur, Este, Oeste y
Centro)
z GridLayout (permite
dividir el contenedor
como si fuera una tabla)
z GridBagLayout
(algo más complejo que
el anterior y más
potente)
{ En el ejemplo anterior los
componentes se nos En el fichero EventosTeclado3.java
pusieron en FlowLayout tenemos un ejemplo completo de
Layouts y otros aspectos
Arquitectura de Ordenadores
21/05/03 2002/2003 17

EventosTeclado3.java

Arquitectura de Ordenadores
21/05/03 2002/2003 18