Hasta ahora los ejemplos no eran interactivos. El usuario recibe información, pero no actúa sobre el applet. Vamos aprender a utilizar botones y etiquetas para conseguir un applet que nos de la hora: el applet que ve a continuación le da la hora si presiona el botón.

Este applet tiene el siguiente comportamiento:

• Al iniciarse presenta la fecha y hora de inicio del applet.
• Al presionar el botón, da la fecha y hora en color rojo. Finalmente desactiva el botón.

Esta bien empezar viendo el resultado final, pero vamos a tratar de explicar como se hace desde el principio. Para empezar necesitamos saber que todo botón es un objeto de la clase Button y que las etiquetas son objetos de la clase Label (ambas de la librería AWT), ambos heredan de la clase Component. Estos componentes son creados como atributos del applet, pero además es necesario añadirlos al applet con el método add (procure hacer esto en el método jbInit():

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class reloj extends Applet {


	/*** Componentes: etiqueta superior y botón *****/
	Label eti = new Label( "Aqui ponemos la hora" );		// Atributo: etiqueta
	Button bot = new Button( "Dar la hora" );			// Atributo: botón

	public void init() {
		try {  jbInit();  }
		catch(Exception e) {  e.printStackTrace();  }
	}

	/**** Añado componentes al applet ****/
	private void jbInit() throws Exception {
		add( eti );						// Añado etiqueta al applet (panel)
		add( bot );						// Añado botón al applet (panel)
    }
}

Repasemos conceptos fundamentales:

• El primero es el de componente: todos los controles gráficos, sean botones, listas o etiquetas son componentes (heredan de Component).
  
  
• El segundo concepto clave es el de contenedor, una clase Container es lo que su nombre indica, un contenedor de componentes y otros elementos. Un componente no se visualiza si no lo situamos en un contenedor y en concreto en un subtipo de contenedor, denominado Panel. La clase Panel es el contenedor donde situamos normalmente los componentes gráficos; de hecho, la clase Applet es un tipo de Panel (hereda de Panel).
  
  
• ¿Cómo se sitúa un componente en un Panel? No es suficiente que el componente sea un atributo de la clase Panel, como en nuestro ejemplo lo son eti y bot, además necesitamos utilizar dentro de jbInit() la función add(). La llamada a esta función le indica al Panel (en este caso al Applet) que inserte el componente que se pasa como argumento. Si no usamos add() no se puede visualizar el componente en el applet.

El método add se hereda de la clase Applet. El esquema de mensajes sería el siguiente:

El usuario inicia el applet, que ejecuta el método jbInit y en este método se llama a add. Lo realizado hasta ahora nos da como resultado lo siguiente:

El texto de los botones y etiquetas se puede poner después de haber creado los objetos (el resultado es el mismo). Además debes saber que estos textos se pueden cambiar cuantas veces quiera el programador:

public class reloj extends Applet {

	/*** Componentes: etiqueta superior y botón *****/
	Label eti = new Label(  );
	Button bot = new Button(  );

	public void init() { .... }

	/**** Añado componentes al applet ****/
	private void jbInit() throws Exception {
		eti.setText("Aqui ponemos la hora");
		bot.setLabel( "Dar la hora");
		add( eti );
		add( bot );
	}
}

Resulta evidente que nuestro applet, tal y como está, tiene un problema: presionar el botón no hace nada. ¿Cómo gestionar este botón? Vamos a enseñarte cómo hacerlo ayudándonos del IDE de JBuilder, pero sin olvidarnos de explicar el código fuente que JBuilder crea. Vamos a señalarle a JBuilder que queremos tratar el evento de presión de botón. Para ello hacemos clic en la pestaña "Diseño" y veremos algo así:

No se preocupe demasiado si el diseño que ve en el IDE no coincide con el que tiene en el applet. Lo que importa es como se ve el applet en el navegador. Para gestionar el evento tenemos que:

• Hacer clic en el componente que desea, en este caso el botón. En la figura anterior puede ver cómo el botón ya está seleccionado (tiene unas marcas en las esquinas y en la ventana de la izquierda esta marcado en azul).
• Presionar la pestaña "Sucesos" que esta a la derecha de su pantalla. Lo que verá a continuación será la lista de los eventos que puede gestionar:

Debemos hacer doble clic en "actionPerformed", concretamente en el rectángulo a la derecha del nombre y que tiene líneas amarillas. Despúes de esta operación el IDE le traslada al código fuente que ha creado:

	void bot_actionPerformed(ActionEvent e) {

	}

Esta es la función que el sistema Java ejecutará cuando el usuario haga clic en el botón del applet. El programador debe escribir la acción correspondiente al clic, en nuestro caso es mandarle a la etiqueta un nuevo texto (la hora actual):

	void bot_actionPerformed(ActionEvent e) {
		Date d = new Date();
		eti.setText( d.toString() );
	}

El resultado empieza a parecerse bastante a lo que queremos:

Podemos enriqucer la actuación del applet. Podemos hacer que ante el evento de pulsar el botón el applet no sólo de la fecha y hora, sino que además muestre el texto de la fecha y hora en rojo (Color.red), terminamos inhabilitando el botón. Por ejemplo:

	void bot_actionPerformed(ActionEvent e) {
		Date d = new Date();
		eti.setForeground(Color.red);
		eti.setText( d.toString() );
		bot.setEnabled( false );
    }

En este caso setForeground cambia el color de la etiqueta a "Color.red" (constante static de la clase Color). setEnabled con el argumento false inhabilita el botón, por tanto, en este caso sólo podrá presionarlo una vez (no es por fastidiar, es simplemente para que veas lo que hace setEnabled(), quítalo si no te gusta).

Hay una modificación que nos permite que el applet de la hora nada más arrancar:

	Label eti = new Label( (new Date()).toString() );

Además podemos cambiar el color de fondo de cualquier panel y, puesto que el applet es un panel, también del applet. Para ello vamos a servirnos de nuevo del IDE: haz clic en "Diseño" y marca el applet (no uno de los componentes). Comprobarás que está marcado porque hay unos pequeños cuadrados en los bordes del applet y además aparece marcado en azul en la ventana izquierda. A continuación haz clic en la propiedad "background" y en nuestro caso elegimos el color naranja.

Para ver el código fuente haz clic en la pestaña "Fuente", a continuación te situas en la función jbInit() y verás la orden que ha añadido el IDE:

	this.setBackground(Color.orange);

El resultado final es el que te presentabamos al principio.

La clase "oyente" del evento

Al referirnos antes al método bot_actionPerformed(ActionEvent e) no indicamos dos elementos que también añade el IDE:

• En jbInit:

  
  		bot.addActionListener(new reloj_bot_actionAdapter(this));
        

  que le indica al applet que la clase que gestiona los eventos del botón se llama reloj_bot_actionAdapter.
  
  
• La clase reloj_bot_actionAdapter se denomina "listener" porque es una clase "oyente" de eventos, es decir, escucha los eventos del botón. Esta clase es invocada o llamada por el sistema Java cuando se recibe el evento de clic sobre el botón. Esta clase señala el método del applet que recibirá la llamada, en nuestro caso es la función bot_actionPerformed(...) del applet.

El código fuente completo es:

import java.awt.*;
import java.awt.event.*;
import java.applet.*;
import java.util.Date;

public class reloj extends Applet {

	/*** Componentes: etiqueta superior y botón *****/
	Label eti = new Label( (new Date()).toString() );
	Button bot = new Button( "Dar la hora" );

 	public void init() {
		try {  jbInit();  }
		catch(Exception e) {  e.printStackTrace();  }
	}

	/**** Añado y configuro componentes al applet ****/
	private void jbInit() throws Exception {
		bot.addActionListener(new reloj_bot_actionAdapter(this));
		setBackground(Color.orange);
		add( eti );
		add( bot );
	}

	/**** Responder al clic del botón: pongo hora, cambio color de etiqueta e inhabilito botón */
	void bot_actionPerformed(ActionEvent e) {
		Date d = new Date();
		eti.setForeground(Color.red);
		eti.setText( d.toString() );
		bot.setEnabled( false );
	}
}

/************* Gestor de eventos ***********/
class reloj_bot_actionAdapter implements java.awt.event.ActionListener {
	reloj adaptee;

	reloj_bot_actionAdapter(reloj adaptee) {
		this.adaptee = adaptee;
	}

	public void actionPerformed(ActionEvent e) {
		adaptee.bot_actionPerformed(e);
	}
}