Interfaces Gráficas de Usuario

1. Interfaces Gráficas de Usuario Unainterface gráficade usuario (GUI) es un medioquepermitequeuna persona se comunique y controle un sistemaa través de ventanas, botones, menúes, etc. Una GUI se construye a partir de unacolección decomponentescon unarepresentacióngráfica y capacidadparapercibireventosgeneradosporlasacciones del usuario.

2. Objetos gráficos y Clases gráficas Cadacomponentede una GUI estáasociada a un objetográfico. Un objetográficoesunainstancia de unaclasegráfica. Unaclasegráfica define algunosatributosgráficosy brindaserviciosgráficos.

3. 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. Objetos gráficos y Clases gráficas

4. Paquetes Gráficos Cadaclasegráficaestáprovistapor los paquetes AWT (Abstract Window Toolkit) o Swing o derivade unaellas. AWT y Swing son entoncespaquetesquefacilitan la construcción de interfaces gráficas. Ambos brindanunacolección de clasesquepermitencrearbotones, 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.

5. Jerarquía de clases

6. Ventanas y frames Toda instancia de JFrame tiene atributos marco, barra de título, algunos botones y un panel de contenido. Un frame es un tipo especial de ventana sobre el que se ejecuta una aplicación. • La clase JFrame brinda servicios para modificar los valores de los atributos.

7. Algunos tipos de componentes Etiquetas Paneles Botones Listas de opciones Cajas de texto Paneles de diálogo Cada tipo de componente tiene una apariencia estándar pero también puede configurarse de acuerdo a las pautas de diseño que se adopten.

8. La jerarquía de clases de JComponent

9. Construcción de una GUI diseñar la interfaz de acuerdo a las especificaciones implementar la interfaz usando las facilidades provistas por el lenguaje.

10. Construcción de una GUI Y con los criterios de: Reusabilidad Extensibilidad La construcción de GUIestá fuertemente relacionada con los conceptos de: Encapsulamiento Herencia Polimorfismo

11. 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.

12. 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

13. Implementación de una GUI import java.awt.*; class UnaVentana{ public static void main(String args[ ]) { MiVentanaColorf= new MiVentanaColor(“Unaventana”, Color.BLUE); f.setVisible(true); } }

14. Implementación de una GUI import java.awt.*; import javax.swing.*; class MiVentanaColor extends JFrame{ JLabeletiqueta; 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); } }

15. Implementación de una GUI import java.awt.*; class DosVentanas{ public static void main(String args[ ]) { MiVentanaColor f1= new MiVentanaColor(“Unaventana”, Color.BLUE); f1.setVisible(true); MiVentanaColor f2= new MiVentanaColor(“Otraventana”, Color.RED); f2.setVisible(true); } }

16. Implementación de una GUI Cada componente de la interfaz, en este caso la etiqueta y el panel de contenido, queda asociada a un objeto con una representación gráfica. En este caso son objetos pasivos, no reaccionan ante las acciones del usuario. La GUI tiene 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.

17. 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í: Botones Éste es el aspecto cuando se aprieta rojo o verde:

18. //importar paquetes … classGuiFondoRojoVerdeextendsJFrame { /*Declarar los botones*/ … publicGuiFondoRojoVerde (){ /*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 los oyentes*/ … }

19. //importar paquetes importjava.awt.*; importjava.awt.event.*; importjavax.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.

20. //importar paquetes … classGuiFondoRojoVerdeextendsJFrame{ /*Declarar los botones*/ privateJButtonbotonRojo, botonVerde; } 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

21. publicGuiFondoRojoVerde(){ /*Establecer los valores de los atributos*/ setLayout(new FlowLayout()); setSize(200, 120); setDefaultCloseOperation(EXIT_ON_CLOSE); }

22. publicGuiFondoRojoVerde(){ /*Establecer los valores de los atributos*/ … /*Crear los botones*/ botonRojo= new JButton("Rojo"); botonVerde= new JButton("Verde"); /*Crear y registrar los oyentes para los botones*/ OyenteBotonRponerRojo = new OyenteBotonR(); OyenteBotonVponerVerde = new OyenteBotonV(); botonRojo.addActionListener(ponerRojo); botonVerde.addActionListener(ponerVerde); 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.

23. publicGuiFondoRojoVerde(){ /*Establecer los valores de los atributos*/ … /*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

24. /*definir clases para los oyentes*/ classOyenteBotonRimplementsActionListener { publicvoidactionPerformed(ActionEventevent){ getContentPane().setBackground(Color.red); } } classOyenteBotonVimplementsActionListener { publicvoidactionPerformed(ActionEventevent){ getContentPane().setBackground(Color.green); } } } Para que un botón reaccione ante una acción del usuario, debe estar registrado a una clase que implemente a la interface ActionListener.

25. importjava.awt.*; classFondoBotones{ publicstaticvoidmain(Stringargs[ ]) { GuiFondoRojoVerde f= new GuiFondoRojoVerde(); f.setVisible(true); } }

26. 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: Botones

27. //importar paquetes … classGuiPanelRojoVerdeextendsJFrame { /*Declarar los botones y los paneles */ … publicGuiPanelRojoVerde(){ /*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*/ … }

28. //importar paquetes … classGuiPanelRojoVerdeextendsJFrame { /*Declarar los botones y los paneles*/ privateJButtonbotonRojo, botonVerde; privateJPanelpanelColor, panelBotones; } Los atributos de GuiPanelRojoVerdeson dos botones y dos paneles.

29. publicGuiPanelRojoVerde (){ /*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

30. publicGuiPanelRojoVerde (){ … /*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

31. /*definir clases para los oyentes*/ classOyenteBotonRimplementsActionListener { publicvoidactionPerformed(ActionEventevent){ panelColor.setBackground(Color.red); } } classOyenteBotonVimplementsActionListener { publicvoidactionPerformed(ActionEventevent){ panelColor.setBackground(Color.green); } } } La clase de cada oyente es interna a la clase que especializa a JFramey por lo tanto tiene acceso a los atributos de instancia de GuiPanelRojoVerde, en particular a panelColor.

32. Botones Desarrolle una aplicación que permita establecer incrementar o decrementar un contador de acuerdo al botón que oprima el usuario. La ventana inicialmente debe aparecer así: El valor va a ir cambiando a medida que se oprimen los botones.

33. import java.awt.*; import java.awt.event.*; import javax.swing.*; class Contador extends JFrame { /*Atributos de instancia, objetos gráficos y de la aplicación*/ private intnumero; private JLabelnumeroEtiqueta; private JButtonbotonIncrementar,botonDecrementar; public Contador() { //Incializavariables numero = 0; //Establece los valores de los atributos setLayout(new FlowLayout()); setSize(200, 120); setDefaultCloseOperation(EXIT_ON_CLOSE); //Invoca a un métodointernoquecompleta la GUI hacerGUI(); } //Implementalasclasesoyente … }

34. … private void hacerGUI(){ //Crea la etiqueta para el número numeroEtiqueta = new JLabel("" + numero); //Crea el boton incrementar, el oyente y lo registra botonIncrementar = new JButton("Incrementar"); OyenteBotonIincrementar = new OyenteBotonI(); botonIncrementar.addActionListener(incrementar); //Crea el botondecrementar, el oyente y lo registra botonDecrementar = new JButton("Decrementar"); OyenteBotonDdecrementar = new OyenteBotonD(); botonDecrementar.addActionListener(decrementar); … } … } El código puede estructurase con diferentes criterios, pero tiene que haber un criterio lógico que facilite la lectura.

35. … private void hacerGUI(){ … //Insertalascomponentes en el panel del frame getContentPane().add(numeroEtiqueta); getContentPane().add(botonIncrementar); getContentPane().add(botonDecrementar); } … }

36. Caso de Estudio: Contador … class Contador extends JFrame { … privateclass OyenteBotonI implements ActionListener { public void actionPerformed(ActionEvent event) { numero++; numeroEtiqueta.setText("" + numero); } } private class OyenteBotonD implements ActionListener { public void actionPerformed(ActionEvent event) { numero--; numeroEtiqueta.setText("" + numero); } } } Implementamos los oyentes a través de clases internas. Esta alternativa es sencilla pero solo es adecuada para GUI simples.

37. Botones El programador redefine el método actionPerformed que no va a ser invocado explícitamente por él mismo, sino que el mensaje que provoca su ejecución está incluido en algún método definido en una clase provista por Java. Esto es, el programador define (o redefine) un método que él mismo NUNCA VA A INVOCAR al menos explícitamente! El método recibe como argumento un objeto que tampoco ha sido creado explícitamente por el programador.

38. Botones Diferentes clases de componentes requieren diferentes clases de oyentes para manejar los eventos internos que los objetos disparan. Un botón dispara eventos llamados eventos de acción que son manejados por oyentes de acción. Es decir un objeto de clase JButton genera un objeto de la clase ActionEvent que es enviado como parámetro a un objeto de una clase que implementa a la interface ActionListener.

39. Botones Observemos que estamos considerando tres tipos de objetos: • Cada botón es un objeto fuente del evento • El evento es un objeto evento • El oyente de cada botón es un objeto oyente

40. Botones • Los objetos fuente del evento, están asociados a una componente de la interfaz, tienen una representación gráfica y son capaces de percibir y reaccionar ante un evento externo provocado por una acción del usuario y disparar eventos de software. • Los objetos evento que son disparados implícitamente por un objeto fuente del evento. • Los objetos oyentes (listeners) se ejecutan para manejar un evento. La clase a la que pertenece un objeto oyente brinda métodos para manejar eventos, es decir especifica el curso de acción a seguir en respuesta a diferentes tipos de eventos.