made with love, by zachary langley applets the graphics presentation
TRANSCRIPT
![Page 1: Made with love, by Zachary Langley Applets The Graphics Presentation](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/1.jpg)
Made with love, by Zachary Langley
AppletsThe Graphics Presentation
![Page 2: Made with love, by Zachary Langley Applets The Graphics Presentation](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070307/551b5f39550346a6148b4634/html5/thumbnails/24.jpg)
Questions?