CPSC 120 Lab 12
Graphical User Interfaces

As usual, create a lab12 subdirectory for today's lab, open up Mozilla Firefox and the Web version of this handout, and open Eclipse.

Vote Counter - Using Buttons

1. Save the files to your directory, then compile the program and run it to see how it works. Resize the window to see the effect on the components.

2. In a terminal window use the ls command to see the files you have. In addition to the java source code files you should see 3 bytecode files: VoteCounter.class, VoteCounterPanel.class, and VoteCounterPanel$VoteButtonListener.class. The latter is the bytecode for the VoteButtonListener class that is nested inside the VoteCounterPanel class.

3. Modify the program so that there are two candidates to vote for -- Blue and Red. To do this you need to do the following (most of this you did on paper in pre-lab):
   1. Add instance variables for Red -- a vote counter, a button, and a label. Initialize these variables in the constructor for the panel.
   2. Add the button and label for Red to the panel.
   3. Add the VoteButtonListener object voteListener to the button using the addActionListener method.
   4. Modify the actionPerformed method in the VoteButtonListener class so it checks to see which button generated the event (that is, which button was pushed) and then updates the appropriate counter and displays the results. To do this you need to use the getSource method for event objects. The event object is passed as a parameter to the actionPerformed method (the formal parameter name of the ActionEvent object is event). The getSource method returns a reference to the component that generated the event so you can compare it to your components as in the example on page 247 (explanation beginning on 245).

4. Compile and run the program.

5. Adding Some Color Modify the panel so that its color is blue if the Blue button is ahead in the number of "votes" and red if Red is ahead and magenta if it is a tie. Do the following:
   1. In actionPerformed, after the count has been updated and displayed, add a statement to set the background color of the panel based on who is ahead. All Java components have a method:

      void setBackground (Color color)

      that changes thebackground color
   2. Also, change the color of the labels so they clearly show up -- use different colors to go with each background (you can choose the colors). Components have a setForeground method that is analogous to the setBackground method. The setForeground method changes the color of the text in labels and in buttons.
   3. Compile and test your program. Be sure your colors look good and that the labels are visible. If you wish you can also change the foreground and/or background colors of the buttons.

Using TextFields - Computing Body Mass Index

• Save the program files to your directory, compile the program and run it to see how it works.
• Study the code in FahrenheitPanel.java noting the following:
  • The actionPerformed method uses the getText method to get the information out of the text field. That information is returned as a String.
  • The string from the text field must be converted to a number (in this case an int) for calculations. The parseInt method in the Integer class does this.
  • The toString method in the Integer class is used to convert the Celsius temperature back to a String. An alternate way to do this would be "" + celsiusTemp.

In this exercise you will write a similar program to compute a person's Body Mass Index. Body Mass Index (BMI) is a measure of weight that takes height into account. Generally, a BMI above 25 is considered high, that is, likely to indicate that an individual is overweight. BMI is calculated as follows for both men and women:

           (703 * weight in pounds) / (height in inches)2

1. File BMI.java contains the main program that creates the frame for the GUI panel and adds the panel to the content pane of the frame. The file BMIPanel.java contains a skeleton for the GUI to calculate BMI. Since there are two input values needed (the height and weight) this program will not respond to the user pressing ENTER on a text field. Instead, we will put a button on the panel for the user to press to trigger the calculation. So, the user enters his or her height and weight and presses a "Calculate BMI" button; the program then displays the user's BMI. Much of the framework has been done for you, but you will need to fill in code. Do the following (follow the instructions and the comments in the program):

   In the constructor for the panel you need to do the following (put your code for each immediately after the corresponding comment in the code):

   • JLabels have already been created to identify the height and weight textfields. You need to create (instantiate) the JLabels for the output, and to hold the actual BMI. (NOTE: You need to use the variables that have already been declared.)
   • Create JTextFields to hold the person's height in inches and weight in pounds.
   • Create an appropriately labeled JButton for the user to press to calculate the BMI.
   • Create a BMIListener and make it listen for the button to be pressed. Note that the listener is added to the button, not the textfields, so the BMI is computed only when the button is pressed, not when the user presses Enter on the textfields.
   • Add the height label and textfield to the panel. Note that the components will appear on the panel in the order in which you add them (left to right, top to bottom).
   • Add the weight label and textfield to the panel.
   • Add the button to the panel.
   • Add the label identifying the result and the label holding the result to the panel.

   In the actionPerformed method of BMIListener:

   • Get the text from the height and weight textfields and store the results in the String variables provided.
   • Use Integer.parseInt to convert the text to integer values, and store them in the int values provided.
   • Calculate the BMI from the height and weight values (use double precision arithmetic).
   • Use the Math.round method of the Math class to round the calculated BMI. The round method takes one parameter - the number you want to round.
   • Use Double.toString to convert the BMI to a string, and store the string in the result label.

   Compile the BMI program and run it.

2. Add code to the BMIPanel to let the user have some idea of what their BMI means. You need to either modify the JLabel that displays the BMI or add a new JLabel. Your program should include a message based on the following: a BMI less than 19 indicates the person is underweight, a BMI between 19 and 25 (inclusive) means a healthy weight, a BMI between 26 and 30 (inclusive) indicates the person is overweight, and a BMI over 30 indicates the person is very overweight. NOTE: Use an if to choose the appropriate message.

A GUI-based ATM Machine

1. Create the components and listeners as instructed by the comments in the program. When you add the components to the panel add them in the following order: the welcome label, the label telling the user to enter the amount, the text field for the amount, the label instructing the user to click the appropriate button, the buttons, and the label giving the balance. (Note: Don't do actionPerformed yet - we'll get the GUI looking ok first.)

2. Compile and run the program to see what it looks like. Not too pretty! This is what the default flow layout looks like.

3. There are many ways to make things look better. The one we will use is nested panels in the default Layout (see Section 6.3 in the text, pages 276-278). We'll divide the panel into 4 subpanels (and specify the size of each), then add those to the main panel (which has a size specified). Do this as follows:
   1. Declare and instantiate a JPanel named welcomePanel. Set its size (the width should be the constant WIDTH - you choose an appropriate height). Add the welcome label to the panel.
   2. Declare and instantiate a JPanel named amtPanel. Set its size and add both the label for the text field and the text field to it.
   3. Similarly declare and instantiate a JPanel, appropriately sized, containing the label with "deposit or withdraw" instructions and the two buttons.
   4. Finally declare and instantiate a JPanel, appropriately sized, containing the balance label.
   5. Instead of adding the individual components to the main panel add the four subpanels.
   6. Compile and run the program to see how it looks. Make necessary modifications, including setting colors for the panels, to make things look good.

4. Implement the actionPerformed method in the ChoiceListener class. The method should get the amount from the text field and convert it to a double using the parseDouble method in the Double class. Then the method needs to see which button was clicked and, using methods from the Account class, perform the appropriate action. Finally use the setText method to update the balance label (remember to use the formatter to format the new balance).

HAND IN