Applets and Graphics

1
Chapter 4
Applets and Graphics
2
Console and GUI applications

• Console application
• reads from keyboard
• writes text to terminal window
• easy to program
• Graphical User Interface application
• reads from keyboard, mouse
• uses UI components (buttons, text fields,
  sliders)
• can paint graphics

3
Figure 1 A Console Application
4
Figure 2 A Graphical Application
5
Applets

• Downloaded from web server
• Run inside web browser (or applet viewer)
• Bytecodes are platform-neutral (Windows, Mac,
  Linux, Solaris
• Requires Java VM
• Security issue applet runs on local machine
• By default, applet runs in sandbox

6
Figure 3 Web Browsers Accessing a Web Server
7
HTML

• Text and markup, such as ltH1gt
• Matching start and end tags ltIgt...lt/Igt
• Bold ltBgt
• List ltULgt...lt/ULgt List item ltLIgt
• Images ltIMG SRC"hamster.jpg"gt
• Links ltA HREF"..."gt...lt/Agt
• Applets ltAPPLET CODE"..." WIDTH... HEIGHT...gt

8
Applet skeleton

• public class MyApplet extends JApplet public
  void init() // initializations go here
  . . . public void paint(Graphics g)
  Graphics2D g2 (Graphics2D)g // painting
  instructions go here . . .

9
Figure 4 The Rectangle Applet in the Applet Viewer
10
Figure 5 The Rectan- gle Applet in a Java
2Enabled Browser
11
Running applets

• Write and compile applet (MyApplet.java)
• Make HTML file MyApplet.htmlltAPPLET
  CODE"MyApplet.class" WIDTH300 HEIGHT200gt
• Run applet viewerappletviewer MyApplet.html
• Or load HTML file into Java 2 enabled browser

12
Program RectangleApplet.java import
java.applet.Applet import java.awt.Graphics impo
rt java.awt.Graphics2D import java.awt.Rectangle
public class RectangleApplet extends Applet
public void paint(Graphics g) // recover
Graphics2D Graphics2D g2
(Graphics2D)g // construct a rectangle
and draw it Rectangle cerealBox new
Rectangle(5, 10, 20, 30)
g2.draw(cerealBox)
13
// move rectangle 15 units sideways and
25 units down cerealBox.translate(15,
25) // draw moved rectangle
g2.draw(cerealBox)
14
Graphical Shapes

• Rectangle2D.Double
• Ellipse2D.Double
• Line2D.Double
• Point2D.Double
• Draw with draw methodEllipse2D.Double egg new
  Ellipse2D.Double(5,10,15,20)g2.draw(egg)

15
Figure 6 An Ellipse and Its Bounding Box
16
Colors

• Use Color constructorColor magenta new
  Color(1.0F, 0.0F, 1.0F)
• Predefined colors, e.g. Color.red
• Set current color of graphics contextg2.setColor
  (magenta)
• Draw or fill shapes in colorg2.draw(egg)g2.fil
  l(egg)

17
Fonts

• Three font characteristics
• face name (e.g. "Times Roman", "Helvetica")
• style (plain, bold, italic, bold italic)
• point size (12 point normal screen font size)
• Logical face names Serif, SansSerif, Monospaced
• Font f new Font("Serif", Font.BOLD, 36)

18
Figure 8 Common Fonts
19
Fonts 2

• Set current font of graphics contextg2.setFont(f
  )
• Then draw stringg2.drawString("Hello", 50,
  100)

20
Measuring Text

• Ascent height above baseline
• Descent depth below baseline
• Use text layoutFontRenderContext context
  g2.getFontRenderContext()TextLayout layout
  new TextLayout(message, font, context)float
  height layout.getAscent()
  layout.getDescent()float width
  layout.getAdvance()

21
Figure 7 Basepoint and Baseline
22
Figure 9 Text Layout
23
Figure 10 The Font Applet
24
Program FontApplet.java import
java.applet.Applet import java.awt.Graphics impo
rt java.awt.Graphics2D import java.awt.Font impo
rt java.awt.font.FontRenderContext import
java.awt.font.TextLayout public class
FontApplet extends Applet public void
paint(Graphics g) Graphics2D g2
(Graphics2D)g // select the font into
the graphics context final int HUGE_SIZE
48 Font hugeFont new Font("Serif",
Font.BOLD, HUGE_SIZE) g2.setFont(hugeFont
) String message "Applet"


25
// create a text layout to measure the
string FontRenderContext context
g2.getFontRenderContext() TextLayout
layout new TextLayout(message,
hugeFont, context) // measure the message
width and height float xMessageWidth
layout.getAdvance() float yMessageHeight
layout.getAscent() layout.getDescent()
// center the message in the window
float xLeft 0.5F
(getWidth()- xMessageWidth) float yTop
0.5F (getHeight()- yMessageHeight) float
yBase yTop layout.getAscent()
g2.drawString(message, xLeft, yBase)
26
Figure 11 A Graphical Applet That Draws a Sketch
of a Car
27
Program CarDrawer.java import java.applet.Applet
import java.awt.Graphics import
java.awt.Graphics2D import java.awt.Rectangle im
port java.awt.geom.Ellipse2D import
java.awt.geom.Line2D import java.awt.geom.Point2D
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)
28
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, 110) // 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)
29
g2.draw(body) g2.draw(frontTire)
g2.draw(rearTire) g2.draw(frontWindshie
ld) g2.draw(roofTop)
g2.draw(rearWindshield)
g2.drawString("JavaMobile 1.2ti", 100, 150)

30
Figure 12 Using Graph Paper to Find
Shape Coordinates
31
Text Input

• Use option paneString input
  JOptionPane.showInputDialog (promptString)
• Convert strings to numeric inputint age
  Integer.parseInt(input)
• For now, place input commands in init method of
  applet

32
Figure 16 An Input Dialog
33
Program ColorSelect.java import
java.applet.Applet import java.awt.Color import
java.awt.Graphics import java.awt.Graphics2D imp
ort java.awt.Rectangle import javax.swing.JOption
Pane public class ColorSelect extends Applet
public void init() String input //
ask the user for red, green, blue values
input JOptionPane.showInputDialog("red")
float red Float.parseFloat(input)
input JOptionPane.showInputDialog("green")
float green Float.parseFloat(input)
input JOptionPane.showInputDialog("blue")
float blue Float.parseFloat(input)
fillColor new Color(red,green,blue)

34
public void paint(Graphics g) final int
SQUARE_LENGTH 100 Graphics2D g2
(Graphics2D)g // select color into
graphics context g2.setColor(fillColor)
// construct and fill a square whose center
is // the center of the window
Rectangle square new Rectangle(
(getWidth() - SQUARE_LENGTH) / 2,
(getHeight() - SQUARE_LENGTH) / 2,
SQUARE_LENGTH, SQUARE_LENGTH)
g2.fill(square) private color
fillColor
35
Visual and Numerical Data

• Draw circle with radius r 100 and center (a,b)
  (100, 100).
• Get user input for line position x
• Intersection points(x - a)2 (y - b)2 r2 y
  b Ö(r2 - (x - a)2)
• root Math.sqrt(rr - (x-a)(x-a))y1 b -
  root y2 b root

36
Figure 17 Intersection of a Line and a Circle
37
Program Intersect.java import java.applet.Applet
import java.awt.Graphics import
java.awt.Graphics2D import java.awt.geom.Ellipse
2D import java.awt.geom.Line2D import
javax.swing.JOptionPane public class Intersect
extends Applet public void init() String
input JOptionPane.showInputDialog("x")
x Integer.parseInt(input) public void
paint(Graphics g) Graphics2D g2
(Graphics2D)g double r 100 // the radius
of the circle // draw the circle


38
Ellipse2D.Double circle new
Ellipse2D.Double(0, 0, 2 r, 2 r)
g2.draw(circle) // draw the vertical line
Line2D.Double line new Line2D.Double(x,
0, x, 2 r) g2.draw(line) // compute
the intersection points double a r
double b r


39
double root Math.sqrt(r r - (x - a) (x
- a)) double y1 b root double y2 b
- root // draw the intersection points
final double SMALL_CIRCLE_RADIUS 2
Ellipse2D.Double circle1 new Ellipse2D.Double(
x - SMALL_CIRCLE_RADIUS, y1 -
SMALL_CIRCLE_RADIUS, 2
SMALL_CIRCLE_RADIUS, 2
SMALL_CIRCLE_RADIUS) Ellipse2D.Double circle2
new Ellipse2D.Double( x -
SMALL_CIRCLE_RADIUS, y2 -
SMALL_CIRCLE_RADIUS, 2
SMALL_CIRCLE_RADIUS, 2
SMALL_CIRCLE_RADIUS)
40
g2.draw(circle1) g2.draw(circle2)
// label the intersection points
String label1 " y1 String label2 "
y2 g2.drawString(label1, (float)x,
(float)y1) g2.drawString(label2, (float)x,
(float)y2) private double x
41
Unit Conversion

• Pixel coordinates 0 . . . getWidth()-1,
  0...getHeight()-1
• User coordinates xleft...xright, ytop...ybottom
• Conversion formulaxpixel (xuser - xleft)(width
  - 1) / (xright - xleft)
• Note that usually ytop gt ybottom
• Use UnitConverter convenience class

42
Figure 18 Plotting Temperature Data
43
Program Phoenix.java import java.applet.Applet i
mport java.awt.Graphics import
java.awt.Graphics2D import java.awt.Rectangle p
ublic class Phoenix extends Applet public void
paint(Graphics g) Graphics2D g2
(Graphics2D)g month 0 units new
UnitConverter(0, 12, 0, 40, getWidth(),
getHeight()) final int JAN_TEMP 11
final int FEB_TEMP 13 final int
MAR_TEMP 16 final int APR_TEMP 20
final int MAY_TEMP 25 final int
JUN_TEMP 31 final int JUL_TEMP 33
final int AUG_TEMP 32 final int
SEP_TEMP 29
44
final int OCT_TEMP 23 final int
NOV_TEMP 16 final int DEC_TEMP 12
drawBar(g2, JAN_TEMP) drawBar(g2,
FEB_TEMP) drawBar(g2, MAR_TEMP)
drawBar(g2, APR_TEMP) drawBar(g2,
MAY_TEMP) drawBar(g2, JUN_TEMP)
drawBar(g2, JUL_TEMP) drawBar(g2,
AUG_TEMP) drawBar(g2, SEP_TEMP)
drawBar(g2, OCT_TEMP) drawBar(g2,
NOV_TEMP) drawBar(g2, DEC_TEMP)
45
public void drawBar(Graphics2D g2, int
temperature) // construct rectangle for
this month and temperature Rectangle rect
new Rectangle(month, 0, 1,
temperature) // convert to pixel
coordinates and draw units.convert(rect)
g2.draw(rect) month
private int month private UnitConverter
units
46
Figure 19 A Tic-Tac-Toe Board