CSE 283 Introduction to Object Oriented Design

Barbara Nostrand, Ph.D.


CSE 283 Labs
Welcome to the site for CSE 283 Labs!

 

Lab 3 Software Engineering

Prev | Next | Lab 3

 

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

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:

  • 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 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. 

Class NumberFormat

Constructor Summary
NumberFormat()
          Creates a NumberFormat object which will be used to format numeric I/O.  Note that we can modify our format as needed. 
 
Method Summary
 String format(double number)
          Formats a double to produce a string.  This method is compatible for all floating point values. 
 String format(long number)
          Formats a long to produce a string.  This method is compatible for all integer values. 
static NumberFormat getInstance()
          Returns the default number format for the current default locale.
 void setMaximumFractionDigits(int newValue)
           Sets the maximum number of digits allowed in the fraction portion of a number.
 void setMaximumIntegerDigits(int newValue)
           Sets the maximum number of digits allowed in the integer portion of a number.
 void setMinimumFractionDigits(int newValue)
           Sets the minimum number of digits allowed in the fraction portion of a number.
 void setMinimumIntegerDigits(int newValue)
           Sets the minimum number of digits allowed in the integer portion of a number.
 

The following code fragment will print out a 5 followed by a decimal point. 

int myNumber = 5;
NumberFormat form = NumberFormat.getInstance();
((DecimalFormat) form).setDecimalSeparatorAlwaysShown(true);
System.out.print(" -> " + form.format(myNumber));

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: 

"#,##0.00;(#,##0.00)"

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

int myNumber = 5;
NumberFormat form = NumberFormat.getInstance();
form.setMinimumIntegerDigits(3);
form.setMinimumFractionDigits(5);
System.out.println(" -> " + form.format(myNumber));

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

   System.exit(1);

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()

 

Prev | Next | Lab 2

 
  Home

Schedule

Help

Lab 0

Lab 1

Lab 2

Lab 3

Lab 4

Lab 5

Lab 6

Lab 7-8

Lab 9

Lab 10

Lab 11

Lab 12

Lab 13






Last modified: 2007 OCT 28
bnostran@syr.edu