Universidad Carlos III de Madrid

The following code is a simple graphic interface which contains a javax.swing.JButton button that can be clicked. The rest of the elements of the interface should be well known by you.

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

          

Download this code

During this exercise, we are going to practice with the implementation of a complete example of a Graphic User Interface (GUI) that integrates the corresponding Event Management associated to the graphic elements that are composed of.

To do so, we will be based on the Tic Tac Toe's famous game. According to the Wikipedia, the Tic-tac-toe, also spelled tick tack toe, and alternatively called noughts and crosses, Xs and Os, and many other names, is a pencil-and-paper game for two players, O and X, who take turns marking the spaces in a 3×3 grid, usually X going first. The player who succeeds in placing three respective marks in a horizontal, vertical or diagonal row wins the game.

To simulate the game's board, we will use the following graphic elements that belong to the javax.Swing package that are mentinoned next:

The following image shows the main game's window that is constituted by the following panels (JPanel): an upper panel (panel_info) that contains information about the actual turn's player; a central panel (panel_board) that initially contains the button's array without any associated image, that is, the initial game's board that is ready to start playing:

As player's turns succeed, each player “marks the space" by clicking the corresponding button. To simulate the space's mark, the button's image will be changed according to the symbol of each player as shown at the next figure:

In case of some space could not be marked (for example, if there are no symbols left for the player or if the player's turn is not correct), an error message should be displayed to the player.

Finally, if the player wins the game, a congratulation's message will be displayed as shown in the next figure:

To improve our knowledge about the Java Event Management model, we are going to propose the following exercise to do at home. We will be based on the TicTacToe GUI's code that we have programmed at the laboratory's session and we are going to add a new functionality that will permit to control the remaining turn's time for each player of the game. That's why we are going to incorporate a new component that is provided by the Java's graphics library (javax.swing) that acts as a "timer".

The component we are talking about is implemmented at the javax.swing.Timer class and, basically, it generates ActionEvent events periodically at constant intervals that can be configured previously. The way these events are managed by the component is seamlessly integrated on the Java's general "Event Delegated Management Model" that, let's remember, is based on the presence of three kinds of objects:

This model has many advantages: is understandable, flexible, extensible and robust. A good proof of this is how easy will result to add aditional Event Management logic code to our TicTacToe's GUI. To achieve that, let's make the corresponding Event Management analogy associated to the component that we are going to incorporate to the application:

The following image shows the initial window where the label with the player turn's time remaining information is located at the upper information's panel (10 seconds for this game).

The time counter starts discounting seconds until the player turn's time is over, in that case, a Dialog Window is shown with the corresponding error message to the user.

After the user has clicked the Accept button, the player's turn is changed and the time's counter is reset to the initial value, after that, it will start discounting seconds again.

Starting from the previous laboratory TicTacToe exericse's code you have implemented, make the following tasks to be able to incorporate the time counter to it: