Embed Size (px)
Citation preview
Lesson 37: The Drawing program – Java Applets
The Java
Application
Drawing program
Importing the libraries
Creating a class called SimplePaint2
Creating a main section
Creating a frame named frame and labeled SimplePaint2
Creating a container named pane, and associating it with our frame called frame.
// SimplePaint2.java - drawing with a mouse
import java.awt.*;import javax.swing.*;
class SimplePaint2{ public static void main (String[] args){
JFrame frame = new JFrame("SimplePaint2");Container pane = frame.getContentPane();
DrawingCanvas2 canvas = new DrawingCanvas2();PaintListener2 listener=new PaintListener2();canvas.addMouseMotionListener(listener);
pane.add(canvas);frame.pack();frame.show();
}}
Creating the canvas and adding a listener to it
// DrawingCanvas2.java - a blank canvas that remembers// drawing operations using an offscreen image
import javax.swing.*;import java.awt.*;
class DrawingCanvas2 extends JComponent{ public void paint(Graphics g){
if (offscreenImage!=null) g.drawImage(offscreenImage,0,0,SIZE,SIZE,null);
} public Image getOffscreenImage(){
if (offscreenImage==null) offscreenImage=createImage(SIZE,SIZE); return offscreenImage;
} public Dimension getMinimumSize(){
return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){
return new Dimension(SIZE, SIZE); } private static final int SIZE=500; private Image offscreenImage;}
// PaintListener2.java - paints on a DrwaingCanvas2// and it is associated with an offscreenImage.import java.awt.*;import java.awt.event.*;
class PaintListener2 implements MouseMotionListener{ public void mouseDragged(MouseEvent e) {
DrawingCanvas2 canvas = (DrawingCanvas2)e.getSource();Graphics g = canvas.getGraphics();g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter);
// duplicating the drawing on the offscreenImageImage image= canvas.getOffscreenImage();g = image.getGraphics();g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter);
} public void mouseMoved(MouseEvent e){} protected int radius =3; protected int diameter = radius*2;
}
Each time the mouse is moved – while the position of the over the component that is being listened to, the mouseDragged() method is called.
Each change in position detected by the system generates another call to mouseDragged(). This results in many calls by a single dragging of the mouse. Each call is passed a a MouseEvent object that contains, among other things, a reference to the component that generated the event and the coordinates of the mouse at that time the event was generated.
Drawing to both the offscreenimage and the canvas!!
Everytime a window is placed over the drawing, the offscreenimage is called when the window becomes active again
The Java
Applet
Drawing program
In this example we will rewrite the Simplepaint so that we can place it on the web.
The benefit is that this application can run anywhere on any operating system that is Java enabled.
// SimplePaintApplet.java //drawing with a mouse on the web
import java.awt.*;import javax.swing.*;
public class SimplePaintApplet extends JApplet{ public void init(){
Container pane = getContentPane();
DrawingCanvas2 canvas = new DrawingCanvas2();PaintListener2 listener=new PaintListener2();canvas.addMouseMotionListener(listener);
pane.add(canvas); }}
// SimplePaint2.java - drawing with a mouse
import java.awt.*;import javax.swing.*;
class SimplePaint2{ public static void main (String[] args){
JFrame frame = new JFrame("SimplePaint2");Container pane = frame.getContentPane();
DrawingCanvas2 canvas = new DrawingCanvas2();PaintListener2 listener=new PaintListener2();canvas.addMouseMotionListener(listener);
pane.add(canvas);frame.pack();frame.show();
}}
We don’t need frames in an applet
// DrawingCanvas2.java - a blank canvas that remembers// drawing operations using an offscreen image
import javax.swing.*;import java.awt.*;
class DrawingCanvas2 extends JComponent{ public void paint(Graphics g){
if (offscreenImage!=null) g.drawImage(offscreenImage,0,0,SIZE,SIZE,null);
} public Image getOffscreenImage(){
if (offscreenImage==null) offscreenImage=createImage(SIZE,SIZE); return offscreenImage;
} public Dimension getMinimumSize(){
return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){
return new Dimension(SIZE, SIZE); } private static final int SIZE=500; private Image offscreenImage;}
This class can remain unchanged
// PaintListener2.java - paints on a DrwaingCanvas2// and it is associated with an offscreenImage.
import java.awt.*;import java.awt.event.*;
class PaintListener2 implements MouseMotionListener{ public void mouseDragged(MouseEvent e) {
DrawingCanvas2 canvas = (DrawingCanvas2)e.getSource();Graphics g = canvas.getGraphics();g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter);
// duplicating the drawing on the offscreenImageImage image= canvas.getOffscreenImage();g = image.getGraphics();g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter);
} public void mouseMoved(MouseEvent e){} protected int radius =3; protected int diameter = radius*2;
}
This Listener class remains unchanged
<HTML> <HEAD> <TITLE> The drawing on canvas on the web using an applet </TITLE> </HEAD>
<BODY> <font size="6" color="blue"> <b>Here is Berg's very own Drawing tool</b> </font> <p> <CENTER> <applet code="SimplePaintApplet.class" WIDTH=300 HEIGHT=200></applet> <CENTER> </BODY></HTML>
The HMTL page to embed the JavaApplet
Note: this overrides any preferred andminimum size in the applet
The files Compiling
Running in a browser
Running in the applet viewer
Sometimes it is easier to debug an applet using the applet viewer (we don’t see the HTML web page)
The web page
// consolidatedSimplePaintApplet.java - drawing with a mouse on the webimport java.awt.*;import javax.swing.*;import java.awt.event.*;
public class consolidatedSimplePaintApplet extends JApplet implements MouseMotionListener{ public void init(){
Container pane = getContentPane();consolidatedSimplePaintApplet canvas = new consolidatedSimplePaintApplet();canvas.addMouseMotionListener(canvas);pane.add(canvas);
} public void mouseDragged(MouseEvent e) {
consolidatedSimplePaintApplet canvas = (consolidatedSimplePaintApplet)e.getSource();Graphics g = canvas.getGraphics();g.fillOval(e.getX()-3,e.getY()- 3,6,6);
} public void mouseMoved(MouseEvent e){}}
This is a consolidation of the 3 classes in a single applet. You should compare it to the previous codes in this presentation and see how it is actually the same code that has been simplified.
We will take a closer look at this and its implications in the next lecture.
