1. Interfaz gráfica
de usuario
Ing. Yeimmy Alejandra
Contreras Suarez.

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

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

4. AWT

5. Algunos componentes de Swing

6. Algunos componentes de Swing

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

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

9. 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.*;

10. 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("");
}
}
}

11. import java.awt.*; Otro EJEMPLO
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);
}
}
}

12. 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, una
lista (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.

13. 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 componente
es escondido, movido, cambiado de tamaño o mostrado
(ComponentEvent).
ItemListener Define un método para reconocer cuando el estado
De un campo cambia (ItemEvent).

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

15. 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);
}
}

16. 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().

17. 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 applet
addMouseMotionListener(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();
}

18. // 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);
}
}