INTRODUCCIÓN A LA PROGRAMACIÓN ORIENTADA A OBJETOS GUI Botones y Oyentes Dr. Luciano H. Tamargo Depto. de Ciencias e Ingeniería de la Computación Universidad Nacional del Sur, Bahía Blanca 2015

INTERFACES GRÁFICAS DE USUARIO 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. Introducción a la Programación Orientada a Objetos IPOO

CONSTRUCCIÓN DE UNA GUI La construcción de GUI está fuertemente relacionada con los conceptos de: –Encapsulamiento –Herencia –Polimorfismo Y con los criterios de: –Reusabilidad –Extensibilidad Introducción a la Programación Orientada a Objetos IPOO

CONSTRUCCIÓN DE UNA GUI Diseñar la interfaz de acuerdo a las especificaciones. Implementar la interfaz usando las facilidades provistas por el lenguaje. Introducción a la Programación Orientada a Objetos IPOO

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. Introducción a la Programación Orientada a Objetos IPOO En esta materia no vamos a diseñar GUI, 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.

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. Introducción a la Programación Orientada a Objetos IPOO

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. Introducción a la Programación Orientada a Objetos IPOO

PAQUETES GRÁFICOS 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. 8

PAQUETES GRÁFICOS En esta jerarquía la relación entre una clase derivada y una clase base no siempre es de tipo isa. 9

EL PAQUETE SWING La clase JFrame 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. 10 Introducción a la Programación Orientada a Objetos IPOO

VENTANAS Y FRAMES 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. 11

VENTANAS Y FRAMES 12 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 IPOO

VENTANAS Y FRAMES 13 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.

VENTANAS Y FRAMES 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. Introducción a la Programación Orientada a Objetos IPOO

VENTANAS Y FRAMES 15 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); } } Introducción a la Programación Orientada a Objetos IPOO

VENTANAS Y FRAMES La GUI tiene varias componentes gráficas, cada una asociada a un objeto gráfico. En la definición de la clase MiVentana C olor se crea una etiqueta y se referencia 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. Introducción a la Programación Orientada a Objetos IPOO

VENTANAS Y FRAMES 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. Introducción a la Programación Orientada a Objetos IPOO

BOTONES 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: Introducción a la Programación Orientada a Objetos IPOO

BOTONES 19 //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

BOTONES Introducción a la Programación Orientada a Objetos IPOO //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.

BOTONES Introducción a la Programación Orientada a Objetos IPOO //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.

BOTONES Introducción a la Programación Orientada a Objetos IPOO //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 IPOO 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 Introducción a la Programación Orientada a Objetos IPOO 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 25 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 26 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); Introducción a la Programación Orientada a Objetos IPOO

BOTONES 27 public GuiFondoRojoVerde (){ … /*Insertar los botones en el panel de contenido*/ getContentPane().add(botonRojo); getContentPane().add(botonVerde); } Introducción a la Programación Orientada a Objetos IPOO Para que los botones sean visibles deben insertarse en un contenedor, en este caso el panel de contenido del frame.

BOTONES 28 /*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 29 /* 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 30 import java.awt.*; class FondoBotones { public static void main(String args[ ]) { GuiFondoRojoVerde f = new GuiFondoRojoVerde(); f.setVisible(true); } Introducción a la Programación Orientada a Objetos IPOO

BOTONES 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: Introducción a la Programación Orientada a Objetos IPOO

32 //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*/ … }

BOTONES 33 //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. Introducción a la Programación Orientada a Objetos IPOO

BOTONES 34 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. Introducción a la Programación Orientada a Objetos IPOO

BOTONES 35 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 36 /*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 Podemos proponer distintas variaciones sobre el código, sin que los cambios sean visibles para el usuario de la GUI. El código del constructor puede estructurarse con un criterio diferente: Introducción a la Programación Orientada a Objetos IPOO public GuiPanelRojoVerde (){ /*Establecer los valores de los atributos del frame */… /*Crear el botón verde, su oyente, registrarlos e insertar el boton en el panel*/… /*Crear el botón rojo, su oyente, registrarlos e insertar el boton en el panel*/… /*Insertar los paneles en el panel de contenido*/…}

38 /*Crear un oyente y registrarlo a los dos botones*/ OyenteBoton o = new OyenteBoton(); botonRojo.addActionListener( o ); botonVerde.addActionListener( o ); Otra alternativa es registrar los dos botones a un mismo objeto oyente. private class OyenteBoton implements ActionListener { public void actionPerformed( ActionEvent e) { String m = (String)e.getActionCommand(); if (m.equals(“Rojo”) panelColor.setBackground(Color.red); else panelColor.setBackground(Color.blue); }

BOTONES El método actionPerformed recibe como parámetro al objeto e de clase ActionEvent Cuando objeto e recibe el mensaje getActionCommand() obtiene el comando asociado al evento, por omisión es el texto con que está rotulado el botón. El comando de acción puede establecerse usando setActionCommand() Notemos que el usuario no percibe el cambio de implementación. Introducción a la Programación Orientada a Objetos IPOO

BOTONES Implementar una GUI que brinde cinco botones, inicialmente verdes, cada vez que se oprime un botón, el color de ese botón pasa a ser rojo. Si un botón se oprime dos veces no se provoca ningún cambio, esto es, permanece rojo. Introducción a la Programación Orientada a Objetos IPOO

41 import java.awt.*; import java.awt.event.*; import javax.swing.*; class Botonera extends JFrame { private JPanel panelBotones; private JButton []botones; public Botonera() { //Establece los valores de los atributos del frame setSize(400, 200); setDefaultCloseOperation(EXIT_ON_CLOSE); //Crea los objetos gráficos panelBotones = new JPanel(); botones = new JButton [5]; armarBotonera(); getContentPane().add(panelBotones); } … }

42 private void armarBotonera (){ /*Crea un único oyente para todos los botones*/ Oyente oyente = new Oyente(); /*Crea cada botón, registra el oyente y lo inserta en el panel*/ for (int i=0;i<5;i++){ botones[i] = new JButton(); botones [i].setText(i+""); botones [i].addActionListener(oyente); panelBotones.add(botones [i]); } } private class Oyente implements ActionListener { public void actionPerformed(ActionEvent e) { JButton b = (JButton) e.getSource(); b.setBackground(Color.RED); b.setText(" ");} } }

BOTONES En este caso enviamos el mensaje getSource() al objeto evento e para obtener la referencia al botón que recibió el mensaje. El mensaje setBackground se envía al botón que detectó la acción del usuario. Los botones están agrupados en un arreglo cuyas componentes son de clase JButton. Cada botón está rotulado con un número entre 0 y 4. Todas las componentes del arreglo se registran a un mismo oyente y se insertan en el panel. Introducción a la Programación Orientada a Objetos IPOO

BOTONES getActionCommand() obtiene el comando producido por la acción del usuario, dependiendo del tipo de componente. Si es un botón obtiene el rótulo, si es un campo de texto, el contenido. getSource() obtiene el objeto fuente de evento que detecto el mensaje. Introducción a la Programación Orientada a Objetos IPOO

BOTONES Implementar una GUI que modifique la imagen de una etiqueta según el usuario oprima los botones Perro o Gato. Introducción a la Programación Orientada a Objetos IPOO

BOTONES 46 import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.border.*; class Dos_Mascotas extends JFrame { /*Objetos Gráficos*/ private JLabel etiqueta; private JButton botonPerro,botonGato; private JPanel panelControl,panelImagen; Todos los atributos de instancia de esta GUI corresponden a componentes gráficas. Introducción a la Programación Orientada a Objetos IPOO

BOTONES 47 public Dos_Mascotas() { //Establece los valores de los atributos del frame setLayout(new BorderLayout()); setSize(700, 320); setDefaultCloseOperation(EXIT_ON_CLOSE); //Arma los paneles armaPanelImagen(); armaPanelBotones(); //Inserta los paneles en el panel del frame getContentPane().add(panelImagen,BorderLayout.CENTER); getContentPane().add(panelControl,BorderLayout. SOUTH) } Modulamos la solución para mejorar la legibilidad.

BOTONES 48 private void armaPanelImagen(){ panelImagen = new JPanel(); etiqueta = new JLabel(); etiqueta.setIcon(new ImageIcon("perro.gif")); panelImagen.add(etiqueta); } El método interno crea un panel, crea una etiqueta, establece sus atributos e inserta la etiqueta en el panel. Introducción a la Programación Orientada a Objetos IPOO

BOTONES 49 private void armaPanelBotones(){ botonPerro = new JButton("Perro"); OyenteBoton oyenteP = new OyenteBotonP(); botonPerro.addActionListener(oyenteP); panelBotones.add(botonPerro); } Crea un botón como un objeto de clase JButton Crea un objeto oyente de clase OyenteP Registra el objeto oyente al botón Inserta el botón en el panel Introducción a la Programación Orientada a Objetos IPOO

BOTONES 50 private void armaPanelBotones(){ botonPerro = new JButton("Perro"); OyenteBoton oyenteP = new OyenteBotonP(); botonPerro.addActionListener(oyenteP); panelBotones.add(botonPerro); botonGato = new JButton(“Gato"); OyenteBoton oyenteG = new OyenteBotonG(); botonGato.addActionListener(oyenteG); panelBotones.add(botonGato); } Introducción a la Programación Orientada a Objetos IPOO

BOTONES 51 botonPerro = new JButton("Perro"); OyenteBotonP oyenteP = new OyenteBotonP(); botonPerro.addActionListener(oyenteP); panelBotones.add(botonPerro); Introducción a la Programación Orientada a Objetos IPOO private class OyenteBotonP implements ActionListener { public void actionPerformed(ActionEvent e) { etiqueta.setIcon(new ImageIcon("perro.gif")); }

BOTONES 52 botonGato = new JButton(“Gato"); OyenteBotonG oyenteG = new OyenteBotonG(); botonGato.addActionListener(oyenteG); panelBotones.add(botonGato); Introducción a la Programación Orientada a Objetos IPOO private class OyenteBotonG implements ActionListener { public void actionPerformed(ActionEvent e) { etiqueta.setIcon(new ImageIcon("gato.gif")); }

EN LA CLASE DE HOY Objetos, Clases y Paquetes gráficos Diseño e Implementación de una GUI Estructura de una GUI Etiquetas Botones y Oyentes Implementación de la interface ActionListener El atributo color Arreglo de botones Las consultas getActionCommand() y getSource() Introducción a la Programación Orientada a Objetos IPOO