1. 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
2. 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
4. 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
5. 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);
}
}
7. 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) ;
}
}
9. 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
10. 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);
}
}
13. 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
14. 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
15. 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
16. 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("#"));
}
}
18. 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(...);
19. 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
24. 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);
29. 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
35. 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
36. 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)
}
37. 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
38. 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);
}
}
39. 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!”);
}
}
40. 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!");
}
}
41. Acceso a componentes de la interfaz
41
28/Mayo/2012 8. Interfaces gráficas con Swing
42. 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)
{
?
}
43. 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() + "!");
}
}
44. 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);
}
}
45. 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());
}
}
46. 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);
}
}
47. 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(...);
49. 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
51. 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
52. 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
53. 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
55. 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
56. 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
57. 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);
}
}
58. 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();
}
}
62. 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
63. 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
65. 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
66. 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
67. 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
68. 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
69. 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
