Solution for Programming Exercise 6.2
This page contains a sample solution to one of the exercises from Introduction to Programming Using Java.
Exercise 6.2:
Write a program that shows a small red square and a small blue square. The user should be able to drag either square with the mouse. (You'll need an instance variable to remember which square the user is dragging.) The user can drag the square out of the panel if she wants; if she does this, there is no way to get it back.
Note that for this exercise, you should do all the drawing in the paintComponent() method (as indeed you should whenever possible).
To write this program, you need to understand dragging, as discussed in Subsection 6.3.4. To support dragging, you have to implement both the MouseListener and MouseMotionListener interfaces and register some object to listen for both mouse and mouse motion events. The code for dragging a square is spread out over three methods, mousePressed, mouseReleased, and mouseDragged. Several instance variables are needed to keep track of what is going on while a dragging operation is being executed. A general framework for dragging is given in Subsection 6.3.4. This example is simplified a bit because while dragging the square, we only need to know the current position of the mouse, so that we can move the square to that position. We don't need to keep track of the previous position of the mouse. In my solution, I decided to write a nested class inside the panel class to define the listening object. Another possibility would have been to let the panel class implement MouseListener and MouseMotionListener, and then register the panel with itself to listen for events.
As usual for dragging, I use a boolean variable, dragging, to keep track of whether or not a drag operation is in progress. Not every mouse press starts a drag operation. If the user clicks the panel outside of the squares, there is nothing to drag, and dragging is set to false in the mousePressed method. If the user clicks one of the squares, dragging is set to true. Since there are two squares to be dragged, we have to keep track of which is being dragged. I use a boolean variable, dragRedSquare, which is true if the red square is being dragged and is false if the blue square is being dragged. (A boolean variable is actually not the best choice in this case. It would be a problem if we wanted to add another square. A boolean variable only has two possible values, so an integer variable would probably be a better choice.) I keep track of the locations of the squares with integer instance variables x1 and y1 for the upper left corner of the red square and x2 and y2 for the upper left corner of the blue square. These variables are in the main class, not the nested class that defines the listener, since the panel needs to use the location of the squares in the paintComponent() method.
There is one little problem. The mouse location is a single (x,y) point. A square occupies a whole bunch of points. When we move the square to follow the mouse, where exactly should we put the square? One possibility is to put the upper left corner of the square at the mouse location. If we did this, the mouseDragged routine would look like:
public void mouseDragged(MouseEvent evt) {
if (dragging == false)
return;
int x = evt.getX(); // Get mouse position.
int y = evt.getY();
if (dragRedSquare) { // Move the red square.
x1 = x; // Put top-left corner at mouse position.
y1 = y;
}
else { // Move the blue square.
x2 = x; // Put top-left corner at mouse position.
y2 = y;
}
repaint();
}
This works, but it is not very aesthetic. When the user starts dragging a square, no matter where in the square the user clicks, the square will jump so that its top-left corner is at the mouse position. This is not what a user typically expects. If I grab a square by clicking its center, then I want the center to stay under the mouse cursor as I move it. If I grab the lower right corner, I want the lower right corner to follow the mouse, not the upper left corner. There is a solution to this, and it's one that is often needed for dragging operations. We need to record the original position of the mouse relative to the upper left corner of the square. This tells us where in the square the user clicked. This is done in the mousePressed routine by assigning appropriate values to instance variables offsetX and offsetY:
int x = evt.getX(); // Location where user clicked.
int y = evt.getY();
if (x >= x2 && x < x2+30 && y >= y2 && y < y2+30) {
// It's the blue square (which should be checked first,
// since it's drawn on top of the red square.)
dragging = true;
dragRedSquare = false;
offsetX = x - x2; // Distance from corner of square to (x,y).
offsetY = y - y2;
}
else if (x >= x1 && x < x1+30 && y >= y1 && y < y1+30) {
// It's the red square.
dragging = true;
dragRedSquare = true;
offsetX = x - x1; // Distance from corner of square to (x,y).
offsetY = y - y1;
}
In mouseDragged, when the mouse moves to a new (x,y) point, we move the square so that the vertical and horizontal distances between the mouse location and the top left corner of the square remain the same:
if (dragRedSquare) { // Move the red square.
x1 = x - offsetX; // Offset corner from mouse location.
y1 = y - offsetY;
}
else { // Move the blue square.
x2 = x - offsetX; // Offset corner from mouse location.
y2 = y - offsetY;
}
The program is written as a subclass of JPanel. I included a main() routine in the class, to allow it to be run as an application, but main() could also be in its own class. The constructor in the DrawTwoSquares class sets up the initial positions of the two squares, creates a listening object, and registers the listening object to listen for mouse and mouse motion events. It also adds a border around the panel to make it more attractive. The class has a paintComponent() method, which just has to draw the two squares in their current positions; this is easy to write. The mouse-handling code is in a nested class. Note that the nested class is non-static, since it need access to instance variables from the main class.
By the way, if you wanted to stop the user from dragging the square outside the panel, you would just have to add code to the mouseDragged routine to "clamp" the variables x1, y1, x2, and y2 so that they lie in the acceptable range. Here is a modified routine that keeps the square entirely within the panel:
public void mouseDragged(MouseEvent evt) {
if (dragging == false)
return;
int x = evt.getX();
int y = evt.getY();
if (dragRedSquare) { // Move the red square.
x1 = x - offsetX;
y1 = y - offsetY;
if (x1 < 0) // Clamp (x1,y1) so the square lies in the panel.
x1 = 0;
else if (x1 >= getWidth() - 30)
x1 = getWidth() - 30;
if (y1 < 0)
y1 = 0;
else if (y1 >= getHeight() - 30)
y1 = getHeight() - 30;
}
else { // Move the blue square.
x2 = x - offsetX;
y2 = y - offsetY;
if (x2 < 0) // Clamp (x2,y2) so the square lies in the panel.
x2 = 0;
else if (x2 >= getWidth() - 30)
x2 = getWidth() - 30;
if (y2 < 0)
y2 = 0;
else if (y2 >= getHeight() - 30)
y2 = getHeight() - 30;
}
repaint();
}
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
/**
* A panel showing a red square and a blue square that the user
* can drag with the mouse. The user can drag the squares off
* the panel and drop them. There is no way of getting them back.
*/
public class DragTwoSquares extends JPanel {
/**
* A main routine allows this class to be run as an application.
*/
public static void main(String[] args) {
JFrame window = new JFrame("Drag Either Square");
DragTwoSquares content = new DragTwoSquares();
window.setContentPane(content);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setLocation(120,70);
window.setSize(400,300);
window.setVisible(true);
}
//---------------------------------------------------------------------
private int x1, y1; // Coords of top-left corner of the red square.
private int x2, y2; // Coords of top-left corner of the blue square.
/**
* The constructor places the two squares in their initial positions and
* sets up listening for mouse events and mouse motion events.
*/
public DragTwoSquares() {
x1 = 10; // Set up initial positions of the squares.
y1 = 10;
x2 = 50;
y2 = 10;
setBackground(Color.LIGHT_GRAY); // Set up appearance of the panel
setBorder(BorderFactory.createLineBorder(Color.BLACK, 1) );
Dragger listener = new Dragger(); // Listening object, belonging to a nested
// class that is defined below.
addMouseListener(listener); // Set up listening.
addMouseMotionListener(listener);
}
/**
* paintComponent just draws the two squares in their current positions.
*/
public void paintComponent(Graphics g) {
super.paintComponent(g); // Fill with background color.
g.setColor(Color.RED);
g.fillRect(x1, y1, 30, 30);
g.setColor(Color.BLUE);
g.fillRect(x2, y2, 30, 30);
}
/**
* This private class is used to define the listener that listens
* for mouse events and mouse motion events on the panel.
*/
private class Dragger implements MouseListener, MouseMotionListener {
/* Some variables used during dragging */
boolean dragging; // Set to true when a drag is in progress.
boolean dragRedSquare; // True if red square is being dragged, false
// if blue square is being dragged.
int offsetX, offsetY; // Offset of mouse-click coordinates from the
// top-left corner of the square that was
// clicked.
/**
* Respond when the user presses the mouse on the panel.
* Check which square the user clicked, if any, and start
* dragging that square.
*/
public void mousePressed(MouseEvent evt) {
if (dragging) // Exit if a drag is already in progress.
return;
int x = evt.getX(); // Location where user clicked.
int y = evt.getY();
if (x >= x2 && x < x2+30 && y >= y2 && y < y2+30) {
// It's the blue square (which should be checked first,
// since it's drawn on top of the red square.)
dragging = true;
dragRedSquare = false;
offsetX = x - x2; // Distance from corner of square to (x,y).
offsetY = y - y2;
}
else if (x >= x1 && x < x1+30 && y >= y1 && y < y1+30) {
// It's the red square.
dragging = true;
dragRedSquare = true;
offsetX = x - x1; // Distance from corner of square to (x,y).
offsetY = y - y1;
}
}
/**
* Dragging stops when user releases the mouse button.
*/
public void mouseReleased(MouseEvent evt) {
dragging = false;
}
/**
* Respond when the user drags the mouse. If a square is
* not being dragged, then exit. Otherwise, change the position
* of the square that is being dragged to match the position
* of the mouse. Note that the corner of the square is placed
* in the same relative position with respect to the mouse that i
* had when the user started dragging it.
*/
public void mouseDragged(MouseEvent evt) {
if (dragging == false)
return;
int x = evt.getX();
int y = evt.getY();
if (dragRedSquare) { // Move the red square.
x1 = x - offsetX;
y1 = y - offsetY;
}
else { // Move the blue square.
x2 = x - offsetX;
y2 = y - offsetY;
}
repaint(); // (Calls the repaint() method in the DragTwoSquaresPanel class.)
}
public void mouseMoved(MouseEvent evt) { } // empty methods required by interfaces.
public void mouseClicked(MouseEvent evt) { }
public void mouseEntered(MouseEvent evt) { }
public void mouseExited(MouseEvent evt) { }
} // end nested class Dragger
} // end class DragTwoSquaresPanel