GUI Interlude 1: Basic Graphical User Interfaces

Introduction

Our problem today is to convert a text based program to use a graphical user interface. We won't do a full design, but concentrate on converting an existing program to use a graphical user interface (GUI).

The Original Program

The program that we will be converting is contained in the file PieSliceArea.java. This program is intended to compute the area of a slice of pie. If we look at this program we see that it uses the following operations:

Description	Predefined?	Name	Package/Module?
display a String (the greeting)	yes	print()	ann.easyio
display a String (the prompt)	yes	print()	ann.easyio
read a double (the radius of the pie )	yes	readDouble()	ann.easyio
display a String (the prompt)	yes	print()	ann.easyio
read a double (the angle of the slice)	yes	readDouble()	ann.easyio
compute the area of the pie	??	??	??
compute the area of the slice	??	??	??
display a double (area of the slice)	yes	println()	ann.easyio

This has a pretty standard form for many text based programs

1. Query user for the data.
2. Do the computation.
3. Print the result.

Notice that the user has no flexibility. They can not enter the angle before they enter the radius. Once the system has accepted the value for the radius, the user can not change it. This kind of an interaction is known as modal. The program is in one particular mode (e.g. getting the radius) at each point in time and can not leave that mode.

A typical program with a GUI, on the other hand, is amodal. The user has many choices available, typically through menu options or buttons. The user decides what order to enter values. The user can change a value after it has been entered. The user decides when to trigger the computation.

For now we will just model the behavior of our text based program.

Make a project PieSliceArea and copy the file PieSliceArea.java into it.

Run the program and verify that the results are what you expect.

Radius	Angle	Expected Area: pi * radius2 * (angle/360)	Area computed by program
1	360
2	90
3	35

Stopping the Application Automatically

One difference between a GUI program and a text-interface program is that where a text-interface application shuts down automatically when execution reaches the end of the main method, we must explicitly halt a GUI program to achieve the same effect. (The reason is a bit beyond the scope of this exercise; suffice to say that there are a lot of things going on behind the scenes to make all of the graphics happen, and we have to make those things terminate, as well as our program.) The easiest way to do so is to add the following line:

   System.exit(0);

at the very end of our main() method. This will guarantee that when execution reaches the end of the method, our GUI application will stop running.

Deciding on Widgets

If you are using Code Warrior on the Mac, please read this before continuing.

If we look at the operations in our program, the computation should be unaffected by how the data is acquired by the program. What we need to change are the operations that involve printing something to the screen or reading a value from the keyboard.

Implementing a full GUI would take some time. Fortunately, Java provides a number of packages to support GUI. The original package was the abstract windowing toolkit (AWT). It provided the idea that all of the widgets (buttons, menus, text areas) of our interface would a kind of Component. The reason for the toolkit being abstract was that every implementation of the Java Run Time environment was free to decide how to implement the look and feel of each component. This means that as a GUI designer, your application would look different on different platforms.

One of the purposes of the swing package is to give the implementers a toolkit with the same kinds of widgets, but also more direct control. A swing application should have a unified look on different platforms. Look at Sun's API documentation for Java 2 to get an idea of some of the classes that are available. Many of the swing components that we will be interested in have a J prefix to distinguish them from their AWT counterparts. Among many others are:

• JApplet - a class used in implementing applets.
• JButton - a class used for implementing a push button.
• JFileChooser - a class which provides a simple mechanism for a user to choose a file.
• JMenu - a class used for implementing a menu.
• JMenuItem - a class used for implementing an item in a JMenu.
• JOptionPane - a class used for implementing a popup input or output dialog box.

In today's lab we will use the JOptionPane. The typical use of an option pane involves one of the following methods

showConfirmDialog()	Ask a confirming question, like yes/no/cancel.
showInputDialog()	Prompt for some input.
showMessageDialog()	Tell the user about something that has happened.
showOptionDialog()	A grand unification of the above three

In our case, we need to prompt the user for two input values and we need to tell the user the area of the pie slice. So we will use the showInputDialog() and showMessageDialog() methods.

Using showInputDialog() to get radius

Examining the documentation for showInputDialog(), one finds that it accepts the following arguments:

1. Component parentComponent - the parent component (often a frame) of the dialog box. It may be null.
2. Object message - a descriptive message to be placed in the dialog box. It is usually a String, Component, or Icon, but can be any Object. We will use it for the prompt.
3. String title - the title for the dialog box.
4. int messageType - an integer value that determines the style of the message. The possibilities are:
   • ERROR_MESSAGE
   • INFORMATION_MESSAGE
   • WARNING_MESSAGE
   • QUESTION_MESSAGE
   • PLAIN_MESSAGE

If we wanted to ask the user what their age was, the following code would create a dialog box with the title "User Age Query Dialog" displaying the message "What is your age:". It will have an area where the user can type a response.

   String ageString = JOptionPane.showInputDialog( null,
  					 "What is your age: ",
  					 "User Age Query Dialog",
  					 JOptionPane.QUESTION_MESSAGE);

Notice that the result we get back is not a number, but a string. We can use the parseDouble() method from the Double wrapper class to extract a double value from a String named aString, as shown below:

  double doubleVal = Double.parseDouble(aString);

Using this information, replace the code in PieSliceArea.java that inputs the radius, so that it uses a dialog box to get the radius of the pie.

Don't forget to import the swing package javax.swing.* or the code will not compile.

Use the tests cases from before to verify that the code is still working properly.

Using showInputDialog() to get angle

To get the angle, we will use the same method as we did to get the radius. Replace the code that inputs the angle with code that does so using a dialog box, and then test your code again.

Continue when it is functioning properly.

Using showMessageDialog() to display hypotenuse

The last thing that we need to do is to display the area of the pie slice for the user. The showMessageDialog() method is perfect for that task. Interestingly enough, it takes the same four arguments as the input dialog method does. So for example, if we wanted to tell the user "The program is finished", the following code would do the job:

   JOptionPane.showMessageDialog( null,
  					 "The program is finished!",
  					 "Termination Notification Dialog",
  					 JOptionPane.PLAIN_MESSAGE);

Notice that with a message dialog, there is nothing that is returned to us.

Using this information, replace the code in PieSliceArea.java that outputs the area, so that it displays the area of the pie slice using a dialog.

Once again, use the tests cases from before to verify that the code is still working properly. 

Phrases you should now understand:

GUI, swing package, Component, widget, JOptionPane, showInputDialog(), showMessageDialog()

Submit:

Turn in to your instructor a hard copy of your final version of PieSliceArea.java.

Clean Up

Don't forget to clean up. Among other tasks you may need to save your work to a floppy, remove your originals from the hard drive, etc.

Back to This Lab's Table of Contents

Back to the Prelab Questions

Back to the Table of Contents

Back to the Introduction