Universidad Carlos III de Madrid

Probablemente uno de los elementos gráficos más sencillos y más habituales son las etiquetas de texto (javax.swing.JLabel). A continuación tienes el código de una GUI muy sencilla que muestra una ventana con una etiqueta de texto:

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;

class HelloWorldGUI {

  public static void main(String args[]) {
    JFrame frame = new JFrame("HelloWorldGUI window title");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    JPanel contentPane = (JPanel) frame.getContentPane();
    JLabel label = new JLabel("Hello World!");
    contentPane.add(label);

    frame.setSize(100, 50);
    frame.setVisible(true);
  }
}

          

Descargar este código

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 Simple00GUIEn {

  private static final String FRAME_TITLE = "Simple00GUI";
  private static final String BUTTON_TEXT = "Click me!";

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

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

          

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.

Un Manejador de Ventanas es un programa que se encarga de controlar las ventanas presentes en un entorno gráfico. Los Manejadores de Ventanas permiten al usuario tratar las ventanas sin necesidad de comunicarse con los programas que las han creado. Así, un Manejador de Ventanas permite al usuario realizar las siguientes operaciones sobre las ventanas de su entorno gráfico: crear y destruir ventanas, mover y redimensionar ventanas, cambiar la ventana activa (selección de foco) y ocultar y hacer reaparecer ventanas ocultas.

Es por eso que los programas que abren ventanas, además de comunicarse con el usuario, tienen que comunicarse con el Manejador de Ventanas, es decir un programa gráfico tendrá que tener las siguientes interfaces de comunicación:

La mayoría de los entornos gráficos modernos permiten correr sobre ellos diferentes Manejadores de Ventanas, cada uno con diferentes maneras de trabajar, unos más cómodos otros menos, unos más bonitos y otros más toscos. En el sistema operativo Windows, solo utiliza, por defecto, un único Manejador de Ventanas. Probablemente este es el único Manejador de Ventanas que conozcas, pero hay muchos más (cientos).

Normalmente, los Manejadores de Ventanas se comunican con el usuario mediante una serie de decoraciones que añaden a las ventanas (por ejemplo, un borde fino, una barra de título y algunos botones). Estas decoraciones, junto con algunas combinaciones de teclas (Alt-Tab por ejemplo), permiten al usuario mandar instrucciones al Manejador de Ventanas sobre lo que se quiere hacer con sus ventanas (maximizarlas, ocultarlas...).

La clase JFrame tiene una serie de métodos que permiten a la ventana comunicarse con el Manejador de Ventanas y viceversa:

Para la realización de este ejercicio, realiza las siguientes tareas que se enumeran a continuación:

Normalmente, las interfaces gráficas de un programa contienen un número elevado de componentes, que pueden ser de diferentes tipos. Por ello, hace falta un método para distribuir dichos componentes sobre la ventana que los contiene.

Los diferentes Layouts de Java cubren esta necesidad. A través de políticas estándar de posicionamiento, se indican unas directrices genéricas de forma que el LayoutManager se encarga de cumplirlas lo más fielmente posible.

Cada JPanel tiene una política de posicionamiento asociada, la cual se puede configurar según la necesidad. En este ejercicio se trabajará con un tipo de Layout denominado BorderLayout (notese que en inglés "border" quiere decir "frontera"), que además está configurado por defecto en el contentPane de un JFrame.

Partiremos del ejercio de introducción de los diferentes tipos de Layouts. Para ello, realiza los siguientes apartados que se enuncian a continuación:

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: