The goal of this lab is to practice using Java's GUI capabilities to write programs that use windows and buttons.
We'll start by looking at some example programs, including two that were in the handout.
Clone the repository from the class public directory and move into
the examples subdirectory:
hg clone /cslab/class/csci235/labs/lab14 cd lab14/examples
Start by looking at Example1.java. This program
simply puts up a window (JFrame) that contains two instances of
JLabel. There are two statements that configure the
window, setting its size and initial location on the screen; the unit
of measurement is the pixel, short for picture
element, which is the smallest dot the screen displays.
Throughout the GUI libraries, dimensions and coordinates are specifies
as row, column, with row zero at the top of the screen and
column zero at the left edge.
The other bit of configuration to notice is the call to
setDefaultCloseOperation(). This tells the program to
exit when you close this window.
Compile and run this program:
javac Example1.java java Example1Notice that the program does not exit when it reaches the end of the
main() method. Instead, the program stays around
waiting for events. To quit the program, close the window by clicking
on the "X" decoration at the upper left.
Modify Example1.java, changing the size of the window
to be wider than it is tall, and to move its starting location lower
on the screen. Compile and run it with your changes.
Note that you can resize the window while the program is running, by "grabbing" an edge or corner with the mouse and dragging it. Notice how the grid layout tries to adapt as you change the shape and size of the window.
Modify the program again, replacing the GridLayout(2,
1) with a FlowLayout(). Compile and run the new
version, and compare how the layout adjusts to changes in the window
size and shape.
Now take a look at Example2.java, which is almost the
same as the earlier program, but replaces the second
JLabel with a JButton. The button can
produce an event when it is clicked; so this version of the
program calls the button's addActionListener() method to
specify the listener object that should be called when the event
fires.
Look at OkListener.java. Notice that this class
implements the ActionListener interface, which requires
it to provide a method actionPerformed().
Compile and run Example2. You can try resizing this
one as you did for the previous program. What do you expect to happen
when you click on the button? Give it a try.
Now modify Example2.java by commenting out the first
call to addActionListener() and uncommenting the second.
Before you compile and run the program, see if you can predict what
will happen. Give it a try. Peek here if you
need help figuring out how to get back.
Take a few minutes to look at Example4.java and the
action listener Listener4.java. Before you run it, try
to predict what it will look like. Then predict what will happen when
you press each of the buttons. Are there any surprises?
Now it is time to try a more interesting program.
A Fifteen Puzzle (or, more generally, an N-puzzle) consists in a grid of square, same-sized tiles, with all but one of the grid positions filled. The object of the game is to rearrange the tiles by sliding the tiles one at a time until a certain configuration is reached (for example, starting from a random configuration until the numbers are in order).
In this lab, you will write a program that simulates a Fifteen Puzzle.
Change into this lab's other subdirectory, with
cd ../puzzle
Open FifteenPuzzle.java in emacs and read through it.
Notice that it basically adds sixteen buttons to the window, numbered
from 1 through 15 and then 0.
Compile and run, and notice that the buttons are put right on top of
each other—such that you can only see one of them.
Based on what you've seen so far, play around with the size, location, and layout management until you can see that you have sixteen buttons arranged in a square. (You may wish to look at our summary of GUI classes.)
Don't spend too much time; you have more to do.
Each button stands for a tile or block in the puzzle. 15 of them will have numbers, and the 16th (numbered 0) will be blank. We won't actually move the buttons around; instead, we will change the numbers on the buttons to give the appearance of moving tiles.
When a button is clicked, the following should happen:
Each button needs to have an action listener to perform this.
Uncomment the relevant sections in FifteenPuzzle.java.
We are using an action listener class called PuzzlePiece.
The skeleton of this class is given to you. You'll need to supply the
methods to complete it, but be sure that you read the rest of this
section before you start trying to write code. The methods needed are:
PuzzlePiece(JButton, int).
This is the constructor, and it tells the action listener what button
it is attached to
and the number in the order the buttons were made (1 to 15, with the
last one numbered 0).
This constructor also takes care of setting the text on the
corresponding button. You'll need to fix it so that button for 0
shows as blank.
addNeighbor(PuzzlePiece).
When a button is clicked, it affects its neighbors.
The action listener is not going to have direct access to the
neighboring buttons,
but it should have references to the action listeners attached to
those buttons.
Think about: We will need to have access to these neighbors later
when writing actionPerformed().
How can we store this information for later reuse?
Hint: Notice that not all PuzzlePieces have
the same number of neighbors.
actionPerformed(ActionEvent).
This method should implement the algorithm described above.
Hint: Notice again that when a button is clicked, its action listener
must communicate with the action listeners on the neighboring buttons---first,
to determine if one of the neighbors is blank; second, to
make any necessary changes.
How can you do this?
You may want to write a few extra methods in the class PuzzlePiece.
Turn in your .java source files from the puzzle
directory with the command
/cslab/class/csci235/bin/handin lab14 PuzzlePiece.java FifteenPuzzle.java
Be sure to include all of your files on a single command.
Hint: When the
Example2 window disappears, the program is still running,
but you no longer have a way to interact with it. You can kill it by
typing a
Click here to jump back to where you were in the lab.