Universidad Carlos III de Madrid

El código que se muestra a continuación construye una interfaz gráfica muy simple, que contiene un botón (javax.swing.JButton) que puede ser pulsado. El resto de los elementos de la interfaz los deberías conocer ya.

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.BorderLayout;

class Simple00GUI {

	private static final String TITULO_FRAME = "Simple00GUI";
	private static final String TEXTO_BOTON = "Púlsame!";

	private void creaGUI() {
		JFrame.setDefaultLookAndFeelDecorated(true);
		JFrame frame = new JFrame(TITULO_FRAME);
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		JPanel contentPane = (JPanel) frame.getContentPane();
		JButton button = new JButton(TEXTO_BOTON);
		contentPane.add(button, BorderLayout.CENTER);
		frame.pack();
		frame.setVisible(true);
	}

	public static void main(String args[]) {
		Simple00GUI p = new Simple00GUI();
		p.creaGUI();
	}
}

          

Descargar este código

Este ejercicio vamos a practicar con un ejemplo completo de implementación de una Interfaz Gráfica de Usuario (GUI) que integre la correspondiente Gestión de Eventos (Event Management) asociada a los elementos gráficos que la componen.

Para todo esto, nos basaremos en el famoso juego del “Tres en Raya”. Según la Wikipedia, “el tres en línea, también conocido como Tres En Raya, juego del gato, tatetí, triqui, tres en gallo, michi o la vieja, es un juego de lápiz y papel entre dos jugadores: O y X, que marcan los espacios de un tablero de 3×3 alternadamente. Un jugador gana si consigue tener una línea de tres de sus símbolos: la línea puede ser horizontal, vertical o diagonal.”

Para simular el tablero del juego, usaremos los siguientes elementos gráficos del paquete javax.Swing que se citan a continuación:

La siguiente imagen muestra la ventana inicial del juego constituida por los siguientes paneles (JPanel): un panel superior (panel_info) con información sobre el turno del jugador actual; y un panel central (panel_board) que contiene inicialmente el array de botones sin ninguna imagen asociada, es decir, el tablero inicial del juego sin marcar y preparado para empezar a jugar:

A medida que se suceden los turnos de los jugadores, cada jugador “marca el espacio" al pulsar el botón correspondiente de la misma. Para simular el marcado del espacio, se cambia la imagen asociada al botón con el símbolo de cada jugador como puede observarse en la siguiente imagen:

En el caso de que algún espacio no se pueda marcar (bien porque no le queden símbolos restantes al jugador o por no estar en el turno correspondiente), debe aparecer un mensaje advirtiendo del error cometido.

Por último, si se consiguen las tres en raya, se muestra un mensaje de enhorabuena al jugador como se muestra en la figura.

Para mejorar nuestros conocimientos sobre el modelo de Gestión de Eventos en Java, vamos a proponer el siguiente ejercicio para hacer en casa. Nos basaremos en el código del GUI del Tres En Raya que hemos programado en la sesión de laboratorio y vamos a añadir una nueva funcionalidad que permita controlar el tiempo disponible de cada turno para cada jugador del juego. Es por ello que incorporaremos un nuevo componente que proporciona la librería gráfica de Java (javax.swing) que actua como un "temporizador".

El componente al que hacemos referencia está implementado en la clase javax.swing.Timer y, básicamente, genera eventos del tipo ActionEvent a intervalos determinados constantes y configurables previamente. La forma de gestionar los eventos de este componente se integra en el "Modelo General de Delegación de Gestión de Eventos" de Java que, recordemos, se basa en la existencia de tres clases de objetos:

Este modelo tiene muchas ventajas: es entendible, flexible, extensible y robusto. Una buena prueba de esto es lo relativamente sencillo que va a resultar la incorporación de código con lógica adicional de Gestión de Eventos a nuestro GUI del Tres en Raya. Para ello, vamos a hacer la analogía correspondiente de la Gestion de Eventos asociada al nuevo componente que integraremos en nuestra aplicación

A continuación, se muestra una imagen con la pantalla inicial en la que se muestra la etiqueta con información del contador de tiempo restante del turno del jugador en el panel superior de información (10 segundos en este juego):

El contador de tiempo empieza a descontar segundos hasta que se acaba el tiempo del turno del jugador, en cuyo caso, se muestra la ventana de diálogo con el mensaje de error correspondiente al usuario.

Tras pulsar el botón de Aceptar, se cambia el turno del jugador y se pone el contador de tiempo al valor inicial, tras lo cual, empezará a descontar segundos de nuevo.

Partiendo del código fuente del ejercicio del Tres En Raya de laboratorio que has implementado previamente, realiza las siguientes tareas sobre el mismo para conseguir la incorporación del contador de tiempo: