Building Java Applets

1
Building Java Applets

• Ethan Cerami
• April, 2000

2
RoadMap

• Java Basics
• Brief History of Java
• Advantages of Java
• Introduction to Applets
• Example Applets
• Building Applets 101
• Applet 1.0 through Applet 6.0
• Cool Applets to try
• Tips for getting started

3
I. Java Basics
4
History of Java

• Developed by Sun Microsystems in 1993.
• Originally designed for consumer appliances, such
  as cable television boxes.
• First programming language built from the ground
  up to take advantage of the Internet and the
  World Wide Web.

5
Advantages of Java

• Object Oriented
• model for organizing large programming projects.
• Built-in Security
• it therefore represents an ideal language for
  distributing applications via the Web.
• Portable
• Java applications run on Windows, Mac OS, UNIX
  and Linux.

6
Advantages of Java (cont.)

• Multithreaded
• makes it easy to do more than one thing at a
  time, e.g. play music and display an animation at
  the same time.
• Built-in Networking Support
• very easy to create Internet applications
• Built-in Multimedia Support
• very easy to add graphics, animations and sound.

7
II. Example Applets
8
Whats an Applet?

• Applet
• small Java program that can be inserted into a
  Web page.
• HTML
• controls the formatting of a web page, e.g. size
  of fonts, location of images.
• Netscape Navigator 2.0
• developed in 1995 first web browser to include
  a Java Virtual Machine (JVM)

9
HTML plus Java
Hello and Welcome!
Java Applet
10
Java Virtual Machine
Your Java Applet
Java Virtual Machine (JVM)
Web Browser (e.g. Internet Explorer)
Operating System (e.g. Windows 2000)
11
II. Basic Applets
12
Some Basic Applets

• Wire Frame Viewer
• http//java.sun.com/applets/jdk/1.0/demo/WireFrame
  /example1.html
• Molecule Viewer
• http//java.sun.com/applets/jdk/1.0/demo/MoleculeV
  iewer/example1.html
• Graphics Test
• http//java.sun.com/applets/jdk/1.1/demo/GraphicsT
  est/index.html

13
More Basic Applets

• Basic Clock
• http//java.sun.com/openstudio/applets/clock.html
• Quotes
• http//java.sun.com/openstudio/applets/quote.html

14
III. Building Applets 101
15
Applets 1.0 - 6.0

• The next dozen slides illustrate six different
  Applets.
• Each one illustrates a new concept.
• We will cover the following topics
• basic drawing functionality
• detecting mouse events
• adding images
• adding sounds

16
Applet 1.0

• / First Applet /
• / Created for the NYU Information Society /
• / Created by Ethan Cerami /
• / April 3, 2000 /
• // Import the necessary libraries
• import java.applet.
• import java.awt.
• public class FirstApplet extends Applet
• public void paint (Graphics g)
• // Draw string at specified x,y coordinates
• g.drawString ("Hello, IS Society!", 100, 100)

Include libraries
Paint the screen
17
Understanding Applet 1.0

• import java.applet.
• import java.awt.
• These statements are equivalent to the include
  statement in C.
• They tell the compiler to include specific
  libraries.
• Here, we include the following
• java.applet. Everything you need for creating
  applets.
• Java.awt. The Java Abstract Windowing Toolkit
  (or everything you need for drawing graphics.)

18
Extending Applet

• public class FirstApplet extends Applet
• public void paint (Graphics g)
• // Draw string at specified x,y coordinates
• g.drawString ("Hello, IS Society!", 100, 100)
• In Java, an Applet is an Object. Here, we are
  extending the Applet object.
• This means that we are taking the default Applet
  object that is built into Java, and extending its
  functionality for our own purposes.

19
Painting

• public void paint (Graphics g)
• // Draw string at specified x,y coordinates
• g.drawString ("Hello, IS Society!", 100, 100)
• The applet object includes a built-in function
  (or method) for painting to the screen.
• Here, we use the drawString() method for
  displaying a string.
• To use drawString(), we specify a string, and x,y
  coordinates.

20
Applets and HTML

• ltHTMLgt
• ltHEADgt
• ltTITLEgtApplet 1.0lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtltFONT FACE"ARIAL"gtApplet 1.0lt/FONTgtlt/H1gt
• ltPgt
• ltFONT FACE"ARIAL" SIZE1gtThis program displays a
  single welcome message within the center of the
  screen.lt/FONTgt
• ltHRgt
• ltAPPLET CODEFirstApplet WIDTH300
  HEIGHT300gtlt/APPLETgt
• ltHRgt
• lt/BODYgt
• lt/HTMLgt

21
Applet 2.0

• / Second Applet /
• // Import the necessary libraries
• import java.applet.
• import java.awt.
• public class SecondApplet extends Applet
• public void paint (Graphics g)
• // Set Font
• g.setFont (new Font ("Helvetica", Font.BOLD,
  18))
• // Set Color
• g.setColor (Color.blue)
• // Draw string at specified x,y coordinates
• g.drawString ("Hello, IS Society!", 80, 100)

Set the Font
22
Setting Fonts and Colors

• g.setFont (new Font ("Helvetica", Font.BOLD,
  18))
• g.setColor (Color.blue)
• Java includes two more built-in methods
• setFont() for setting a specific font face, type,
  and size.
• setColor() for setting a specific color
• Java includes six built-in fonts
• Helvetica
• TimesRoman
• Courier
• Dialog
• DialogInput
• ZapfDingbats

23
Applet 3.0

• // Import the necessary libraries
• import java.applet.
• import java.awt.
• public class ThirdApplet extends Applet
• public void paint (Graphics g)
• // Set Font
• g.setFont (new Font ("Helvetica", Font.BOLD,
  18))
• // Draw Background Rectangle
• g.setColor (new Color (255,255,206))
• g.fillRect (50, 50, 215,100)
• // Draw Rectangle Perimeter
• g.setColor (Color.black)
• g.drawRect (50,50,215,100)
• // Draw string at specified x,y coordinates

Use Javas Built-in Graphics Functions
24
Built-in Graphics Functions

• The Java Graphics Objects includes dozens of
  drawing functions
• drawLine()
• drawOval()
• drawPolygon()
• drawRect()
• draw3DRect()
• fillOval()
• fillRect()

25
Drawing in Applet 3.0

• Draw a yellow-filled rectangle
• g.setColor (new Color (255,255,206))
• g.fillRect (50, 50, 215,100)
• Draw a black perimeter around the yellow
  rectangle.
• g.setColor (Color.black)
• g.drawRect (50,50,215,100)
• Draw a line underneath the welcome message.
• g.drawLine (80,105,227,105)

26
Applet 4.0
27

• // Import the necessary libraries
• import java.applet.
• import java.awt.
• public class FourthApplet extends Applet
• private int red 255
• private int green 255
• private int blue 206
• public void paint (Graphics g)
• // Set Font
• g.setFont (new Font ("Helvetica", Font.BOLD,
  18))
• // Draw Background Rectangle
• g.setColor (new Color (red, green, blue))
• g.fillRect (50, 50, 215,100)

Continued on next slide...
28
// Draw Rectangle Perimeter g.setColor
(Color.black) g.drawRect (50,50,215,100)
// Draw string at specified x,y
coordinates g.drawString ("Hello, IS Society!",
80, 100) // Draw RGB Values g.setFont
(new Font ("Helvetica", Font.PLAIN,
12)) g.drawString ("Click Me! RGB "red"
"green" "blue, 75, 125) // Draw Line
below welcome message g.drawLine
(80,105,227,105) // Capture Mouse Down
Events public boolean mouseDown (Event e, int x,
int y) green - 5 // If we go below 0,
reset to 255 if (green lt 0) green
255 repaint() return true
29
Representing Colors

• Every color on a computer is represented by
  different combinations of Red, Green and Blue
  (RGB.)
• By changing the levels of RGB, you can change the
  colors displayed.
• This applet includes the following preset colors
• int red 255
• int green 255
• int blue 206
• These values represent the background color of
  the box.

30
Capturing Mouse Events

• The Java Component object handles a host of mouse
  events including
• mouseDown()
• mouseDrag()
• mouseMove()
• When a mouse event occurs, such a user click, you
  can capture the event and do whatever you like.

31
mouseDown()

• // Capture Mouse Down Events
• public boolean mouseDown (Event e, int x, int y)
  
• green - 5
• // If we go below 0, reset to 255
• if (green lt 0) green 255
• repaint()
• return true
• If a user presses the mouse button, the
  mouseDown() method is activated.
• Here, we decrease the green value by 5 points,
  and tell the Applet to repaint() itself.

32
Applet 5.0
33
// Import the necessary libraries import
java.applet. import java.awt. public class
FifthApplet extends Applet private Image
logo // Load logo image public void init ()
logo this.getImage (this.getDocumentBase(),
"logo.gif") public void paint (Graphics g)
// Draw Background Color g.setColor (new
Color (0,102,153)) g.fillRect
(0,0,300,300) // Draw Logo in upper right
corner g.drawImage (logo, 5,5, this) //
Set Font g.setColor (Color.white) g.setFont
(new Font ("Helvetica", Font.BOLD, 18)) //
Draw string at specified x,y coordinates g.drawS
tring ("Hello, IS Society!", 80, 100) //
Draw Line below welcome message g.drawLine
(80,105,227,105)
34
Initializing an Applet

• The Applet object includes an init() method.
• This initializing the applet before it starts to
  run.
• To load an image called logo.gif
• public void init ()
• logo this.getImage
• (this.getDocumentBase(), "logo.gif")

35
Drawing an Image

• To draw an image, just use the drawImage()
  method, and specify where you want to put the
  image
• // Draw Logo in upper right corner
• g.drawImage (logo, 5,5, this)

36
Applet 6.0
37
// Import the necessary libraries import
java.applet. import java.awt. public class
SixthApplet extends Applet private Image
logo private AudioClip sound1 // Load logo
image and sounds public void init () logo
this.getImage (this.getDocumentBase(),
"logo.gif") sound1 this.getAudioClip
(this.getDocumentBase(), "gong.au") publ
ic void paint (Graphics g) // Draw
Background Color g.setColor (new Color
(0,102,153)) g.fillRect (0,0,300,300) //
Draw Logo in upper right corner g.drawImage
(logo, 5,5, this)
Continued on next slide...
38
// Set Font g.setColor (Color.white) g.se
tFont (new Font ("Helvetica", Font.BOLD,
18)) // Draw string at specified x,y
coordinates g.drawString ("Hello, IS Society!",
80, 100) // Draw Line below welcome
message g.drawLine (80,105,227,105) //
Capture Mouse Down Events public boolean
mouseDown (Event e, int x, int y)
sound1.play() return true
39
Downloading Sounds

• To add a sound, use the getAudioClip() method
• sound1 this.getAudioClip
• (this.getDocumentBase(), "gong.au")
• This retrieves the gong.au sound file.
• Java used to only play .au files. It now
  supports AIFF, WAV and MIDI files.

40
Playing Sounds

• To play a sound, use the play() method
• // Capture Mouse Down Events
• public boolean mouseDown (Event e, int x, int y)
  
• sound1.play()
• return true
• When a user clicks the mouse, the sound clip is
  played.

41
IV. Cool Applets you should try
42
Cool Applets

• 3D Physics Experiment
• http//www.peacetech.com/users/solovyevk/applets/E
  lasticExp.html
• Sumea Multimedia Player
• http//www.sumea.com/b_2.html
• Splash-em
• http//www.visionary.com.au/java/splashem.shtml

43
Cool Applets (cont.)

• Visible Human Viewer
• http//www.npac.syr.edu/projects/vishuman/VisibleH
  uman.html
• Burning Metal 3D
• http//www.plutoniumsoftware.com/games/bm3d/

44
Tips for Getting Started
45
Getting Started

• Fortunately, you can get everything you need for
  free!
• Java Tutorial
• http//web2.java.sun.com/docs/books/tutorial/
• Java Software Development Kit
• http//java.sun.com/products/jdk/1.2/
• These slides and examples are also available on
  my web site
• http//cs.nyu.edu/ms_students/cera7013