JMU JMU - Department of Computer Science
Help Tools
Lab: Experimenting with Graphical User Interfaces


Instructions: Answer the following questions one at a time. After answering each question, check your answer (by clicking on the check-mark icon if it is available) before proceeding to the next question.

Getting Ready: Before going any further, you should:

  1. Depending on your development environment, create either a directory or a project for this lab.
  2. Setup your development environment.
  3. Download the following files:
    Converter.java
    converter.html
    worksheet.txt
    to an appropriate directory/folder (e.g., the course downloads directory/folder). In most browsers/OSs, the easiest way to do this is by right-clicking/control-clicking on each of the links above and then selecting Save as... or Save link as....

1. Review of Some Object Oriented Programming Concepts: This part of the lab will refresh your memory of some important concepts from object oriented programming and design.
  1. Open Converter.java.
  2. Create a class named ConverterWindow that is a specialization of the JFrame class. (Note: This class must import java.awt.*, java.awt.event.*, and javax.swing.*.)
  3. Add a default constructor to this class that calls the parent's one-parameter constructor passing it the String literal "Converter".
  4. What code did you add? 
        public ConverterWindow()
    {
       super("Converter");
    }
    Expand
  5. Add an empty private void method named setupWindow().
  6. Add an empty private void method named setupLayout().
  7. In the setupLayout() method, add a declaration for a local variable named contentPane that is a Container.
  8. What code did you add? 
           Container       contentPane;
    Expand
  9. In the setupLayout() method, assign the result of a call to the parent's getContentPane() to the local variable named contentPane?
  10. What code did you add? 
           contentPane = getContentPane();
    Expand
  11. Why don't you need to use super.?
    Because the getContentPane() method is inherited from the parent and not overridden in the child. Hence, there is no ambiguity.
    Expand
2. Windowing Basics: This part of the lab will help you understand some of the concepts required to create and use windows.
  1. In the setupWindow() method, call the setDefaultCloseOperation() method (inherited from the parent) passing it the value EXIT_ON_CLOSE (inherited from the parent).
  2. At the bottom of the setupWindow() method, call the setSize() method (inherited from the parent) passing it the values 400 and 200.
  3. At the bottom of the setupWindow() method, call the setVisible() method (inherited from the parent) passing it the values true.
  4. What code did you add? 
           setDefaultCloseOperation(EXIT_ON_CLOSE);       
       setSize(400,200);       
       setVisible(true);
    Expand
  5. At the bottom of the constructor, add a call to the setupLayout() method.
  6. At the bottom of the constructor, add a call to the setupWindow() method.
  7. What code did you add? 
          setupLayout();
      setupWindow();
    Expand
  8. Compile ConverterWindow.
  9. Compile and execute Converter.
3. Widget/Component Basics and Layout: This part of the lab will help you understand GUI layout and the construction of widgets/components.
  1. At the bottom of the setupLayout() method, call the contentPane object's setLayout() method and pass it the reference null.
  2. What code did you add? 
           contentPane.setLayout(null);
    Expand
  3. Add three attributes to the ConverterWindow class, a JButton named convertButton, a JLabel named kilometersLabel, and a JTextField named milesField.
  4. What code did you add? 
        JButton          convertButton;
    JLabel           kilometersLabel;    
    JTextField       milesField;
    Expand
  5. At the bottom of the setupLayout() method, construct a JButton (passing the constructor the String literal "Convert") and assign it to convertButton.
  6. At the bottom of the setupLayout() method, call the convertButton object's setBounds() method passing it the values 250,125,100,30.
  7. At the bottom of the setupLayout() method, call the contentPane object's add() method passing it convertButton.
  8. What code did you add? 
           convertButton = new JButton("Convert");
       convertButton.setBounds(250,125,100,30);    
       contentPane.add(convertButton);
    Expand
  9. Compile ConverterWindow and execute Converter.
  10. At the bottom of the setupLayout() method, construct kilometersLabel (with text "0"), set its bounds to 225,25,100,30, and add it to contentPane.
  11. What code did you add? 
           kilometersLabel = new JLabel("0");
       kilometersLabel.setBounds(225,25,100,30);
       contentPane.add(kilometersLabel);
    Expand
  12. At the bottom of the setupLayout() method, construct milesField (with text "0"), set its bounds to 25,25,100,30, and add it to contentPane.
  13. What code did you add? 
           milesField = new JTextField("0");
       milesField.setBounds(25,25,100,30);
       contentPane.add(milesField);
    Expand
  14. Compile ConverterWindow and execute Converter.
  15. What happens when you click on Convert?
    Nothing.
    Expand
  16. Why?
    Because no object is responding to the ActionEvent that is generated.
    Expand
4. Responding to GUI Events: This part of the lab will help you understand how to create objects that can respond to GUI events.
  1. What kind of events are generated by JButton objects? (Hint: This was discussed in lecture.) 
    ActionEvent
    Expand
  2. What interface does a class need to implement in order to be informed of these events? (Hint: This was discussed in lecture.) 
    ActionListener
    Expand
  3. Declare that the ConverterWindow class implements that interface.
  4. What code did you add? 
     implements ActionListener
    Expand
  5. Add an empty version of the method that is required by that interface to the ConverterWindow class.
  6. What code did you add? 
        public void actionPerformed(ActionEvent event)
    {
    }
    Expand
  7. Add code to that method that declares String variables named milesString and kilometersString, and double variables named miles and kilometers.
  8. Add code to that method that gets the text from milesField and assigns it to milesString.
  9. Add code to that method that converts milesString to a double, assigns that value to miles, coverts miles to kilometers (there are 1.60934 kilometers per mile), and assigns an appropriately formatted String to kilometersString. If milesString can't be converted, assign "N/A" to kilometersString. (Hint: Use Double.parseDouble() in a try-catch block.)
  10. Add code to that method that sets the text in kilometersLabel to kilometersString.
  11. What code did you add? 
           try
       {
          miles            = Double.parseDouble(milesString);
          kilometers       = miles * 1.60934;
          kilometersString = String.format("%10.9f",kilometers);
       }
       catch (NumberFormatException nfe)
       {
          kilometersString = "N/A";
       }

     
       kilometersLabel.setText(kilometersString);
    Expand
  12. Compile ConverterWindow and execute Converter.
  13. Why does nothing happen when you click on Convert?
    Because there is still no object is responding to the ActionEvent that is generated.
    Expand
  14. In the constructor for ConverterWindow, in an appropriate place, call the convertButton object's addActionListener() method passing it the reference this.
  15. Compile ConverterWindow and execute Converter.
  16. Test your code. (Think about the test cases you should use.)
5. Applets: An applet is a program that runs inside of a browser. This part of the lab will help you learn a little bit about applets.
  1. Create a class named ConverterApplet that extends the JApplet class and implements the ActionListener interface. (Note: This class should import java.awt.*, java.awt.event.*, and javax.swing.*.)
  2. Copy the attributes, actionPerformed() method, and setupLayout() method from the ConverterWindow class.
  3. Add a default constructor that calls the parent's default constructor and the setupLayout() method.
  4. What code is in your ConverterApplet class? 
    import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class ConverterApplet extends JApplet  implements ActionListener
{
    JButton          convertButton;
    JLabel           kilometersLabel;    
    JTextField       milesField;


    public ConverterApplet()
    {
       super();
       setupLayout();       
    }


    public void actionPerformed(ActionEvent event)
    {
       double      kilometers, miles;       
       String      kilometersString, milesString;
       
       milesString = milesField.getText();
       try
       {
          miles            = Double.parseDouble(milesString);
          kilometers       = miles * 1.60934;
          kilometersString = String.format("%10.9f",kilometers);
       }
       catch (NumberFormatException nfe)
       {
          kilometersString = "N/A";
       }
     
       kilometersLabel.setText(kilometersString);
    }

    
    private void setupLayout()
    {
       Container       contentPane;
       
       contentPane = getContentPane();
       contentPane.setLayout(null);
       
       convertButton = new JButton("Convert");
       convertButton.setBounds(250,125,100,30);    
       contentPane.add(convertButton);       

       kilometersLabel = new JLabel("0");
       kilometersLabel.setBounds(225,25,100,30);
       contentPane.add(kilometersLabel);
       
       milesField = new JTextField("0");
       milesField.setBounds(25,25,100,30);
       contentPane.add(milesField);
       
       convertButton.addActionListener(this);
    }
}
    Expand
  5. Compile ConverterApplet.
  6. Load converter.html into the browser of your choice (e.g., using File+Open File).
6. Review: This part of the lab will help you review some issues from object oriented design that arose earlier in the semester.
  1. Do the ConverterApplet and ConverterWindow classes have much code in common?
    Yes, they are virtually identical.
    Expand
  2. How would you "normally" reduce the amount of code duplication?
    Create a common (probably abstract) parent class.
    Expand
  3. Why can't you use that approach in this case?
    Because both ConverterWindow and ConverterApplet extend different classes, and those classes were created by someone else.
    Expand
  4. There are several other ways to reduce the amount of code duplication in cases like these. You'll learn about them in other courses.
Department of Computer Science

Copyright 2025