CSE 283 Introduction to Object Oriented Design
Barbara Nostrand, Ph.D.
CSE 283 Labs
Lab 3 Software Engineering
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:
This has a pretty standard form for many text based programs
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.
Deciding on Widgets
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:
In today's lab we will use the JOptionPane. The typical use of an option pane involves one of the following methods
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:
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 to extract a double value as shown:
Using this information, modify the code in PieSliceArea.java to use 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. Make the appropriate changes and then test your code again.
Continue when it is functioning properly.
Using NumberFormat to format and parse numbers
To begin, DecimalFormat is a subclass of NumberFormat. This means that we can store a DecimalFormat object in a NumberFormat variable, but not necessarily the reverse. To use Java number formatting, we must first obtain an instance for a NumberFormat.
The following code fragment will print out a 5 followed by a decimal point.
Decimal format patterns come in pairs. One to display positive numbers and one to display negative numbers. This supports the accounting practice of representing negative numbers by enclosing the value with parenthesis. Accountants do this so that nobody can change a minus sign into a plus sign in their records. For example, the decimal format:
specifies that positive values will have up to four digits before the decimal and exactly two after the decimal with a comma deliminating the thousands mark. The second pattern is for negative numbers and duplicates the first except that values are enclosed by parenthesis. The pound sign specifies a digit position, but will display as a space if the value is too small to need a digit in that position. A 0 specifies that a digit will always show up in that position.
DecimalFormat enforces decimal half rounding. With the format given above, 3.475 will display as 3.48 and 3.474 will display as 3.47.
The following code fragment will print out 005.00000:
Remember, the format method returns a string. Consequently, it can either be output immediately or concatenated with other string values.
Using showMessageDialog() to display sliceArea
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, modify the code in PieSliceArea.java to use a dialog box to display the area of the pie slice.
Once again, use the tests cases from before to verify that the code is still working properly.
Stopping the Application Automatically
Once we have completely converted our program, we might want to add the line
at the very end of our main(). This will guarantee that once we click on the OK button on the message dialog the application will stop running.
Phrases you should now understand:
GUI, swing package, Component, widget, JOptionPane, showInputDialog(), showMessageDialog()
Last modified: 2007 OCT 28