lesson 4-Applets & Graphics

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



code=”HelloApplet.
class” width=500
height=300



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”

CODE=“Rect.class”
WIDTH=300
HEIGHT=300>

VALUE=“1.0”>NAME=“Green”
VALUE=“0.7”>VALUE=“0.7”>

// 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);

}

}

a

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.