Universidad Carlos III de Madrid

Probably one of the simplest graphic component is a text label (javax.swing.JLabel). The following code shows a simple GUI example: a window with a text label:

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

          

Download this code

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 base on the Tic Tac Toe 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 of his/her marks in a horizontal, vertical or diagonal row wins the game.

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

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

As the turns of players turns succeed, each player “marks the space" by clicking the corresponding button. To simulate the space mark, the button 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.

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

A Window Manager is a program that controlls the windows in a graphic environment. Window Managers allow the user to manage windows without communicating with the programs that create them. This way, a Window Manager allows to perform the following tasks with windows on a graphic environment: to create and destroy windows, to move and resize windows, to change the active window (focus selection) and to hide and show hidden windows.

This is why programs that open windows, have to both communicate with the user and with the Window Manager; that is, a graphic program will have to provide the following communication interfaces:

Most graphic environments permit to execute different Window Managers on them, each one with distinct ways of working, some of them more comfortable than others, some of them nicer than others. Windows Operating System uses a single Window Manager by default. Probably, it is the only Window Manager you know, but there are a lot of them (hundreds).

Usually, Window Managers communicate with the user through a serie of gadgets added to windows (for example, a border, a title bar and some buttons). These gadgets, besides some key combinations (e.g., Alt-Tab), permit the user to send commands to the Window Manager about what to do with the window (maximize it hide it, etc.)

JFrame class has a set of methods that allows the window to communicate with the Window Manager and vice versa.

To do this exercise, make the following tasks:

Usually, graphic interfaces of a program have a great number of different components . This is why it is necessary to have a method to distribute them throughout the window that contains them.

Java Layout Managers cover this need. By means of standard positioning policies, some generic guidelines are established so that the LayoutManager carries these policies out accurately.

A JPanel has a positioning policy associated to it, but can be customized according to programmer's needs. In this exercise, we will work with a kind of Layout called BorderLayout ( "border" means "frontier" ) which is configured as the default border of the contentPane of a JFrame

We will start from the introduction exercise about the different types of Layouts. To do so, perform the following tasks:

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: