6.09 - Graphics and Mouse Events


In the previous example I showed how we can add custom graphics to our user interface. However, what if we would like to make these graphics interactive. For example, if we wished to make a graph display, where you could interact with the graph. Well, because a Canvas is-a Component we can add Mouse Events to our custom canvas. Mouse Events are a mechanism for deciding how the mouse should behave when it interacts with our custom canvas - so, what should happen on the custom canvas when you press and release the mouse button.

In this example we would like to draw a red circle around the point that was chosen. In this case the circle will have a radius of 10 pixels.

Figure X. Canvas Applications with Events

So, the application remains largely unchanged as below:

1234567891011121314151617181920212223242526272829303132
package ee402;

import java.awt.*;
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;

@SuppressWarnings("serial")
public class CanvasApplicationMouse extends Frame implements WindowListener{
        
        private CustomCanvasMouse canvas;
        
        public CanvasApplicationMouse(){
                super("Canvas Mouse Application");
                this.canvas = new CustomCanvasMouse(250,250);
                this.add(canvas, BorderLayout.CENTER);
                this.addWindowListener(this);
                this.pack();
                this.setVisible(true);
        }

        public void windowActivated(WindowEvent arg0) {}
        public void windowClosed(WindowEvent arg0) {}
        public void windowClosing(WindowEvent arg0) { System.exit(0); }
        public void windowDeactivated(WindowEvent arg0) {}
        public void windowDeiconified(WindowEvent arg0) {}
        public void windowIconified(WindowEvent arg0) {}
        public void windowOpened(WindowEvent arg0) {}

        public static void main(String[] args) {
                new CanvasApplicationMouse();
        }
}

But, we add Mouse Events to the Custom Canvas. You can see here that this class now implements MouseListener and has additional methods to describe what happens when: the mouse is clicked; the mouse enters the canvas region; the mouse exits the canvas region; the mouse button is pressed (but not release); and, the mouse button is released (having subsequently been pressed).

CustomCanvasMouse.java

1234567891011121314151617181920212223242526272829303132333435363738
package ee402;

import java.awt.*;
import java.awt.event.*;
import java.util.*;

@SuppressWarnings("serial")
public class CustomCanvasMouse extends Canvas implements MouseListener{

        int width, height;
        Vector<Point> points = new Vector<Point>(10);
        static int radius = 10;
        
        public CustomCanvasMouse(int width, int height){
                this.setSize(width,height);
                this.width = width;
                this.height = height;
                this.addMouseListener(this);
                this.repaint();
        }
                
        public void paint(Graphics g){
                g.setColor(Color.red);
                for(int i=0; i<points.size(); i++){
                        Point p = points.elementAt(i);
                        g.drawOval(p.x, p.y, 2*radius, 2*radius);
                }
        }

        public void mouseClicked(MouseEvent e) {
                points.addElement(new Point(e.getX()-radius, e.getY()-radius));
                this.repaint();
        }
        public void mouseEntered(MouseEvent e) {}
        public void mouseExited(MouseEvent e) {}
        public void mousePressed(MouseEvent e) {}
        public void mouseReleased(MouseEvent e) {}
}

This application uses the interface MouseListener, by using the keyword implements. When we use an interface in our code we are required to write code for the methods defined in that interface. In this case we are using the interface MouseListener which has five methods that must be implemented mousePressed()mouseReleased()mouseEntered()mouseExited() and mouseClicked(). As you can see in the code segment above, I only really required mouseClicked() as I only wanted a circle to be added when the mouse was clicked. However, I was required to write code for the four other methods and I did, by writing blank functionality for those methods - so nothing will occur when the other four events occur.

As well as writing the code for the events that occur, we also have to "turn on" Mouse Listening. We do this by using the line of code this.addMouseListener(this); What we are doing is stating "To this CustomCanvasMouse object turn on Mouse Listening - and if a mouse event occurs then send it to this CustomCanvasMouse object". Our custom canvas is now ready to listen for events and pass them to its own five mouse methods.

Finally - one small point. At the top of the code I wrote import java.awt.*; and I also wrote import java.awt.event.*;. This may seem unnecessary but it is not. We need the MouseEvent class from the java.awt.event package for our code, but does the import java.awt.*; not also import the classes in the java.awt.event package? No, it does not! - the * is not recursive and so does not import sub packages (sub directories).





These notes are copyright Dr. Derek Molloy, School of Electronic Engineering, Dublin City University, Ireland 2013-present. Please contact him directly before reproducing any of the content in any way.
ċ
CanvasApplicationMouse.java
(1k)
Derek Molloy,
25 Nov 2013, 08:41
ċ
CustomCanvasMouse.java
(1k)
Derek Molloy,
25 Nov 2013, 08:41
Comments