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