The Scenario.

In this lab, we would like you to get practice in the use of Swing GUI components. So we would like you to create a program that includes two JSliders, a JLabel, a pop-up menu (JComboBox), and a JButton.

A running version of the program we hope you produce is provided below (if your browser handles applets correctly):

At the "North" side of the screen is a JLabel identifying the program as "Bouncy Ball". At the "East" side is a slider (JSlider) which controls the vertical velocity of the ball. At the "South" side of the screen is a panel (JPanel) which holds a slider (JSlider) which controls the horizontal velocity, a pop-up menu (JComboBox) which allows the user to change the ball's color, and a JButton, which is used to show/hide the ball. If the JButton is pressed, the ball should be hidden and the button's label should be changed to "Show". Pressing it again should show the bouncing ball and change the label back to "Hide". The ball should continue to move while it is hidden and you can change the ball's properties while it is hidden.

How to Proceed

Before starting be sure that you have your GUI cheat sheet in front of you (you can find it on the course web site if you don't have it with you). As a quick reminder, remember the basic steps in displaying components:

1. Construct an instance of the component.

2. Initialize it if necessary (like adding items to a JComboBox).

3. Add the component to a JPanel or to the content pane of the window controller.

To react to events generated by the user interacting with a GUI component, remember these steps:

1. Add the window controller as a listener to the component, calling a method like addActionListener.

2. Declare that the window controller class implements the listener interface for that component, such as ActionListener.

3. Implement the method that is called when the user interacts with the component, such as actionPerformed.

Note that the statements import java.awt.*;, import java.awt.event.*;, import javax.swing.*;, and import javax.swing.event.*; need to appear at the top of your class. These lines inform Java that your program will need access to the standard Java libraries that support GUI components and events (including event listeners).

When you run your program from Eclipse, set the width to 400 and the height to 500.

Here is a suggestion on how to decompose the development of this program into simpler steps.

1. Include code in your begin method to add a label (JLabel) centered at the "NORTH" end of the program window. The label should say "Bouncy Ball". To set the font of the label, you need to create a new font using:

   new Font (String fontName, int style, int size);
   

   The style can be Font.BOLD, Font.ITALIC, Font.PLAIN, or Font.BOLD + Font.ITALIC. The font used in the demo is "Sand", which unfortunately is not available in our Linux installation. You can find the list of font names by going to the Application menu and selecting Desktop Preferences. In the Preferences window, select "Font" and click on any one of the top four items that allow you to choose fonts. Find one that is interesting and use that as your font.

   This component does not accept input so you do not need a listener.

2. Now work on a component that accepts user input by adding the vertical speed slider to the "EAST" side of the canvas. The slider is a JSlider representing the range of vertical speeds in pixels per second. The demo ranges from 40 to 600 pixels/second with an initial value of 40 pixels/second.

   In order to allow your WindowController extension to "listen" to the JSlider, make sure that your class header ends with the phrase "implements ChangeListener" and that you send the message addChangeListener(this) to your JSlider. Define the stateChanged method so that every time the JSlider is "adjusted", the vertical speed of the ball changes.

   You also need to add a method setVerticalSpeed in the BouncyBall class to make the ball change. Note that BouncyBall expects speeds in pixels/millisecond, but the slider gives you speeds in pixels/second. Divide the slider value by SPEED_SCALING_FACTOR (a double representing the number of milliseconds in a second) to convert the value inside setVerticalSpeed. Look at how the speed parameters are used in the BouncyBall constructor and mimic that code. Recall as well that you need to multiply the speed passed in by the length of the pause (PAUSETIME) to scale the speed appropriately.

   Finally, BouncyBall uses negative speeds to move up (and to move left). The slider always gives you a positive value in the range. Before changing the speed of the ball, remember to check if the ball currently has a negative speed. If it does, multiply the slider speed by -1 so the ball continues to move in the same direction, just at a different speed.

3. Notice that there is more than one component below the canvas on the display. You need to create a JPanel to hold the collection of components. The panel should have the horizontal slider in one row and the remaining components in a second row. To do this, you need to set the new panel's layout (using setLayout) to a GridLayout with 2 rows and 1 column.

   You will add the horizontal slider first to the new panel so that it occupies the top row. To allow the second row to contain more than one component, you need to create a panel for the second row. This panel can use the default FlowLayout manager.

4. Add the horizontal speed slider to the "SOUTH" panel. Its implementation is quite similar to the vertical speed slider.

5. Add the color menu to the panel created to contain the second row. The color menu is a JComboBox whose entries list color names. See the GUI cheat sheet for the constructor and the method used to add choices to the JComboBox item. Be sure to add to the class header that your program "implements" ActionListener. (When you have a class which implements several interfaces, you simply separate the interfaces with commas. Do NOT include the keyword implements more than once in the class header!) Also, don't forget to tell the JComboBox that your program will be the listener.

   Add code to the appropriate method to handle ActionEvents. You will need to add a setColor method to the BouncyBall class to change the ball's color.

6. Next add the hide/show JButton. When the user clicks on the button, the ball should hide and the label should change to "Show" using setText. The opposite behavior should occur if the user clicks again. You can find out what the current label is by calling getText on the button.

Submitting Your Work

When your work is complete you should deposit in the appropriate dropoff folder a copy of the entire Eclipse project. Make sure the folder name includes your name and the phrase "Lab 6". Also make sure that your class includes a comment containing your name.

Also, before turning in your work, be sure to double check both its logical organization and your style of presentation. Make your code as clear as possible and include appropriate comments describing major sections of code and declarations.

This lab is due Thursday at 11 p.m., though I expect you to complete this program during your lab period.

Computer Science 051
Department of Math & Computer Science
Pomona College