Documentos de Académico
Documentos de Profesional
Documentos de Cultura
INTERFACES GRÁFICAS DE
USUARIO
INTRODUCCIÓN A LA
• Las componentes de una GUI desarrolladas en Java
PROGRAMACIÓN ORIENTADA son objetos de una clase provista por los paquetes AWT
A OBJETOS o Swing o de una clase derivada de ellas.
• Cada componente está caracterizada por distintos
01100 01100
atributos.
GUI 10011
10110
10011
10110
• Uno de los atributos es el tamaño que se mide en
Tipos de Componentes 01110
01100 pixels.
01110
01100
10011 10011
10110 10110
Dr. Luciano H. Tamargo 01110 01110
http://cs.uns.edu.ar/~lt 1001 1001
Depto. de Ciencias e Ingeniería de la Computación 1 11 1 11
Universidad Nacional del Sur, Bahía Blanca 0 0 0 0
2018 1 1
2
01100 01100
10011 10011
10110 10110
01110 JLabel JProgressBar JSeparator JToolTip 01110
01100 01100
10011 10011
10110 10110
01110 01110
1001 1001
1 11 1 11
0 0 0 0
JColorChooser JEditorPane JTextPane
1 1
5 6
ETIQUETAS PANELES
• Una etiqueta es un objeto gráfico pasivo que permite • Un panel es un área sobre la que trabaja el usuario o se
mostrar un texto o una imagen. colocan otras componentes.
• En Java podemos crear una etiqueta definiendo un objeto • Nosotros solo usaremos paneles como contenedores de
de clase JLabel.
otros paneles u otro tipo de componentes.
• Los constructores provistos por la clase permiten 01100 01100
establecer texto, imagen y/o alineación horizontal de la1 0 0 1 1 • Para definir un panel creamos un objeto de la clase 1 0 0 1 1
imagen: 10110 JPanel. 10110
01110 01110
JLabel() 01100
• JPanel() 01100
JLabel(Icon image) 10011 10011
10110 10110
JLabel(Icon image, int horAlig) 01110 01110
JLabel(String text) 1001 1001
1 11 1 11
JLabel(String text, Icon icon, int horAlig) 0 0 0 0
1 1
11 12
BOTONES BOTONES
• Un botón es una componente reactiva, esto es, puede • Un botón se crea como una instancia de la clase
percibir la acción del usuario y reaccionar de acuerdo al JButton y se registra a un oyente para que tenga la
comportamiento establecido por el programador. capacidad de detectar y reaccionar ante un evento
• Los atributos son texto, imagen, alineación del texto y de externo.
la imagen, color, borde, letra mnemónica y forma, 0 1 1 0 0 01100
• Algunos de los constructores provistos por la clase son:
10011 10011
además, puede estar habilitado o no. 10110 10110
01110 01110
01100
JButton () 01100
10011 JButton (Icon image) 10011
10110 10110
01110 JButton (String text) 01110
1001 JButton (String text, Icon icon) 1001
1 11 1 11
0 0 0 0
1 1
13 14
EJEMPLO SELECCIONAR
EJEMPLO DOS BOTONES
BANDA CON BOTONES
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.*;
01100 class Dos_Botones extends JFrame { 01100
10011 /*Objetos Gráficos*/ 10011
10110 10110
01110 private JLabel etiqueta; 01110
01100 private JButton botonPiojos,botonRedondos;
01100
10011 private JPanel panelControl,panelImagen;1 0 0 1 1
10110 10110
01110 01110
1001 • Todos los atributos de instancia de esta GUI
1001
1 11 corresponden a componentes gráficas. 1 11
0 0 0 0
1 1
15 16
EJEMPLO SELECCIONAR
EJEMPLO SELECCIONAR
BANDA CON BOTONES
BANDA CON BOTONES
1 oyente para 2
//Crea los botones //Crea un oyente para los dos botones
botonPiojos = new JButton("Piojos"); OyenteBoton oyente = new OyenteBoton();
botonRedondos = new JButton(“Redondos"); //Registra los oyentes
//Insertar los botones en los paneles botonPiojos.addActionListener(oyente);
panelControl.add(botonPiojos); 01100 botonRedondos.addActionListener(oyente); 01100
panelControl.add(botonRedondos); 10011 10011
10110 10110
01110 01110
01100 01100
10011 10011
10110 10110
• Las instrucciones pueden organizarse de diferente
01110 • Es posible crear un único oyente y vincularlo a los dos
01110
manera, siempre que el código tenga una 1001
estructura botones. 1001
1 11 1 11
marcada por comentarios. 0 0 0 0
1 1
21 22
EJEMPLO SELECCIONAR
BANDA CON BOTONES EJEMPLO DOS BOTONES
1 oyente para 2
//Crea un oyente para los dos botones • Definimos un solo oyente que se registra a los dos
OyenteBoton oyente = new OyenteBoton(); botones.
//Registra los oyentes • En este caso se define una sola clase para implementar la
botonPiojos.addActionListener(oyente); interface ActionListener.
botonRedondos.addActionListener(oyente); 01100
10011
• El método actionPerformed recibe como parámetro01 un 1100
0011
private class OyenteBoton 10110 objeto de clase ActionEvent. 10110
implements ActionListener{ 01110 01110
01100
• El objeto mantiene información referida a la acción del0 1 1 0 0
public void actionPerformed(ActionEvent e) 1{0 0 1 1 usuario sobre la GUI. 10011
String m; 10110
• Cuando se envía el mensaje getActionCommand al 10 01 11 11 00
m = (String)e.getActionCommand(); 01110
1001 objeto e, el resultado es el comando que corresponde 1a0la0 1
etiqueta.setIcon(new ImageIcon(m+".jpg"));
1 11 acción del usuario. 1 11
} 0 0 0 0
} 1 1
23 24
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.*;
01100 class Bandas_Botones extends JFrame { 01100
10011 /*Objetos Gráficos*/ 10011
10110 10110
01110 private JLabel etiqueta; 01110
01100 private JButton [] boton; 01100
10011 private JPanel panelControl, panelImagen; 10011
10110 10110
01110 01110
1001 1001
1 11 1 11
0 0
Definimos un arreglo de botones, cada elemento del arreglo
0 0
1 mantiene una referencia a un objeto de clase JButton. 1
25 26
EJEMPLO SELECCIONAR
GRUPO DE BOTONES
BANDA CON BOTONES
private class OyenteBoton implements • También es posible agrupar botones de modo que solo
ActionListener { uno esté seleccionado.
public void actionPerformed(ActionEvent e) { • Cada botón es una instancia de la clase JRadioButton.
String m;
• El conjunto de botones se insertan en un objeto de clase
m = (String)e.getActionCommand(); 01100 01100
10011
ButtonGroup. 10011
etiqueta.setIcon(new ImageIcon(m+".jpg"));
}
10110 • Los atributos de instancia de la clase son: el texto, el 10110
01110 01110
} 01100
ícono y el estado. 01100
10011 10011
10110 10110
• La definición de una única clase oyente es especialmente
01110 01110
1001 1001
adecuada cuando un conjunto de botones exhiben el mismo
1 11 1 11
comportamiento. 0 0 0 0
1 1
31 32
EJEMPLO SELECCIONAR
GRUPO DE BOTONES BANDA DE UN GRUPO DE
BOTONES
• Los constructores de un objeto de clase JRadioButton
son:
JRadioButton(String s)
JRadioButton(String s, boolean b)
01100 01100
JRadioButton(Icon i) 10011 10011
10110 10110
JRadioButton(Icon i, boolean b) 01110 01110
JRadioButton(String s, Icon i) 01100 01100
10011 10011
JRadioButton(String s, Icon i, boolean b)
10110 10110
01110 01110
JRadioButton()
1001 1001
1 11 1 11
0 0 0 0
1 1
33 34
EJEMPLO SELECCIONAR
CAJAS DE OPCIONES BANDAS CON CAJA DE
OPCIONES
• Una caja de opciones puede crearse como una instancia
de la clase JComboBox, editable o no editable.
• Una caja de opciones no editable consta de una lista de
valores drop-down y un botón.
01100 01100
• Una caja de opciones editable tiene además un campo 10011 10011
de texto con un pequeño botón. 10110 10110
01110 01110
• El usuario puede elegir una opción de la lista o tipear un
01100 01100
valor en el campo de texto. 10011 10011
• El constructor recibe como parámetro un arreglo de 10 01 11 11 00 10110
01110
objetos de clase String. 1001 1001
1 11 1 11
0 0 0 0
1 1
45 46
EJEMPLO SELECCIONAR
BANDAS CON CAJA DE CAMPOS DE TEXTO
OPCIONES
private void armaPanelImagen(){ • Un objeto de la clase JTextField permite leer o mostrar
panelImagen = new JPanel(); un campo de texto y debe registrarse a un oyente para
etiqueta = new JLabel(); que pueda detectar y reaccionar ante un evento externo.
etiqueta.setIcon(new ImageIcon("piojos.jpg"));
• Algunos constructores provistos por la clase son:
panelImagen.add(etiqueta); 01100 01100
JTextField()
} 10011 10011
10110 JTextField(Document doc, String text, 10110
01110 01110
class OyenteCombo implements ActionListener{ 0 1 1 0 0 int col) 01100
public void actionPerformed(ActionEvent e){1 0 0 1 1 JTextField(int col) 10011
String m = 10110 JTextField(String text) 10110
(String)listaBandas.getSelectedItem(); 01 10 10 11 0 JTextField(String text, int col) 01110
1001
etiqueta.setIcon(new ImageIcon(m +".jpg"));
1 11 1 11
} 0 0 0 0
1 1
}
49 50
• Un panel de diálogo se usa para leer un valor simple y/o • Todo diálogo es dependiente de un frame.
mostrar un mensaje. • Cuando un frame se destruye, también se destruyen los
• Los atributos incluyen uno o más botones. diálogos que dependen de él.
• El mensaje puede ser un error o una advertencia y puede • Un diálogo es modal cuando bloquea la entrada de datos
01100 01100
estar acompañado de una imagen o algún otro elemento.10011 del usuario a través de todas las demás ventanas. 10011
• Para definir un diálogo estandar usamos la clase 10110 • Los cuadros de diálogo creados con JOptionPane son 10110
01110 01110
JOptionPane. 01100
modales. 01100
10011 10011
10110 10110
01110 01110
1001 1001
1 11 1 11
0 0 0 0
1 1
55 56
• Las clases Printing, JColorChooser y • Los atributos de un objeto de clase JOptionPane son:
JFileChooser permiten ofrecer diálogos más ícono, texto del título, texto del mensaje y texto del botón.
específicos. • Podemos utilizar un icono personalizado, no utilizar
• Para crear un diálogo a medida se usa la clase JDialog ninguno, o utilizar uno de los cuatro iconos standard de
01100 JOptionPane (question, information, warning, y error). 01100
directamente. Estos diálogos puede ser no modales. 1 0 0 1 1 10011
10110
• Los servicios provistos por JOptionPane son: 10110
01110 – showMessageDialog 01110
01100 01100
10011 – showInputDialog 10011
10110 – showConfirmDialog 10110
01110 01110
1001 – showOptionDialog 1001
1 11 1 11
0 0 0 0
1 1
57 58
PANELES DE DIÁLOGOS
ícono question. 59 60
APRENDIZAJE AUTÓNOMO