CS111 Lab 12 -- Tic-Tac-Toe

Contracts for all of the GUI components are available in the JDK 1.0.2. API Documentation. We will refer to this often, so please keep the window open (though not necessarily visible) during lab. Learning how to use the available documentation from Sun is an important skill for all Java programmers.

This lab is broken down into two parts:

1. GUI layout
2. GUI behavior

TicTacToeBoard Contract

public TicTacToeBoard ()
Constructor method; creates default TicTacToeBoard with basic colors and fonts.

public void setBoardColors (Color color, Color bgColor)
Allows one to set the foreground and background colors of the TicTacToeBoard.

public void setXfont (Font f, Color c)
Sets the font for the X player.

public void setOfont (Font f, Color c)
Sets the font for the O player.

public void clearBoard ()
Clears the board.

public int getMouseArea ()
Returns the area of the board which was last clicked on. Returns a zero(0) if an invalid part of the board was clicked on (i.e. boundaries).

public boolean placeX (int n)
Returns true if successfully placed X in the area specified by n. Otherwise, returns false (invalid area or element already at area).

public boolean placeO (int n)
Returns true is successfully placed O in the area specified by n. Otherwise, returns false (invalid area or element already at area).

GUI Layout

The following instance variables are defined in our TicTacToe applet:

Component Type	Variable Name(s)	Description
TicTacToeBoard	board	The game board.
Checkbox	xCheckbox, oCheckbox	Pick which player the preferences are for.
TextField	nameField	Input name of player.
Choice	colorChoice	Select color for player's mark on board.
Choice	fontChoice	Select font for player's mark on board.
Choice	fontStyleChoice	Select font style for player's mark on board.
Choice	fontSizeChoice	Select font size for player's mark on board.
Button	prefButton	Button to press to set the player's preferences.
Label	gameStatus	Label which indicates game status: whose turn, who wins, tied games.
Label	xNameLabel, oNameLabel	Label showing player's name.
TextField	xWinField, oWinField	Field showing number of games player has won.
List	historyList	List showing order of games won/tied and by whom.

Note that these are not the only GUI components on the board. These particular components are made into instance variables because we will need to refer to them later. All the other components are items that we can either just place on the applet and forget or there are other ways to reference them (like identifying Buttons by their labels).

Your task: Draw the layout decomposition for this TicTacToe applet using two forms of representation: tree representation and individual layout representation. Use the same standards as used in lecture. Some guidelines to follow for the tree representation are:

• Draw Containers as rectangles. Panel and Applet are the only Containers we will be using. Containers should be identified with their layout (including any default layouts).
• Draw all other Components as ovals.
• Components in Containers with BorderLayout should be identified with which direction they are placed.
• Components in Containers with GridLayout should be ordered (left-to-right) in the order in which they are placed into the grid.
• Components in Containers with FlowLayout should be ordered (left-to-right) in the order in which they are placed into the Container.
• Label the GUI components in the table above in your layout decomposition diagram.
• You do not need names for any other containers or components.

• Each layout representation should be a rectangle with the name of the Container written above it. Give any names you like to the Containers, but try to give meaningful names.
• Every Container must be represented by its own individual layout representation.
• Only place the top-level Components into each Container. There should not be any Components in Containers other than the Container for which we are drawing the layout.

• You have a choice of only three layouts. Java has other layouts, but we won't be using them in this class. Look in any Java book if you want to learn more about other layouts.

• FlowLayout: This is the default layout for Panels and Applets. As items get added to Containers with FlowLayout, they arrange themselves in the center until there is no more room in that line and then they break to the next line.

• BorderLayout: This layout allows us to place items in the following arrangement:
  

  North
  West	Center	East
  South

  
  Note that the Directions must be spelled and capitalized exactly as in the diagram above. Components can be added to the BorderLayout in any order. The item in the Center expands as much as possible and all the other items should take the minimal amount of space.

• GridLayout(rows, cols) This layout divides the Container area into equal sized rows and columns. Components added to the grid get added from left-to-right, top-to-bottom.

• If you don't remember how to use a particular Component, look it up in the JDK 1.0.2. API Documentation! Nobody sits around remembering all the tiny details. It's more important to know where and how to find information than it is to actually remember the information (as far as graphics/GUI stuff is concerned).

GUI Behavior

public boolean action (Event evt, Object arg)
This method dispatches most of the GUI events. See handleEvent for responding to mouse clicks.

public void setPlayerPreferences ()
This method sets the player preferences in response to the prefButton being pressed. It also clears the nameField and switches the player selector (so it is less likely one will accidentally overwrite the other player's preferences). Finally, it updates the appropriate name label (xNameLabel or oNameLabel) in the user interface.

public String getFontChoice ()
This method returns the name of the font selected.

public int getFontStyle ()
This method returns the font style selected. Font styles are indicated by the following constants (which are actually integer values): Font.BOLD, Font.ITALIC, and Font.PLAIN. In order to specify a font which is both bold and italic, one must send the value equal to Font.BOLD+Font.ITALIC.

public int getFontSize ()
This method returns the font size selected.

public Color getColorChoice ()
This method returns the color selected.

public void startNewGame ()
This method starts a new Tic-Tac-Toe game. Starting a new games involves the following events:

• setting xList and oList to empty()
• clearing the board
• deciding who goes first. Math.random() returns a number between 0 and 1 inclusive. For whoever goes first, set isXturn appropriately and set the gameStatus to let players know who goes first.
• disable the "Set Preferences" button
• set isGameActive to true (to enable mouse events)

public void resetScores ()
This method sets the number of games won by each player and the total number of games to zero. It also sets the textfields appropriately and clears the history list. Note that the history list will not be redrawn until the applet redraws it.

public boolean handleEvent (Event evt)
This method responds to mouse clicks and a host of other events. The applet calls handleEvent before calling action for events of type ACTION_EVENT. We use this method to call makeNextMove if the game is active and the mouse was pressed on the game board.

public void makeNextMove (int area)
This method attempts to move for the currently active player in the area specified. If the move is successful, the game is checked to see if it is over yet. If not, the area is added to the list of areas the player has marked. The next player becomes the active player and the game status changes to indicate the next player's turn.

public boolean isGameOver ()
This method checks to see if the game is over or not. If the game is not over, this method returns false. If the game is over (one player wins or there is a tie), the total number of games increases by one, the game status message gets updated to reflect the end of the game and the game goes into the history list. If a particular player won, their winning game count goes up by one and this is reflected in their TextField (xWinField or oWinField). The game is no longer active and the "Set Preferences" button is enabled.

Some hints:

• To convert an integer n to a String, do the following:
  Integer.toString(n)

• To convert a String sInt to an integer, do the following:
  Integer.parseInt(sInt)

• There are two ways to figure out which button was pressed. Let's say we have a button stored in a local variable button1 with a label "Hit Me!". The two options are (assuming Event evt and Object arg of the action method)
  evt.target.equals(button1)
arg.equals("Hit Me!")

• Checkboxes return their state as true or false depending on if they are or are not checked. Use the getState() method to see which state they are in. Checkboxes can have their state set via the setState(boolean newState) method.

• TextFields return their value as a String via the getText method. TextFields can have their values set via the setText(String newText) method. TextFields which can not be edited by the user are created by setting their editable property to false via the setEditable(boolean isEditable) method.

• The selected item in a choice can be obtained as a String via the getSelectedItem() method.

• GUI Components can be enabled or diabled via the enable() and disable() methods.

• Items can be added to a List via the addItem(String itemDescription) method. Lists can have all their items deleted via the clear() method.