24
Made with love, by Zachary Langley Applets The Graphics Presentation

Made with love, by Zachary Langley Applets The Graphics Presentation

Embed Size (px)

Citation preview

Page 1: Made with love, by Zachary Langley Applets The Graphics Presentation

Made with love, by Zachary Langley

AppletsThe Graphics Presentation

Page 2: Made with love, by Zachary Langley Applets The Graphics Presentation

What is an Applet?

An applet is a Java program that a web browser enabled with Java technology can download and run

Applets are a subclass of java.awt.Applet, which provides the interface between the browser and the applet

Page 3: Made with love, by Zachary Langley Applets The Graphics Presentation

How do Applets Differ From Applications?

Applets do not have a main method (public static void main(String[] args))

Instead, an applet has a series of methods that are called by an HTML enabled browser

Applets are subclasses of JApplet or Applet (they “extend from” these classes)

Page 4: Made with love, by Zachary Langley Applets The Graphics Presentation

Writing Your First Applet

Open up NetBeans

Create a new project called “HelloWorldApplet”

Delete the everything in the class’s body (the SPVM and the constructor)

Make your class “extend” from JApplet: public class HelloWorldApplet extends JApplet

Fix your imports by typing alt+shift+F

Page 5: Made with love, by Zachary Langley Applets The Graphics Presentation

Displaying “Hello World!”

Add the method in bold to your class:

public class HelloWorldApplet extends JApplet { public void paint(Graphics g) { g.drawString(“Hello World!”, 50, 75); } }

Run the applet by typing shift+F6

Page 6: Made with love, by Zachary Langley Applets The Graphics Presentation

How it Works

The drawString method accepts three arguments: the String to draw, the x location, and the y location

In Java, the origin (0, 0) is in the top-left corner

origin

(50, 75)

g.drawString(“Hello World!”, 50, 75);

Page 7: Made with love, by Zachary Langley Applets The Graphics Presentation

The paint(Graphics) Method

The paint method is automatically called by an applet when the applet needs repainting

If you want to force the applet to call paint, call repaint()

repaint() will call paint(Graphics) for you, but will pass in the appropriate Graphics object

Page 8: Made with love, by Zachary Langley Applets The Graphics Presentation

Drawing a Rectangle

Let’s draw a rectangle as a border around our text:

public void paint(Graphics g) { g.drawRect(45, 60, 85, 20); g.drawString(“Hello World!”, 50, 75); }

Run the applet

Page 9: Made with love, by Zachary Langley Applets The Graphics Presentation

How it Works

The drawRect method accepts four arguments: the x location, the y location, the width, and the height

(45, 60)

85

20

g.drawRect(45, 60, 85, 20);

Page 10: Made with love, by Zachary Langley Applets The Graphics Presentation

Filling the Rectangle and Adding Some

ColorNow we’re going to fill that rectangle in blue and draw “Hello World!” in green:

public void paint(Graphics g) { g.setColor(Color.blue); g.fillRect(45, 60, 85, 20); g.setColor(Color.green); g.drawString(“Hello World!”, 50, 75); }

Notice the change from “drawRect” to “fillRect”

Page 11: Made with love, by Zachary Langley Applets The Graphics Presentation

How it Works

Color.blue and Color.green are public static variables in the Color class (and there are many others, check the Color documentation)

By default, the Graphic’s color is black

Tip: you can create

your own Color

object with its

constructor:

Color(int r, int g, int

b)

Page 12: Made with love, by Zachary Langley Applets The Graphics Presentation

Adding Animation

Let’s make our rectangle bounce off the walls of the applet. The first thing we should do is store the x and width as variables

public class HelloWorldApplet extends JApplet { private int x = 45, width = 85;

public void paint(Graphics g) { /* snip */ } }

Page 13: Made with love, by Zachary Langley Applets The Graphics Presentation

Adding Animation II

Now we need to use these variables in our paint method

public void paint(Graphics g) { g.setColor(Color.blue); g.fillRect(x, 60, width, 20); g.setColor(Color.green); g.drawString(“Hello World!”, x + 5, 75); }

Run the applet, it should look the same

Page 14: Made with love, by Zachary Langley Applets The Graphics Presentation

Threads

All animation needs to be done in a separate thread

A thread is a thread of execution in a program

Page 15: Made with love, by Zachary Langley Applets The Graphics Presentation

Adding Animation III: Creating a Thread

Now let’s create our own thread:

private int x = 45, width = 85; private class MyThread extends Thread { public void run() { /* code for the thread to execute */ } }

Note that this class is inside HelloWorldApplet(we call this an inner-class)

Page 16: Made with love, by Zachary Langley Applets The Graphics Presentation

Adding Behavior to MyThread

We want to make the text bounce, but first let’s just make it move:

private int speed = 1;

public void run() { while (true) { x += speed; repaint();

try { Thread.sleep(10); } catch (InterruptedException e) { } } } }

Page 17: Made with love, by Zachary Langley Applets The Graphics Presentation

Starting the Thread

The program still shouldn’t act differently; we haven’t started the thread

Add the following method before the paint method:

public void init() { MyThread myThread = new MyThread(); myThread.start(); }

Page 18: Made with love, by Zachary Langley Applets The Graphics Presentation

The init() Method

Like the paint method, the init method is called automatically

However, the init method is called once and only once: as soon as the applet launches

Only initialization code should go in the init method

Page 19: Made with love, by Zachary Langley Applets The Graphics Presentation

Animation IV

If you run your applet now, you’ll notice that the text moves, but it moves right off the window

We can easily fix this by checking if our rectangle is going to move out of view, and if so, reverse the speed:

while (true) { if (x + width + speed > getWidth() || x + speed < 0) speed = -speed;

x += speed; /* snip */ }

Page 20: Made with love, by Zachary Langley Applets The Graphics Presentation

Mouse Listeners

To demonstrate MouseListeners, create another project in NetBeans called “MouseListenerApplet”

Follow the same steps you did before to make it run as an applet (remove the SPVM, the constructor, extend JApplet, fix imports)

Page 21: Made with love, by Zachary Langley Applets The Graphics Presentation

Adding a MouseListener

Adding a MouseListener is much like creating a thread public class MouseListenerApplet extends JApplet { private class MyMouseListener implements MouseListener { }

public void init() { addMouseListener(new MyMouseListener()); } }

At this point you may need to fix your imports

Page 22: Made with love, by Zachary Langley Applets The Graphics Presentation

Implementing the Required Methods

The code will not compile yet; the MouseListener interface requires you to implement certain methods

private class MyMouseListener implements MouseListener { public void mouseClicked(MouseEvent e) { System.out.println(“mouseClicked”); } public void mouseEntered(MouseEvent e) { System.out.println(“mouseEntered”); } public void mouseExited(MouseEvent e) { System.out.println(“mouseExited”); } public void mousePressed(MouseEvent e) { System.out.println(“mousePressed”); } public void mouseReleased(MouseEvent e) { System.out.println(“mouseReleased”); } }

After adding these methods, run the

applet. Click on the applet and watch what is printed to

the console

Page 23: Made with love, by Zachary Langley Applets The Graphics Presentation

Methods in the Applet’s Life Cycle

There are four methods in an applet’s life cycle: init(), start(), stop(), and destroy()

init() and destroy() are called once throughout the applet’s life, while start() and stop() are called at least once

start() is called immediately after the init method, and also when a user returns to the page containing the applet, after viewing other methods

stop() is called whenever the user moves away from the page containing the applet

destroy() is called when the browser shuts down normally

Page 24: Made with love, by Zachary Langley Applets The Graphics Presentation

Questions?