13 Slide

Chapter 13 Graphics Chapter 12 GUI Basics

§10.2, “Abstract Classes,” in Chapter 10

Chapter 13 Graphics

Chapter 14 Event-Driven Programming

§10.4, “Interfaces,” in Chapter 10

Chapter 15 Creating User Interfaces Chapter 16 Applets and Multimedia

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

1

Objectives ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦

To understand Java coordinate systems (§13.2). To draw things using the methods in the Graphics class (§13.3). To obtain a graphics context using the getGraphics() method (§13.3). To override the paintComponent method to draw things on a graphical context (§13.4). To use a panel as a canvas to draw things (§13.5). To draw strings, lines, rectangles, ovals, arcs, and polygons (§§13.6, 13.8-13.9). To obtain font properties using FontMetrics and know how to center a message (§13.10). To display image in a GUI component (§13.13). To develop reusable GUI components FigurePanel, MessagePanel, StillClock, and ImageViewer (§§13.7, 13.11, 13.12, 13.14). Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

2

Java Coordinate System x (0, 0)

Y Axis

X Axis

y (x, y) Java Coordinate System Y Axis

Conventional Coordinate System

(0, 0)

X Axis

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

3

Each GUI Component Has its Own Coordinate System (c3.getX(), c3.getY()) c3.getX()

(x, y)

(c2.getX(), c2.getY())

Component c3

(0, 0) (x, y)

(0, 0) (x, y)

(c1.getX(), c1.getY())

Component c2 (0, 0)

c3’s coordinate system

c2’s coordinate system

Component c1 c1’s coordinate system

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

4

The Graphics Class java.awt.Graphics

You can draw strings, lines, rectangles, ovals, arcs, polygons, and polylines, using the methods in the Graphics class.

+setColor(color: Color): void

Sets a new color for subsequent drawings.

+setFont(font: Font): void

Sets a new font for subsequent drwings.

+drawString(s: String, x: int, y: int): void

Draws a string starting at point (x, y). +drawLine(x1: int, y1: int, x2: int, y2: int): void Draws a line from (x1, y1) to (x2, y2). +drawRect(x: int, y: int, w: int, h: int): void Draws a rectangle with specified upper-left corner point at (x, y) and width w and height h. +fillRect(x: int, y: int, w: int, h: int): void Draws a filled rectangle with specified upper-left corner point at (x, y) and width w and height h. +drawRoundRect(x: int, y: int, w: int, h: int, aw: Draws a round-cornered rectangle with specified arc width aw int, ah: int): void and arc height ah. +fillRoundRect(x: int, y: int, w: int, h: int, aw: Draws a filled round-cornered rectangle with specified arc int, ah: int): void width aw and arc height ah. +draw3DRect(x: int, y: int, w: int, h: int, raised: Draws a 3-D rectangle raised above the surface or sunk into the boolean): void surface. +fill3DRect(x: int, y: int, w: int, h: int, raised: Draws a filled 3-D rectangle raised above the surface or sunk boolean): void into the surface. +drawOval(x: int, y: int, w: int, h: int): void Draws an oval bounded by the rectangle specified by the parameters x, y, w, and h. +fillOval(x: int, y: int, w: int, h: int): void Draws a filled oval bounded by the rectangle specified by the parameters x, y, w, and h. +drawArc(x: int, y: int, w: int, h: int, startAngle: Draws an arc conceived as part of an oval bounded by the int, arcAngle: int): void rectangle specified by the parameters x, y, w, and h. +fillArc(x: int, y: int, w: int, h: int, startAngle: Draws a filled arc conceived as part of an oval bounded by the int, arcAngle: int): void rectangle specified by the parameters x, y, w, and h. +drawPolygon(xPoints: int[], yPoints: int[], Draws a closed polygon defined by arrays of x and y nPoints: int): void coordinates. Each pair of (x[i], y[i]) coordinates is a point. +fillPolygon(xPoints: int[], yPoints: int[], Draws a filled polygon defined by arrays of x and y nPoints: int): void coordinates. Each pair of (x[i], y[i]) coordinates is a point. +drawPolygon(g: Polygon): void Draws a closed polygon defined by a Polygon object. +fillPolygon(g: Polygon): void Draws a filled polygon defined by a Polygon object. +drawPolyline(xPoints: int[], yPoints: int[], nPoints: int): void

Draws a polyline defined by arrays of x and y coordinates. Each pair of (x[i], y[i]) coordinates is a point.

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

5

Obtaining Graphics Object The Graphics class is an abstract class that provides a device-independent graphics interface for displaying figures and images on the screen on different platforms. Whenever a component (e.g., a button, a label, a panel) is displayed, a Graphics object is created for the component on the native platform. This object can be obtained using the getGraphics() method. For example, the graphics context for a label object jlblBanner can be obtained using

Graphics graphics = jlblBanner.getGraphics(); You can then apply the methods in the Graphics class to draw things on the label’s graphics context. Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

6

A Drawing Example (0, 0)

(50, 50)

Draw a line and a text

TestGetGraphics

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

7

Two Problems With the Preceding Example ✦ ✦

If you resize the frame, the line is gone. It is awkward to program because you have to make sure that the component to be displayed before obtaining its graphics context using the getGraphics() method. For this reason, Lines 20 and 21 are placed after the frame is displayed in Line 17.

To fix the first problem, you need to know its cause. When you resize the frame, the JVM invokes the paintComponent method of a Swing component (e.g., a label) to redisplay the graphics on the component. Since you did not draw a line in the paintComponent method, the line is gone when the frame is resized. To permanently display the line, you need to draw the line in the paintComponent method. Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

8

The paintComponent Method The paintComponent method is defined in JComponent, and its header is as follows:

protected void paintComponent(Graphics g) This method, defined in the JComponent class, is invoked whenever the component is first displayed or redisplayed. The Graphics object g is created automatically by the JVM for every visible GUI component. The JVM obtains the Graphics object and passes it to invoke paintComponent. Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

9

paintComponent Example In order to draw things on a component (e.g., a JLabel), you need to declare a class that extends a Swing GUI component class and overrides its paintComponent method to specify what to draw. The first program in this chapter can be rewritten using paintComponent.

TestPaintComponent

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

10

Drawing on Panels ✦

JPanel can be used to draw graphics (including text) and enable user interaction.

✦

To draw in a panel, you create a new class that extends JPanel and override the paintComponent method to tell the panel how to draw things. You can then display strings, draw geometric shapes, and view images on the panel.

TestPanelDrawing

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

11

Drawing Geometric Figures ✦

Drawing Strings

✦

Drawing Lines

✦

Drawing Rectangles

✦

Drawing Ovals

✦

Drawing Arcs

✦

Drawing Polygons

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

12

Drawing Strings (0, 0)

(getWidth(), 0)

(getWidth(), 0)

(0, 0) (x1, y1)

(x, y)

s is display here (x2, y2)

(0, getHeight())

(getWidth(), getHeight())

drawString(String s, int x, int y);

(0, getHeight())

(getWidth(), getHeight())

drawLine(int x1, int y1, int x2, int y2);

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

13

Drawing Rectangles drawRect(int x, int y, int w, int h); fillRect(int x, int y, int w, int h);

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

14

Drawing Rounded Rectangles drawRoundRect(int x, int y, int w, int h, int aw, int ah); fillRoundRect(int x, int y, int w, int h, int aw, int ah);

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

15

Drawing Ovals drawOval(int x, int y, int w, int h); fillOval(int x, int y, int w, int h);

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

16

Case Study: The FigurePanel Class This example develops a useful class for displaying various figures. The class enables the user to set the figure type and specify whether the figure is filled, and displays the figure on a panel. javax.swing.JPanel -char token +getToken FigurePanel +setToken +paintComponet +LINE = 1 +mouseClicked

+RECTANGLE = 2

LINE, RECTANGLE, ROUND_RECTANGLE, and OVAL are constants.

+ROUND_RECTANGLE = 3 +OVAL = 4

FigurePanel

-type: int

Specifies the figure type (default: 1).

-filled: boolean

Specifies whether the figure is filled (default: false).

+FigurePanel()

Creates a default figure panel.

+FigurePanel(type: int)

Creates a figure panel with the specified type.

+FigurePanel(type: int, filled: boolean)

Creates a figure panel with the specified type and filled property.

+getType(): int

Returns the figure type.

+setType(type: int): void

Sets a new figure type.

+isFilled(): boolean

Checks whether the figure is filled with a color.

+setFilled(filled: boolean): void

Sets a new filled property.

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

17

Test FigurePanel This example develops a useful class for displaying various figures. The class enables the user to set the figure type and specify whether the figure is filled, and displays the figure on a panel.

TestFigurePanel

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

18

Drawing Arcs drawArc(int x, int y, int w, int h, int angle1, int angle2); fillArc(int x, int y, int w, int h, int angle1, int angle2);

Angles are in degree

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

19

Drawing Arcs Example

DrawArcs

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

20

Drawing Polygons and Polylines int[] x = {40, 70, 60, 45, 20}; int[] y = {20, 40, 80, 45, 60}; g.drawPolygon(x, y, x.length);

g.drawPolyline(x, y, x.length);

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

21

Drawing Polygons Using the Polygon Class Polygon polygon = new Polygon(); polygon.addPoint(40, 59); polygon.addPoint(40, 100); polygon.addPoint(10, 100); g.drawPolygon(polygon);

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

22

Drawing Polygons Example

DrawPolygon

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

23

Centering Display Using the FontMetrics Class You can display a string at any location in a panel. Can you display it centered? To do so, you need to use the FontMetrics class to measure the exact width and height of the string for a particular font. A FontMetrics can measure the following attributes: ✦

public int getAscent()

✦

public int getHeight()

✦

public int getDescent()

✦

public int stringWidth(String str)

✦

public int getLeading() getLeading()

getHeight() getAscent()

getDescent() Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

24

The FontMetrics Class FontMetrics is an abstract class. To get a FontMetrics object for a specific font, use the following getFontMetrics methods defined in the Graphics class: · public FontMetrics getFontMetrics(Font f)

Returns the font metrics of the specified font. · public FontMetrics getFontMetrics()

Returns the font metrics of the current font. Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

25

panel

stringWidth

getHeight()

stringAscent

Welcome to Java getWidth()

TestCenterMessage

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

26

Case Study: MessagePanel The get and set methods for these data fields are provided in the class, but omitted in the UML diagram

javax.swing.JPanel -char token +getToken MessagePanel +setToken +paintComponet -xCoordinate: int +mouseClicked

The x-Coordinate for the message (default 20).

-yCoordinate: int

The y-Coordinate for the message (default 20).

-centered: boolean -message: String

Specifies whether the message is displayed centered. The message to be displayed.

-interval: int

The interval to move the message in the panel.

+MessagePanel() +MessagePanel(message: String)

Constructs a default message panel. Constructs a message panel with a specified string.

+moveLeft(): void

Moves the message to the left.

+moveRight(): void +moveUp(): void

Moves the message to the right.

+moveDown(): void

Moves the message down.

Moves the message up.

MessagePanel

This case study develops a useful class that displays a message in a panel. The class enables the user to set the location of the message, center the message, and move the message with the specified interval.

TestMessagePanel

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

27

Case Study: StillClock javax.swing.JPanel -char token

The get and set methods for these data fields are provided in the class, but omitted in the UML diagram

+getToken StillClock +setToken +paintComponet -hour: int +mouseClicked

The hour in the clock.

-minute: int

The minute in the clock.

-second: int

The second in the clock.

+StillClock()

Constructs a default clock for the current time. +StillClock(hour: int, minute: int, Constructs a clock with a specified time. second: int) Sets time to current time. +setCurrentTime(): void

StillClock

DisplayClock

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

28

Drawing Clock xEnd = xCenter + handLength × sin(θ ) Since there are sixty seconds in one minute, the angle for yEnd = yCenter - handLength × cos(θ ) the second hand is second × (2π /60)

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

29

Drawing Clock, cont. xEnd = xCenter + handLength × sin(θ ) yEnd = yCenter - handLength × cos(θ ) The position of the minute hand is determined by the minute and second. The exact minute value combined with seconds is minute + second/60. For example, if the time is 3 minutes and 30 seconds. The total minutes are 3.5. Since there are sixty minutes in one hour, the angle for the minute hand is (minute + second/60) × (2π /60) Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

30

Drawing Clock, cont. xEnd = xCenter + handLength × sin(θ ) yEnd = yCenter - handLength × cos(θ ) Since one circle is divided into twelve hours, the angle for the hour hand is (hour + minute/60 + second/(60 × 60))) × (2π /12)

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

31

Displaying Image Icons You learned how to create image icons and display image icons in labels and buttons. For example, the following statements create an image icon and display it in a label: ImageIcon icon = new ImageIcon("image/us.gif"); JLabel jlblImage = new JLabel(imageIcon); An image icon displays a fixed-size image. To display an image in a flexible size, you need to use the java.awt.Image class. An image can be created from an image icon using the getImage() method as follows: Image image = imageIcon.getImage(); Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

32

Displaying Images Using a label as an area for displaying images is simple and convenient, but you don't have much control over how the image is displayed. A more flexible way to display images is to use the drawImage method of the Graphics class on a panel. Four versions of the drawImage method are shown here. java.awt.Graphics +drawImage(image: Image, x: int, y: int, bgcolor: Color, observer: ImageObserver): void

Draws the image in a specified location. The image's top-left corner is at (x, y) in the graphics context's coordinate space. Transparent pixels in the image are drawn in the specified color bgcolor. The observer is the object on which the image is displayed. The image is cut off if it is larger than the area it is being drawn on.

+drawImage(image: Image, x: int, y: int, observer: ImageObserver): void

Same as the preceding method except that it does not specify a background color.

+drawImage(image: Image, x: int, y: int, width: int, height: int, observer: ImageObserver): void

Draws a scaled version of the image that can fill all of the available space in the specified rectangle.

+drawImage(image: Image, x: int, y: int, Same as the preceding method except that it provides a solid background width: int, height: int, bgcolor: Color, color behind the image being drawn. observer: ImageObserver): void Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

33

Displaying Images Example This example gives the code that displays an image from image/us.gif. The file image/us.gif is under the class directory. The Image from the file is created in the program. The drawImage method displays the image to fill in the whole panel, as shown in the figure.

DisplayImage

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

34

Case Study: ImageViewer Class Displaying an image is a common task in Java programming. This case study develops a reusable component named ImageViewer that displays an image in a panel. The ImageViewer class contains the properties image, imageFilename, stretched, xCoordinate, and yCoordinate. javax.swing.JPanel

The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity.

ImageViewer -image: Image

Image in the image viewer.

-stretched: boolean

True if the image is stretched in the viewer.

-xCoordinate: int

x-coordinate of the upper-left corner of the image in the viewer.

-yCoordinate: int

y-coordinate of the upper-left corner of the image in the viewer.

+ImageViewer()

Constructs an image viewer with no image.

+ImageViewer(imageFile: String)

Constructs an image viewer with the specified image file.

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

35

ImageView Example This example gives an example that creates six images using the ImageViewer class.

SixFlags

Run

Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved. 0-13-222158-6

36