Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 1
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
INTRODUCCIÓN A LA PROGRAMACIÓN
ORIENTADA A OBJETOS
GUI
Botones y oyentes
Dr. Luciano H. Tamargo
http://cs.uns.edu.ar/~lt
Depto. de Ciencias e Ingeniería de la Computación
Universidad Nacional del Sur, Bahía Blanca
2019
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
2
TEMARIO
• Repaso.
• Construcción de una GUI.
• Paquetes gráficos.
• Ventanas y frames.
• Organizador de diagramado.
• Paneles.
• Botones.
• Caso de estudio: Elegir bebida.
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 2
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Una interface gráfica de usuario (GUI) es un medio que permite que una
persona se comunique y controle un sistema a través de ventanas, botones,
menúes, etc.
• Una GUI se construye a partir de una colección de componentes con una
representación gráfica y capacidad para percibir eventos generados por las
acciones del usuario.
3
REPASO
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
REPASO
• La construcción de una GUI está fuertemente relacionada con los conceptos de:
– Encapsulamiento
– Herencia
– Polimorfismo
• Y con los criterios de:
– Reusabilidad
– Extensibilidad
4
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 3
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
5
TEMARIO
• Repaso.
• Construcción de una GUI.
• Paquetes gráficos.
• Ventanas y frames.
• Organizador de diagramado.
• Paneles.
• Botones.
• Caso de estudio: Elegir bebida.
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
CONSTRUCCIÓN DE UNA GUI
• Diseñar la interfaz de acuerdo a las especificaciones.
• Implementar la interfaz usando las facilidades provistas por el lenguaje.
6
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 4
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
DISEÑO DE UNA GUI
• Definir las componentes.
• Definir el diagramado de las componentes contenedoras.
• Decidir cómo reacciona cada componente ante las acciones realizadas por el
usuario.
7
• En esta materia no vamos a diseñar GUIs, solo implementar de acuerdo a un
diseño dado.
• En el laboratorio (optativo y obligatorio) vamos a completar implementaciones
parciales, de acuerdo a las consignas establecidas en el enunciado.
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
IMPLEMENTACIÓN DE UNA GUI
• Crear un objeto gráfico para cada componente de la GUI e insertarlo en otras
componentes contenedoras.
• Establecer los valores de los atributos de los objetos gráficos.
• Definir el comportamiento de las componentes reactivas en respuesta a las
acciones del usuario.
8
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 5
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
OBJETOS GRÁFICOS Y CLASES
GRÁFICAS
• Un objeto gráfico es una instancia de una clase gráfica.
• Una clase gráfica define algunos atributos gráficos y brinda servicios gráficos.
• Una clase gráfica puede usarse para:
– Crear objetos gráficos asociados a las componentes de la interfaz.
– Definir clases más específicas a partir de las cuales se crearán componentes.
9
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
10
TEMARIO
• Repaso.
• Construcción de una GUI.
• Paquetes gráficos.
• Ventanas y frames.
• Organizador de diagramado.
• Paneles.
• Botones.
• Caso de estudio: Elegir bebida.
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 6
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Usaremos clases gráficas provistas por los paquetes AWT (Abstract Window
Toolkit) o Swing o alguna derivada de una de ellas.
• AWT y Swing son entonces paquetes que facilitan la construcción de interfaces
gráficas.
• Ambos brindan una colección de clases que permiten crear botones, cajas de
texto, menúes, etc.
• Una de las ventajas de Swing sobre AWT es que permite desarrollar aplicaciones
con una apariencia similar a la de la plataforma subyacente con muy poco
esfuerzo.
• Swing no reemplaza a AWT sino que lo usa y agrega nuevas clases.
11
PAQUETES GRÁFICOS
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1• En esta jerarquía la relación entre una clase derivada y una clase base no
siempre es de tipo is-a.
12
PAQUETES GRÁFICOS
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 7
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
javax.swing
java.lang.Object
java.awt.Component
java.awt.Container
java.awt.Window
java.awt.Frame
javax.swing.JFrame
• La clase Frame agrega a la clase Window el marco, la línea de título y los
botones
• La clase JFrame agrega a Frame el panel de contenido donde se insertan las
componentes.
13
EL PAQUETE SWING
La clase JFrame
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
14
TEMARIO
• Repaso.
• Construcción de una GUI.
• Paquetes gráficos.
• Ventanas y frames.
• Organizador de diagramado.
• Paneles.
• Botones.
• Caso de estudio: Elegir bebida.
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 8
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Un frame es un tipo especial de ventana sobre el que se ejecuta una aplicación.
• Toda instancia de JFrame tiene atributos marco, barra de título, algunos
botones y un panel de contenido.
• La clase JFrame brinda servicios para modificar los valores de los atributos.
15
VENTANAS Y FRAMES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
16
VENTANAS Y FRAMES
import java.awt.*;
class UnaVentana{
public static void main(String args[]){
MiVentanaColor f = new
MiVentanaColor(“Una ventana”,Color.BLUE);
f.setVisible(true);
}
}
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 9
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
17
VENTANAS Y FRAMES
import java.awt.*;
import javax.swing.*;
class MiVentanaColor extends JFrame{
JLabel etiqueta;
public MiVentanaColor(String titulo, Color col){
super(titulo);
setSize(400,300);
getContentPane().setBackground(col);
etiqueta = new JLabel("Panel de contenido");
getContentPane().add(etiqueta);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
}
La clase MiVentanaColor hereda los atributos y servicios provistos por la clase
JFrame.
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Invoca al constructor de JFrame con el texto para la barra de título.
• Establece el tamaño del frame.
• Establece el color del panel de contenido del frame.
• Crea una etiqueta estableciendo su texto.
• Recupera el panel de contenido del frame e inserta en su interior la etiqueta.
• Determina que la aplicación termine cuando el usuario cierre la ventana.
18
VENTANAS Y FRAMES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 10
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
19
VENTANAS Y FRAMES
import java.awt.*;
class DosVentanas {
public static void main(String args[ ]) {
MiVentanaColor f1= new
MiVentanaColor(“Una ventana”, Color.BLUE);
f1.setVisible(true);
MiVentanaColor f2= new
MiVentanaColor(“Otra ventana”, Color.RED);
f2.setVisible(true);
}
}
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• La GUI tiene varias componentes gráficas, cada una asociada a un objeto
gráfico.
• En la definición de la clase MiVentanaColor se crea una etiqueta y se agrega
al panel de contenido.
• La etiqueta es un atributo declarado en la clase MiVentanaColor, el panel de
contenido es un atributo heredado de JFrame o una clase ancestro de JFrame.
• Ambos objetos son pasivos, no reaccionan ante las acciones del usuario.
20
VENTANAS Y FRAMES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 11
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• La GUI incluye objetos reactivos, su comportamiento está establecido por las
clases provistas por Swing y AWT.
• Por ejemplo, la barra de título cuando arrastramos el mouse o los botones para
minimizar, maximizar y cerrar.
21
VENTANAS Y FRAMES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
22
TEMARIO
• Repaso.
• Construcción de una GUI.
• Paquetes gráficos.
• Ventanas y frames.
• Organizador de diagramado.
• Paneles.
• Botones.
• Caso de estudio: Elegir bebida.
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 12
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• El organizador de diagramado es un atributo de todos los objetos gráficos
contenedores que determina como se distribuyen las componentes contenidas.
• Algunas de las clases provistas para crear organizadores son BorderLayout,
FlowLayout, GridLayout.
• En la clase práctica y en la clase de laboratorio trabajarán con distintos
diagramados.
• En el parcial no van a tener que establecer el diagramado, solo reconocer las
instrucciones que organizan a los objetos contenedores.
23
ORGANIZADOR DE
DIAGRAMADO
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• FlowLayout: Distribuye los componentes uno al lado del otro comenzando en
la parte superior.
• BorderLayout: Divide el contenedor en cinco regiones: NORTH, SOUTH,
EAST, WEST y CENTER, admite un único componente por región.
• GridLayout: Divide el contenedor en una grilla de n filas por m columnas, con
todas las celdas de igual tamaño.
24
ORGANIZADOR DE
DIAGRAMADO
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 13
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
25
TEMARIO
• Repaso.
• Construcción de una GUI.
• Paquetes gráficos.
• Ventanas y frames.
• Organizador de diagramado.
• Paneles.
• Botones.
• Caso de estudio: Elegir bebida.
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Un panel es un área sobre la que trabaja el usuario o se colocan otras
componentes.
• Nosotros solo usaremos paneles como contenedores de otros paneles u otro tipo
de componentes.
• Para definir un panel creamos un objeto de la clase JPanel.
• El principal atributo de un panel es el organizador de diagramado que permite
especificar como se distribuyen las componentes en su interior.
26
PANELES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 14
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Los paneles van a quedar organizados de manera jerárquica.
• Esto es, el panel de contenido contiene paneles que a su vez pueden contener a
otros paneles.
• El panel de contenido va a tener su organizador de diagramado y para cada uno
de los paneles en que se divide podemos establecer también un organizador de
diagramado.
• La distribución de componentes en paneles facilita el diseño de GUI.
27
PANELES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
28
TEMARIO
• Repaso.
• Construcción de una GUI.
• Paquetes gráficos.
• Ventanas y frames.
• Organizador de diagramado.
• Paneles.
• Botones.
• Caso de estudio: Elegir bebida.
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 15
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Un botón es una componente reactiva, puede percibir la acción del usuario y
reaccionar de acuerdo al comportamiento establecido por un objeto oyente.
• Algunos de los atributos son texto, imagen, alineación del texto y de la imagen,
color, borde, letra mnemónica y forma, además, puede estar habilitado o no.
29
BOTONES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Desarrolle una aplicación que permita establecer el color de fondo de una
ventana. El color será rojo o verde de acuerdo al botón que se apriete.
• La ventana inicialmente debe aparecer así:
• Éste es el aspecto cuando se aprieta rojo o verde:
30
BOTONES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 16
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
31
BOTONES//importar paquetes
…
class GuiFondoRojoVerde extends JFrame {
/*Declarar los BOTONES*/
…
public GuiFondoRojoVerde (){
/*Establecer los valores de los atributos del frame*/
…
/*Crear los BOTONES*/
…
/*Crear y registrar los oyentes para los BOTONES*/
…
/*Insertar los BOTONES en el panel de contenido*/
…
}
/*definir clases para establecer el comportamiento de los BOTONES*/
…
} La estructura del código favorece la legibilidad
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
32
BOTONES
//importar paquetes
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
…
• Java brinda muchas facilidades a través de paquetes.
• El programador importa solo los paquetes que necesita.
• El tamaño del código que se genera al compilar depende solo de las facilidades
básicas y los paquetes importados.
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 17
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
33
BOTONES
//importar paquetes
…
class GuiFondoRojoVerde extends JFrame {
…
}
• Un objeto de clase GuiFondoRojoVerde es también una instancia de JFrame.
• Como todo frame un objeto de clase GuiFondoRojoVerde tiene como atributos
el borde, la barra de título y un panel de contenido.
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
34
//importar paquetes
…
class GuiFondoRojoVerde extends JFrame {
/*Declarar los botones*/
private JButton botonRojo, botonVerde;
…
}
• Los atributos de instancia de la clase GuiFondoRojoVerde son dos variables
de la clase JButton provista por Swing.
BOTONES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 18
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
35
public GuiFondoRojoVerde (){
/*Declarar los botones*/
…
/*Establecer los valores de los atributos*/
setLayout(new FlowLayout());
setSize(200, 120);
setDefaultCloseOperation(EXIT_ON_CLOSE);
…
}
• La clase JFrame brinda servicios que permiten establecer los valores de los
atributos del frame, por ejemplo el diagramado y el tamaño.
BOTONES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
36
public GuiFondoRojoVerde (){
/*Declarar los botones*/
…
/*Establecer los valores de los atributos*/
…
/*Crear los botones*/
botonRojo = new JButton("Rojo");
botonVerde = new JButton("Verde");
…
}
• Por cada atributo de instancia que corresponde a una componente gráfica de la
GUI, creamos un objeto gráfico.
BOTONES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 19
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
37
public GuiFondoRojoVerde (){
…
/*Crear los botones*/
botonRojo = new JButton("Rojo");
botonVerde = new JButton("Verde");
/*Crear y registrar los oyentes para los botones*/
OyenteBotonR ponerRojo = new OyenteBotonR();
botonRojo.addActionListener(ponerRojo);
• Para que un botón sea reactivo debe registrarse a un objeto oyente.
• El programador implementa cada clase de un oyente de acuerdo al
comportamiento que debe exhibir el botón.
BOTONES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
38
public GuiFondoRojoVerde (){
…
/*Crear los botones*/
botonRojo = new JButton("Rojo");
botonVerde = new JButton("Verde");
/*Crear y registrar los oyentes para los botones*/
OyenteBotonR ponerRojo = new OyenteBotonR();
botonRojo.addActionListener(ponerRojo);
OyenteBotonV ponerVerde =new OyenteBotonV();
botonVerde.addActionListener(ponerVerde);
…
}
BOTONES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 20
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
39
public GuiFondoRojoVerde (){
…
/*Insertar los botones en el panel de contenido*/
getContentPane().add(botonRojo);
getContentPane().add(botonVerde);
}
• Para que los botones sean visibles deben insertarse en un contenedor, en este
caso el panel de contenido del frame.
BOTONES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
40
/*definir clases para establecer el comportamiento de los
botones*/
class OyenteBotonR implements ActionListener {
public void actionPerformed (ActionEvent event){
getContentPane().setBackground(Color.red);
}
}
• Para que un botón reaccione ante una acción del usuario, debe estar registrado a
una clase que implemente a la interface ActionListener.
• Implementar una interface implica definir sus métodos.
• En este caso el método actionPerformed que recibe como parámetro un
objeto de clase ActionEvent.
BOTONES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 21
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
41
…
/*definir clases para establecer el comportamiento de los botones
class OyenteBotonR implements ActionListener {
public void actionPerformed(ActionEvent event){
getContentPane().setBackground(Color.red);
}
}
class OyenteBotonV implements ActionListener {
public void actionPerformed(ActionEvent event){
getContentPane().setBackground(Color.green);
}
}
}
• En este ejemplo, cada oyente modifica el color del panel de contenido de
acuerdo al botón que el usuario oprime.
BOTONES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
42
import java.awt.*;
class FondoBotones {
public static void main(String args[ ]) {
GuiFondoRojoVerde f = new GuiFondoRojoVerde();
f.setVisible(true);
}
}
BOTONES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 22
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Desarrolle una aplicación que permita establecer el color de un panel. El color
será rojo o verde de acuerdo al botón que se apriete.
• Por ejemplo, cuando se oprima el botón verde la ventana debe aparecer:
43
BOTONES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
44
//importar paquetes
…
class GuiPanelRojoVerde extends JFrame {
/*Declarar los botones y los paneles */
…
public GuiPanelRojoVerde (){
/*Establecer los valores de los atributos */
…
/*Crear los botones y los paneles*/
…
/*Crear y registrar los oyentes para los botones*/
…
/*Insertar los botones en el panel de botones y los paneles en
el panel de contenido*/
…
}
/*definir clases para los oyentes*/
…
}
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 23
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
45
//importar paquetes
…
class GuiPanelRojoVerde extends JFrame {
/*Declarar los botones y los paneles*/
private JButton botonRojo, botonVerde;
private JPanel panelColor, panelBotones;
…
}
• Los atributos de GuiPanelRojoVerde son dos botones y dos paneles.
BOTONES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
46
public GuiPanelRojoVerde (){
/*Establecer los valores de los atributos */
…
/*Crear los botones y los paneles*/
botonRojo = new JButton("Rojo");
botonVerde = new JButton("Verde");
panelColor= new JPanel();
panelBotones = new JPanel();
…
}
• El orden de estas cuatro instrucciones es irrelevante en ejecución , pero afecta la
legibilidad del código.
BOTONES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 24
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
47
public GuiPanelRojoVerde (){
…
/*Insertar los botones en el panel de botones y los paneles
en el panel de contenido*/
panelBotones.add(botonRojo);
panelBotones.add(botonVerde);
getContentPane().add(panelBotones);
getContentPane().add(panelColor);
…
}
• El orden de estas instrucciones influye en la apariencia de la GUI, si se invierten
las dos últimas, cambia la distribución de los paneles, dado que por omisión se
establece el diagramado FlowLayout.
BOTONES
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
48
/*definir clases para los oyentes*/
class OyenteBotonR implements ActionListener {
public void actionPerformed(ActionEvent event){
panelColor.setBackground(Color.red);
}
}
class OyenteBotonV implements ActionListener {
public void actionPerformed(ActionEvent event){
panelColor.setBackground(Color.green);
}
}
• La clase de cada oyente es interna a la clase que especializa a JFrame y por lo
tanto tiene acceso a los atributos de instancia de GuiPanelRojoVerde, en
particular a panelColor.
BOTONES
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 25
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
49
TEMARIO
• Repaso.
• Construcción de una GUI.
• Paquetes gráficos.
• Ventanas y frames.
• Organizador de diagramado.
• Paneles.
• Botones.
• Caso de estudio: Elegir bebida.
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Implementar una GUI que incluya dos paneles.
• El panel a la izquierda muestra una etiqueta con la imagen de una bebida.
• El panel a la derecha ofrece dos botones que permiten seleccionar la bebida.
50
CASO DE ESTUDIO: ELEGIR
BEBIDA
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 26
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• Las componentes de la GUI van a ser:
- Dos paneles
- Una etiqueta
- Dos botones
51
JPanel
JLabel
JButton
CASO DE ESTUDIO: ELEGIR
BEBIDA
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• La estructura de la GUI puede ser:
52
//importar paquetes
class GUI_R101{
//atributos de instancia para las componentes gráfica
public GUI_R101{
//Establecer los atributos del frame
//Crear los botones y la etiqueta
//Crear y diagramar el panel con la etiqueta
//Crear y diagramar el panel con los botones
//Crear los objetos oyente y registrarlos a los botones
//Insertar los paneles en el panel de contenidos
}
//Clases de los oyentes
}
CASO DE ESTUDIO: ELEGIR
BEBIDA
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 27
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• La estructura de la GUI puede ser:
53
//importar paquetes
class GUI_R101{
//atributos de instancia para las componentes gráfica
public GUI_R101{
//Establecer los atributos del frame
//Botones, etiqueta y paneles
armarPanelEtiqueta();
armarPanelControl();
//Insertar los paneles en el panel de contenidos
}
//Clases de los oyentes
}
CASO DE ESTUDIO: ELEGIR
BEBIDA
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
54
//Importar paquetes
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.*;
class GUI_R101 extends JFrame {
//Atributos de Instancia
private JLabel etiqueta;
private JButton BotonCafe, botonCarioca;
private JPanel panelControl, panelImagen;
…
}
• Todos los atributos de instancia de esta GUI corresponden a componentes
gráficas.
CASO DE ESTUDIO: ELEGIR
BEBIDA
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 28
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
55
public GUI_R101(){
//Establece los valores de los atributos del frame
setSize(600, 600);
setLayout(new FlowLayout());
setDefaultCloseOperation(EXIT_ON_CLOSE);
//Arma los paneles
armaPanelEtiqueta();
armaPanelControl();
}
• Modulamos la solución para favorecer la legibilidad.
CASO DE ESTUDIO: ELEGIR
BEBIDA
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
56
private void armaPanelEtiqueta(){
panelImagen = new JPanel();
etiqueta = new JLabel();
etiqueta.setIcon(new ImageIcon("vacio.gif"));
panelImagen.add(etiqueta);
getContentPane().add(panelImagen);
}
• Crea un panel como un objeto de clase JPanel
• Crea una etiqueta como un objeto de clase JLabel
• Inserta la etiqueta en el panel
• Inserta el panel en el panel de contenido
CASO DE ESTUDIO: ELEGIR
BEBIDA
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 29
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
57
private void armaPanelControl(){
panelControl = new JPanel();
BotonCafe = new JButton("Cafe");
OyenteBotonCafe oyenteCafe = new OyenteBotonCafe();
BotonCafe.addActionListener(oyenteCafe);
panelControl.add(BotonCafe);
}
• Crea el panel como un objeto de clase JPanel
• Crea un botón como un objeto de clase JButton
• Crea un objeto oyente de clase OyenteBotonCafe
• Registra el objeto oyente al botón
• Inserta el botón en el panel
CASO DE ESTUDIO: ELEGIR
BEBIDA
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
58
private void armaPanelControl(){
panelControl = new JPanel();
BotonCafe = new JButton("Cafe");
OyenteBotonCafe oyenteCafe = new OyenteBotonCafe();
BotonCafe.addActionListener(oyenteCafe);
panelControl.add(BotonCafe);
botonCarioca = new JButton("Carioca");
OyenteBotonCarioca oyenteCarioca = new OyenteBotonCarioca();
botonCarioca.addActionListener(oyenteCarioca);
panelControl.add(botonCarioca);
getContentPane().add(panelControl);
}
CASO DE ESTUDIO: ELEGIR
BEBIDA
Introducción a la Programación Orientada a Objetos
Profesor Luciano H. Tamargo 30
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
• La clase del objeto oyente es interna a la clase GUI_R101 e implementa la
interface ActionListener provista por Java.
• El método actionPerformed se redefine para modelar la reacción del botón cuando el usuario hace click sobre él.
59
private class OyenteBotonCafe implements ActionListener{
public void actionPerformed(ActionEvent e){
etiqueta.setIcon(new ImageIcon("Cafe.gif"));
}
}
OyenteBotonCafe oyenteCafe = new OyenteBotonCafe();
BotonCafe.addActionListener(oyenteCafe);
CASO DE ESTUDIO: ELEGIR
BEBIDA
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
0 1 1 0 0
1 0 0 1 1
1 0 1 1 0
0 1 1 1 0
1 0 0 1
1 1 1
0 0
1
60
private class OyenteBotonCafe implements ActionListener{
public void actionPerformed(ActionEvent e){
etiqueta.setIcon(new ImageIcon("Cafe.gif"));
}
}
private class OyenteBotonCarioca implements ActionListener{
public void actionPerformed(ActionEvent e){
etiqueta.setIcon(new ImageIcon("Carioca.gif"));
}
}
CASO DE ESTUDIO: ELEGIR
BEBIDA