Solution for
Programming Exercise 6.5
THIS PAGE DISCUSSES ONE POSSIBLE SOLUTION to the following exercise from this on-line Java textbook.
Exercise 6.5: Write an applet that shows two squares. 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 off the applet if she wants; if she does this, it's gone. You can try it here:
Discussion
To write this applet, you need to understand dragging, as discussed in Section 6.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 Section 6.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.
As always for any implementation of 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 use clicks the applet outside of the squares, there is nothing to drag. 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.
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 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:
if (x >= x2 && x < x2+30 && y >= y2 && y < y2+30) { // It's the blue square (which should be checked first, // since it's in front 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; }There is, as usual, the question of how to divide the responsibilities of the program between the main applet class and the nested class that represents the drawing surface. In this case, I used a very simple anonymous nested class for the drawing surface. You will find this class in the applet's init() method. The only method in the anonymous class is the paintComponent() method that does the drawing.
All this leads to the complete source code, shown below.
By the way, if you wanted to stop the user from dragging the square outside the applet, 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 applet:
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 applet. x1 = 0; else if (x1 >= getSize().width - 30) x1 = getSize().width - 30; if (y1 < 0) y1 = 0; else if (y1 >= getSize().height - 30) y1 = getSize().height - 30; } else { // Move the blue square. x2 = x - offsetX; y2 = y - offsetY; if (x2 < 0) // Clamp (x2,y2) so the square lies in the applet. x2 = 0; else if (x2 >= getSize().width - 30) x2 = getSize().width - 30; if (y2 < 0) y2 = 0; else if (y2 >= getSize().height - 30) y2 = getSize().height - 30; } repaint(); }
The Solution
/* An applet showing a red square and a blue square that the user can drag with the mouse. The user can drag the squares off the applet and drop them. There is no way of getting them back. */ import java.awt.*; import java.awt.event.*; import javax.swing.*; public class DragTwoSquares extends JApplet implements MouseListener, MouseMotionListener { int x1, y1; // Coords of top-left corner of the red square. int x2, y2; // Coords of top-left corner of the blue square. /* 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 // top-left corner of the square that was // clicked. JPanel drawSurface; // This is the panel on which the actual // drawing is done. It is used as the // content pane of the applet. It actually // belongs to an anonymous class which is // defined in place in the init() method. public void init() { // Initialize the applet by putting the squares in a // starting position and creating the drawing surface // and installing it as the content pane of the applet. x1 = 10; // Set up initial positions of the squares. y1 = 10; x2 = 50; y2 = 10; drawSurface = new JPanel() { // This anonymous inner class defines the drawing // surface for the applet. public void paintComponent(Graphics g) { // Draw the two squares and a black frame // around the panel. 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); g.setColor(Color.black); g.drawRect(0,0,getSize().width-1,getSize().height-1); } }; drawSurface.setBackground(Color.lightGray); drawSurface.addMouseListener(this); drawSurface.addMouseMotionListener(this); setContentPane(drawSurface); } // end init(); public void mousePressed(MouseEvent evt) { // Respond when the user presses the mouse on the panel. // Check which square the user clicked, if any, and start // dragging that square. 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 in front 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; } } public void mouseReleased(MouseEvent evt) { // Dragging stops when user releases the mouse button. dragging = false; } public void mouseDragged(MouseEvent evt) { // 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 position with respect to the mouse that it had // when the user started dragging it. 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; } drawSurface.repaint(); } public void mouseMoved(MouseEvent evt) { } public void mouseClicked(MouseEvent evt) { } public void mouseEntered(MouseEvent evt) { } public void mouseExited(MouseEvent evt) { } } // end class DragTwoSquares
[ Exercises | Chapter Index | Main Index ]