Lab Overview: General Specs

TCO:

Desired (Lab) Learning Outcome: Using an IDE write a Swing GUI program that inputs data into a one dimensional array and then sorts the data. Instead of a file, we input data from the keyboard.

Dependencies: Reading assignments, on-site and on-line topic/lectures.

Lab Overview: Lab Presentation

Lab Assignment:

Using an IDE write a Swing GUI program that inputs data into a one dimensional array and then sorts the data...

Narrative/Case Study: The objective of this lab is to use an IDE to write a Swing GUI program that inputs data into a one dimensional array and then sorts the data. Instead of a file, we input data from the keyboard. Actually, you can also read the data from a file into an array and perform various operations on the array data. Then, you can reverse the process and write array data back into the file. So, this lab is good practice for that kind of operation.

The GUI is similar to previous labs. For keyboard input, we do not use Console based techniques, but rather use a JTextfield and a JButton. The creation of the array and the inputting of data into the array are quite straight-forward. The sorting of the data is downright trivial — you take the created array, loaded with data, and use it as an argument to a method. The original array then has sorted data that could be output to a file.

Environment: Once again, you should have Sun's JDK installed, as well as, if you like, an IDE like JCreator LE.

Remarks: Here is the code for the top of my class:

/**
 * Lab 5 for CIS 355 with Prof. Ricky J. Sethi
 * GUI Lab Description
 *
 * @author Your Name Here
 * @version Version 1.0 as of 2006-05-05
 * For: CIS 355 with Professor Sethi
 *
 * Specification:
 *   input(keyboard):
 *   output(screen):
 ******************************************************************/


package cis355Package;         // Need to place .class files in cis355Package dir 
                               // Use java cis355Package/Lab5Cis355 to run
                               // Make sure gifs directory is at same level as cis355Package directory


import javax.swing.*;          // Need for Swing
import java.awt.*;             // Need for awt
import java.awt.event.*;       // Need for events
import java.text.*;            // Need for Decimalformat
import java.util.Arrays;       // Need for Arrays, sort, etc.

public class Lab5Cis355 extends JFrame {  // Start of class Lab5
   .
   .
   .
} // End of class

Notice in the imports above that you really don't need the DecimalFormat class in this lab — it is a hold-over from earlier labs. But we again have 3 JPanels, only without fancy colours. Also, we use the JFrame's content pane's BorderLayout. The top JPanel has our normal JTextArea in it and the JPanel is placed in the NORTH of the content pane.

Here is the code for some of the attributes:

// attributes
private JButton jbutClear;
private JButton jbutEnd;
private JPanel  jpanTop;                // top jpanel
private JPanel  jpanMiddle;             // middle jpanel
private JPanel  jpanBottom;             // bottom panel

// top panel
private JTextArea  jtxaTop;             // jtextarea for top jpanel

The middle JPanel has a grid layout of 3 rows and 2 columns. The code for its attributes is:

// middle panel
private JButton      jbutArray;
private JTextField   jtxfArray;
private JButton      jbutSee;
private JTextField   jtxfSee;
private JButton      jbutSort;
private JTextField   jtxfSort;
private GridLayout   grlt1;
private int []       intArrMy;
private int          intIndex = 0;

The rest of the attributes are:

// bottom panel
private  JLabel  jlabBottom;

private String str1 = "   Lab5 CIS355, Sun June 5, 2005, Soln by  ";
private String str2 = "   Devry University ";
private String str3 = " \temail = email@devry.edu ";
private String str4 =  str1 + "\n" +
                       str2 + "\n" +
                       str3;

private String str5 = "You hit the clear button!";

The top of the constructor code is:

public Lab5Cis355()  {                           // start of constructor
    super("Lab5 CIS 355");  //tile of the JFrame

    Container theWindow   =   getContentPane(); //get ref to the JFrame

    jbutClear = new JButton("Clear Everything");
    jbutEnd = new JButton("End the Program");
    jbutEnd.setToolTipText("This button ends the program");

    .
    .
    .

    setSize(500,500);
    setVisible(true);
} // end of constructor

We then add the clear button to the WEST (left) and the End button to the EAST (right). The code for doing this is:

// add the clear button to the west and the end button to the east
theWindow.add(jbutClear, BorderLayout.WEST);
theWindow.add(jbutEnd, BorderLayout.EAST);

The code for the 3 JPanels is:

// create a new jtextarea for the top jpanel
jtxaTop = new JTextArea(2, 30);
jtxaTop.setEditable(false);
jtxaTop.append(str4);

// do the top jpanel
jpanTop  =  new JPanel();
jpanTop.add(jtxaTop);
theWindow.add(jpanTop, BorderLayout.NORTH);

// do the middle jpanel
jpanMiddle = new JPanel();               //create middle jpanel
grlt1   =   new   GridLayout(3,2);
jpanMiddle.setLayout(grlt1);

jbutArray = new  JButton("Enter an Array Value and Hit Me");
jtxfArray = new  JTextField(5);

jbutSee  = new  JButton("Hit me and see your Array values ");
jtxfSee  = new  JTextField(15);

jbutSort = new  JButton("Hit me to sort all your Array values");
jtxfSort = new  JTextField(15);

jpanMiddle.add(jbutArray);
jpanMiddle.add(jtxfArray);

jpanMiddle.add(jbutSee);
jpanMiddle.add(jtxfSee);

jpanMiddle.add(jbutSort);
jpanMiddle.add(jtxfSort);

theWindow.add(jpanMiddle, BorderLayout.CENTER);

intArrMy = new int[10];

// do the bottom panel
jpanBottom  =  new  JPanel();
Icon iconBottom1 = new ImageIcon("gifs/Bricks.gif");
jlabBottom = new JLabel("You are building your Array!!!",
                        iconBottom1,  SwingConstants.LEFT);

jpanBottom.add(jlabBottom);
theWindow.add(jpanBottom, BorderLayout.SOUTH);

The action listener code for the jbutClear button is:

jtxfArray.setText("");
jtxfSee.setText("");
jtxfSort.setText("");
for (int j = 0; j <10;  j++) {   // start the for
   intArrMy[j] = 0;
} // end the for

// Reset the intIndex value, too:
intIndex = 0;

Icon iconBottom1 = new ImageIcon("gifs/Bricks.gif");

jlabBottom.setText("You are building your Array!!!");
jlabBottom.setIcon(iconBottom1);
jtxfArray.grabFocus();

The action listener code for the jbutEnd button doesn't change from the previous labs — the code is:

JOptionPane.showMessageDialog(null, str4);
System.exit(0);

The code for the action listener for jbutArray is:

if (intIndex < 10) {    // start the if
   intArrMy[intIndex] = Integer.parseInt(jtxfArray.getText());
   jtxfArray.setText("");
   jtxfArray.grabFocus();
   intIndex += 1;
} else {                // start the else
   JOptionPane.showMessageDialog(null, "The array can only hold 10 integers");
   jtxfArray.setText("");
   jtxfArray.grabFocus();
} // end the else

The code for the action listener for jbutSee is:

String strArray = " ";
for (int j = 0; j < 10; j++) {  // begin the for
   strArray += intArrMy[j] + " ";
} // end the for

jtxfSee.setText(strArray);

The code for the action listener for jbutSort is:

String strArray2 = " ";
Arrays.sort(intArrMy);

for (int j = 0; j < 10; j++) {   // begin the for
   strArray2 += intArrMy[j] + " ";
}  // end the for

jtxfSort.setText(strArray2);

Icon iconBottom2 = new ImageIcon("gifs/From_ground_up.gif");
jlabBottom.setText("Your Array is Sorted!!!!!!");
jlabBottom.setIcon(iconBottom2);

Finally, please don't forget your WindowAdapter()!

The code for the TstLab5 class is:

package cis355;

public class TstLab5 {   // start of the test class
  public static void main(String args[]) {   // start of main() method
    Lab5Cis355 myLab = new Lab5Cis355();    // instantiate the lab
     myLab.setExtendedState(myLab.MAXIMIZED_BOTH);
  } // end of main() method
} //end of class

Please Note: it's okay not to use the package directives in the lab; you should read Appendix F and utilize them but it's not required for the lab, per se.

You can see a demo of the shell of the application here: Applet Demo Shell.

The three (3) output files for this lab are Initial Start Screen; Values Entered and Sorted Screen and Exit Program Screen. The two files (gifs) you'll need for your program are: Bricks.gif and From_ground_up.gif.

Student Lab Plan

Student Name:

Date:

Read the Lab Presentation and respond to the following items prior to beginning the lab exercise.

1. Define the problem(s) to be solved.




2. Identify the steps you will take to solve the problem(s) in the order you will execute them.




3. How will you know that the problem has been solved successfully?




4. What information do you need, or what research do you need to do, in order to accomplish the solution?




5. What specific computer commands or computer tools will you use to accomplish this lab task?

Lab Student Report

Prepare this Lab Report when you have completed and lab assignment. Include any charts, graphs required to complete the lab. Refer to your initial lab plan to respond to the first questions.

1. Define the problem you were solving in this lab.




2. Did your initial plan successfully identify the tasks required to solve the problem? If not, why?




3. Did the lab require any change in the sequence of steps from your initial plan? Explain.




4. What challenges did you meet in working towards a solution?




5. Were you successful in solving the problem? If yes, explain your solution, if no, explain the solution you did use. Please be specific, and provide a detailed description of your solution.
   
   
   
6. Did you use methods you learned in class? If yes, explain your solution, if no, explain the solution you did use. Please be specific, and provide a detailed description of your solution.
   
   
   
7. What questions related to this lab still remain for you?