CSE115
Lab 10
Spring 2016
DUE DATES:
Tuesday recitations: 9:00 PM on 4/18
Wednesday recitations: 9:00 PM on 4/19
Thursday recitations: 9:00 PM on 4/20
Friday recitations: 9:00 PM on 4/21
Ready!
This lab is the second of three labs that all together have you build a version of the game
TextTwist2. The first was lab 8, so it is a good idea for you to review that lab description before
getting started.
In lab 8 you will be building some of the core underlying functionality of the game, but not the user
interface. In this lab you will build a rudimentary user interface, and begin in connect it to the
Model class. In case you did not come up with a complete working solution to lab 8 one has been
provided in the repository. You do not need to use our solution – go ahead and use yours if it was
complete and correct.
Set!
1.
2.
3.
4.
Log in
Start Eclipse
Switch to the CVS Repository Exploring perspective
Either:
a. Make a copy of your CSE115-Lab8 project in your Eclipse workspace (select the
CSE115-Lab8 project in the package explorer, right click and select copy, then
select paste, choosing CSE115-Lab10 as its name)
b. Check out the CSE115-Lab10 project from the Labs repository. This has our
solution to lab 8.
5. Switch to the Java perspective
Go!
This time we are NOT providing JUnit tests. You will verify that the user interface is working
correctly by running the program and interacting with it.
Although it is not required, you might find it helpful to consult this tutorial
https://docs.oracle.com/javase/tutorial/uiswing
It has a lot of information in it (more than you need) and it walks you through examples using a
different IDE than you are used to (NetBeans instead of Eclipse), but it does show you examples of
how to use various graphical containers and components to create a graphical user interface.
Step 1: basic layout
A big part of the game revolves around creating words from the letters of a given word. In lab 8
you wrote some of the back end code to create a list of the words that can be formed from the
letters in a given 7-letter word. We will refer to the letters in that word as the available inventory
of letters.
CSE115
Lab 10
Spring 2016
The first thing you should tackle is letting the player select letters from the inventory. There are
many ways to do this. We will suggest one possibility, but you are free to solve this in other ways
if you wish. Regardless of how you approach this lab, our main advice is this: keep the user
interface simple.
Keep in mind that any work you submit must be your own. Submitting work done
by someone else as your own is academically dishonest, and will result in
immediate failure in the course.
You should define a new class called GUI in the code package, and put your code to create the
Graphical User Interface (GUI) there. We suggest the following overall layout for your GUI:
JFrame whose contentPane has a BoxLayout along the Y-Axis
JPanel for holding the guessed and remaining to be
guessed words (for use in lab 12)
JPanel for holding displaying the displays of (i) the
inventory of letters and (ii) the letters selected as part
of a guess. Use BoxLayout along X-Axis.
JPanel for holding controls (e.g. JButtons to select
actions SHUFFLE
like shuffle, clearCLEAR
and submit). Use
BoxLayout
SUBMIT
along X-Axis.
The top JPanel will be used on Lab 12, but you can put it in now all the same. The bottom two
JPanels can be arranged as shown in the next diagram.
CSE115
Lab 10
Spring 2016
JPanel to hold JButtons
showing letters in
inventory
SHUFFLE
JPanel to hold JButtons
showing letters in guess
CLEAR
SUBMIT
Each of the two JPanels used to display letters will contain JButtons.
Step 2: get GUI and Model communicating
Modify the Model class so that, as part of its initialization process, reads the words in the
CROSSWD.txt file, selects one of the words in longWords at random (use
Collections.shuffle(_longWords) to randomize them, then choose _longWords.get(0)), form an
ArrayList<Character> from the selected word, store the ArrayList<Character> in new instance
variable, and add an accessor method for the variable.
The model should also have another ArrayList<Character> which will be used to store the letters
that are part of the current guess. Add an accessor method for this variable too.
Associate your GUI to your Model. You can do this via the constructor of GUI.
Step 3a: display inventory letters
The next thing you need to build for your user interface is the ability to display the letters in the
inventory. You get these letters from the Model by calling the accessor method you defined in step
2. Define a method that will "removeAll" components in the "letter inventory" JPanel and then repopulate it based on the letters still in the inventory.
We recommend using a JButton to display each letter. You can create each JButton in the body of
a loop that goes through each Character in the ArrayList of letters. You can use the following
method to set properties of each JButton so the text they display is clearly visible:
CSE115
Lab 10
Spring 2016
public void setButtonProperties(JButton button) {
button.setFont(new Font("Courier", Font.BOLD, 44));
button.setBackground(Color.WHITE);
button.setForeground(Color.BLACK);
button.setOpaque(true);
button.setBorder(BorderFactory.createBevelBorder(BevelBorder.LOWERED,
Color.DARK_GRAY, Color.LIGHT_GRAY));
}
Of course you can modify the method so text is displayed in a different font, size, etc.
Step 3b: display guess letters
The next thing you need to build for your user interface is the ability to display the letters in the
guess. This is similar to what you did for inventory letters. You get these letters from the Model by
calling the second accessor method you defined in step 2. Define a method that will "removeAll"
components in the "guess letter" JPanel and then re-populate it based on the letters still in the
guess.
Step 4a: handling button clicks on inventory letters
Define an event handler that will handle clicks on the JButtons in the "letter inventory" JPanel.
Once you have done so you should modify the loop you set up in step 3a (the one that creates the
JButtons) so that it adds a new instance of the event handler to each JButton.
The event handler must be set up so that when a button containing an inventory letter is clicked
the position of that letter in the inventory is communicated to the model. Define a method on the
model that the event handler can call that removes the letter from the indicated position and adds
it to the end of the guess ArrayList.
Once this has been done both the methods defined in step 3 must be called again to update the
display so it is accurate.
Step 4b: handling button clicks on guess letters
Define an event handler that will handle clicks on the JButtons in the "guess letter " JPanel. Once
you have done so you should modify the loop you set up in step 3b (the one that creates the
JButtons) so that it adds a new instance of the event handler to each JButton.
The event handler must be set up so that when a button containing a guess letter is clicked the
position of that letter in the guess is communicated to the model. Define a method on the model
that the event handler can call that removes the letter from the guess Arraylist and adds it to the
end of the inventory ArrayList.
Once this has been done both the methods defined in step 3 must be called again to update the
display so it is accurate.
CSE115
Lab 10
Spring 2016
Submitting your project to Web-CAT
Make sure you submit your work on time; due dates are listed at the beginning of this lab
description. Unlike earlier labs, this one will be MANUALLY GRADED by the graduate teaching
assistants. This means that Web-CAT will display at most 5/100 when you submit (assuming you
get all early submission bonus points). If you submit on-time but not early, Web-CAT will
display 0/100.
You may submit as many times as you wish. Your last submission is the one that will be graded (so
consider carefully whether you want to make any late submissions, as the late penalty is 20 points
per day or portion thereof late).