Interfaz gráfica de usuarioIng. Yeimmy Alejandra Contreras Suarez.

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

Las interfaces gráficas de usuario (GUI) ofrecen al 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.

La API de Java para desarrollo de GUI

La interfaz de usuario es la parte del programa que permite al usuario interaccionar con él. La API de Java proporciona una biblioteca de clases para el desarrollo de Interfaces gráficas de usuario (en realidad son dos). La biblioteca proporciona un conjunto de herramientas para la construcción de interfaces gráficas que tienen una apariencia y se comportan de forma semejante en todas las plataformas en las que se ejecuten.

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.

AWT y Swing

AWT

Algunos componentes de Swing

Algunos componentes de Swing

Evento

Un evento se refiere a alguna acción que puede ser realizada por el usuario para que el applet realice alguna serie de instrucciones. Ente algunos eventos dentro de un applet tenemos: oprimir en un botón específico mover una barra de desplazamiento oprimir una tecla específica

Cuando un applet esta ejecutándose, éste puede estar esperando que el usuario active alguna secuencia de instrucciones mediante la selección de algún elemento de interfaz gráfica definida para esto, como lo hemos hecho anteriormente con el objeto de la clase Button.

Cuando creamos un objeto de interfaz gráfica que nos servirá para que el usuario indique alguna acción, es importante definirle a este objeto que será escuchado por la clase específica que se encarga de revisar si hay algún evento que ha sido realizado.

Escuchadores de eventos (Listeners) Un Escuchador (Listener) es un objeto que es

notificado cuando un evento ocurre. Este tiene dos requerimientos: 1) Debió haber sido registrado con una o más fuentes que reciben notificaciones sobre tipos de eventos específicos, y 2) Debe implementar métodos que reciban y procesen éstas notificaciones.

Los métodos que reciben y procesan estas notificaciones están definidos en un grupo de interfaces encontradas en java.awt.event. Por ejemplo la clase MouseMotionListener define dos métodos que reciben notificaciones cuando el ratón es arrastrado o movido. Algún objeto puede recibir y procesar uno o ambos de estos eventos si éste provee una implementación de esta interfase.

Eventos de Botón

Analicemos lo que se hace para manejar más de un botón, usemos el applet utilizado anteriormente para dar la suma de todos los números desde el 1 hasta el N:

Supongamos que ahora queremos tener un botón que limpie los valores de los campos, para volver a dar nuevos valores.

El applet quedaría muy parecido al anterior hecho, solo que ahora en el método action Performed debemos revisar cual fue el botón que se seleccionó, y esto será a través de la instrucción de decisión IF, y el método getSource() que es tomado de la clase ActionEvent, que es el parámetro que nos pasa el método actionPerformed. Dentro de este parámetro es donde se guarda la información sobre cual es el elemento gráfico que fue seleccionado.

Es importante no olvidar que todos las clases para poder usar eventos se toman utilizando  import  java.awt.event.*;

El applet quedaría como el siguiente:import java.awt.*;import java.applet.*;import java.awt.event.*; // <applet width="150" height="200" code="AppletEventos1"></applet>public class AppletEventos1 extends Applet implements ActionListener {   Label l1, l2;   TextField t1,t2;   Button b1,b2;    public AppletEventos1() {      l1 = new Label("Numero");      t1 = new TextField(8);      l2 = new Label("Suma");      t2 = new TextField(8);      b1 = new Button("Suma");      b2 = new Button("Limpia");      add(l1);      add(t1);      add(b1);      add(b2);      add(l2);      add(t2);      b1. addActionListener(this);      b2. addActionListener(this);   }    public void actionPerformed(ActionEvent ae) {      if (ae.getSource() == b1) {         int n = Integer.parseInt(t1.getText());         int suma = 0;         for (int i = 1; i<= n; i++) {            suma += i;         }         t2.setText("" + suma);      }      if (ae.getSource() == b2) {         t1.setText("");         t2.setText("");      }   }}

Otro EJEMPLOimport java.awt.*;

import java.applet.*;import java.awt.event.*; // <applet width="150" height="200" code="AppletCirculos"></applet>public class AppletCirculos extends Applet implements ActionListener { Label l1; TextField t1; Button b1,b2; boolean dibuja = false; // se inicializa dibuja en falso para no dibujar public AppletCirculos() { l1 = new Label("Circulos"); t1 = new TextField(8); b1 = new Button("Dibuja"); b2 = new Button("Limpia"); add(l1); add(t1); add(b1); add(b2); b1. addActionListener(this); b2. addActionListener(this); } public void actionPerformed(ActionEvent ae) { if (ae.getSource() == b1) { dibuja = true; // si el usuario selecciona dibujar se pone verdadero } if (ae.getSource() == b2) { dibuja = false; // si el usuario selecciona limpiar se pone en falso } repaint(); } public void paint(Graphics g) { if (dibuja) { // si dibuja es verdadero se dibuja g.setColor(Color.red); // se cambia a rojo el color de dibujo int circulos = Integer.parseInt(t1.getText()); // se toma el numero del texto for (int i = 1; i <= circulos ; i++) { // ciclo de circulos int x1 = (int) (Math.random()*100)+60; int y1 = (int) (Math.random()*100)+80; g.drawOval(x1,y1, 50, 50); // se dibuja un circulo en // una posición al azar } } else { // si dibuja es falso se limpia el applet g.setColor(Color.white); g.fillRect(0,0,200,200); } }}

CLASES DE EVENTOS

El paquete java.awt.event define varios tipos de eventos que son generados por varios elementos de interfase de usuario. Entre los más comunes eventos utilizados están las siguientes clases:

Clase de Evento Descripción

ActionEvent Generado cuando un botón es seleccionado, unalista (vista mas adelante)tiene un doble clic o un menú es seleccionado

AdjustmentEvent

Generado cuando un barra de desplazamiento es manipulada

ComponentEvent

Generado cuando un componente es escondido, movido,cambiado de tamaño, o se hace visible.

ItemEvent Generado cuando una caja de chequeo (vista mas adelante)es seleccionada con el ratón.

CLASES DE ESCUCHADORES

Los escuchadores son creados para implementar una o más de las interfases definidas por el paquete java.awt.event. Cuando un evento ocurre el evento fuente invoca el método apropiado definido por el escuchador y provee un objeto tipo evento como su argumento. Entre los más comunes estan:

Clase de Interfase

Descripción

ActionListener Define un método para recibir eventos de acción (ActionEvent)

AdjustmentListener

Define un método para recibir eventos de deslizadores (AdjustmentEvent)

ComponentListener

Define cuatro método para reconocer cuando un componentees escondido, movido, cambiado de tamaño o mostrado (ComponentEvent).

ItemListener Define un método para reconocer cuando el estado De un campo cambia (ItemEvent).

Eventos de Barra de Desplazamiento

En estos eventos hacemos uso de barras de desplazamiento para realizar alguna instrucción o grupo de instrucciones, y para esto es importante tomar eventos de la clase Scrollbar.  Los objetos de la clase Srollbar son escuchados a través de implementar una interfaz llamada AdjustmentListener, la cual utiliza el método adjustmentValueChanged, un método muy parecido al actionPerformed, pero trabaja sobre diferentes elementos de interfaz gráfica.

import java.awt.*;import java.applet.*;import java.awt.event.*;// <applet width="150" height="200" code="AppletEventos2"></applet>public class AppletEventos2 extends Applet implements AdjustmentListener {   Label l;   Scrollbar s;   TextField t;    public AppletEventos2() {      l = new Label("Valor de la barra de Scroll");      t = new TextField(3);      s = new Scrollbar(Scrollbar.HORIZONTAL, 0, 1, 0, 100);      add(s);      add(l);      add(t);      s.addAdjustmentListener(this);   }    public void adjustmentValueChanged(AdjustmentEvent ae) {      int valor = s.getValue();      t.setText(""+valor);   }}

Eventos del Ratón

Para implementar este tipo de eventos debemos implementar la interfaz MouseListener y MouseMotionListener.

  A continuación se muestra un ejemplo de applet que los

utiliza. Cada vez que el botón es presionado la palabra “Abajo” es desplegada en el lugar donde está el apuntador del ratón. Cada vez que el ratón es liberado, la palabra “Arriba” es mostrada. Si un botón es oprimido el mensaje “Ratón oprimido” es desplegado en la esquina superior izquierda del área del applet.

Cada vez que el ratón entra o sale del área del applet, un mensaje es desplegado. Cuando el ratón es arrastrado, un asterisco es mostrado, el cual es arrastrado con el apuntador del ratón. Es importante notar las dos variables mouseX y mouseY que guardan los lugares del ratón, cuando ocurre uno de los siguientes eventos del ratón: presionado, liberado, o arrastrado. Estas coordenadas son utilizadas dentro del método paint().

import java.awt.*;import java.applet.*;import java.awt.event.*; // <applet width="150" height="200" code="MouseEvents"></applet>public class MouseEvents extends Applet implements MouseListener,

MouseMotionListener { String msg = ""; int mouseX = 0; int mouseY = 0; public void init() { addMouseListener(this); // se añade el escuchador del ratón //a este appletaddMouseMotionListener(this); // se añande el escuchador del movimiento // del raton a este applet } // cuando se da un clic en el ratón public void mouseClicked(MouseEvent me) { mouseX = 0; mouseY = 10; msg = "Ratón Oprimido"; repaint(); } // cuando el ratón entra public void mouseEntered(MouseEvent me) { mouseX = 0; mouseY = 10; msg = "Ratón Entra"; repaint(); } // cuando sale el ratón public void mouseExited(MouseEvent me) { mouseX = 0; mouseY = 10; msg = "Ratón Sale"; repaint(); }

// cuando se presiona el ratón public void mousePressed(MouseEvent me) { mouseX = me.getX(); // se toma el valor de la coordenada de x mouseY = me.getY(); // se toma el valor de la coordenada de y msg = "Abajo"; repaint(); } // cuando se libera el ratón public void mouseReleased(MouseEvent me) { mouseX = me.getX(); mouseY = me.getY(); msg = "Arriba"; repaint(); } // cuando se arrastra el ratón public void mouseDragged(MouseEvent me) { mouseX = me.getX(); mouseY = me.getY(); msg = "*"; showStatus("Moviendo el raton en " + mouseX + "," + mouseY); repaint(); } // moviendo el ratón public void mouseMoved(MouseEvent me) { showStatus("Moviendo el raton en " + mouseX + "," + mouseY); } // desplegando el mensaje en el applet public void paint(Graphics g) { g.drawString(msg, mouseX, mouseY); }}