Lecture 26: Applets (conclusion)Lecture 26: Applets (conclusion)

CS 170, Section 000

8 December 20098 December 2009

12/3/2009 CS170, Section 000, Fall 2009 1

Lecture Plan

Java audio, graphics

Homework 9 (extra credit): Due Friday, Dec 18Homework 9 (extra credit): Due Friday, Dec 18

Fi l C t t L i tiFinal Content, Logistics

Course evaluations

CS170, Section 000, Fall 2009 2

Some Nice Examples of HW8

• Dustin Goodman: http://www.mathcs.emory.edu/~dgoodm2/hw8.html

12/8/2009 CS170, Section 000, Fall 2009 3

Locating Resource Using the URL Class

The java.net.URL class can be used to identify files (image, audio, text, etc.) on the Internet.

URL (Uniform Resource Locator) is a pointer to aURL (Uniform Resource Locator) is a pointer to a “resource” on the World Wide Web on a local machine or a remote host.

A resource can be something as simple as a file or a directory.

4

Creating a URL from a Class Reference

java.lang.Class metaObject = this.getClass();

The Class class provides access to useful information about the class, such as the data fields, constructors, and methods. It also contains the getResource(filename) method, which can be used to obtain the URL of a given file name in the class directory.

T bt i th URL f fil i th l di tTo obtain the URL of a file in the class directory, use

URL url = metaObject.getResource(filename);

For example suppose the class directory is c:\book the following statements create a URL forFor example, suppose the class directory is c:\book, the following statements create a URL for c:\book\image\us.gif.

Class metaObject = this.getClass();URL url = metaObject.getResource("image/us.gif");

You can now create an ImageIcon using

ImageIcon imageIcon = new ImageIcon(url);

5

“Bonus” Material: Java Audio

To play an audio file in an applet, first create an audio clip object for the audio filethe audio file.

use the static method newAudioClip() in the java.applet.Applet class:

AudioClip audioClip = Applet.newAudioClip(url);AudioClip audioClip Applet.newAudioClip(url);

Audio was originally used with Java applets. For this reason, the AudioClip interface is in the java.applet package. ud oC p te ace s t e ja a app et pac age

The following statements, for example, create an AudioClip for the beep.au audio file in the same directory with the class you are running.beep.au audio file in the same directory with the class you are running.

Class class = this.getClass();URL url = class.getResource("beep.au");AudioClip audioClip = Applet.newAudioClip(url);

12/8/2009 CS170, Section 000, Fall 2009 6

Playing Audio

«interface» j l t A di Clijava.applet.AudioClip

+play() Starts playing this audio clip. Each time this method is called, the clip is restarted from the beginning.

+loop() +stop()

Plays the clip repeatedly. Stops playing the clip.

To manipulate a sound for an audio clip, use the play(), loop(), and stop()methods in java.applet.AudioClip.

htt // th d / 170000/ l t /Di l I Pl A di ht l

7

http://www.mathcs.emory.edu/~cs170000/applets/DisplayImagePlayAudio.html

“Bonus” Material: Graphics

• Graphics object

• paint() method

12/8/2009 CS170, Section 000, Fall 2009 8

Java Coordinate System

(0, 0) X Axis

x

Y Axis

(x, y) y

Java Coordinate X Axis

Conventional Coordinate

(0, 0)

Y Axis System Coordinate

System

9

Each GUI Component Has its Own C di SCoordinate System

(0, 0)

(x3, y3) Component c3 c3’s coordinate system

(0, 0) Component c2

Component c1(0, 0)(x1, y1)

(x2, y2) c2’s coordinate system

c1’s coordinate system

10

The Graphics ClassYou can draw strings, lines, rectangles, ovals, arcs polygons and

java.awt.Graphics

+setColor(color: Color): void +setFont(font: Font): void +drawString(s: String, x: int, y: int): void +drawLine(x1: int, y1: int, x2: int, y2: int): void

Sets a new color for subsequent drawings. Sets a new font for subsequent drwings. Draws a string starting at point (x, y). Draws a line from (x1, y1) to (x2, y2).

arcs, polygons, and polylines, using the methods in the Graphicsl

+drawRect(x: int, y: int, w: int, h: int): void

+fillRect(x: int, y: int, w: int, h: int): void

+drawRoundRect(x: int, y: int, w: int, h: int, aw: int, ah: int): void

fill d ( i i i h i

Draws a rectangle with specified upper-left corner point at (x, y) and width w and height h.

Draws a filled rectangle with specified upper-left corner point at (x, y) and width w and height h.

Draws a round-cornered rectangle with specified arc width aw and arc height ah.

class. +fillRoundRect(x: int, y: int, w: int, h: int, aw: int, ah: int): void

+draw3DRect(x: int, y: int, w: int, h: int, raised: boolean): void

+fill3DRect(x: int, y: int, w: int, h: int, raised: boolean): void

+drawOval(x: int y: int w: int h: int): void

Draws a filled round-cornered rectangle with specified arc width aw and arc height ah.

Draws a 3-D rectangle raised above the surface or sunk into the surface.

Draws a filled 3-D rectangle raised above the surface or sunk into the surface.

Draws an oval bounded by the rectangle specified by the+drawOval(x: int, y: int, w: int, h: int): void

+fillOval(x: int, y: int, w: int, h: int): void

+drawArc(x: int, y: int, w: int, h: int, startAngle: int, arcAngle: int): void

+fillArc(x: int, y: int, w: int, h: int, startAngle:

Draws an oval bounded by the rectangle specified by the parameters x, y, w, and h.

Draws a filled oval bounded by the rectangle specified by the parameters x, y, w, and h.

Draws an arc conceived as part of an oval bounded by the rectangle specified by the parameters x, y, w, and h.

Draws a filled arc conceived as part of an oval bounded by the ( , y , , , gint, arcAngle: int): void

+drawPolygon(xPoints: int[], yPoints: int[], nPoints: int): void

+fillPolygon(xPoints: int[], yPoints: int[], nPoints: int): void

+drawPolygon(g: Polygon): void

p yrectangle specified by the parameters x, y, w, and h.

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

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

Draws a closed polygon defined by a Polygon object.

11

+fillPolygon(g: Polygon): void +drawPolyline(xPoints: int[], yPoints: int[],

nPoints: int): void

Draws a filled polygon defined by a Polygon object. Draws a polyline defined by arrays of x and y coordinates.

Each pair of (x[i], y[i]) coordinates is a point.

Obtaining Graphics Object

The Graphics class is an abstract class that provides a device independent graphics interface for displaying figuresdevice-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 forgetGraphics() method. For example, the graphics context for a label object jlblBanner can be obtained using

Graphics graphics = jlblBanner.getGraphics();p g p j g p ();

You can then apply the methods in the Graphics class to

12

draw things on the label’s graphics context.

A Drawing Example

(0, 0)

(50, 50)

Draw a line and a text

T G G hi

13

TestGetGraphics

Two Problems With the Preceding Example

• If you resize the frame, the line is gone. • It is awkward to program because you have to makeIt 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 placedmethod. For this reason, Lines 20 and 21 are placed after the frame is displayed in Line 17.

What happens? When you resize the frame, the JVM invokes pp y ,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 p p ,gone when the frame is resized. To permanently display the line, you need to draw the line in the paintComponent method.

14

The paintComponent MethodThe 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 redisplayedwhenever 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.

15

Drawing on Panels

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

• To draw in a panel you create a new class that• 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 p gthen display strings, draw geometric shapes, and view images on the panel.

T P lD i R

16

TestPanelDrawing Run

Drawing Geometric FiguresDrawing Geometric Figures

• Drawing Strings

• Drawing Lines

• Drawing Rectangles

• Drawing Ovals

• Drawing Arcs

• Drawing Polygonsg yg

17

Drawing Stringsg g

(0, 0) (getWidth(), 0) (0, 0) (getWidth(), 0)

(x1, y1)

(getWidth(), getHeight()) (0, getHeight())

(x, y) s is display here

(getWidth(), getHeight()) (0, getHeight())

(x2, y2)

drawLine(int x1, int y1, int x2, int y2);drawString(String s, int x, int y);

18

Drawing Rectanglesg g

drawRect(int x, int y, int w, int h);

fillRect(int x, int y, int w, int h);

(x , y )

(x , y)

h

w

h

w

h

19

Drawing OvalsgdrawOval(int x, int y, int w, int h);

fillOval(int x int y int w int h);fillOval(int x, int y, int w, int h);

(x, y)

h h

w

20

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

if h h h fi i fill d d di l h fispecify whether the figure is filled, and displays the figure on a panel. javax.swing.JPanel

FigurePanel +LINE = 1 +RECTANGLE = 2

LINE, RECTANGLE, ROUND_RECTANGLE, and OVAL are constants.

+ROUND_RECTANGLE = 3+OVAL = 4 -type: int -filled: boolean

Fi P l()

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

+FigurePanel()+FigurePanel(type: int) +FigurePanel(type: int, filled: boolean) +getType(): int +setType(type: int): void

Creates a default figure panel.Creates a figure panel with the specified type. Creates a figure panel with the specified type and filled property. Returns the figure type. Sets a new figure type.

Fi P l

21

+isFilled(): boolean +setFilled(filled: boolean): void

g ypChecks whether the figure is filled with a color. Sets a new filled property.

FigurePanel

Test FigurePanelThis example develops a useful class for displaying various figures. The class enables the user to set the figure type and

if h h h fi i fill d d di l h fispecify whether the figure is filled, and displays the figure on a panel.

T Fi P l R

22

TestFigurePanel Run

Putting it Together: Bouncing Ball

bObjective: Write an applet that displays a ball bouncing in a panel. g pUse two buttons to suspend and resume the movement and use amovement and use a scroll bar to control the bouncing speed.

23

Bouncing Ball, cont.

JApplet JPanelJPanel

BounceBallApp +BounceBallApp()

BallControl -ball: Ball

Ball -x: int

1 11 1

+main(args: String[]): void

-jsbDelay: JScrollBar-jbtResume: JButton -jbtSuspend: JButton +BallControl()

-y: int -dx: int -dy: int -radius: int -delay: int -timer: Timer e : e +Ball() +suspend(): void +resume(): void +setDelay(delay: int): void

B ll B llC ntr l B un B llApp

24

Ball BallControl BounceBallApp

HW9: Extra Credit

• Use graphics to visualize MIDI music files

• Due: Friday, DEC 18 (hard deadline)

12/8/2009 CS170, Section 000, Fall 2009 25

Final Logistics

• Thursday, 4:30pm-7pm, here (W303)

• I will be here 4pm-5pm only, TA will take over.I will be here 4pm 5pm only, TA will take over.

F t i il t Midt 2• Format: similar to Midterm 2:– Multiple choice, fill-in-the-blank, code

12/8/2009 CS170, Section 000, Fall 2009 26