CSE1030

Introduction

The purpose of this lab is to implement the game Boggle™. In this lab you will:

• create an application using the model-view-controller pattern
• use Swing components to build a user interface

Most of your time will be spent implementing the view (and studying the Swing component APIs). The model was mostly implemented in Lab 4, and the controller and application can be implemented with relative ease.

Using the Boggle™ App

Please review the description of the game Boggle™ from Lab 4 if you do not recall how the game is played. Your goal for this lab is to implement the following app:

Our Boggle™ app has many features:

• The player starts the game by pressing the Re-roll button. This causes the dice to be shaken and rolled randomly.
• It uses buttons to represent the dice; the user clicks on the buttons to form words. When the player clicks on a button, the button background is set to blue and the button is disabled so that the button can only be used once per word. Also, all of the other buttons not adjacent to the last clicked button are disabled; in this way the player is forced to use letters that form a connected path. In the image above, the last button pressed was the E; we can see that only the N and the C buttons are enabled (black text).
• As the player clicks on the dice buttons, the word being formed is shown in the text field at the bottom middle; in the image above, the user is currently spelling the word DOUSE.
• The player presses the Submit button when they are finished spelling the word. The word is checked to see if it is spelled correctly and is at least 3 letters long; if both of these are true, then the word is added to the list of correct words. Otherwise, the word is added to the list of incorrect words. In either case, the word is cleared from the text field, and all of the buttons are enabled and set to white so that the player can enter the next word.

You can play the Boggle™ app in the Prism lab using the command:

java -jar /cse/dept/www/course/classpath/1030/BoggleApp.jar

Lab Resources

The API for all of the classes in this lab can be found at the link below; note that these APIs include all of the documented private members to help you understand the code.

• Lab 7 APIs

In eclipse, create a new project. In the project, create a new package named cse1030.games.boggle. Add the following files to the package:

• Boggle.java (this is the model)
• BoggleView.java
• BoggleController.java
• BoggleApp.java
• the dictionary file

Add the following JAR file to the project:

• lab7.jar

I recommend starting with the BoggleView; see the instructions that follow.

The BoggleView

Recall that the view in the model-view-controller pattern is the appearance of the application and the user-interface that is provided to the user. Our BoggleView object is made up of many Swing components:

• JLabel: a label displays text (and images) that are cannot be selected. A label is not interactive and serves to label other components. There are two labels in our view: one labels the list of correct words with the string Correct Words, and the other labels the list of incorrect words with the string Incorrect Words.
• JButton: a button is a component that displays text (and images) and allows the user to click on the button; clicking the button causes the button to emit an event. In our view, the 16 dice are represented as buttons, as are the Clear, Submit, and Re-roll buttons.
• JTextField: a text field is component that allows the user to enter an edit a single line of text. In our view, as the user builds a word by clicking on the dice, the word is displayed in a text field located at the bottom middle of the view.
• JTextArea: a text area displays multiple lines of text. The lists of correct words and incorrect words are both text areas.
• JPanel: a panel is a container for other components. Panels allow us to group components. In our view there are actually six panels (see image below).

1. The red panel is the main content pane for the view. Its purpose is to contain the left, middle, and right panels, and to lay out those panels from left to right using a FlowLayout.
2. The left blue panel contains the list of correct words and its label. It stacks the components from top to bottom using a BoxLayout.
3. The right blue panel contains the list of incorrect words and its label. It stacks the components from top to bottom using a BoxLayout.
4. The middle green panel is used to contain the orange panel that holds the dice and the black panel that holds the controls, and to lay out those panels from top to bottom using a BoxLayout.
5. The orange panel contains the buttons representing the dice. It uses a GridLayout to arrange the dice in a grid.
6. The black panel contains the various controls. It uses a FlowLayout to arrange the controls from left to right.

Completing BoggleView

The BoggleView class has a main method that creates and displays the view. If you run the view, you will see the left panel. As you complete methods, additional functionality should start to appear.

About half of the BoggleView class is implemented for you. Please examine the code provided, especially the fields that are in the class. You do not need to add any new fields to the class.

The first method you should complete is makeRightPanel(). This method creates the right hand panel that holds the list of incorrect words and its label. You can follow the implementation of makeLeftPanel() and the instructions in the commments.

The second method you should complete is makeMiddlePanel(). This method creates the middle panel that holds the the dice panel and the controls panel. You can follow the instructions provided in the comments.

The third method you should complete is makeControlPanel. This method creates the panel that holds the Clear button, the text field that displays the current word, the Submit button, and the Re-roll button. One button and the text field is created for you.

The fourth method you should complete is getWord. This method gets the text from the text field that displays the current word. You can find out how to do this by looking up the JTextField API. The controller uses this method to get word from the view so that it can ask the model to validate the word.

The fifth method you should complete is setDice. This method sets the text for each dice button. All you need to do is to transfer the current value of each die in dice to its corresponding button in this.diceButtons. The first die in dice corresponds to the first button in this.diceButtons, the second die corresponds to the second button, and so on.

The sixth method you should complete is setWordIsCorrect. This method adds the current word to the list of correct words if isValid is true; otherwise, it adds the current word to the list of incorrect words. The controller uses this method to inform the view that the word that was submitted is correct or incorrect. You can find out how to append a word to a text area by looking up the JTextArea API.

The seventh and eighth methods you should complete are clearCorrectWords and clearIncorrectWords. These methods clear the text areas that list the correct and incorrect words. You can find out how to set the text for a text area to an empty string by looking up the JTextArea API.

Finally, complete the method clearCurrentWord. This is the method that is called whenever the current word needs to be cleared. This occurs when the player clicks the Clear button and whenever a word is submitted and verified by the controller (i.e., at the end of setWordIsCorrect).

Completing BoggleApp

BoggleApp creates a controller, a model, and a view, informs the controller of the model and the view, and makes the view visible. The lectures slides show you how to do this (see, for example, SimpleApp).

By completing BoggleApp, you can run the app, but pressing the Submit or Re-roll buttons will produce no results until the controller is completed.

Completing BoggleController

BoggleController coordinates communication between the view and model. It does so through the actionPerformed method.

By completing actionPerformed, you can run the app, and roll the dice. Submitting a word will always result in the word being added to the list of correct words until you complete the model.

Completing Boggle

Boggle is the model from Lab 4. It has been enhanced to include a dictionary of approximately 80,000 English words. The dictionary is represented as a Set<String> where the strings are all lowercase English words.

Complete the method lookUp that checks if the given word is in the dictionary and is at least 3 letters in length. Once this is done, you should have a completed application.

Submit

submit 1030 L7 Boggle.java BoggleApp.java BoggleController.java BoggleView.java