Interfaces gráficas con
Swing
Java y Graficación
Introducción
● Swing es una biblioteca de interfaces gráficas
de usuario (GUI) para Java.
● Viene incluida con el entorno de desarrollo de
Java (JDK).
● Extiende a otra librería gráfica más
antigua llamada AWT.
● Paquetes:
● [Link]
● [Link]
● [Link]
● Alternativas: SWT ([Link]
28/Mayo/2012 8. Interfaces gráficas con Swing 2
Contenidos
● Ventanas
● Componentes
● Layout Managers
● Manejo de eventos
● Cuadros de diálogo predefinidos
● Dibujo de gráficos
● Arquitectura MVC
28/Mayo/2012 8. Interfaces gráficas con Swing 3
Creación de ventanas
● La clase JFrame proporciona operaciones
para manipular ventanas.
● Constructores:
● JFrame()
● JFrame(String titulo)
● Una vez creado el objeto de ventana, hay que:
● Establecer su tamaño.
● Establecer la acción de cierre.
● Hacerla visible.
28/Mayo/2012 8. Interfaces gráficas con Swing 4
import [Link].*;
public class VentanaTest {
public static void main(String[] args) {
JFrame f = new JFrame("Titulo de ventana");
[Link](400, 300);
[Link](JFrame.EXIT_ON_CLOSE);
[Link](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.
28/Mayo/2012 8. Interfaces gráficas con Swing 5
28/Mayo/2012 8.
Interfaces gráficas con Swing 6
● Es usual extender la clase JFrame, y realizar
las operaciones de inicialización en su
constructor.
public class MiVentana extends JFrame {
public MiVentana() {
super("Titulo de ventana");
setSize(400, 300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
public class VentanaTest {
public static void main(String[] args) {
MiVentana v = new MiVentana();
[Link](true);
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 7
Contenidos
● Ventanas
● Componentes
● Layout Managers
● Manejo de eventos
● Cuadros de diálogo predefinidos
● Dibujo de gráficos
● Arquitectura MVC
28/Mayo/2012 8. Interfaces gráficas con Swing 8
Componentes de una ventana
JButton
JLabel
JTextField
JCheckBox
JRadioButton
● Tras crear uno de estos componentes con new, ha
de añadirse al contentPane de la ventana
correspondiente mediante su método add.
28/Mayo/2012 8. Interfaces gráficas con Swing 9
Añadir componentes
public class MiVentana extends JFrame
{ public MiVentana() {
super("Titulo de ventana");
setSize(400, 300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container cp = getContentPane();
[Link](new FlowLayout());
JLabel etiqueta = new JLabel("Nombre: ");
JTextField texto = new JTextField(20);
JButton boton = new JButton("Saludar");
[Link](etiqueta);
[Link](texto);
[Link](boton);
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 10
28/Mayo/2012 8. Interfaces gráficas con Swing 11
Contenidos
● Ventanas
● Componentes
● Layout Managers
● Manejo de eventos
● Cuadros de diálogo predefinidos
● Dibujo de gráficos
● Arquitectura MVC
28/Mayo/2012 8. Interfaces gráficas con Swing 12
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
componentes de la interfaz de usuario en la
ventana contenedora.
● Especifican la posición y el tamaño de
dichos componentes.
● FlowLayout
● GridLayout
● BorderLayout
● GridBagLayout
● …
28/Mayo/2012 8. Interfaces gráficas con Swing 13
FlowLayout
● Coloca los elementos uno a continuación de
otro, de manera similar a la colocación de
palabras en un procesador de textos.
● Métodos:
● setAligment(int alineacion)
● setHgap(int separacion)
● setVgap(int separacion)
28/Mayo/2012 8. Interfaces gráficas con Swing 14
GridLayout
● Coloca los componentes de la interfaz
en forma de rejilla.
● El orden en que se añadan los
componentes determina su posición en la
rejilla.
● Constructor:
● GridLayout(int filas, int columnas)
● Métodos:
● setHgap(int separacion)
● setVgap(int separacion)
GridLayout
28/Mayo/2012 8. Interfaces gráficas con Swing 15
public class MiVentana2 extends JFrame
{ public MiVentana2() {
super("Titulo de ventana");
setSize(400, 300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container cp = getContentPane();
GridLayout gl = new GridLayout(4,3);
[Link](5); [Link](5);
[Link](gl);
for(int i = 1; i <= 9; i++) {
[Link](new JButton([Link](i)));
}
[Link](new JButton("*"));
[Link](new JButton("0"));
[Link](new JButton("#"));
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 16
28/Mayo/2012 8. Interfaces gráficas con Swing 17
BorderLayout
● Coloca y cambia de tamaño sus
componentes para que se ajusten a los
bordes y parte central de la ventana.
● Métodos:
● setHgap(int separacion)
● setVgap(int separacion)
● Al añadir un elemento a la
ventana, hay que
especificar su colocación:
JButton b = new JButton(...);
getContentPane().add(b, [Link])
28/Mayo/2012 8. Interfaces gráficas con Swing 18
Interfaces complejas: JPanel
● Un panel es un componente con un layout
manager propio, y que puede contener varios
componentes en su interior.
● Constructor:
● JPanel()
● Métodos:
● void setLayout(LayoutManager lm)
● void add(JComponent componente)
● …
28/Mayo/2012 8. Interfaces gráficas con Swing 19
28/Mayo/2012 8. Interfaces gráficas con Swing 20
GridLayout
FlowLayout
FlowLayout
28/Mayo/2012 8. Interfaces gráficas con Swing 21
public MiVentana3() {
super("Añadir usuario");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// Panel de fecha
JPanel panelFecha = new JPanel();
[Link](new FlowLayout());
[Link](new JTextField(2));
[Link](new JLabel("/"));
[Link](new JTextField(2));
[Link](new JLabel("/"));
[Link](new JTextField(2));
// Panel de datos
JPanel panelDatos = new JPanel();
GridLayout gl = new GridLayout(3,2,0,5);
[Link](gl);
[Link](new JLabel("Nombre:"));
[Link](new JTextField(10));
[Link](new JLabel("DNI:"));
[Link](new JTextField(10));
[Link](new JLabel("Fecha de nacimiento: "));
[Link](panelFecha);
…
28/Mayo/2012 8. Interfaces gráficas con Swing 22
…
// Panel de botones
JPanel panelBotones = new JPanel();
[Link](new FlowLayout());
[Link](new JButton("Aceptar"));
[Link](new JButton("Cancelar"));
Container cp = getContentPane();
[Link](panelDatos, [Link]);
[Link](panelBotones, [Link]);
}
28/Mayo/2012 8. Interfaces gráficas con Swing 23
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.
JButton b = new JButton(“Aceptar”);
GridBagConstraints gbc = new GridBagConstraints(...);
getContentPane().add(b, gbc);
28/Mayo/2012 8. Interfaces gráficas con Swing 24
GridBagConstraints
● Atributos públicos:
● int gridx, gridy
● int gridwidth, gridheight
● double weightx, weighty
● int fill
● int anchor
● Insets insets
● int ipadx, ipady
● Pueden ser inicializados en el constructor.
28/Mayo/2012 8. Interfaces gráficas con Swing 25
● Atributos públicos:
● int gridx, gridy
28/Mayo/2012 8. Interfaces gráficas con Swing 26
● Atributos públicos:
● int gridwidth, gridheight
gridwidth= 2
gridheight = 2
28/Mayo/2012 8. Interfaces gráficas con Swing 27
● Atributos públicos:
● double weightx, weighty
weightx = 1.0 weightx = 0.0
28/Mayo/2012 8. Interfaces gráficas con Swing 28
● Atributos públicos:
● int fill
● Puede ser:
● [Link]
● [Link]
● [Link]
28/Mayo/2012 8. Interfaces gráficas con Swing 29
● Atributos públicos:
● int anchor
28/Mayo/2012 8. Interfaces gráficas con Swing 30
● Atributos públicos:
● Insets insets
insets = new Insets(10, 20, 10, 20)
28/Mayo/2012 8. Interfaces gráficas con Swing 31
● Atributos públicos:
● int padx, int pady
● Especifican cuánto espacio añadir a la
anchura/altura mínima de los
componentes.
28/Mayo/2012 8. Interfaces gráficas con Swing 32
Constructores de interfaces
● Permiten construir interfaces de
usuario interactivamente.
● Ejemplo: Netbeans ([Link])
28/Mayo/2012 8. Interfaces gráficas con Swing 33
Contenidos
● Ventanas
● Componentes
● Layout Managers
● Manejo de eventos
● Cuadros de diálogo predefinidos
● Dibujo de gráficos
● Arquitectura MVC
28/Mayo/2012 8. Interfaces gráficas con Swing 34
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.
● Cambio del contenido en un cuadro de texto.
● Deslizamiento de una barra.
● Activación de un JCheckBox.
● Movimiento de la ventana.
28/Mayo/2012 8. Interfaces gráficas con Swing 35
Pulsación de un botón
● La clase JButton tiene un método:
● void addActionListener(ActionListener l)
● Que especifica el objeto (manejador de
evento) que se encargará de tratar el
evento de pulsación del botón.
● Este objeto ha de interpretar la interfaz
ActionListener (paquete [Link])
public interface ActionListener {
void actionPerformed(ActionEvent e)
}
28/Mayo/2012 8. Interfaces gráficas con Swing 36
● Cuando el usuario pulse el botón, se llamará al
método actionPerformed de todos los
manejadores de eventos que se hayan
registrado.
public class Manejador implements ActionListener {
public void actionPerformed(ActionEvent e) {
...
} Información sobre el evento
}
● Métodos de ActionEvent:
● public Object getSource()
● public int getModifiers()
28/Mayo/2012 8. Interfaces gráficas con Swing 37
Ejemplo
public class BotonVentana extends JFrame
{ public BotonVentana() {
super("Botón");
setSize(200,100);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container cp = getContentPane();
[Link](new FlowLayout());
JButton boton = new JButton("¡Púlsame!");
[Link](new EventoBotonPulsado());
[Link](boton);
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 38
public class EventoBotonPulsado implements ActionListener {
public void actionPerformed(ActionEvent e) {
[Link](“¡Gracias!”);
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 39
public class EventoBotonPulsado implements ActionListener {
public void actionPerformed(ActionEvent e) {
JButton boton = (JButton) [Link]();
[Link]("¡Gracias!");
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 40
Acceso a componentes de la interfaz
28/Mayo/2012 8. Interfaces gráficas con Swing 41
public class EventoSaludoimplements ActionListener { publicvoidactionPer
?
}
}
● ¿Cómo accedo al objeto JTextField?
28/Mayo/2012 8. Interfaces gráficas con Swing 42
Posibilidad 1
public class EventoSaludo implements ActionListener {
private JTextField cuadroTexto;
public EventoSaludo(JTextField cuadroTexto)
{ [Link] = cuadroTexto;
}
public void actionPerformed(ActionEvent e)
{ [Link](null, "¡Hola, " +
[Link]() + "!");
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 43
public class MiVentana extends JFrame {
public MiVentana() {
super("Titulo de ventana");
setSize(400, 300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new FlowLayout());
Container cp = getContentPane();
[Link](new JLabel("Nombre :"));
JTextField texto = new JTextField(20);
[Link](texto);
JButton botonSaludo = new JButton("Saludar");
[Link](botonSaludo);
[Link](new EventoSaludo(texto));
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 44
Posibilidad 2
public class MiVentana extends JFrame
{ private JTextField cuadroTexto;
class EventoSaludo implements ActionListener
{ public void actionPerformed(ActionEvent e)
{
[Link](null, "¡Hola, " +
[Link]() + "!");
}
}
public MiVentana() {
…
cuadroTexto = new JTextField(20);
[Link](cuadroTexto);
…
[Link](new EventoSaludo());
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 45
public class MiVentana extends JFrame implements ActionListener
{ private JTextField cuadroTexto;
public void actionPerformed(ActionEvent e)
{ [Link](null, "¡Hola, " +
[Link]() + "!");
}
public MiVentana() {
…
cuadroTexto = new JTextField(20);
[Link](cuadroTexto);
…
[Link](this);
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 46
Eventos en un JTextField
● CaretListener: Cambios en la posición
del cursor.
● void caretUpdate(CaretEvent e)
● DocumentListener: Cambios en el texto.
● void changedUpdate(DocumentEvent e)
● void insertUpdate(DocumentEvent e)
● void removeUpdate(DocumentEvent e)
JTextField text = ...;
[Link](...);
[Link]().addDocumentListener(...);
28/Mayo/2012 8. Interfaces gráficas con Swing 47
Eventos en una ventana
● WindowListener
● void windowActivated(WindowEvent e)
● void windowClosed(WindowEvent e)
● void windowClosing(WindowEvent e)
● void windowDeactivated(WindowEvent e)
● void windowDeiconified(WindowEvent e)
● void windowIconified(WindowEvent e)
● void windowOpened(WindowEvent e)
28/Mayo/2012 8. Interfaces gráficas con Swing 48
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 la
rueda central de un ratón.
● KeyListener: Pulsaciones de teclas.
Eventos de ratón y de teclado
28/Mayo/2012 8. Interfaces gráficas con Swing 49
Contenidos
● Ventanas
● Componentes
● Layout Managers
● Manejo de eventos
● Cuadros de diálogo predefinidos
● Dibujo de gráficos
● Arquitectura MVC
28/Mayo/2012 8. Interfaces gráficas con Swing 50
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)
28/Mayo/2012 8. Interfaces gráficas con Swing 51
● 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)
28/Mayo/2012 8. Interfaces gráficas con Swing 52
● 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)
28/Mayo/2012 8. Interfaces gráficas con Swing 53
Contenidos
● Ventanas
● Componentes
● Layout Managers
● Manejo de eventos
● Cuadros de diálogo predefinidos
● Dibujo de gráficos
● Arquitectura MVC
28/Mayo/2012 8. Interfaces gráficas con Swing 54
Dibujar gráficos
● Cada componente tiene un método llamado
paintComponent, que se encarga de pintarlo
en pantalla.
● Para realizar un dibujo definido por el
programador, basta con heredar de un
componente (normalmente un JPanel), y
sobreescribir su método
paintComponent.
● void paintComponent(Graphics g)
28/Mayo/2012 8. Interfaces gráficas con Swing 55
● Métodos de Graphics:
●
voi drawPolygon(int[] x, int[] in puntos
d y, t )
● voi drawRect(int x, int y,
d int ancho, int
alto)
● voi fillRect(int x, int y,
d int ancho, int
alto)
● voi drawOval(int x, int y,
d int ancho, int
alto)
● voi fillOval(int x, int y,
d int ancho, int
alto)
● voi drawString(String cad, int in y)
d x, t
● voi setColor(Color c)
d
● voi setFont(Font f)
d
28/Mayo/2012 8. Interfaces gráficas con Swing 56
Ejemplo
public class PanelSol extends JPanel {
public void paintComponent(Graphics g) {
[Link]([Link]);
[Link](100,100,200,200);
for (double d = 0; d < 2*[Link]; d += 0.1) {
int xEnd = (int) (200+150*[Link](d));
int yEnd = (int) (200+150*[Link](d));
[Link](200, 200, xEnd, yEnd);
}
[Link]([Link]);
[Link](150, 150, 100, 100, 230, 80);
[Link](150, 150, 20, 20);
[Link](230, 150, 20, 20);
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 57
public class VentanaSol extends JFrame {
public VentanaSol() {
…
Container cp = getContentPane();
[Link](new PanelSol());
}
}
28/Mayo/2012 8. Interfaces gráficas con Swing 58
Aún hay más
[Link]
Aún hay más
28/Mayo/2012 8. Interfaces gráficas con Swing 59
[Link]
28/Mayo/2012 8. Interfaces gráficas con Swing 60
Contenidos
● Ventanas
● Componentes
● Layout Managers
● Manejo de eventos
● Cuadros de diálogo predefinidos
● Dibujo de gráficos
● Arquitectura MVC
28/Mayo/2012 8. Interfaces gráficas con Swing 61
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.
Controlador
Vista Modelo
Modelo
28/Mayo/2012 8. Interfaces gráficas con Swing 62
● Ejemplo: Edición de textos.
Controlador
class JTextField
Modelo
Vista Modelo
class JTextField interfaz Document
“Mi Texto”
28/Mayo/2012 8. Interfaces gráficas con Swing 63
● Ejemplo: Listas
Controlador
Vista Modelo
Modelo
class JList interfaz ListModel
{“MetaSystems”, [Link]},
{“MetaWorks”, [Link]},
…
28/Mayo/2012 8. Interfaces gráficas con Swing 64
● 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.
Controlador
Vista Modelo
Modelo
28/Mayo/2012 8. Interfaces gráficas con Swing 65
● Paso 1: Cuando el controlador recibe la
acción del usuario, envía un mensaje al
modelo para modificarlo.
Controlador
Vista Modelo
Modelo
28/Mayo/2012 8. Interfaces gráficas con Swing 66
● Paso 2: Cuando el modelo se modifica,
envía un mensaje a todas las vistas que
tenga registradas.
Controlador
Vista Modelo
Modelo
28/Mayo/2012 8. Interfaces gráficas con Swing 67
● Paso 3: La vista se actualiza con los
cambios realizados en el modelo
Controlador
Vista Modelo
Modelo
28/Mayo/2012 8. Interfaces gráficas con Swing 68
Referencias
● P. Deitel, H. Deitel
Java. How to Program (9th Edition) Caps.
14, 15 y 25
● B. Eckel
Thinking in Java (3rd Edition)
Cap. 14
● J. Zukowski
The definitive guide to Java Swing
28/Mayo/2012 8. Interfaces gráficas con Swing 69