Man, this class is pretty!

Lecture Notes Four: Adding Interactivity

We start with a Java 1.0 version of an applet that reports the mouse.

frilled.cs.indiana.edu%pwd
/nfs/grouchy/home/user2/www/classes/a348-dger/t540/lectures/four
frilled.cs.indiana.edu%ls -ld *
-rw-r--r--   1 dgerman      1430 Nov  5 18:23 MouseTest.java
-rw-r--r--   1 dgerman       285 Nov  5 18:27 Nine.html
frilled.cs.indiana.edu%cat MouseTest*
import java.applet.*;
import java.awt.*;

public class MouseTest extends Applet {
    
    Font courierFont;
    String testString = "Test the mouse in here!";
    
    public void init() {
	courierFont = new Font("Courier",Font.BOLD+Font.ITALIC,14);
    }
    
    public void paint(Graphics g) {
	g.setFont(courierFont);
	
	// center the string
	FontMetrics m = g.getFontMetrics();
	int stringWidth = m.stringWidth(testString);
	int width = (bounds().width - stringWidth )/2;
	int height = bounds().height / 2;
	
	// draw the string
	g.setColor(Color.blue);
	g.drawString(testString,width,height);
    }
    
    public boolean mouseDown(Event e,int x,int y) {
	System.out.println("mouseDown at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseUp(Event e,int x,int y) {
	System.out.println("mouseUp at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseMove(Event e,int x,int y) {
	System.out.println("mouseMove at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseDrag(Event e,int x,int y) {
	System.out.println("mouseDrag at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseEnter(Event e,int x,int y) {
	System.out.println("mouseEnter at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseExit(Event e,int x,int y) {
	System.out.println("mouseExit at (" + x + "," + y + ")" );
	return true;
    }
}


frilled.cs.indiana.edu%cat Mouse*.html
No match
frilled.cs.indiana.edu%ls
MouseTest.java	Nine.html
frilled.cs.indiana.edu%clear

frilled.cs.indiana.edu%pwd
/nfs/grouchy/home/user2/www/classes/a348-dger/t540/lectures/four
frilled.cs.indiana.edu%ls -ld *
-rw-r--r--   1 dgerman      1430 Nov  5 18:23 MouseTest.java
-rw-r--r--   1 dgerman       285 Nov  5 18:27 Nine.html
frilled.cs.indiana.edu%cat Mouse*.java
import java.applet.*;
import java.awt.*;

public class MouseTest extends Applet {
    
    Font courierFont;
    String testString = "Test the mouse in here!";
    
    public void init() {
	courierFont = new Font("Courier",Font.BOLD+Font.ITALIC,14);
    }
    
    public void paint(Graphics g) {
	g.setFont(courierFont);
	
	// center the string
	FontMetrics m = g.getFontMetrics();
	int stringWidth = m.stringWidth(testString);
	int width = (bounds().width - stringWidth )/2;
	int height = bounds().height / 2;
	
	// draw the string
	g.setColor(Color.blue);
	g.drawString(testString,width,height);
    }
    
    public boolean mouseDown(Event e,int x,int y) {
	System.out.println("mouseDown at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseUp(Event e,int x,int y) {
	System.out.println("mouseUp at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseMove(Event e,int x,int y) {
	System.out.println("mouseMove at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseDrag(Event e,int x,int y) {
	System.out.println("mouseDrag at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseEnter(Event e,int x,int y) {
	System.out.println("mouseEnter at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseExit(Event e,int x,int y) {
	System.out.println("mouseExit at (" + x + "," + y + ")" );
	return true;
    }
}


frilled.cs.indiana.edu%cat Nine*.html
<html>
  <head><title>Testing the mouse...</title></head>
  <body bgcolor=white>

    Open up a Java console and test your mouse inside. <p> 

    <applet code="MouseTest.class" width=300 height=300>
    </applet>

    <p> Dedicated to Mighty Mouse. 

  </body>
</html>

frilled.cs.indiana.edu%
Here's the applet in action (don't forget that you need to open up a console).

You obviously need to use your A201 knowledge to turn this (and what follows) into the 1.1 AWT.

frilled.cs.indiana.edu%pwd
/nfs/grouchy/home/user2/www/classes/a348-dger/t540/lectures/four
frilled.cs.indiana.edu%ls -ld MouseSta*.java Ten*
-rw-r--r--   1 dgerman      1442 Nov  5 18:55 MouseStatus.java
-rw-r--r--   1 dgerman       324 Nov  5 18:48 Ten.html
frilled.cs.indiana.edu%cat MouseStatus.java
import java.applet.*;
import java.awt.*;

public class MouseStatus extends Applet {
    
    Font courierFont;
    
    String testString = "Status reports mouse movement!";
    
    public void init() {
	
	courierFont = new Font("Courier",Font.BOLD+Font.ITALIC,12);

	setBackground(Color.white); 
	
    }
    
    public void paint(Graphics g) {
	
	g.setFont(courierFont);
	
	// center the string
	FontMetrics m = g.getFontMetrics();
	int stringWidth = m.stringWidth(testString);
	int width = (bounds().width - stringWidth )/2;
	int height = bounds().height / 2;
	
	// draw the string
	g.setColor(Color.red);
	g.drawString(testString,width,height);


    }
    
    public boolean mouseDown(Event e,int x,int y) {
	showStatus("mouseDown at (" + x + "," + y + ")" );
	return true;
    }
    
    
    public boolean mouseUp(Event e,int x,int y) {
	showStatus("mouseUp at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseMove(Event e,int x,int y) {
	showStatus("mouseMove at (" + x + "," + y + ")" );
	return true;
    }
    
    
    public boolean mouseDrag(Event e,int x,int y) {
	showStatus("mouseDrag at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseEnter(Event e,int x,int y) {
	showStatus("mouseEnter at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseExit(Event e,int x,int y) {
	showStatus("mouseExit at (" + x + "," + y + ")" );
	return true;
    }
}
frilled.cs.indiana.edu%
And here's the HTML file that goes with it:
frilled.cs.indiana.edu%cat Ten.html
<html>
  <head><title>This applet is more expressive...</title></head>
  <body bgcolor=white>

    <p> This mouse-watching applet is more expressive... </p> 

    <applet code="MouseStatus.class" width=300 height=300>
    </applet>

    <p> Mouse position is shown in the status bar. </p> 

  </body>
</html>

frilled.cs.indiana.edu%javac MouseStatus.java
Note: MouseStatus.java uses or overrides a deprecated API.
Note: Recompile with -deprecation for details.
frilled.cs.indiana.edu%
So now if you try it, it acts like this. (Applet background is white).

I guess, so far so good. Let's use the mouse input to make changes in the applet.

Here's a different program that does just that.

There are only two new classes:

frilled.cs.indiana.edu%pwd
/nfs/grouchy/home/user2/www/classes/a348-dger/t540/lectures/four
frilled.cs.indiana.edu%ls -ld *.java
-rw-r--r--   1 dgerman      1525 Nov  5 21:17 Drag.java
-rw-r--r--   1 dgerman       721 Nov  5 21:13 DragRect.java
-rw-r--r--   1 dgerman      1442 Nov  5 18:55 MouseStatus.java
-rw-r--r--   1 dgerman      1430 Nov  5 18:23 MouseTest.java
-rw-r--r--   1 dgerman       735 Nov  5 21:14 RectSprite.java
-rw-r--r--   1 dgerman       758 Nov  5 21:16 Sprite.java
-rw-r--r--   1 dgerman       400 Nov  5 21:14 Sprite2D.java
frilled.cs.indiana.edu%cat Drag.java
import java.applet.*;
import java.awt.*;

public class Drag extends Applet {
    
    Font courierFont;
    String testString = "Drag the Rectangle!";
    DragRect r = new DragRect(0,0,107,103,Color.red);
    
    public void init() {
	courierFont = new Font("Courier",Font.BOLD+Font.ITALIC,14);
	setBackground(Color.white); 
    }
    
    public void paint(Graphics g) {
	g.setFont(courierFont);
	
	// center the string
	FontMetrics m = g.getFontMetrics();
	int stringWidth = m.stringWidth(testString);
	int width = (bounds().width - stringWidth )/2;
	int height = bounds().height / 2;
	
	// draw the string
	g.setColor(Color.blue);
	g.drawString(testString,width,height);
	r.paint(g);
    }
    
    // if user clicks in the rectangle, make rectangle draggable
    
    int oldx,oldy;    // stores old mouse location
    public boolean mouseDown(Event e,int x,int y) {
	if (r.inside(x,y)) {
	    oldx = x;
	    oldy = y;
	    r.setDraggable(true);  
	}
	return true;
    }
    
    // if mouseUp, rectangle is no longer draggable
    public boolean mouseUp(Event e,int x,int y) {
	r.setDraggable(false);  
	return true;
    }
    
    // translate the rectangle by the difference between
    //   the new mouse position and the old one
    public boolean mouseDrag(Event e,int x,int y) {
	if (r.isDraggable()) {
	    r.translate(x-oldx,y-oldy);  // move rectangle
	    oldx = x;                    // store old mouse position
	    oldy = y;
	    repaint();                   // redraw screen
	}
	return true;
    }
    
}
frilled.cs.indiana.edu%cat DragRect.java
import java.applet.*;
import java.awt.*;

public class DragRect extends RectSprite {
    
    protected boolean draggable;    // is rectangle draggable?
    
    public DragRect(int x,int y,int w,int h,Color c) {
	super(x,y,w,h,c);
	fill = true;
	draggable = false; // initially not draggable
    }
    
    // check if (x,y) is inside rectangle
    public boolean inside(int x,int y) {
	return (locx <= x && locy <= y &&
		(locx + width >= x) && 
		(locy + height >= y));
    }
    
    // modify draggable
    public void setDraggable(boolean b) {
	draggable = b;
    }
    
    public boolean isDraggable() {
	return draggable;
    }
        
    public void translate(int x,int y) {
	locx += x;
	locy += y;	
    }
}

frilled.cs.indiana.edu%cat Eleven.html
<html>
  <head><title>Mouse Input Changes Applet</title></head>
  <body bgcolor=white>

    You can use your mouse to drag the red rectangle around. <p> 

    <applet code="Drag.class" width=300 height=300>
    </applet>
    
    <p> White on white you won't know when the rectangle is clipped 
    ahead of time. <p> Dedicated to Clifford, the Big Red Dog. <p> 

  </body>
</html>

frilled.cs.indiana.edu%javac Drag.java
Note: Drag.java uses or overrides a deprecated API.
Note: Recompile with -deprecation for details.
frilled.cs.indiana.edu%
The diagram should be fairly simple, and obvious.

Now let's add keyboard input, to change the size of the rectangle.

Start with a simple case (ignore the version, update the code):

frilled.cs.indiana.edu%pwd
/nfs/grouchy/home/user2/www/classes/a348-dger/t540/lectures/four
frilled.cs.indiana.edu%ls -ld Bisc*.java Twelv*.html
-rw-------   1 dgerman      1651 Nov  5 22:55 Biscayne.java
-rw-r--r--   1 dgerman       329 Nov  5 22:57 Twelve.html
frilled.cs.indiana.edu%cat Bisc*.java
import java.applet.*;
import java.awt.*;

public class Biscayne extends Applet {
    Font courierFont;
    String testString = "Test keys and mouse in here!";
    
    public void init() {
	courierFont = new Font("Courier",Font.BOLD+Font.ITALIC,14);
    }
    
    public void paint(Graphics g) {
	g.setFont(courierFont);
	
	// center the string
	FontMetrics m = g.getFontMetrics();
	int stringWidth = m.stringWidth(testString);
	int width = (bounds().width - stringWidth )/2;
	int height = bounds().height / 2;
	
	// draw the string
	g.setColor(Color.blue);
	g.drawString(testString,width,height);
    }
    
    public boolean mouseDown(Event e,int x,int y) {
	System.out.println("mouseDown at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseUp(Event e,int x,int y) {
	System.out.println("mouseUp at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseMove(Event e,int x,int y) {
	System.out.println("mouseMove at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseDrag(Event e,int x,int y) {
	System.out.println("mouseDrag at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseEnter(Event e,int x,int y) {
	System.out.println("mouseEnter at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean mouseExit(Event e,int x,int y) {
	System.out.println("mouseExit at (" + x + "," + y + ")" );
	return true;
    }
    
    public boolean keyDown(Event e,int key) {
	System.out.println("keyDown is " + key );
	return true;
    }
    
    public boolean keyUp(Event e,int key) {
	System.out.println("keyUp is " + key );
	return true;
    }
}
frilled.cs.indiana.edu%cat Twelve*
<html>
  <head><title>Test of Keys in Applet with Mouse... </title></head>
  <body bgcolor=white>

    Open up a console window and start using the mouse and the keyboard. <p> 

    <applet code="Biscayne.class" width=300 height=300>
    </applet>

    <p> Dedicated to Sergei Rachmaninov. <p> 

  </body>
</html>

frilled.cs.indiana.edu%
You can try it here. (Java console you need to open up first, remember? OK...)

We now move to the last part of Chapter Four, with the next set of notes.


Last updated: Nov 5, 2001 by Adrian German for A348/A548