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 Homework Assignment The browser would display: CIS255 Homework Assignment

Other HTML Tags bold, underline Link to another file: Java is an... Include an applet:

here comes an applet 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??

Applet Coordinate System 0,0 largest_x, 0 0,largest_y largest_x, largest_y x increases  y increases 

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 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…… ( )

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); }

The java.awt.geom package offers other classes which implement Shape. These shapes can be created with dimensions which are non-integral. Rectangle2D.Double Ellipse2D.Double Line2D.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 Some Java 2D Shape classes………..

Look at the spec for the Line2D class…. To use this class you must import it.: import java.awt.geom.Line2D; The Line2D class ………..

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 … in paint method double xpos = 200; double ypos = 200; // upper left corner int len = 100; 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?? (yes) Why or why not?? (because Graphics2D extends from Graphics)

Look at Color class specification……. ( 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 ) 4 th parameter transpareny measure 0 – transparent 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); }