Tema 08

Las interfaces gráficas de usuario
Hasta ahora hemos desarrollado programas que usan la consola

para interactuar con el usuario. Esa forma de interfaz de usuario
es muy simple y nos ha permitido centrarnos en todo aquello
Curso de Java que tiene que ver tan sólo con la programación orientada a
objetos con el lenguaje Java, sin tener que tratar al mismo tiempo
con ventanas, botones y otros elementos similares.
Ahora aprenderemos todo lo que tiene que ver con el desarrollo
de interfaces gráficas de usuario, las interfaces que los programas
Interfaces gráficas
profesionales tienen que ofrecer.
Las interfaces gráficas de usuario (GUI) ofrecen al usuario
de usuario
ventanas, cuadros de diálogo, barras de herramientas, botones,
listas desplegables y muchos otros elementos con los que ya
estamos muy acostumbrados a tratar.
Las aplicaciones son conducidas por eventos y se desarrollan
haciendo uso de las clases que para ello nos ofrece la API de Java.
El lenguaje Java — Tema 8 — Interfaces gráficas de usuario

Luis Hernández Yáñez
Curso de Java Tema 8 – Interfaces gráficas de usuario - 1
Carlos Cervigón Rückauer
La API de Java para desarrollo de GUI Las bibliotecas disponibles
La interfaz de usuario es la parte del programa que permite Cuando apareció Java, los componentes gráficos disponibles para
al usuario interaccionar con él. el desarrollo de GUI se encontraban en una biblioteca conocida
como Abstract Window Toolkit (AWT).
La API de Java proporciona una biblioteca de clases para el
desarrollo de Interfaces gráficas de usuario (en realidad son dos). AWT es adecuada para interfaces gráficas sencillas,
pero no para proyectos más complejos.
La biblioteca proporciona un conjunto de herramientas para
la construcción de interfaces gráficas que tienen Al aparecer Java 2 la biblioteca AWT se reemplazó por otra
una apariencia y se comportan de forma semejante biblioteca más robusta, versátil y flexible: Swing.
en todas las plataformas en las que se ejecuten. Aunque AWT aún sigue estando disponible, e incluso es usada
por los componentes de Swing.
La estructura básica de la biblioteca gira en torno a componentes
y contenedores. Los contenedores contienen componentes y
son componentes a su vez, de forma que los eventos pueden
tratarse tanto en contenedores como en componentes.
La API está constituida por clases, interfaces y derivaciones.
Luis Hernández Yáñez Luis Hernández Yáñez

Curso de Java Tema 8 – Interfaces gráficas de usuario - 2 Curso de Java Tema 8 – Interfaces gráficas de usuario - 3
Carlos Cervigón Rückauer Carlos Cervigón Rückauer
Algunos componentes de AWT Swing
Label
Paquete de Java para la generación del GUI en aplicaciones
Canvas
reales de gran tamaño. Disponible como paquete externo
Frame en Java 1.1 e integrado desde Java 1.2.
Es una de las API de JFC (Java Foundation Classes):
List
AWT, Java 2D, Accessibility, Drag and Drop, Swing, ...
TextArea
Escrito totalmente en Java. No reemplaza a AWT.
Se apoya sobre AWT y añade JComponents.
Utiliza el modelo de eventos de Java 1.1.
Elección entre diferentes aspectos (look & feel).
Arquitectura Model-View-Controller (MVC).
Nuevos componentes (árboles, tablas, frames internos, iconos,
bordes, tooltips, beans, etcétera).
CheckBox
TextField Button

Jerarquía de clases para las GUI Jerarquía de clases para las GUI
Component: superclase de todas las clases de interfaz gráfica.

D im ension Classes in the java.aw t
LayoutM anager package Container: para agrupar componentes.
H eavyw eight
Font 1
JComponent: superclase de todos los componentes de Swing
FontM etrics que se dibujan directamente en los lienzos (canvas).
Sus subclases son los elementos básicos de la GUI.
O bject Color Panel A pplet JA pplet
JFrame: ventana que no está contenida en otras ventanas.
G raphics
JDialog: cuadro de diálogo.
Com ponent Container W indow Fram e JFram e
* JApplet: subclase de Applet para crear applets tipo Swing.
D ialog JD ialog
JPanel: contenedor invisible que mantiene componentes
de interfaz y que se puede anidar, colocándose en otros paneles
JCom ponent Sw ing Com ponents
in the javax.sw ing package o en ventanas. También sirve de lienzo.
Graphics: clase abstracta que proporciona contextos gráficos
Lightw eight
Las clases de AWT reemplazadas por Swing donde dibujar cadenas de texto, líneas y otras formas sencillas.
se llaman igual pero con una J delante.

Jerarquía de clases para las GUI Jerarquía de clases para las GUI: JComponent
. JCheckBoxM enuItem
Color: color de los componentes gráficos.
JM enuItem JM enu
Font: aspecto de los caracteres. AbstractButton JButton JRadioButtonM enuItem
FontMetrics: clase abstracta para propiedades de las fuentes. JToggleButton JCheckBox
JRadioButton
Categorías de clases: JCom ponent JEditorPane
9 Contenedores: JTextCom ponent JTextField JPassw ordField
JFrame, JApplet, JWindow, JDialog JTextA rea
9 Componentes intermedios: JLabel JList JCom boBox JM enuBar JPanel JO ptionPane JScrollBar JScrollPane
JPanel, JScrollPane
JTabbedPane JFileChooser
9 Componentes:
JLabel, JBbutton, JTextField, JTextArea, ... JPopupM enu JSeparator JSlider JRootPane JPane
9 Clases de soporte: JProgressBar JToolBar JSplitPane JTable JTree
Graphics, Color, Font, ... JInternalFram e JToolTip JLayeredPane JTableH eader JColorChooser

Jerarquía de clases para las GUI: AWT Esquema de aplicación en Swing
import javax.swing.*;
A W TEvent Container Panel Applet
Font Button W indow Fram e

public class Gui00 extends JFrame {
// Constantes y componentes (objetos)
FontM etrics Label D ialog FileD ialog
TextField
public Gui00(){
O bject Color TextCom ponent
super("Ejemplo 00");
TextA rea
G raphics List // Configurar Barra Menu ;
// Configurar Layout y Componentes ;
Com ponent Choice // Configurar Manejadores Eventos ;
CheckBox
setSize(200,100);
setVisible(true);
LayoutM anager CheckBoxGroup setDefaultCloseOperation(EXIT_ON_CLOSE);
} // Terminar la aplicación al cerrar la ventana.
Canvas
M enuCom ponent M enuItem M enu public static void main(String args[]){ Método main()
Gui00 ventana = new Gui00();
M enuBar
Scrollbar }
} GUI00.java

Esquema de applet con Swing JFrame
import javax.swing.* Frame o JFrame (Swing) es una ventana que no está contenida en
otra ventana. Suele contener otros componentes.
public class MiApplet0 extends JApplet {
// Constantes y componentes (objetos)

Fram e M enus A pplet M enus
public void init(){ Sustituye Panel
al constructor. Panel Panel
No hay main(). Com ponentes (UI)
// Configurar componentes Com ponentes Com ponentes
// Configurar layout;
// Configurar Manejadores Eventos;
Panel Panel
} Panel
} Com ponenets Com ponentes
Panel Panel Panel
UI UI UI
panel

JFrame Componentes en el JFrame
Para mostrar una ventana en una posición concreta disponemos import java.awt.*;
del método setLocation(x, y) de la clase JFrame.
Cuando se crea un objeto JFrame, se crea un objeto Container
Container panel;
(AWT). El objeto JFrame usa el panel de contenido (Container) JButton miboton;
para albergar los componentes del frame.
public Gui01() {
super("Ejemplo 01 con botón");
// Configurar componentes ;
1. Obtenemos el panel de contenido del frame:
miboton = new JButton("Aceptar");
Container panel = this.getContentPane(); panel = this.getContentPane();
panel.add(miboton);
setSize(200,100);
setVisible(true);
2. Añadimos componentes a dicho panel: setDefaultCloseOperation(EXIT_ON_CLOSE);
}
panel.add(unComponente);
public static void main(String args[]) {
} Gui01.java
}
Administradores de disposición Administradores de disposición
Los componentes se agregan al contenedor con el método add(). Para organizar el contenedor se utiliza el método setLayout():
JButton unBoton = new JButton("Texto del botón"); public void setLayout(LayoutManager mgr)
panel.add(unBoton);
El efecto de add() depende del esquema de colocación o
disposición (layout) del contenedor que se use. Crea una disposición para Tipo de disposición
el contenedor actual (BorderLayout, ...)
Existen diversos esquemas de disposición: FlowLayout,
BorderLayout, GridLayout, ...
setLayout(new BorderLayout());
Los objetos contenedores se apoyan en objetos LayoutManager
(administradores de disposición). setLayout(new FlowLayout());
Clases más usadas que implementa la interfaz LayoutManager:
setLayout(new GridLayout(3,4));
FlowLayout: un componente tras otro de izquierda a derecha.
BorderLayout: 5 regiones en el contenedor (North, South, ...). El layout manager elige la mejor posición y tamaño de cada
GridLayout: contenedor en filas y columnas. componente de acuerdo al espacio disponible.

Organización de contenedores FlowLayout
BorderLayout organiza FlowLayout coloca los import javax.swing.*;

el contenedor en 5 zonas: componentes de izquierda a import java.awt.*;
derecha y de arriba hacia public class Gui02 extends JFrame {
abajo: Container panel;
public Gui02() {
super("Ejemplo de Layout");
// Configurar componentes ; Cambiando el tamaño
panel = this.getContentPane(); se redistribuyen los componentes
// Configurar layout ;
panel.setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20));
for(int i = 1; i <= 10; i++)
panel.add(new JButton("Componente " + i));
setSize(200,200);
setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE);
Para distribuciones más complejas podemos insertar paneles }
(JPanel) en los contenedores y obtener el tamaño de un
componente con el método getSize(). }
} Gui02.java

BorderLayout GridLayout
import javax.swing.*; setLayout(new GridLayout(filas, columnas))

import java.awt.*;
Crea una zona de filas x columnas componentes y éstos
public class Gui03 extends JFrame { se van acomodando de izquierda a derecha y de arriba a abajo.
Container panel;
GridLayout tiene otro constructor que permite establecer
public Gui03() { la separación (en pixels) ente los componentes,
super("Ejemplo de Layout"); que es cero con el primer constructor.
// Configurar componentes:
panel = this.getContentPane(); Así, por ejemplo:
// BorderLayout
new GridLayout(3, 4, 2, 2)
panel.setLayout(new BorderLayout(5, 10));
panel.add(new JButton("1"), BorderLayout.EAST); crea una organización de 3 filas y 4 columnas donde los
panel.add(new JButton("2"), BorderLayout.SOUTH); componentes quedan a dos pixels de separación.
panel.add(new JButton("3"), BorderLayout.WEST);
panel.add(new JButton("4"), BorderLayout.NORTH); Ejemplo:
panel.add(new JButton("5"), BorderLayout.CENTER);
setSize(200,200); setLayout(new GridLayout(3, 4, 2, 2);
setVisible(true); for(int i = 0; i < 3 * 4; i++) {
setDefaultCloseOperation(EXIT_ON_CLOSE); add(new JButton(Integer.toString(i + 1)));
} Gui03.java }
...
GridLayout Paneles como contenedores
import javax.swing.*; Los paneles actúan como pequeños contenedores para agrupar
import java.awt.*; componentes. Colocamos los componentes en paneles y
los paneles en el frame o incluso en otros paneles.
public class Gui03b extends JFrame {
Container panel;
public Gui03b() {
super("Ejemplo de Layout");
// Configurar componentes: fram e
panel = this.getContentPane(); textfield
// GridLayout p2
panel.setLayout(new GridLayout(4, 3, 5, 5)); boton 12
// Add buttons to the frame botones p1
for(int i = 1; i <= 10; i++)
panel.add(new JButton(Integer.toString(i)));
setSize(200,200);
setVisible(true);
}
... Gui03b.java

Paneles como contenedores Paneles como contenedores
// Extraído de "Introduction to Java Programming" // Create panel p2 to hold a text field and p1
// de Y. Daniel Lang (Prentice Hall, 2001) JPanel p2 = new JPanel();
fram e
p2.setLayout(new BorderLayout());
import java.awt.*; textfield p2.add(new JTextField("Aquí el tiempo"),
p2
import javax.swing.*; boton 12
BorderLayout.NORTH);
botones p1 p2.add(p1, BorderLayout.CENTER);
public class Gui04 extends JFrame { // Add p2 and a button to the frame
public Gui04() { container.add(p2, BorderLayout.EAST);
container.add(new Button("Aquí la comida"),
Container container = getContentPane();
BorderLayout.CENTER);
container.setLayout(new BorderLayout());
}
// Create panel p1 for the buttons and set GridLayout
JPanel p1 = new JPanel(); /** Main method */
p1.setLayout(new GridLayout(4, 3)); public static void main(String[] args) {
// Add buttons to the panel Gui04 frame = new Gui04();
for(int i = 1; i <= 9; i++) { frame.setTitle("Horno microondas");
p1.add(new JButton("" + i)); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
} frame.setSize(400, 250);
p1.add(new JButton("" + 0)); frame.setVisible(true);
p1.add(new JButton("Start")); }
p1.add(new JButton("Stop")); ... } Gui04.java

Dibujo de gráficos en paneles Ejemplo de dibujo
JPanel se puede usar para dibujar.
import java.awt.*;
Para dibujar en un panel se crea una clase derivada de JPanel
y se redefine el método paintComponent() que le indica al panel class MiPanel extends JPanel {
public void paintComponent(Graphics g) {
como dibujar.
super.paintComponent(g);
La clase Graphics es una clase abstracta para todos g.drawString("Interfaz gráfica", 40, 40);
los contextos gráficos. }
} Método a redefinir
Una vez obtenido el contexto gráfico podemos llamar desde este
objeto a las funciones gráficas definidas en la clase Graphics. public class Gui05 extends JFrame {
Container panel;
Graphics contiene información acerca de la zona que necesita public Gui05() {
ser redibujada: el objeto donde dibujar, un origen de traslación, super("Ejemplo de dibujo");
el color actual, la fuente actual, etcétera. panel = this.getContentPane();
panel.add(new MiPanel());
setSize(200, 100);
setVisible(true);
}
...
Gui05.java

Dibujo de gráficos en paneles Ejemplo de dibujo
Cuando utilizamos el método paintComponent() para dibujar import java.awt.*;
en un contexto gráfico g, ese contexto es un ejemplar de
una subclase concreta de la clase Graphics para la plataforma class MiPanel extends JPanel {
específica. public void paintComponent(Graphics g) {
Color c = new Color(180, 10, 120); Creación de un color RGB
El método paintComponent() es llamado la primera vez y g.setColor(c);
g.drawString("Dibujar en el panel", 90, 90);
cada vez que es necesario redibujar el componente. g.fillOval(1, 1, 90, 90);
Al hacer super.paintComponent(g) nos aseguramos de que }
}
el área visualizada se limpia antes de volver a dibujar.
class MiPanel extends JPanel { public class Gui06 extends JFrame {
Container panel;
public void paintComponent(Graphics g) { public Gui06(){
super.paintComponent(g); super("Ejemplo de dibujo");
g.drawString("Interfaz gráfica", 40, 40); panel = this.getContentPane();
} panel.add(new MiPanel());
setSize(300, 200);
} setVisible(true);
} Gui06.java
...
Algunos métodos de Graphics Fuentes
Graphics g;
Las fuentes de letras se representan con objetos de la clase
... java.awt.Font que tiene un sólo constructor:
g.setColor(Color.blue);
g.setBackground(Color.red); Font(String nombre, int estilo, int tamaño)
g.drawLine(int x1, int y1, int x2, int y2); En este constructor todos los parámetros tienen un conjunto
g.drawRect(int x, int y, int ancho, int alto); limitado de posiblidades.
g.drawRoundedRect(int x, int y, int ancho, int alto,
int arcWidth, int arcHeight); Nombre Estilo
g.fillRect(int x, int y, int ancho, int alto); "Helvetica" Font.PLAIN
g.fillRoundedRect(int x, int y, int ancho, int alto, "TimesNewRoman" Font.BOLD
int arcWidth, int arcHeight); "Courier" Font.ITALIC
g.drawOval(int x, int y, int ancho, int alto); "Dialog" Font.BOLD + Font.ITALIC
g.fillOval(int x, int y, int ancho, int alto); "DialogInput"
g.drawArc(int x, int y, int ancho, int alto, int ang1, "ZapfDingbats"
int ang2);
g.drwaString(String cadena, int x, int y);
g.setFont(Font f);
...

Ejemplo Interacción con el usuario
import java.awt.*; Al interactuar con la aplicación, el usuario:
class MiPanel extends JPanel { 9 Acciona componentes (ActionEvent).
public void paintComponent(Graphics g) {
g.setFont(new Font("Helvetica", Font.PLAIN, 18)); El usuario pulsa un botón.
g.drawString("Hola", 70, 50);
g.setFont(new Font("TimesRoman", Font.BOLD, 18)); El usuario termina de introducir un texto en un campo y
g.drawString("Hola", 70, 80); presiona Intro.
g.setFont(new Font("DialogInput", Font.ITALIC, 18));
g.drawString("Hola", 70, 110); El usuario selecciona un elemento de una lista pulsando el
} preferido (o de un menú).
}
public class Gui07 extends JFrame { Pulsa o suelta botones del ratón (MouseEvent).
Container panel;
public Gui07() {
9 Minimiza, cierra o manipula una ventana (WindowEvent).
super("Ejemplo de dibujo"); 9 Escribe con el teclado (KeyEvent).
panel = this.getContentPane();
panel.add(new MiPanel()); 9 Descubre porciones de ventanas (PaintEvent).
setSize(200, 200);
setVisible(true);
} ... Gui07.java

Interacción con el usuario Acciones del usuario
Cuando el usuario de un programa o applet mueve el ratón, Acción Objeto origen Tipo de evento
presiona un pulsador o pulsa una tecla, genera un evento Pulsar un botón JButton ActionEvent
(actionEvent). Cambio del texto JTextComponent TextEvent
Pulsar Intro en un campo de texto JTextField ActionEvent
Los eventos son objetos de ciertas clases. Normalmente
un objeto de alguna subclase de EventObject que indica: Selección de un nuevo elemento JCombobox ItemEvent
ActionEvent
9 El elemento que accionó el usuario. Selección de elemento(s) JList ListSelection-
Event
9 La identificación del evento que indica la naturaleza
Pulsar una casilla de verificación JCheckBox ItemEvent
del evento.
ActionEvent
9 La posición del ratón en el momento de la interacción. Pulsar un botón de radio JRadioButton ItemEvent
ActionEvent
9 Teclas adicionales pulsadas por el usuario, como la tecla
Selección de una opción de menú JMenuItem ActionEvent
Control, la tecla de Cambio a mayúsculas, etcétera.
Mover la barra de desplazamiento JScrollBar AdjustmentEvent
Abrir, cerrar, minimizar,
maximizar o cerrar la ventana JWindow WindowEvent
...

Responder a eventos Responder a eventos
public class MiGUI extends JFrame implements ActionListener {

Para que un componente (applet, ventana, ...) responda a los
public void MiGui() { (1)
eventos generados por el usuario sobre ese componente, ...
convertimos el componente en un oyente (listener) de ciertos boton.addActionListener(this); (3)
eventos generados por él o por otros componentes. }
public void actionPerformed(ActionEvent e) { (2)
Convertir un componente en oyente de un tipo de eventos // Código a ejecutar como respuesta al evento ...
consiste en implementar la interfaz correspondiente, codificando }
sus métodos, y agregar el componente a la lista de oyentes }
de ese tipo de eventos.
Por ejemplo, si queremos que la GUI responda a las pulsaciones (1)La ventana (oyente) indica que implementa la interfaz
sobre un botón colocado en la ventana: ActionListener (hay otras para diferentes eventos).
1 La ventana (oyente) ha de implementar la interfaz (2)Se implementa el método ActionPerformed() de la interfaz
ActionListener para responder a un evento e.
2 El método actionPerformed() de dicha interfaz estará (3) Se agrega la ventana (oyente) a la lista de oyentes de eventos
preparado para responder a un evento e. ActionEvent desde el botón.

3 El oyente se añade a la lista de eventos de acción de botón.

Ejemplo Responder a eventos
Al pulsar el botón Copiar, se debe copiar el valor del cuadro "valor" class MiGui extends JFrame implements ActionListener {
en el cuadro "Copia". ...
public void MiGui(){
// Registro los componentes interesados
// en responder a eventos ...
componente.addActionListener(this);
Origen del evento:
}
Botón Copiar
...
public actionPerformed(ActionEvent e) {
Objeto evento: ... // Aquí se responde el evento
ActionEvent e }
}
Objeto oyente:
Este método añade el oyente especificado (frame) a la lista
La ventana
de oyentes para recibir eventos de acción (ActionEvent)
desde este componente.

Responder a eventos Otro modelo para responder a eventos
1. En el constructor del frame (oyente), registro el botón y Creamos un manejador de eventos en dos pasos:
añado el oyente (frame) para recibir eventos de acción Definimos una clase específica que haga de oyente de eventos y
desde el botón. que implemente el método actionPerformed().
botonCopiar.addActionListener(this); class MiOyente implements ActionListener {
La ventana (oyente) public void actionPerformed() {
código ...
2. El usuario pulsa el botón.
3. El botón crea el objeto ActionEvent. Registramos un ejemplar como oyente de componentes:
4. El botón envía el mensaje actionPerformed() al frame, componente.addActionListener(ejemplar_de_MiOyente);
con el argumento ActionEvent.
Cada vez que el componente produzca el evento, se invocará
automáticamente el método actionPerformed().
El código de este método se ejecutará cada vez que se pulse
el botón.

Otro modelo para responder a eventos Ejemplo: botón con pitido (modelo 1)
class MiGui extends JFrame { import javax.swing.*;

import java.awt.*;
... import java.awt.event.*;
public void MiGui() {
// Registro los componentes interesados public class Gui08 extends JFrame implements ActionListener {
// en responder a eventos ... JButton boton;
Container panel;
componente.addActionListener(new MiOyente());
} public Gui08() {
... super("Ejemplo de eventos");
class MiOyente implements ActionListener { boton = new JButton("Pulsa!");
public actionPerformed(ActionEvent e) { panel.add(boton);
... // Aqui se responde el evento boton.addActionListener(this);
setSize(100, 100);
}
setVisible(true);
} setDefaultCloseOperation(EXIT_ON_CLOSE);
}
Se añade el oyente especificado (ejemplar de MiOyente)
a la lista de oyentes para recibir eventos de acción public void actionPerformed(ActionEvent e) {
(ActionEvent) desde ese componente. Toolkit.getDefaultToolkit().beep();
}
... Gui08.java

Ejemplo: botón con pitido (modelo 2) Ejemplo: reproducir un valor
import javax.swing.*; import javax.swing.*;

import java.awt.*; import java.awt.*;
import java.awt.event.*; import java.awt.event.*;
JButton boton; public class Gui10 extends JFrame {
Container panel; Container panel;
public Gui09() { JButton botonCopiar;
panel = this.getContentPane(); JTextField campoValor, resultado;
boton = new JButton("Pulsa!");
panel.add(boton); public Gui10() {
boton.addActionListener(new OyenteBoton()); panel = getContentPane();
setSize(100, 100); panel.setLayout(new FlowLayout());
setVisible(true);
panel.add(new JLabel("Valor "));
} campoValor = new JTextField(5);
panel.add(campoValor);
... Una clase
} botonCopiar = new JButton("Copiar");
de oyente
panel.add(botonCopiar);
class OyenteBoton implements ActionListener { específica
botonCopiar.addActionListener(new OyenteBoton());
public void actionPerformed(ActionEvent e) {
Toolkit.getDefaultToolkit().beep(); panel.add(new JLabel(" Copia "));
} resultado = new JTextField(6);
Gui09.java ...
}
Ejemplo: reproducir un valor Ejemplo: contador de pulsaciones
setSize(400, 100);
Una aplicación que muestre el número de pulsaciones que se
setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE); realizan sobre su botón.
} public class Gui11 extends JFrame {
...
public static void main(String args[]) { public Gui11() {
Gui10 ventana = new Gui10(); boton1 = new JButton("PULSA");
} label1 = new JLabel("Pulsaciones: 0");
panel = getContentPane();
class OyenteBoton implements ActionListener { panel.add(boton1);
public void actionPerformed(ActionEvent e){ panel.add(label1);
String valor = campoValor.getText(); panel.setLayout(new FlowLayout());
resultado.setText(valor); boton1.addActionListener(new OyenteBotonPulsaciones());
} ...
} }
} ...
class OyenteBotonPulsaciones implements ActionListener {
public void actionPerformed(ActionEvent e){
contador++;
Gui10.java label1.setText("Pulsaciones: " + contador); Gui11.java
} ...
Ejemplo: cambio de color Ejemplo: cambio de color
import java.awt.*;
import java.awt.event.*;
}
class ColorActionListener implements ActionListener {
JButton red = new JButton("Rojo");
Color fondo;
JButton blue = new JButton("Azul");
public ColorActionListener(Color unColor) {
Container panel;
fondo = unColor;
}
public Gui12() {
public void actionPerformed(ActionEvent evento) {
super("Color de fondo");
panel.setBackground(fondo);
panel = getContentPane();
}
panel.setLayout(new FlowLayout());
}
panel.add(red);
}
panel.add(blue);
red.addActionListener(new ColorActionListener(Color.red));
blue.addActionListener(new ColorActionListener(Color.blue));
setSize(200, 200);
setVisible(true);
}
... Gui12.java

ActionEvent ActionEvent
El objeto ActionEvent ofrece un método getActionCommand() El método getSource() indica el objeto en el que se ha
que devuelve un objeto con la información sobre el origen originado el evento:
del evento (el botón en nuestro caso).
Con un botón, devuelve la etiqueta del botón. public void actionPerformed(ActionEvent e) {
if(e.getSource() == lista) {
Para identificar botones individuales: campo1.setText("En la lista.");
}
else if(e.getSource() == texto) {
public void actionPerformed(ActionEvent e) { campo2.setText("En el campo de texto.");
String s = (String)e.getActionCommand(); }
if(s.equals("Aceptar")) { else if(e.getSource() == boton) {
// Tratamiento del botón Aceptar campo3.setText("En el botón.");
}
}
... }

Un conversor Euros-Pesetas Un conversor Euros-Pesetas
import javax.swing.*; setVisible(true);

import java.awt.*; setDefaultCloseOperation(EXIT_ON_CLOSE);
import java.awt.event.*; }
public class Gui13 extends JFrame { public static void main(String args[]) {
Container panel; Gui13 ventana = new Gui13();
TextField cantidad; }
JButton boton1, boton2;
class OyenteBoton implements ActionListener {
public Gui13(){ public void actionPerformed(ActionEvent ae) {
super("Conversor Euros-Pesetas"); Float f = new Float(cantidad.getText());
boton1 = new JButton("A euros"); float valor = f.floatValue();
boton2 = new JButton("A pesetas"); String s = (String)ae.getActionCommand();
cantidad = new TextField(10); if(s.equals("A euros")) {
panel = this.getContentPane(); valor = (float) (valor / 166.321);
JLabel eti2 = new JLabel(new ImageIcon("logo.gif")); panel.setBackground(Color.green);
panel.add(eti2); }
panel.add(cantidad); else if(s.equals("A pesetas")) {
panel.add(boton1); valor = (float) (valor * 166.321);
panel.add(boton2); panel.setBackground(Color.blue);
panel.setLayout(new FlowLayout()); }
boton1.addActionListener(new OyenteBoton()); cantidad.setText(Float.toString(valor));
boton2.addActionListener(new OyenteBoton()); }
setSize(300, 250); }
... }
Gui13.java

Interfaces para procesar eventos Componentes (JavaBeans): JButton
Para facilitar la tarea del programador se han creado una serie de Constructores:
interfaces que deben implementarse cuando se quieren procesar
algunos de estos eventos. Algunas interfaces y sus métodos son: JButton(String text)
JButton(String text, Icon icon)
JButton(Icon icon)
ActionListener actionPerformed(ActionEvent)
Escucha eventos de tipo ActionEvent Respuesta a botones:
KeyListener keyPressed(KeyEvent) 9 Implementar la interfaz ActionListener

Escucha eventos de teclado keyReleased(KeyEvent)
9 Implementar el método actionPerformed(ActionEvent e)
keyTyped(KeyEvent)
MouseListener mouseClicked(MouseEvent) public void actionPerformed(ActionEvent e) {

Escucha eventos de acción del ratón mouseEntered(MouseEvent) // Obtenemos la etiqueta
(botones) mouseExited(MouseEvent) String actionCommand = e.getActionCommand();
mousePressed(MouseEvent)
mouseReleased(MouseEvent) if(e.getSource() instanceof JButton)
if("Aceptar".equals(actionCommand))
MouseMotionListener mouseDragged(MouseEvent) System.out.println("Pulsó Aceptar");
Escucha eventos de movimiento del ratón mouseMoved(MouseEvent)
}

Ejemplos Componentes (JavaBeans): JLabel
boton1 = new JButton("A Euros "); Para texto, una imagen o ambos:
boton1.setIcon(new ImageIcon("flag1.gif")); JLabel(String text,
int horizontalAlignment)
JLabel(String text)
JLabel(Icon icon)
boton2 = new JButton(new ImageIcon("flag2.gif")); JLabel(Icon icon,
int horizontalAlignment)
boton3 = new JButton("Botón",new ImageIcon("flag8.gif"));

eti1 = new JLabel("Etiqueta de texto...");
eti2 = new JLabel(new ImageIcon("flag8.gif"));
Gui14.java

Componentes (JavaBeans): JTextField Componentes (JavaBeans): JComboBox
Campos de texto para introducir caracteres: Listas de elementos para seleccionar un solo valor:
JTextField(int columns) Creación: JComboBox ch1 = new JComboBox();
JTextField(String text) Agregar opciones: ch1.addItem(Object elemento);
JTextField(String text, int columns) Registrar Evento: ch1.addItemListener( objeto);
JTextField text1 = new JTextField("hola", 10); Obtener selección: val = ch1.getSelectedIndex();
ch1.getItem()
Poner texto: text1.setText("Adios"); Implementar la interfaz ItemListener
Obtener texto: String str = text1.getText(); Implementar el método itemStateChanged(ItemEvent e)
Agregar al Panel: p1.add(text1); ch1.addItemListener(new OyenteItem());
. . .
class OyenteItem implements ItemListener {
public void itemStateChanged(ItemEvent e) {
...
}}
Componentes (JavaBeans): JList Componentes (JavaBeans): JList
Listas de elementos para seleccionar uno o varios valores: Implementar la interfaz ListSelectionListenner
JList l1 = new JList(); Implementar el método valueChanged(ListSelectionEvent e)
JList l2 = new JList(Object[] elements);

l.addListSelectionListener(new OyenteLista());
...
String[] cosas = {"Opción 1", "Opción 2", "Opción 3"};
Jlist l2 = new Jlist(cosas); class OyenteLista implements ListSelectionListener {
public void valueChanged(ListSelectionEvent e) {
int[] indices = l.getSelectedIndices();
Registrar evento: l2.addListSelectionListener(oyente); int i;
for(i = 0; i < indices.length; i++) {
...
Obtener selección: }
int[] indices = l2.getSelectedIndices(); }
}

Componentes (JavaBeans): JScrollBar Componentes: JScrollBar y JComboBox
Creación: public class Gui15 extends JFrame {

Container panel;
bar1 = new Scrollbar(Scrollbar.HORIZONTAL,0,0,0,100);
JPanel p1, p2;
Registrar evento: JLabel l1, msg;
JComboBox ch1;
bar1.addAdjustmentListener(oyente); String[] lista = {"Opción 1", "Opción 2", "Opción 3"};
JScrollBar bar1;
Implementar la interfaz AdjustmentListener
Implementar el método public Gui15() {
adjustmentValueChanged(AdjustmentEvent e) super("Controles");
bar1.addAdjustmentListener(new OyenteBarra()); panel.setLayout(new BorderLayout());
... p1 = new JPanel(new GridLayout(1, 3, 10, 10));
class OyenteBarra implements AdjustmentListener { p1.setBackground(Color.lightGray);
public void adjustmentValueChanged(AdjustmentEvent e) { l1 = new JLabel("Elegir:", Label.RIGHT);
... } l1.setBackground(Color.yellow);
} p1.add(l1);
ch1 = new JComboBox();
Obtener valor: for(int i = 0; i < lista.length; i++)
int val = bar1.getValue(); // val entre 0 y 100 ch1.addItem(lista[i]); ...

Componentes: JScrollBar y JComboBox Componentes: JScrollBar y JComboBox
ch1.addItemListener(new OyenteCombo()); public static void main(String args[]) {

p1.add(ch1); Gui15 ventana = new Gui15();
bar1 = new JScrollBar(Scrollbar.HORIZONTAL, 0, 0, 0, 100); }
/* scroll de 0 a 100*/
bar1.addAdjustmentListener(new OyenteBarra()); class OyenteCombo implements ItemListener {
p1.add(bar1); public void itemStateChanged(ItemEvent e) {
p2 = new JPanel(new BorderLayout()); int ind = ch1.getSelectedIndex();
p2.setBackground(Color.lightGray); msg.setText((String)ch1.getSelectedItem());
msg = new JLabel("Msg:", Label.LEFT); }
msg.setForeground(Color.blue); }
p2.add("North", msg);
panel.add(p1, "North"); class OyenteBarra implements AdjustmentListener {
panel.add(p2, "South"); public void adjustmentValueChanged(AdjustmentEvent e) {
setSize(300, 100); int valor = bar1.getValue();
setVisible(true); String cad = "Valor : " + valor;
setDefaultCloseOperation(EXIT_ON_CLOSE); msg.setText(cad);
} }
}
} Gui15.java
...

Movimientos de ratón Pulsaciones de ratón

JButton boton; class OyenteRaton implements MouseListener {
List lista; public void mouseClicked(MouseEvent e) {
Container panel; lista.add("click..");
}
public Gui17() { public void mouseEntered(MouseEvent e) {
...
lista.add("enter..");
this.addMouseMotionListener(new OyenteMover());
... }
} public void mouseExited(MouseEvent e) {
... lista.add("exit..");
}
class OyenteMover implements MouseMotionListener { public void mousePressed(MouseEvent e) {
public void mouseDragged(MouseEvent e) { lista.add("pulsar..");
lista.add("arrastrando.."); }
}
public void mouseReleased(MouseEvent e) {
public void mouseMoved(MouseEvent e) {
lista.add("moviendo.."); lista.add("soltar..");
} }
} }
}
Gui17.java

Jerarquía de componentes (repaso) Contenedores
Graphics (java.awt)
Contenedores de alto nivel:
Component (funcionalidad básica de componentes gráficos)
Button, Canvas, CheckBox, Choice, Label, List, ScrollBar JFrame
TextComponent Habitualmente la clase JFrame se emplea para crear
TextField, TextArea la ventana principal de una aplicación en Swing.
Container (permite agrupar, añadir y eliminar componentes)
JDialog
(también definir diseño o disposición (layout managers))
Ventanas de interacción con el usuario.
ScrollPane
Panel
Applet (java.applet)
JApplet (javax.swing)
Contenedores intermedios:
Window JPanel
Frame Agrupa a otros componentes.
JFrame (javax.swing)
Dialog JScrollPanel
FileDialog Incluye barras de desplazamiento.
JDialog (javax.swing)
JWindow (javax.swing)
JComponent (javax.swing)

Ejemplo de cuadro de mensaje Ejemplo de cuadro de opciones
public class Gui18 extends JFrame { public class Gui19 extends JFrame {
Container p; Container p;
public Gui18() { public Gui19() {
super("Título de la ventana"); super("Título de la ventana");
p = getContentPane(); p = getContentPane();
p.setLayout(new FlowLayout()); p.setLayout(new FlowLayout());
setSize(200, 100); // pack(); setSize(200, 100);
setVisible(true); // show(); setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE); setDefaultCloseOperation(EXIT_ON_CLOSE);
// if ocurre algo Object[] textoOpciones = {"Si adelante", "Ahora no", "No
JOptionPane.showMessageDialog(null, sé"};
"Debe introducir datos en todos los campos", int opcion = JOptionPane.showOptionDialog(null,
"Error de entrada ", "¿Desea continuar?", "mensaje",
JOptionPane.ERROR_MESSAGE); JOptionPane.YES_NO_CANCEL_OPTION,
} JOptionPane.QUESTION_MESSAGE, null, textoOpciones,
public static void main(String[] args) { textoOpciones[0]);
Gui18 f = new Gui18(); }
}
} Gui18.java ... Gui19.java

Ejemplo de cuadro de entrada de datos Ejemplo de cuadro de entrada de datos
class PanelDatos extends JPanel {

public PanelDatos() {
setLayout(new GridLayout(4, 2));
JLabel etiquetaNombre = new JLabel("Nombre: ", JLabel.RIGHT);
JTextField campoNombre = new JTextField(); public class Gui20 extends JFrame {
add(etiquetaNombre); Container p;
add(campoNombre); public Gui20() {
JLabel etiquetaApellidos = new JLabel("Apellidos:", JLabel.RIGHT); super("Título de la ventana");
JTextField campoApellidos = new JTextField(); p = getContentPane();
add(etiquetaApellidos); p.setLayout(new FlowLayout());
add(campoApellidos); // Cuando necesitamos el cuadro de diálogo...
JLabel etiquetaNP = new JLabel("Número Personal:", JLabel.RIGHT); PanelDatos pd = new PanelDatos();
JTextField campoNP = new JTextField(); if(JOptionPane.showConfirmDialog(this, pd, "Introduzca datos",
add(etiquetaNP); JOptionPane.OK_CANCEL_OPTION, JOptionPane.PLAIN_MESSAGE)
add(campoNP); == JOptionPane.OK_OPTION) {
ButtonGroup grupoBotones = new ButtonGroup(); // ... tratamiento
JRadioButton mañana = new JRadioButton("Grupo Mañana", true); }
JRadioButton tarde = new JRadioButton("Grupo Tarde"); }
grupoBotones.add(mañana);
grupoBotones.add(tarde); public static void main(String[] args) {
add(mañana); Gui20 f = new Gui20();
add(tarde); }
} }
}
Gui20.java

Menús Menús
Java ofrece varias clases para poner menús en una ventana: Una ventana (frame) sólo puede tener una barra de menús
(objeto MenuBar), que se sitúa en la parte de arriba del mismo.
JMenuBar
JMenu
JMenuItem Los submenús son botones JMenu.
JCheckBoxMenuItem
JRadioButtonMenuItem
Un JFrame o JApplet puede guardar un barra de menú donde Los elementos de los menús son botones JMenuItem.
se cuelgan menús desplegables.
Los menús tienen elementos de menú que puede seleccionar Cuando se activa un menú se despliegan automáticamente
el usuario. las opciones del menú.
Las barras de menús se pueden contemplar como una estructura
que soporta menús.

Menús Ejemplo de menú

Ejemplo de menú Ejemplo de menú
JMenuBar barraMenu = new JMenuBar(); // Establecemos oyentes para las opciones elegibles:
setJMenuBar(barraMenu); // La barra de menús de este frame listar.addActionListener(new OyenteMenu());
// El menú: opcionSubmenu.addActionListener(new OyenteMenu());
JMenu menuOpciones = new JMenu("Menú de opciones"); ...
barraMenu.add(menuOpciones); // Añadimos el menú a la barra
// Un elemento de menú:
JMenuItem listar = new JMenuItem("Listar los alumnos"); class OyenteMenu implements ActionListener {
menuOpciones.add(listar); // Añadimos el elemento al menú public void actionPerformed(ActionEvent e) {
// Inserción de una línea separadora en el menú: String actionCommand = e.getActionCommand();
menuOpciones.add(new JSeparator()); if(e.getSource() instanceof JMenuItem) {
// Un menú que será un submenú del anterior: if("Listar los alumnos".equals(actionCommand)) {
JMenu subMenu = new JMenu("Submenú"); texto.setText("Listar los alumnos");
// Un elemento de menú para el submenú: }
JMenuItem opcionSubmenu = new JMenuItem("Opción de submenú"); if("Opción de submenú".equals(actionCommand)) {
subMenu.add(opcionSubmenu); // La añadimos al submenú texto.setText("Opción de submenú");
// Añadimos el submenú como elemento del menú: }
menuOpciones.add(subMenu); }
}
}
Gui21.java

Otro ejemplo Otro ejemplo
import java.awt.*;
Aplicación que permite realizar operaciones aritméticas. import java.awt.event.*;
La interfaz contiene etiquetas y campos de texto para los import javax.swing.*;
operandos y el resultado. La operación se selecciona en el menú:
Container panel;
JTextField jtfNum1, jtfNum2, jtfResult;
JMenuItem jmiSuma, jmiResta, jmiMul, jmiDiv, jmiCerrar;
public Gui22() {
super("Menús");
JMenuBar jmb = new JMenuBar();
setJMenuBar(jmb);
JMenu operationMenu = new JMenu("Operación");
operationMenu.setMnemonic('O'); // Letra distinguida
jmb.add(operationMenu);
operationMenu.add(jmiSuma = new JMenuItem("Suma", 'S'));
operationMenu.add(jmiResta = new JMenuItem("Resta", 'R'));
operationMenu.add(jmiMul = new JMenuItem("Multiplica",'M'));
operationMenu.add(jmiDiv = new JMenuItem("Divide", 'D'));
...
Otro ejemplo Otro ejemplo
JMenu exitMenu = new JMenu("Salir"); public static void main(String args[]) {

jmb.add(exitMenu); Gui22 ventana = new Gui22();
exitMenu.add(jmiCerrar = new JMenuItem("Cerrar", 'C')); ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel p1 = new JPanel(); ventana.pack();
p1.setLayout(new FlowLayout()); ventana.setVisible(true);
p1.add(new JLabel("Número 1")); }
p1.add(jtfNum1 = new JTextField(3));
p1.add(new JLabel("Número 2")); private void calculate(char operator) {
p1.add(jtfNum2 = new JTextField(3)); int num1 = (Integer.parseInt(jtfNum1.getText().trim()));
p1.add(new JLabel("Resultado")); int num2 = (Integer.parseInt(jtfNum2.getText().trim()));
p1.add(jtfResult = new JTextField(4)); int result = 0;
jtfResult.setEditable(false); switch (operator) {
getContentPane().setLayout(new BorderLayout()); case '+': result = num1 + num2; break;
getContentPane().add(p1, BorderLayout.CENTER); case '-': result = num1 - num2; break;
// Registramos oyentes case '*': result = num1 * num2; break;
jmiSuma.addActionListener(new OyenteMenu()); case '/': result = num1 / num2;
jmiResta.addActionListener(new OyenteMenu()); }
jmiMul.addActionListener(new OyenteMenu()); jtfResult.setText(String.valueOf(result));
jmiDiv.addActionListener(new OyenteMenu()); }
jmiCerrar.addActionListener(new OyenteMenu());
} ... ...
Otro ejemplo Arquitectura MVC (Modelo-Vista-Controlador)
class OyenteMenu implements ActionListener { La arquitectura MVC es una arquitectura típica de diseño de GUI.
public void actionPerformed(ActionEvent e) {
String actionCommand = e.getActionCommand(); 9 El modelo representa la estructura lógica de la GUI,
if(e.getSource() instanceof JMenuItem) { independientemente de su representación visual.
if("Suma".equals(actionCommand)) calculate('+');
else if("Resta".equals(actionCommand)) calculate('-'); 9 La vista constituye la representación visual de la GUI.
else 9 El controlador constituye la lógica de interacción con el usuario.
if("Multiplica".equals(actionCommand)) calculate('*');
else if("Divide".equals(actionCommand)) calculate('/'); Un primer paso hacia esta arquitectura consiste en la separación
else if("Cerrar".equals(actionCommand)) System.exit(0); entre la aplicación y la interfaz o vista:
}
} public static void main(String args[]) {
} Aplicación aplicación = new Aplicación();
} GUI gui = new GUI(aplicación); }
Aunque el mejor modelo separa en las tres partes:
Modelo modelo = new Modelo();
Controlador controlador = new Controlador(modelo);
Gui22.java GUI gui = new GUI(controlador); }


Tema 08

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tema 08

Enviado por

Direitos autorais:

Formatos disponíveis

Las interfaces gráficas de usuario

Hasta ahora hemos desarrollado programas que usan la consola

El lenguaje Java — Tema 8 — Interfaces gráficas de usuario

La API de Java para desarrollo de GUI Las bibliotecas disponibles

Luis Hernández Yáñez Luis Hernández Yáñez

Luis Hernández Yáñez Luis Hernández Yáñez

Component: superclase de todas las clases de interfaz gráfica.

Luis Hernández Yáñez Luis Hernández Yáñez

Font: aspecto de los caracteres. AbstractButton JButton JRadioButtonM enuItem

FontMetrics: clase abstracta para propiedades de las fuentes. JToggleButton JCheckBox

9 Contenedores: JTextCom ponent JTextField JPassw ordField

JFrame, JApplet, JWindow, JDialog JTextA rea

9 Clases de soporte: JProgressBar JToolBar JSplitPane JTable JTree

Luis Hernández Yáñez Luis Hernández Yáñez

Jerarquía de clases para las GUI: AWT Esquema de aplicación en Swing

Font Button W indow Fram e

Luis Hernández Yáñez Luis Hernández Yáñez

// Constantes y componentes (objetos)

Luis Hernández Yáñez Luis Hernández Yáñez

JFrame Componentes en el JFrame

Luis Hernández Yáñez Luis Hernández Yáñez

Organización de contenedores FlowLayout

BorderLayout organiza FlowLayout coloca los import javax.swing.*;

Luis Hernández Yáñez Luis Hernández Yáñez

import javax.swing.*; setLayout(new GridLayout(filas, columnas))

GridLayout Paneles como contenedores

Luis Hernández Yáñez Luis Hernández Yáñez

Luis Hernández Yáñez Luis Hernández Yáñez

Dibujo de gráficos en paneles Ejemplo de dibujo

Luis Hernández Yáñez Luis Hernández Yáñez

Algunos métodos de Graphics Fuentes

Luis Hernández Yáñez Luis Hernández Yáñez

Luis Hernández Yáñez Luis Hernández Yáñez

Interacción con el usuario Acciones del usuario

Luis Hernández Yáñez Luis Hernández Yáñez

public class MiGUI extends JFrame implements ActionListener {

preparado para responder a un evento e. ActionEvent desde el botón.

Luis Hernández Yáñez Luis Hernández Yáñez

Ejemplo Responder a eventos

Luis Hernández Yáñez Luis Hernández Yáñez

Luis Hernández Yáñez Luis Hernández Yáñez

class MiGui extends JFrame { import javax.swing.*;

Luis Hernández Yáñez Luis Hernández Yáñez

import javax.swing.*; import javax.swing.*;

Ejemplo: reproducir un valor Ejemplo: contador de pulsaciones

Luis Hernández Yáñez Luis Hernández Yáñez

Luis Hernández Yáñez Luis Hernández Yáñez

import javax.swing.*; setVisible(true);

Luis Hernández Yáñez Luis Hernández Yáñez

Interfaces para procesar eventos Componentes (JavaBeans): JButton

KeyListener keyPressed(KeyEvent) 9 Implementar la interfaz ActionListener

MouseListener mouseClicked(MouseEvent) public void actionPerformed(ActionEvent e) {

Luis Hernández Yáñez Luis Hernández Yáñez

boton3 = new JButton("Botón",new ImageIcon("flag8.gif"));

Luis Hernández Yáñez Luis Hernández Yáñez

Componentes (JavaBeans): JTextField Componentes (JavaBeans): JComboBox

JList l1 = new JList(); Implementar el método valueChanged(ListSelectionEvent e)

JList l2 = new JList(Object[] elements);

Luis Hernández Yáñez Luis Hernández Yáñez

Componentes (JavaBeans): JScrollBar Componentes: JScrollBar y JComboBox

Creación: public class Gui15 extends JFrame {

Luis Hernández Yáñez Luis Hernández Yáñez

ch1.addItemListener(new OyenteCombo()); public static void main(String args[]) {

import javax.swing.; import javax.swing.;