Objectives

A Simple Drawing Tool

In this lab, you will build a simple Java GUI drawing tool, such as the one shown on the right. This tool includes a Processing sketch as a drawing panel (based on your scribbling tool from lab exercise 4a.3) and a drawing control panel with a label, text field and two buttons.

The Java Foundation Classes (JFC) provide a wide variety of classes that you will use in this lab. In addition to the text and lecture notes, here are two additional information sources for these classes that you might find useful:

  • Swing Components Tutorial - This tutorial provides a visual guide to the look and feel of the Swing GUI components and a set of tutorials on how to use them.

  • Java API Specification - This is the definitive reference for the application programmers interface (API) to all of Java’s classes. To use this API reference, you can search for the class you’re interested in (e.g., JButton) in the “All Classes” list and read the documentation on the constructor methods and instance methods that it provides. This reference is formatted using JavaDoc.

You will develop the application shown here incrementally. Because you ’ve already encapsulated existing Processing sketches and run them in a Java GUI frame, you’ll start with that task. As usual, you should create a new package, edu.institution.yourLoginID.lab08b, for these exercises.

Kilroy was here image

Exercise 8b.1

Encapsulate your manual scribbling tool from lab exercise 4a.3 as a panel named DrawingPanel in a simple Java GUI frame named DrawingController. You don’t need to include a GUI control panel in this application.

Make sure that this GUI application runs properly.

Adding a Java Text Field Controller

The sample application shown above includes a text field to specify the stroke weight for the drawing panel. The user enters a weight value, hits enter, and then all new lines are drawn with the modified stroke weight.

Exercise 8b.2

Add a text field to the GUI frame that allows the user to specify the stroke weight. Do this as follows:

  1. Declare a JTextField object to hold the stroke weight value;
  2. In DrawingPanel:
    1. Include a mutator method that sets the strokeWeight - Don’t worry about checking the validity of the given value, we’ll deal with that next week;
  3. In your DrawingController constructor method:
    1. Initialize that object to be a new JTextField named weightField with an initial value of “1” and a width of 3 characters (using new JTextField("1", 3));
    2. Register the current GUI controller object as the listener for this text field (using addActionListener(this));
    3. Add this field to your GUI frame (using add(weightField, BorderLayout.SOUTH)) - Note that you also need to modify the add for DrawingPanel so that it places that panel on the BorderLayout.NORTH;
  4. In your DrawingController class definition:
    1. Specify that your GUI frame class implements the ActionListener interface (using implements ActionListener);
    2. Override the definition of actionPerformed() to implement this algorithm:
      Set weightValue = the integer value of the text in weightField.
      Ask DrawingPanel to set its weight value to weightValue.

Make sure that this GUI application runs properly.

Adding a Control Panel

The sample application shown above includes a control panel with which the user configures the behavior of the drawing tool.

Exercise 8b.3

Add a button to the interface to tells the drawing panel to use a random color. Do this as follows:

  1. Declare a JButton object;
  2. In DrawingPanel:
    1. Include a mutator method that sets the stroke color to a random color - Let the panel choose the new color rather than having the controller choose it (panels know about this sort of thing, controllers don’t). Note that in Java, colors are simply integers. However, you can still use the color method to return a color (e.g. int c = color(40, 40, 40);).
  3. In your DrawingController constructor method:
    1. Initialize that object to be a new JButton with the label “random”;
    2. Register the current GUI controller object as the listener for this button;
    3. Build a new JPanel to hold your control panel as follows:
      1. Declare and initialize a new JPanel object named controlPanel;
      2. Set its layout manager to be a new FlowLayout (using controlPanel.setLayout(new FlowLayout()));
      3. Add to your new button to the control panel (using controlPanel.add(myWeightField)) - Note that you also need to modify the add for weightField so that you add it to the control panel as well;
      4. Add the control panel to the main GUI frame (using add(controlPanel));
  4. In your actionPerformed() method:
    1. Modify the method implement this upgraded algorithm:
      Receive the current GUI action event from the calling program.
      Set weightValue = the integer value of the text in myWeightField.
      Ask the DrawingPanel object to set its weight value to weightValue.
      If the action event indicates that the random color button was pressed
               Tell the DrawingPanel object to set its color to a random color.
      Note that you can check the value of the action command using eventParameter.getActionCommand().equals("random") where “random” is the label written on the button.

Make sure that this GUI application runs properly.

There are many things that you could do to enhance this program.

Exercise 8b.4 (Extra-Credit)

Add an additional button that sets the color to white (the same as the sketch background) so that you can “rub out” mistakes.

Save this version of your program so that you can submit it.

Checking In

Submit all the code and supporting files for the exercises in this lab.