Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download Applets continued
Document related concepts
no text concepts found
Transcript
Applets
•
•
•
•
•
Graphical Java programs
Run inside web browser
Platform-neutral
Easy deployment--loads when needed
Secure
Web Browsers Accessing a Web Page
User enters URL for a web site …………..
HTML file sent back from web server ………..
Applet byte code file sent down from server and interpreted by browser ..
• An applet is accessed by an HTML file.
• HTML is a ‘mark-up’ language (it adds to text content by
marking it up with tags)
• Browsers display the text and process (render) the tags
• For example, a file might begin with the line:
CIS255 <i> Homework </i> Assignment
The browser would display:
CIS255 Homework Assignment
Other HTML Tags
• <b> bold </b> , <u> underline</u>
• <img src="hamster.jpeg" width="640"
height="480“ alt="A photo of hamster" >
• Link to another file:
<a href="http://java.sun.com>Java</a> is an . . .
• Include an applet:
<applet code="HamsterApplet.class"
width="640" height="480">
</applet>
<HTML>
<u> here comes an applet </u>
<applet code= “file.class” width =500 height=500>
</applet>
</HTML>
When a browser renders this HTML file, it will
display underlined text and the applet whose byte
code is in the file “file.class”
The Applet Class
• The Java class Applet contains all the behaviors
(methods), which an applet container (browser)
expects to see. (eg. init, start, paint, stop)
* When creating an applet class, your class
extends the Applet class, and inherits these
behaviors.
• Your class can then override any of the
behaviors it wishes to replace
Creating an Applet
• Your Java source file contains code which
implements your applet
• Compile the source file to produce class file
• Make an HTML file with the applet tag that
references that class file
• Use browser to execute that HTML file OR run
appletviewer utility.
An Applet
public class MyApplet extends Applet
{
// called by browser whenever applet needs redrawing
public void paint(Graphics g){
// code which draws applet
}
}
What’s in the Graphics class??
http://java.sun.com/j2se/1.4.2/docs/api/index.html
Applet Coordinate System
0,0
largest_x, 0
0,largest_y
largest_x,
largest_y
x increases
y increases i
public class MyApplet extends Applet
{
public void paint(Graphics g)
{
g.drawRect(50,50,100,100);
//draw rectangle
g.fillRect(200,200,300,300);
//draw filled in rectangle of default color
}
}
public class MyApplet extends Applet
{
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
// use more sophisticated Java graphics class
//need for 2D objects. . .
}
}
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Graphics2D;
public class MyApplet extends Applet
{
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
// use newest Java graphics class
...
}
}
Applet and Graphics classes must be imported for use ….
let’s see what methods Graphics2D has to offer…
(go to
http://java.sun.com/j2se/1.4.2/docs/api/index.html
and look at API specification for version 4.2 or
above. Select Graphics2D from class list on left)
Note that Graphics2D extends from Graphics
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
// draw rectangle
g2.draw3DRect(500,100,20,30,true);
g2.drawString(“my rectangle”,500,20);
}
public void draw (Shape s)
When we looked at the specification for Graphics2D class,
we saw that the draw method took a Shape parameter ..
what is that?????????????
let’s look at the specifications for Shape……
(http://java.sun.com/j2se/1.4.2/docs/api/index.html )
Graphical Shapes
Shape is an interface. It just provides method signatures. Any
class which declares that it implements Shape is of type Shape.
For example, the class Rectangle implements Shape, so a
Rectangle object is a Shape.
import java.awt.Rectangle;
….
public void paint (Graphics g){
Graphics2D g2= (Graphics2D) g;
// create the object
Rectangle myRec = new Rectangle(50,50,100,300);
// now draw it* Must create a Shape object in order to draw it
g2.draw(myRec);
}
Some Java 2D Shape classes………..
The java.awt.geom package offers other classes which
implement Shape. These shapes can be created with
dimensions which are non-integral.
Rectangle2D.Double
Line2D.Double
Ellipse2D.Double
Point2D.Double
These classes are inner classes, that is why the ‘.’
appears in the class name.
To use these classes you must import them. To import
these classes, you import the outer class:
import java.awt.geom.Ellipse2D;
// no .Double
The Line2D class ………..
Look at the spec for the Line2D class….
http://java.sun.com/j2se/1.4.2/docs/api/index.html
To use this class you must import it.:
import java.awt.geom.Line2D;
Specifying a Line
Create a line object:
Line2D.Double myline = Line2D.Double(2.0,5.0,10.0,5.0);
To change the line position :
myline.setLine( double X1, double Y1, double X1, double Y2);
Code a paint method which draws a square w/
side length 100, with upper left corner positioned at
200,200
//draw a square w/ side length 100
double xpos = 200;
double ypos = 200; // upper left corner
int len = 100;
… in paint method
Line2D.Double myLine;
myLine = new Line2D.Double(xpos, ypos, xpos+len, ypos);
g2obj.draw(myLine);
myLine.setLine(xpos+len, ypos, xpos+len, ypos + len);
g2obj.draw(myLine);
myLine.setLine(xpos+len, ypos+len, xpos, ypos + len);
g2obj.draw(myLine);
myLine.setLine(xpos, ypos+ len, xpos, ypos);
g2obj.draw(myLine);
Code for Reusability & Readability
(our line calls did NOT use hard coded values)
* the square we drew can be ‘redrawn’ by changing
the value of xpos and ypos
* the square we drew can easily ‘change dimension’
by changing ONLY the value of len
* the square can be repositioned by changing the
start point only
The Graphics class provides:
setColor(Color c)
setFont (Font font)
Can a Graphics2D class use these methods??
Why or why not??
(yes)
(because Graphics2D extends from Graphics)
Look at Color class specification…….
(www.java.sun.com etc.)
Look at Color class…….
Fields exist …. Color.blue ,Color.cyan
these are color objects
So they can be used as parameter to setColor
g2obj.setColor(Color.blue);
You can also create your own color objects:
Color ( int red, int green, int blue)
parameter values between between 0 and 255
Color ( int red, int green, int blue , int alpha )
4th parameter transpareny measure
0 – transparent
255 - opaque
also exist with float parameters…….
Color ( float red, float green, float blue)
Color ( float red, float green, float blue , float alpha )
parameter values between between 0.0 and 1.0
good for randomizing………..
Write applet which draws triangle which
moves across screen, changing color
as it does…
(Class website, tri3.java)
Text and Fonts
• g2.drawString("Applet", 50, 100);
• A font object has a:
face name (Serif, SansSerif, Monospaced, ...)
style (Font.PLAIN, Font.BOLD, Font.ITALIC)
point size (12 point = normal size)
• g2.setFont(new Font("Serif", Font.BOLD, 36));
Reading Text Input
• Can use JOptionPane.showInputDialog
method to provide values for applet, BUT..
Programmer cannot predict when/how
many times the paint method will
execute………
• Most likely just want the values read 1
time!
• A class constructor executes once when an
object is created.
• An applet is an object, created by the
browser (or appletviewer).
• The applet class can have a constructor.
SO…
Let constructor set instance variables with
input results
Then use variables in the paint method
Applet JOptionPane Dialog
File ColorApplet.java
import java.applet.Applet;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import javax.swing.JOptionPane;
// applet that lets a user choose a color for rectangle
public class ColorApplet extends Applet {
private Color fillColor;
public ColorApplet() {
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);
}
public void paint(Graphics g){
Graphics2D g2 = (Graphics2D)g;
final int startX = 50;
final int startY = 50;
final int sqrLen = 50;
// select color into graphics context
g2.setColor(fillColor);
// construct and draw a filled square
Rectangle square = new Rectangle(
startX, startY, sqrLen, sqrLen);
g2.fill(square);
}
Creating an Object that can draw itself
The paint method can ‘draw’ because it is passed a
graphics environment as a parameter.
If a class method is passed a graphics environment (ie.
object of type Graphics or Graphics2D), then the
method can draw also
• eg.) public void xxx (Graphics g){
•
g.drawRect(10,10, 200,150);
•
}
The Car Drawer Applet
An object that is going to be drawn should know
how to draw itself………
In the CarDrawer applet, the Car class provides a
draw method for drawing itself . Of course, in
order to draw, the graphics environment is needed.
The Car class’ draw method will get this
information as a parameter……..
File CarApplet.java
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Graphics2D;
//An applet that draws two cars.
public class CarApplet extends Applet
{
public void paint(Graphics g){
Graphics2D g2 = (Graphics2D)g;
Car car1 = new Car (100, 100);
Car car2 = new Car (200,200);
car1.draw(g2);
car2.draw(g2);
}
File Car.java
import java.awt.Graphics2D;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Line2D;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;
//A car that can be positioned anywhere on the screen
public class Car
{
private double xLeft; //draw position
private double yTop;
//…Continue
public Car(double x, double y)
{
xLeft = x;
yTop = y;
}
//.…Continue
Constructor for Car accepts start position for drawing ……
public void draw(Graphics2D g2){
Rectangle2D.Double body;
body= new Rectangle2D.Double(xLeft, yTop +10, 60, 10);
Ellipse2D.Double frontTire;
frontTire = new Ellipse2D.Double(
xLeft + 10, yTop + 20, 10, 10);
Ellipse2D.Double rearTire = new Ellipse2D.Double
(xLeft + 40, yTop + 20, 10, 10);
creating the objects to be drawn…..
note: all positions are based on the start position values
for the figure.
// the bottom of the front windshield
Point2D.Double r1
= new Point2D.Double(xLeft + 10, yTop + 10);
// the front of the roof
Point2D.Double r2
= new Point2D.Double(xLeft + 20, yTop);
// the rear of the roof
Point2D.Double r3
= new Point2D.Double(xLeft + 40, yTop);
// the bottom of the rear windshield
Point2D.Double r4
= new Point2D.Double(xLeft + 50, yTop + 10);
//using Point objects to create line (overloaded constructor)
Line2D.Double frontWindshield
= new Line2D.Double(r1, r2);
Line2D.Double roofTop
= new Line2D.Double(r2, r3);
Line2D.Double rearWindshield
= new Line2D.Double(r3, r4);
//now, draw the car using the Graphics2D parameter
g2.draw(body);
g2.draw(frontTire);
g2.draw(rearTire);
g2.draw(frontWindshield);
g2.draw(roofTop);
g2.draw(rearWindshield);
}
