In this lab you will learn about
Swing GUI
Event driven programming
You will be modifying an existing class so go ahead and create a project in Eclipse but don't create any new classes. Next, download the TicTacToe.java class to the folder that Eclipse created for this project. Look at the code and try to understand how it works. See that there are 3 import statements which are required to use the swing classes and perform event handling (like performing a specific function when a button is clicked):
import javax.swing.*;
import java.awt.*;
import
java.awt.event.*;
Note that comments in the style, "/** ... **/" are to be considered to be general comments, while comments in the style "// .." are to considered instruction points where you are to modify the file. Also note that the TicTacToe class needs to inherit from the JFrame class, and then call the setVisible method for the JFrame so that we can actually see it. Once you have done those two tasks, run the program. The output will be as shown in the figure below:
Now that your GUI is visible, the next step will be creating a private inner class to server as your "WindowDestroyer", you may name this class any name that you wish, but this is the class that listens for the red X button on the JFrame, so that the application can be shutdown.
Next, you should have your class implement the ActionListener interface. This means that the class TicTacToe will be the class that you will register as the listener for the buttons in the container.
In the class given to you, a frame was created, it's size and background colors set and a button is added to it. The buttons bounds are set, but you need to add the action listener to the button. So if the button is clicked the actionPerformed method (this is already partially defined) is called which sets the text of the Button to either "O" or "X" based on the turn. Also a label is added which displays which players turn it is. Look at the constructor of the TicTacToe class and understand this mechanism before you proceed. Now you must add 8 more buttons to make the frame look like this:
Add action listeners to all the buttons, set their bounds and complete the implementation of the actionPerformed() method to enable two players to play the game. The getWinner() method helps you determine the outcome based on the state of the game. The state of the game is stored in the integer array playingField[9]. The 9 locations representing the 9 blocks in the Tic Tac Toe grid. If playingField[i] is 1 then there is an "O" in the ith location of the grid, if playingField[i] is zero, then the location is not marked yet and if it is 2 then there is an "X" representing player2's mark. The getWinner() method returns a 0 if there is a tie, 1 if player 1 is winner, 2 if player 2 is winner and 3 if the outcome cannot be determined at this time. Given below is a hypothetical situation in the game where player 2 just marked the 7th button with an "O" and the next turn must be played by player 2:
The following figure shows when player 2 is the winner of the game (caution: this game is not the continuation of the above game):
Make use of the comments in the TicTacToe.java class and the guidelines in this document to get the required functionality. Once you are done with the above try changing the background and foreground colors just to know how to work with the Color class. Make sure you understand how to work with Frames, buttons and events.