Study Guide Template
Graphical User Interface
OVERVIEW
Now you’ll develop a graphical user interface for the TicTacToe
game. This project will assess your understanding of AWT,
Swing, and event handling.
Make sure that you follow all directions completely and
verify your results before submitting the project. Remembe
to include all required components in your solution.
YOUR PROJECT
In this project, you’ll create the GUI front-end for the TicTacToe
game. This application will leverage the classes you wrote in
the graded project for Lesson 3. You’ll copy code from Graded
Project 3 for this project.
Figure 20 is a guide for the completed user interface.
G
a
d
e
d
P
o
je
c
t
G
a
d
e
d
P
o
je
c
t
INSTRUCTIONS
1. In NetBeans, create a new Java Application project
named TicTacToeGUIGame.
2. Copy the games.board package from the Lesson 3 proj-
ect named BoardGameTester.
■ Right-click on the game.board package in the
BoardGameTester project of the Projects pane
panel.
■ Choose the Copy option from the context menu o
use the keyboard shortcut CTRL+C.
■ Paste it in the TicTacToeGUIGame project using the
Paste option in the context menu or the keyboard
shortcut CTRL+V.
Make sure to copy and paste the package in the Source
Packages folder.
3. In the Cell.java file, have the Cell class extend the
JButton class. This action will ensure that each cell on
the board has the look and feel of a standard Java button.
4. Ove
ide the paintComponent method in the Cell class
as follows:
public void paintComponent(Graphics g) {
paint the basic button first
super.paintComponent(g);
int offset = 5;
Graphics2D g2 = (Graphics2D) g;
g2.setStroke(new BasicStroke(5));
switch(content) {
case NOUGHT:
g2.setColor(Color.RED);
Draw O
g2.drawOval(offset, offset, this.getWidth() -
offset * 2, this.getHeight() - offset * 2);
eak;
case CROSS:
g2.setColor(Color.BLACK);
Draw X
This code uses the enhanced Graphics2D class to set
the stroke thickness to more than one pixel. The Oracle
documentation provides more guidance on creating com-
plex geometric shapes using the Graphics2D class at
http:
docs.oracle.com/javase/tutorial/2d
geometry/index.html. Remember to import the
java.awt and javax.swing packages!
5. In the Board.java file, have the Board class extend the
JPanel class. This action will ensure that the board can
lay out each cell and process its UI events.
6. Make the following modifications to the Board constructor:
These changes will add each cell to the UI and assign an
ActionListener object to each cell.
Note: Remember to import the java.awt, java.awt.event,
and javax.swing packages.
7. In the TicTacToeGUIGame.java file, have the
TicTacToeGUIGame class extend JFrame. This action
will ensure that the game is hosted in a Java window.
8. Import the games.board, java.awt, and javax.swing
packages.
g2.drawLine(offset, offset, this.getWidth() - offset ,
this.getHeight() - offset );
g2.drawLine(this.getWidth() - offset, offset , offset,
this.getHeight()- offset);
eak;
}
}
public Board(int rows, int columns, ActionListener ah) {
cells = new Cell[rows][columns];
this.setLayout(new GridLayout());
for( int r = 0; r < cells.length; r++ ) {
for (int c = 0; c < cells[r].length; c++) {
cells[r][c] = new Cell(r,c);
this.add(cells[r][c]);
cells[r][c].addActionListener(ah);
}
}
}
9. Add the following code to the main method:
SwingUtilities.invokeLater( new Runnable () {
public void run() { new TicTacToeGUIGame(); }
});
10. Declare the following instance variables in
TicTacToeGUIGame:
private Board gb;
private int turn;
11. Add the following method to handle each turn:
private void takeTurn(Cell c) {
Mark curMark = (turn++ % 2 == 0)?Mark.NOUGHT
: Mark.CROSS;
gb.setCell(curMark,c.getRow(),c.getColumn());
}
12. Define the following constructor to create the board,
provide the event listener, and display the board in
the window:
private TicTacToeGUIGame() {
gb = new Board(3, 3, new ActionListener() {
public void actionPerformed(ActionEvent ae) {
Cell c = (Cell) ae.getSource();
takeTurn(c);
}
});
this.add(gb);
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
this.setTitle(“TIC-TAC-TOE”);
this.setSize(300, 300);
this.setVisible(true);
}
13. Compile and run the project. How did you do? Test to
make sure that each button displays a nought or cross
when clicked.
SUBMISSION GUIDELINES
To submit your project, you should submit the final JAR file:
TicTacToeGUIGame.ja
To ensure the JAR file is built, you should click the Build
utton or hit the F11 key.
To find the JAR file with NetBeans, go to the
TicTacToeGUIGame project folder. To determine this folder,
ight-click on TicTacToeGUIGame project in the Projects
panel. Copy the value for the Project Folder textbox using
the keyboard shortcut CTRL+C. In Windows Explorer, paste
the project folder path and hit the ENTER key. Copy the
TicTacToeGUIGame.jar file to your desktop or any othe
temporary location.
Follow this procedure to submit your project online:
1. Log on to the Penn Foster website and go to student portal.
2. Click Take Exam.
3. Attach your file as follows:
a. Click on the Browse box.
. Locate the file you wish to attach.
c. Double-click on the file.
d. Click Upload File.
4. Enter your email address in the box provided. (Note: This
information is required for online submissions.)
5. If you wish to tell your instructor anything specific
egarding this assignment, enter it in the Message box.
6. Click Submit File.
Grading Criteria
Your instructor will use the following guidelines to grade
your project.
The game window displays co
ectly 40 points
The buttons behave co
ectly when clicked 40 points
JAR file is provided: 20 points
TOTAL 100 points
Self-Check 1
1. Procedural programming languages use step-by-step
instructions, while object-oriented programming (OOP)
languages model real-world structures and relationships.
Procedural programming languages separate data and
instructions, but object-oriented languages combine
them into fields and methods of objects.
2. A Java application that’s written and compiled can run
on any platform with the Java Virtual Machine (JVM)
installed. The developer doesn’t need to write code for a
specific CPU, mothe
oard, chipset, or operating system.
Self-Check 2
1. Java Micro Edition (ME) is a configurable subset of Java
SE (Standard Edition), because it must support smaller,
embedded devices that can’t store all class li
aries
found in SE.
2. The JDK (Java Development Kit) is required to write
applications, because it includes the compiler and othe
developer tools. The JDK isn’t required to run Java
applications—only the JRE (Java Runtime Environment)
is needed. The JRE includes the JVM (Java Virtual
Machine), runtime commands and applications, and
essential class li
aries.
Self-Check 3
1. The extension of a source code file is .java and the
command that compiles it is javac.
2. The extension of a bytecode file is .class and the com-
mand that runs it is java or javaw.
A
n
s
w
e
s
A
n
s
w
e
s