In this tutorial, students will look at mouse events in Java Swing. The tutorial assumes some understanding of Java, including ArrayLists and basic Java Swing. Students will create circle objects and use both mouse move and mouse click events.
In other Java Swing tutorials, you saw how to create an app using buttons and button events. This tutorial takes a different direction looking at drawing objects and mouse events on a graphical canvas.
Like the other Swing tutorials, you will still be starting with a JFrame, but this tutorial used a few different methods to help create the paint objects and mouse events.
This tutorial is not going to go in-depth on Java Swing objects, but it does look at how to create a Java Swing Canvas and draw an object, in this case, a circle.
The setup of your project is similar to before, except now your class is going to extend the abstract JPanel class. By extending this, you are required to add the paintComponent(Graphics g) method. This is the method that will draw out objects.
The Graphics object, g, will be used to add different graphic objects to our panel. Inside the paintComponent method, your first statement should be to call the parent's paintComponent method with the super command. This tutorial is not going to get into the details of abstract classes or inheritance, but know that this line is important.
From there, you can call methods to create objects. You are going to use two commands in this tutorial, setColor and fillOval.
setColor allows you to set the active color. Any objects that are drawn will use this color until it is changed. It can take several options, but in the example below, you should notice it uses a color name and a red, green, blue combo.
The fillOval command takes 4 integers. The first two are the coordinates for the upper left corner of a box that will contain the oval and the second two are the width and height of that box. You will not see the box on the canvas, but you will see the oval (or in this case a circle) that would fit in that box.
Play around with some of the options below and create your own circles/ovals.
As the name implies, a mouse move event is called each time the mouse is moved inside the frame. When the mouse is moved, information on this move is sent to the method and your program can take action accordingly.
In the example below, the program creates a blue circle that tracks the movement of the mouse.
There are a few changes that need to be made to accommodate the mouse event. First, there are now two instance variables, x and y. These represent the position where the circle should be drawn. The values for x and y are updated in the mouse move event and then when the repaint is called, the circle gets redrawn at the new position.
Second, the mouse move listener was added to the createAndShowGUI method. This command is called each time the mouse is moved. Inside that command, you see the embedded mouseMoved method with the parameter me. This parameter holds information about the event, including the x and y position of the mouse after the move. Notice how the program uses the getX() and getY() commands to get the position of the cursor and then sets the x and y instance variables.
The final step of the process is to call the repaint() command. When this command is called, it triggers the paintComponent method to run again and refresh the screen.
Now that you have a mouse move, let's take a look at a mouse click event. As the name suggests, a mouse click event happens anytime the mouse is clicked and like the mouse move, you can capture information about the event, including the location of the click and which button was clicked.
Adding the mouse click event is similar to adding the mouse move event. Inside the createAndShowGUI method, you will add the addMouseListener command with a mouse click method embedded inside.
In the example below, you are going to create an ArrayList of an Integer Array, with each entry containing two numbers for the x and y position of a click. You need to do this because each time you repaint, you want to put a circle in the location of any previous clicks. Recall that each time there is an event, the canvas is repainted, so you need to save these locations.
You will notice that the program also added a constructor to initialize this ArrayList and inside the paintComponent method, you loop through the ArrayList to paint the click circles.
For this final example, you are going to add a colorful mouse trail to the project. You already have the two mouse event methods, and in this step you are really just combining a few concepts that you already saw.
First, the program added a second ArrayList called trails. Then in the mouse move event method, you will notice that an entry into this ArrayList is created for each move.
Like the click ArrayList, you need to repaint the circles on each repaint. This is accomplished in a similar fashion with a loop in the paintComponent method. The one difference here is that each time, a random rgb color is created.
This gives it a feel of being alive as you move. Can you figure out how to make each color dot random, but not change each time it moves?
