Interfaces gráficas con
Swing
Java y Servicios Web I M ast er en
Ingeniería M at emática
Manuel Montenegro
Dpto. Sistemas Informáticos y Computación
Desp. 467 (Mat) montenegro@fdi.ucm.es

Introducción
Swing es una biblioteca de interfaces gráficas
de
usuario (GUI) para Java.
●
Viene incluida con el entorno de
desarrollo
(JDK).
de Java
●
Extiende a otra librería
llamada AWT.
Paquetes:
gráfica más antigua
●
●
javax.swing
j ava. aw
t
j ava. aw
t . event
●
●
●
Alt ernat ivas: SW T (h tt p:/ / w w w.eclipse.org/sw t / )
●
2
28/Mayo/2012 8. Interfaces gráficas con Swing

Contenidos
Ventanas
Componentes
Layout Managers
M anejo de event os
Cuadros de diálogo
Dibujo de gráficos
Arquitectura MVC
●
●
●
●
predefinidos
●
●
●
3
28/Mayo/2012 8. Interfaces gráficas con Swing

Creación de ventanas
La clase JFrame proporciona
manipular ventanas.
Constructores:
operaciones para
●
●
JFrame()
JFrame(String titulo)
●
●
Una vez creado el objeto de ventana, hay que:
●
Establecer su tamaño.
Est ablecer la acción de cierre.
Hacerla visible.
●
●
●
4
28/Mayo/2012 8. Interfaces gráficas con Swing

Creación de ventanas
f.setSize(400, 300);
f.setVisible(true);
Acciones de cierre:
●
JFrame.EXIT_ON_CLOSE: Abandona aplicación.
JFrame.DISPOSE_ON_CLOSE: Libera los recursos asociados a la
ventana.
JFrame.DO_NOTHING_ON_CLOSE: No hace nada.
JFrame.HIDE_ON_CLOSE: Cierra la ventana, sin liberar sus recursos.
●
●
●
●
5
28/Mayo/2012 8. Interfaces gráficas con Swing
import javax.swing.*;
public class VentanaTest {
public static void main(String[] args) {
JFrame f = new JFrame("Titulo de ventana");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}

Creación de ventanas
6
28/Mayo/2012 8. Interfaces gráficas con Swing

Creación de ventanas
Es usual extender la clase JFrame, y realizar las
●
operaciones de inicialización en su constructor.
v.setVisible(true);
7
28/Mayo/2012 8. Interfaces gráficas con Swing
public class VentanaTest {
public static void main(String[] args) {
MiVentana v = new MiVentana();
}
}
public class MiVentana extends JFrame {
public MiVentana() {
super ( "Ti t ul o de vent ana") ; set Si ze( 400, 300) ;
set D
ef aul t Cl oseO
per at i on( JFr am
e. EX
I T_O
N
_CLO
SE) ;
}
}

Contenidos
Ventanas
Componentes
Layout Managers
M anejo de event os
Cuadros de diálogo
Dibujo de gráficos
Arquitectura MVC
●
●
●
●
predefinidos
●
●
●
8
28/Mayo/2012 8. Interfaces gráficas con Swing

Componentes de una ventana
JButton
JLabel
JTextField
JCheckBox
JRadioButton
Tras crear uno de estos componentes con new, ha
añadirse al contentPane de la ventana
correspondiente mediante su método add.
de
●
9
28/Mayo/2012 8. Interfaces gráficas con Swing

Añadir componentes
super("Titulo de ventana");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
cp.setLayout(new FlowLayout());
JTextField texto =
cp.add(etiqueta);
cp.add(boton);
new JTextField(20);
10
28/Mayo/2012 8. Interfaces gráficas con Swing
public class MiVentana extends JFrame {
public MiVentana() {
setSize(400, 300);
Container cp = getContentPane();
JLabel etiqueta = new JLabel("Nombre: ");
JButton boton = new JButton("Saludar");
cp.add(texto);
}
}

Añadir componentes
11
28/Mayo/2012 8. Interfaces gráficas con Swing

Contenidos
Ventanas
Componentes
Layout Managers
M anejo de event os
Cuadros de diálogo
Dibujo de gráficos
Arquitectura MVC
●
●
●
●
predefinidos
●
●
●
12
28/Mayo/2012 8. Interfaces gráficas con Swing

Layout Managers
En Java no es habitual indicar explícitamente la posición
de los componentes de la interfaz dentro de la ventana.
Los layout managers se encargan de colocar los
com ponentes de la in terf az de usuario en la venta na
cont enedora.
●
●
Especifican la posición
componentes.
y el tamaño de dichos
●
FlowLayout
GridLayout
BorderLayout
GridBagLayout
…
●
●
●
●
●
13
28/Mayo/2012 8. Interfaces gráficas con Swing

FlowLayout
Coloca los elementos uno a continuación de otro,
●
de manera similar a la colocación
un procesador de textos.
Métodos:
de palabras en
●
setAligment(int alineacion)
●
setHgap(int
setVgap(int
separacion)
separacion)
●
●
14
28/Mayo/2012 8. Interfaces gráficas con Swing

GridLayout
Coloca los componentes de la interfaz en
forma de rejilla.
El orden en que se añadan los com ponent es
det erm ina su posición en la rejilla.
Constructor:
●
●
●
GridLayout(int f i l a s , int columnas)
●
Métodos:
●
setHgap(int
setVgap(int
separacion)
separacion)
●
●
15
28/Mayo/2012 8. Interfaces gráficas con Swing

GridLayout
setSize(400, 300);
Container cp =
gl.setHgap(5);
getContentPane();
gl.setVgap(5);
cp.add(new JButton(String.valueOf(i)));
cp.add(new JButton("0"));
16
28/Mayo/2012 8. Interfaces gráficas con Swing
public class MiVentana2 extends JFrame {
public MiVentana2() {
super("Titulo de ventana");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
GridLayout gl = new GridLayout(4,3);
cp.setLayout(gl);
for(int i = 1; i <= 9; i++) {
}
cp.add(new JButton("*"));
cp.add(new JButton("#"));
}
}

GridLayout
17
28/Mayo/2012 8. Interfaces gráficas con Swing

BorderLayout
Coloca y cambia de tamaño sus componentes
●
para que se ajusten a los bordes
central de la ventana.
Métodos:
y parte
●
setHgap(int
setVgap(int
separacion)
separacion)
●
●
Al añadir un elemento a la
ventana, hay que especificar
su colocación:
●
getContentPane().add(b, BorderLayout.EAST)
18
28/Mayo/2012 8. Interfaces gráficas con Swing
JButton b = new JButton(...);

Interfaces complejas: JPanel
Un panel es un componente con un layout
●
manager propio, y que puede
componentes en su interior.
Constructor:
contener varios
●
JPanel()
●
Métodos:
●
void
void
…
setLayout(LayoutManager lm)
●
add(JComponent componente)
●
●
19
28/Mayo/2012 8. Interfaces gráficas con Swing

Interfaces complejas: JPanel
20
28/Mayo/2012 8. Interfaces gráficas con Swing

Interfaces complejas: JPanel
GridLayout
FlowLayout
FlowLayout
21
28/Mayo/2012 8. Interfaces gráficas con Swing

Interfaces complejas: JPanel
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
panelFecha.setLayout(new FlowLayout());
panelFecha.add(new JLabel("/"));
panelFecha.add(new JLabel("/"));
GridLayout gl = new GridLayout(3,2,0,5);
panelDatos.add(new
panelDatos.add(new
panelDatos.add(new
JLabel("Nombre:"));
JLabel("DNI : " ) ) ;
JLabel("Fecha de nacimiento: " ) ) ;
22
28/Mayo/2012 8. Interfaces gráficas con Swing
public MiVentana3() {
super("Añadir usuario");
/ / Panel de fecha
JPanel panelFecha = new JPanel();
panelFecha.add(new JTextField(2));
panelFecha.add(new JTextField(2));
panelFecha.add(new JTextField(2));
/ / Panel de datos
JPanel panelDatos = new JPanel();
panelDatos.setLayout(gl);
panelDatos.add(new JTextField(10));
panelDatos.add(new JTextField(10));
panelDatos.add(panelFecha);
…

Interfaces complejas: JPanel
23
28/Mayo/2012 8. Interfaces gráficas con Swing
…
// Panel de botones
JPanel panelBotones = new JPanel();
panelBotones.setLayout(new FlowLayout());
panelBotones.add(new JButton("Aceptar"));
panelBotones.add(new JButton("Cancelar"));
Container cp = getContentPane();
cp.add(panelDatos, BorderLayout.CENTER);
cp.add(panelBotones,
BorderLayout.SOUTH);
}

Interfaces complejas: GridBagLayout
Más flexible que GridLayout
Cada componente ha de tener asociado un
objeto de la clase GridBagConstraints. La
●
●
asociación se producirá en el método add.
GridBagConstraints gbc = new GridBagConstraints(...);
24
28/Mayo/2012 8. Interfaces gráficas con Swing
JButton b = new JButton(“Aceptar”);
getContentPane().add(b, gbc);

GridBagConstraints
Atributos públicos:
●
int
int
gridx, gridy
●
gridwidth, gridheight
●
double weightx, weighty
●
int
int
f i l l
anchor
●
●
Insets insets
●
int ipadx, ipady
●
Pueden ser inicializados en el constructor.
●
25
28/Mayo/2012 8. Interfaces gráficas con Swing

GridBagConstraints
Atributos públicos:
●
int gridx, gridy
●
26
28/Mayo/2012 8. Interfaces gráficas con Swing

GridBagConstraints
Atributos públicos:
●
int gridwidth, gridheight
●
gridwidth = 2
gridheight = 2
27
28/Mayo/2012 8. Interfaces gráficas con Swing

GridBagConstraints
Atributos públicos:
●
double weightx, weighty
●
weightx = 1.0 weightx = 0.0
28
28/Mayo/2012 8. Interfaces gráficas con Swing

GridBagConstraints
Atributos públicos:
●
int f i l l
●
Puede ser:
●
GridBagLayout.HORIZONTAL
GridBagLayout.VERTICAL
GridBagLayout.BOTH
●
●
●
29
28/Mayo/2012 8. Interfaces gráficas con Swing

GridBagConstraints
Atributos públicos:
●
int anchor
●
30
28/Mayo/2012 8. Interfaces gráficas con Swing

GridBagConstraints
Atributos públicos:
●
Insets insets
●
insets = new Insets(10, 20, 10, 20)
31
28/Mayo/2012 8. Interfaces gráficas con Swing

GridBagConstraints
Atributos públicos:
●
int padx, int pady
●
Especifican cuánto espacio añadir a la
●
anchura/altura mínima de los componentes.
32
28/Mayo/2012 8. Interfaces gráficas con Swing

Constructores de interfaces
Permiten construir interfaces de usuario
interactivamente.
●
Ejemplo: Netbeans (netbeans.org)
●
33
28/Mayo/2012 8. Interfaces gráficas con Swing

Contenidos
Ventanas
Componentes
Layout Managers
M anejo de event os
Cuadros de diálogo
Dibujo de gráficos
Arquitectura MVC
●
●
●
●
predefinidos
●
●
●
34
28/Mayo/2012 8. Interfaces gráficas con Swing

Manejo de eventos
Un evento es un suceso que ocurre como
consecuencia de la interacción del usuario
●
con
la
●
interfaz gráfica.
Pulsación de un botón.
Cam bio del contenido en un
Deslizamiento de una barra.
Activación de un JCheckBox.
Movimiento de la ventana.
cuadro de texto.
●
●
●
●
35
28/Mayo/2012 8. Interfaces gráficas con Swing

Pulsación de un botón
La clase JButton tiene un método:
●
void addActionListener(ActionListener l )
●
Que especifica el objeto (manejador de
event o) que se encargará de t ra tar el eve n to
de pulsación del botón.
Este objeto ha de interpretar la interfaz
ActionListener (paquete java.awt.event)
●
●
36
28/Mayo/2012 8. Interfaces gráficas con Swing
public interface ActionListener {
void actionPerformed(ActionEvent e)
}

Pulsación de un botón
Cuando el usuario pulse el botón, se llamará
método actionPerformed de todos los
al
●
manejadores
registrado.
de eventos que se hayan
. . .
Métodos de ActionEvent:
●
public
public
Object getSource()
●
int getModifiers()
●
37
28/Mayo/2012 8. Interfaces gráficas con Swing
public class Manejador implements ActionListener {
public void actionPerformed(ActionEvent e) {
} Información sobre
} el event o

Ejemplo
setSize(200,100);
Container cp = getContentPane();
JButton boton = new JButton("¡Púlsame!");
38
28/Mayo/2012 8. Interfaces gráficas con Swing
public class BotonVentana extends JFrame {
public BotonVentana() {
super("Botón");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
cp.setLayout(new FlowLayout());
boton.addActionListener(new EventoBotonPulsado());
cp.add(boton);
}
}

Ejemplo
39
28/Mayo/2012 8. Interfaces gráficas con Swing
public class EventoBotonPulsado implements ActionListener {
public void actionPerformed(ActionEvent e)
{ System.out.println(“¡Gracias!”);
}
}

Ejemplo
40
28/Mayo/2012 8. Interfaces gráficas con Swing
public class EventoBotonPulsado implements ActionListener {
public void actionPerformed(ActionEvent e)
{ JButton boton = (JButton)
e.getSource();
boton.setText("¡Gracias!");
}
}

Acceso a componentes de la interfaz
41
28/Mayo/2012 8. Interfaces gráficas con Swing

Acceso a componentes de la interfaz
}
¿Cómo accedo al o b jeto JTextField?
●
42
28/Mayo/2012 8. Interfaces gráficas con Swing
public class EventoSaludo implements ActionListener {
public void actionPerformed(ActionEvent e)
{
?
}

Posibilidad 1
43
28/Mayo/2012 8. Interfaces gráficas con Swing
public class EventoSaludo implements ActionListener {
private JTextField cuadroTexto;
public EventoSaludo(JTextField cuadroTexto) {
this.cuadroTexto = cuadroTexto;
}
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(null, "¡Hola, " +
cuadroTexto.getText() + "!");
}
}

Posibilidad 1
setSize(400, 300);
setLayout(new FlowLayout());
cp.add(new JLabel("Nombre :"));
JButton botonSaludo = new JButton("Saludar");
botonSaludo.addActionListener(new EventoSaludo(texto));
44
28/Mayo/2012 8. Interfaces gráficas con Swing
public class MiVentana extends JFrame {
public MiVentana() {
super("Titulo de ventana");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container cp = getContentPane();
JTextField texto = new JTextField(20);
cp.add(texto);
cp.add(botonSaludo);
}
}

Posibilidad 2
JO
pt i onPane. show
M
essageD
i al og( nul l
,
"¡Hola, " +
}
…
cp. add( cuadr oText o) ;
45
28/Mayo/2012 8. Interfaces gráficas con Swing
public class MiVentana extends JFrame {
private JTextField cuadroTexto;
cl ass Event oSal udo i m
pl em
ent s A
ct i onLi st ener {
public void actionPerformed(ActionEvent e) {
cuadroTexto.getText() + "!");
}
public MiVentana() {
cuadroTexto = new JTextField(20);
…
botonSaludo.addActionListener(new EventoSaludo());
}
}

Posibilidad 3
JOptionPane.showMessageDialog(null, "¡Hola, " +
}
…
…
46
28/Mayo/2012 8. Interfaces gráficas con Swing
public class MiVentana extends JFrame implements ActionListener {
private JTextField cuadroTexto;
public void actionPerformed(ActionEvent e) {
cuadroTexto.getText() + "!");
public MiVentana() {
cuadroTexto = new JTextField(20);
cp.add(cuadroTexto);
botonSaludo.addActionListener(this);
}
}

Eventos en un JTextField
CaretListener: Cambios en la posición del
cursor.
●
void caretUpdate(CaretEvent e)
●
DocumentListener: Cambios en el texto.
●
void
void
void
changedUpdate(DocumentEvent e)
●
insertUpdate(DocumentEvent
removeUpdate(DocumentEvent
e)
e)
●
●
t ex t. getDocument ( ) . addDocum
ent Li s tener ( . . . )
;
47
28/Mayo/2012 8. Interfaces gráficas con Swing
JTextField text = ...;
text.addCaretListener(...);

Eventos en una ventana
WindowListener
●
void
void
void
void
void
void
void
windowActivated(WindowEvent e)
●
windowClosed(WindowEvent e)
●
windowClosing(WindowEvent e)
●
windowDeactivated(WindowEvent
windowDeiconified(WindowEvent
e)
e)
●
●
windowIconified(WindowEvent e)
●
windowOpened(WindowEvent e)
●
48
28/Mayo/2012 8. Interfaces gráficas con Swing

Eventos de ratón y de teclado
MouseListener: Pulsaciones de botón, entradas
y salidas del puntero en un componente.
MouseMotionListener: Movimientos del ratón
dentro de un componente.
●
●
MouseWheelListener: Movimientos de
central de un ratón.
la rueda
●
KeyListener: Pulsaciones de teclas.
●
49
28/Mayo/2012 8. Interfaces gráficas con Swing

Contenidos
Ventanas
Componentes
Layout Managers
M anejo de event os
Cuadros de diálogo
Dibujo de gráficos
Arquitectura MVC
●
●
●
●
predefinidos
●
●
●
50
28/Mayo/2012 8. Interfaces gráficas con Swing

Cuadros de diálogo predefinidos
La clase JOptionPane proporciona métodos de
utilidad para mostrar ventanas de aviso y de
confirmación estándar.
●
void showMessageDialog(Component padre,
●
Object mensaje, String tituloVentana,
int tipoMensaje)
51
28/Mayo/2012 8. Interfaces gráficas con Swing

Cuadros de diálogo predefinidos
La clase JOptionPane proporciona métodos de
utilidad para mostrar ventanas de aviso y de
confirmación estándar.
●
String showInputDialog(Component padre,
●
Object mensaje, Object valorDefecto)
52
28/Mayo/2012 8. Interfaces gráficas con Swing

Cuadros de diálogo predefinidos
La clase JOptionPane proporciona métodos de
utilidad para mostrar ventanas de aviso y de
confirmación estándar.
●
int showConfirmDialog(Component padre,
●
Object mensaje, String titulo,
int tipoOpciones, int tipoMensaje)
53
28/Mayo/2012 8. Interfaces gráficas con Swing

Contenidos
Ventanas
Componentes
Layout Managers
M anejo de event os
Cuadros de diálogo
Dibujo de gráficos
Arquitectura MVC
●
●
●
●
predefinidos
●
●
●
54
28/Mayo/2012 8. Interfaces gráficas con Swing

Dibujar gráficos
Cada componente tiene un método llamado
●
paintComponent, que se encarga de pintarlo
pantalla.
Para realizar un dibujo definido por el
programador, basta con heredar de un
componente (normalmente un JPanel), y
sobreescribir su método paintComponent.
en
●
void paintComponent(Graphics g)
●
55
28/Mayo/2012 8. Interfaces gráficas con Swing

Dibujar gráficos
M ét odos de Graphics:
●
void
void
drawPolygon(int[] x, i n t [ ] y, i n t puntos)
●
dr aw
Rect ( i nt
i nt
f i l l Rect ( i nt
i nt
dr aw
O
val ( i nt
i nt
f i l l O
val ( i nt
i nt
x, i n t y,
i nt
y,
i nt
y,
i nt
y,
i nt
●
ancho, alto)
void x, i n t
●
ancho, alto)
void x, i n t
●
ancho, alto)
void x, i n t
●
ancho, alto)
void
voi d
voi d
drawString(String cad, int x, i n t y)
●
setColor(Color c)
●
setFont(Font f )
●
56
28/Mayo/2012 8. Interfaces gráficas con Swing

Ejemplo
g.fillOval(100,100,200,200);
int yEnd = (int) (200+150*Math.sin(d));
}
g.drawArc(150, 150, 100, 100, 230,
g.fillOval(230, 150, 20, 20);
80);
57
28/Mayo/2012 8. Interfaces gráficas con Swing
public class PanelSol extends JPanel {
public void paintComponent(Graphics g) {
g.setColor(Color.ORANGE);
for (double d = 0; d < 2*Math.PI; d += 0.1) {
int xEnd = (int) (200+150*Math.cos(d));
g.drawLine(200, 200, xEnd, yEnd);
g.setColor(Color.BLACK);
g.fillOval(150, 150, 20, 20);
}
}

Ejemplo
…
cp.add(new Pane lSol( ) ) ;
58
28/Mayo/2012 8. Interfaces gráficas con Swing
public class VentanaSol extends JFrame {
public VentanaSol() {
Container cp = getContentPane();
}
}

Aún hay más
http://download.java.net/javadesktop/swingset3/SwingSet3.jnlp
59
28/Mayo/2012 8. Interfaces gráficas con Swing

Aún hay más
http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/07A/swingDesign.html
60
28/Mayo/2012 8. Interfaces gráficas con Swing

Contenidos
Ventanas
Componentes
Layout Managers
M anejo de event os
Cuadros de diálogo
Dibujo de gráficos
Arquitectura MVC
●
●
●
●
predefinidos
●
●
●
61
28/Mayo/2012 8. Interfaces gráficas con Swing

Modelo
Arquitectura MVC
MVC = Modelo – Vista – Controlador
Es un patrón de diseño que separa los datos de
●
●
la aplicación, la interfaz de usuario, y la lógica
de negocio.
62
28/Mayo/2012 8. Interfaces gráficas con Swing
Modelo
Vista
Controlador

Modelo
Arquitectura MVC
Ejemplo: Edición de textos.
●
class JTextField
class JTextField interfaz Document
“Mi Texto”
63
28/Mayo/2012 8. Interfaces gráficas con Swing
Modelo
Vista
Controlador

Modelo
Arquitectura MVC
Ejemplo: Listas
●
class
JList
interfaz ListModel
{“MetaSystems”, Color.RED},
{“MetaWorks”, Color.BLUE},
…
64
28/Mayo/2012 8. Interfaces gráficas con Swing
Modelo
Vista
Controlador

Modelo
Arquitectura MVC
Preparación: El modelo tiene una lista de vistas. Cada
vez que haya un cambio de modelo, éste avisará a
todas las vistas para que se actualicen.
●
Cuando se crea una vista, ésta avisa al modelo para
●
que la añada a su lista.
65
28/Mayo/2012 8. Interfaces gráficas con Swing
Modelo
Vista
Controlador

Modelo
Arquitectura MVC
Paso 1: Cuando el
del usuario, envía
m odif icarlo.
controlador recibe la acción
●
un mensaje al modelo para
66
28/Mayo/2012 8. Interfaces gráficas con Swing
Modelo
Vista
Controlador

Modelo
Arquitectura MVC
Paso 2: Cuando el modelo se modifica, envía
●
un mensaje a
registradas.
todas las vistas que tenga
67
28/Mayo/2012 8. Interfaces gráficas con Swing
Modelo
Vista
Controlador

Modelo
Arquitectura MVC
Paso 3: La vista se actualiza con los cambios
●
realizados en el modelo
68
28/Mayo/2012 8. Interfaces gráficas con Swing
Modelo
Vista
Controlador

Referencias
P. Deitel, H. Deitel
Java. How to Program (9th Edition)
Caps. 14, 15 y 25
B. Eckel
●
●
Thinking in Java (3rd
Cap. 14
J. Zukowski
Edition)
●
The definitive guide to Java Swing
69
28/Mayo/2012 8. Interfaces gráficas con Swing