4: Applets and Graphics
There are three kinds of Java programs:
Console applications
Graphical applications
Applets
Console applications run in a single, plain-looking window.
Graphical applications use windows filled with user interface components such as buttons, text input fields, menu, and so on.
Applets are similar to graphical applications, but they run inside a web browser.
Applets
To display an applet, we need to
Write and compile to generate the applet code
Write an HTML file to tell the browser how to find the code for the applet
An example of an applet that draw rectangles
First, write Java program and compile it to generate “Rect.class”
Then, create an HTML file and save it as “Rect.html”
Finally, use appletviewer to run the HTML file that contains the applet
A Simple Java Applet
// Example 1: HelloApplet
import java.applet.Applet;
import java.awt.Graphics;
public class HelloApplet extends Applet {
public void paint(Graphics g) {
g.drawString(“Hello !”, 25, 25);
}
}
How to Compile and Run a Java Applet
To Compile
c:> javac HelloApplet.java
To Run an applet, we need HelloApplet.html
<HTML>
<APPLET code=”HelloApplet.class” width=500 height=300 </APPLET>
</HTML>
Then, To run this applet,
c:> appletviewer HelloApplet.html
or use any browsers, e.g. Netscape, Internet Explorer.
Java Plug-In
The Browser Program That can run Java Applet is called having applet container.
Applet Container of J2SDK is appletviewer
If any Browser don't have Java Runtime Environment (JRE) for Java 2
We need to use Java Plug-In HTML Converter ( for more information please look at java.sun.com/products/plugin)
For J2SDK use HTMLConverter filename.html
Applets
File “Rect.html”
<APPLET CODE=“Rect.class” WIDTH=300 HEIGHT=300>
<PARAM NAME=“Red” VALUE=“1.0”>
<PARAM NAME=“Green” VALUE=“0.7”>
<PARAM NAME=“Blue” VALUE=“0.7”>
</APPLET>
// Rect.java
import java.awt.*;
import java.applet.*;
public class Rect extends Applet
{ private Color colr;
public void init()
{ float r = Float.parseFloat(getParameter(“Red”));
float g = Float.parseFloat(getParameter(“Green”));
float b = Float.parseFloat(getParameter(“Blue”));
}
public void paint(Graphics g)
{ Graphics2D g2 = (Graphics2D)g;
Rectangle box = new Rectangle(5, 10, 20, 30);
colr = new Color(r, g, b);
g2.setColor(colr);
g2.draw(box);
}
}
Graphical Shapes
To draw a rectangle, we need to specify its bounding box, namely the x- and y- coordinates of the top left corner and the width and height of the box.
Rectangle cerealBox = new Rectangle(5, 10, 20, 30);
To draw an ellipse, we need to specify its bounding box, namely the x- and y- coordinates of the top left corner and the width and height of the box.
Ellipse2D.Float Egg = new Ellipse2D.Float(5, 10, 20, 25);
Import Graphics Classes
To use graphical utilities such as paint, we have to import the Graphics2D class
import java.awt.Graphics;
import java.awt.Graphics2D;
To draw a rectangle, we have to import the Rectangle class.
import java.awt.Rectangle;
To draw an ellipse, we have to import the Ellipse class.
import java.awt.geom.Ellipse;
Graphical Shapes
import java.awt.geom.Ellipse;
Ellipse2D.Double pic1 = new Ellipse2D.Double(5,10,15,20);
g2.draw(pic1);
Line2D.Double segment = new Line2D.Double(x1, y1, x2, y2);
g2.draw(segment):
Color
Color magenta = new Color(1.0F, 0.0F, 1.0F);
// Color.black, Color.blue, Color.cyan, Color.gray, Color.green,
// Color.pink, Color.red, Color.white, Color.yellow
Example: CarDrawer Program
import java.awt.*;
import java.applet.*;
public class CarDrawer extends Applet
{ public void paint(Graphics g)
{ Graphics2D g2 = (Graphics2D)g;
Rectangle body = new Rectangle(100, 110, 60, 10);
Ellipse2D.Double FrontTire =
new Ellipse2D.Double(110, 120, 10, 10);
Ellipse2D.Double RearTire =
new Ellipse2D.Double(140, 120, 10, 10);
Point2D.Double r1 = new Point2D.Double(110, 110);
// the bottom of the front windshield
Point2D.Double r2 = new Point2D.Double(120, 100);
// the front of the roof
Point2D.Double r3 = new Point2D.Double(140, 100);
// the rear of the roof
Point2D.Double r4 = new Point2D.Double(150, 100);
// the bottom of the rear windshield
Line2D.Double frontWindshield =
new Line2D.Double(r1, r2);
Line2D.Double roofTop =
new Line2D.Double(r2, r3);
Line2D.Double rearWindshield =
new Line2D.Double(r3, r4);
g2.draw(body);
g2.draw(frontTire);
g2.draw(rearTire);
g2.draw(body);
g2.draw(frontWindshield);
g2.draw(roofTop);
g2.draw(rearWindshield);
}
}
Fonts
A syntax for drawing a FONT object is:
g2.drawString(“Applet”, 50, 100); // Figure 7
To construct a Font object, we specify:
1. The font face name:
- logical face name: Serif, Sans Serif, Monospaced, Dialog, DialogInput
-typeface name: Times Roman, Helevetica
2. The style: Font.PLAIN, Font.BOLD, Font.ITALIC, or Font.BOLD+Font.Italic
3. The point size: 72 points per inch
8 points (small), 12 point (medium), 18 point (large), 36 point (huge)
Text Layout
Here is how we can write “Applet” in huge pink letters:
final int HUGE_SIZE = 36;
String message = “Applet”;
Font hugeFont = new Font(“Serif”, Font.BOLD, HUGE_SIZE);
g2.setFont(hugeFont);
g2.setColor(Color.pink);
g2.drawString(message, 50, 100);
A typographical measurements (Figure 9):
- The ascent, the descent, and the leading of a font.
- The advance of the text is the width of the text.
To measure the size of a string, we need to construct a TextLayout object. Its constructor need three parameters:
1. The string to measure
2. The font to use
3. A FontRenderContext object
For example, how to create TextLayout object.
String message = “Applet”;
Font hugeFont = new Font(“Serif”, Font.BOLD, HUGE_SIZE);
FontRenderContext context = g2.getFontRenderContext();
TextLaout layout = new TextLayout(message, hugeFont, context);
Now we can query the ascent, descent, leading, and advance by using getAscent, getDescent, getLeading, and getAdvance methods of the TextLayout class.
float xMessageWidth = layout.getAdvance();
float yMessageHeight = layout.getAscent() + layout.getDescent()
Figure 10 - To put a string in the middle of the window:
float xLeft = 0.5F * (getWidth() - xMessageWidth);
float yTop = 0.5F * (getHeight() - yMessageHeight);
float yBase = yTop + layout.getAscent();
g2.drawString(message, xLeft, yBase);
Applets’ Methods
The methods of applet class that determine the life cycle of an applet are shown on the next slide
These methods can be used to initialize the variables or delete any unused variables
Life Cycle of Applet
init() : Called once, when the browser or applet viewer loads the applet
start() : Called every time the user enters the web page containing the applet
paint() : Called every time the surface of the applet needs to be repainted
stop() : Called every time the user exits the web page containg the applet
destroy() : Called once, when the browser or applet viewer exits and unloads the applet
Programming Exercises
1. Write a program that draws your name in red, centered inside a blue rectangle.
2. Write a program that draws five strings, one each in its own color.
3. Write a program that prompts the user to enter a radius. Draw a circle with that radius.
4. Write an interactive program that draws a large ellipse, filled with your requested color, that touches the window boundaries. The ellipse should resize itself when you resize the window.
by Pizzler contact us at Pizzler@gmail.com