CSC 121 - Chapter 7 Lab - The Eclipse IDE, Simple GUI

CS Labs: Lab 7

To accompany Chapter 7 of An Introduction to Object-Oriented Programming with Java by C. Thomas Wu.

Event-Driven Programming and GUIs

Topics include: Introduction to Eclipse - JFrame, JButton, JMenu, ActionListener, ActionEvent, Container, getContentPane, actionPerformed, and addActionListener. There are 5 checkpoints . If you need help with any exercise, raise your hand.

First, unzip the lab materials to your storage media or C:\ drive. Be sure to check the Use Folder Names option. Do Not Extract the folder and its contents to your project, instead place it in another folder on your hard drive. Everything you need for the lab exercises today is contained in this new directory.

Open Eclipse and select File -> New Project to create a new Java Project. Use the project name yourLastName07 (Jane C. Hawk for this example) and project contents T:\yourLastName (deselect "use default", browse and make new directory with your last name if needed and note the workspace is drive T -Thawspace to avoid losing all your work in the event of a computer lockup.)

File -> Import -> File System -> Next. In the From Directory field Browse to find the folder C:\Lab07/FirstFrame created in the first step (unzipping the project). Click on the check box by the file icon. The Into Folder field should now read Hawk07. Click Finish.

Select Run / Run... and edit the Project and Main Class fields. Double click on Java Application, edit the Name field, edit the Project field (click on Browse... and select Hawk07), and edit the Main class field (click on Search and select MyFrame.java), click Apply and then click Run.
 

Extending the JFrame Class

In the Navigator view, double click the file MyJframe.java and the source code for this class appears in the editor. This class extends JFrame.
  1. Why is there no dot notation used on the methods: setTitle(), setSize(), setDefaultCloseOperation(), and getContentPane()?
  2. Why is the dot notation used with the method SetBackground()?

Predict what will happen when this class is compiled and run. Compile and run to see if your prediction is correct.

Adding JButtons to the ContentPane

File -> Import -> File System -> Next. In the From Directory field Browse to find the folder C:\Lab07/SecondFrame. Click on the check box by the file icon. The Into Folder field should now read Hawk07 (click Browse... for the Into Folder field and select Hawk07 if necessary.) Click Finish. Edit the MyJFrame class in this directory. Examine the code.

Predict what will happen when you run this program. Compile and run it. Without changing the size of the window or the button, position the button so that it is completely within the window.

Handling A Button Event

It would be more interesting if something happened when you click on the button

File -> Import -> File System -> Next. In the From Directory field Browse to find the folder C:\Lab07/ThirdFrame. Click on the check box by the file icon. The Into Folder field should now read Hawk07. Click Finish. Edit the MyJFrame class here. Examine the code. Notice that MyJFrame implements the ActionListener interface. Next look at the MyJFrame constructor. When a MyJFrame object is constructed, it is added as a listener to the button displayed in its content pane. Notice that the button is labeled "0".

Because this version of MyJFrame implements the ActionListener interface, it must have an actionPerformed() method that is passed an ActionEvent to handle. Right now, the actionPerformed() method does nothing with the button event. Compile and run this program and notice that nothing happens when you click on the button.

Add code to the actionPerformed() method so that each time you click on the button, the number displayed increments by one. For example, when you click on it the first time a "1" should appear, the second time you click on it a "2" should appear and so on. Hint: Add a new private integer instance variable buttonCount that keeps track of how many times the button has been clicked on. What should you initialize this variable to in the MyJFrame constructor? Every time the button is clicked, increment this variable and display the new value on the button. In your Java documentation, look up the setText() method that the JButton class inherits from its parent class AbstractButton(). Also, look at how the JButton was constructed for some ideas about how to convert the value of buttonCount to a String. You can pass this string as a parameter to the button's setText() method to set the label on the button to the new value of your counter variable.

1 Call us over to see your code and running program. Create a folder named sol1 in your project folder on T:\ and copy MyFrame.java to this folder.

Handling More than One Button's Events

Replace and edit the MyJFrame class from the subdirectory FourthFrame. In this version, MyJFrame is constructed with two buttons both labeled "0". Notice that a MyJFrame object listens for action events from both buttons. This means that when an action event occurs, you must get the event source and check to see which button (button1 or button2) was clicked. Once you know which button, the event handler should increment that button's count (button1Count or button2Count) and redisplay the new count on the appropriate button.

2 Call us over to see your code and running program. Create a folder named sol2 in your project folder on T:\ and copy MyFrame.java to this folder.

Handling Text Events

Replace from subdirectory FifthFrame and edit the MyJFrame class from this subdirectory in your project. Compile and run this program. The button works just like it did in version 3. Notice that whenever you type something into the text field and hit ENTER, the button increments its number. This is because the actionListener() method doesn't distinguish between an event from the button or the text box.

Modify your actionListener() code so that when you enter text in the text field and hit ENTER, the handler extracts the String from the text and turns it into an int (use Integer.parseInt()). This value should then be used to update the buttonCount value and also the label on the button. For example, suppose the button currently displays "2" and you enter "77" into the text field and hit ENTER. The button should display "77". Furthermore, if you follow this with clicking on the button, it should display "78" and so on. As with the previous checkpoint, your actionListener()code can determine the source of the event (either the text box or the button) and act accordingly.

3 Call us over to see your modification and running program. Create a folder named sol3 in your project folder on T:\ and copy MyFrame.java to this folder.

For the next checkpoint, add a label to this version of MyJFrame, positioned above the text field, that says "Enter a number to update the button". This is to let the user know what should be entered into the text field. The label should be centered (as best you can) just above the text field. You may need to experiment with a few position values to get the label to look right.

4 Call us over to see your modification and running program. Create a folder named sol4 in your project folder on T:\ and copy MyFrame.java to this folder.

For the last checkpoint, add a menu to your version of MyJFrame that has two menu items, one labeled Clear and the other labeled Exit. Follow the example in section 7.5 of your text. You will need to add instance variables for the menu and the two menu items. Use

JMenu menu;
JMenuItem clearItem;
JMenuItem exitItem;
As before, use the MyJFrame object as the action listener for each of the two menu items, but do not change your actionListener() code yet.

Compile your program and check to see that the menu appears and that you can "select" either of the two menu items labeled Clear and Exit, but that nothing happens when you do.

Finally, change the actionListener() code so that if the event source is clearItem, the value of buttonCount will be reset to zero (and the button text will change accordingly) and if the event source is exitItem, the program will terminate immediately using System.exit(0).

Make these changes, and compile and test your program.

5 Show us your modifications and demonstrate that your program works correctly making appropriate menu selections. Create a folder named sol5 in your project folder on T:\ and copy MyFrame.java to this folder.

End of Lab

Zip and send your project folder on T:\ drive to your portable storage media or email (careful not to completely fill your email over time) and delete the contents of your folder on T:\. In the event that you have not completed all parts of this lab during the assigned lab period, complete them as homework and send the five solution folders placed in your project folder (yourLastName07), zipped as an attachment, to me with "CSC 221 Lab 07" in the subject line. Note: there is not a late penalty for labs, please complete them in a timely manner at a pace conducive to your learning this material.


Susan Haller and Timothy Fossum, University of Wisconsin-Parkside, Modified 8/04/2004 by Jack Tompkins, UNCW