Applets Graphical Java programs Run inside web browser

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

Other HTML Tags • <b> bold </b> , <u> underline</u> • <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="hamster. jpeg"

Other HTML Tags • bold , underline • <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="Hamster. Applet. class" width="640" height="480"> </applet>

<HTML> here comes an applet <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 My. Applet 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/j 2 se/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 My. Applet extends Applet { public void paint(Graphics g) { g. draw. Rect(50, 100, 100); //draw rectangle g. fill. Rect(200, 300, 300); //draw filled in rectangle of default color } }

public class My. Applet extends Applet { public void paint(Graphics g) { Graphics 2 D g 2 = (Graphics 2 D)g; // use more sophisticated Java graphics class //need for 2 D objects. . . } }

import java. applet. Applet; import java. awt. Graphics 2 D; public class My. Applet extends Applet { public void paint(Graphics g) { Graphics 2 D g 2 = (Graphics 2 D)g; // use newest Java graphics class. . . } } Applet and Graphics classes must be imported for use ….

let’s see what methods Graphics 2 D has to offer… (go to http: //java. sun. com/j 2 se/1. 4. 2/docs/api/index. html and look at API specification for version 4. 2 or above. Select Graphics 2 D from class list on left) Note that Graphics 2 D extends from Graphics

public void paint(Graphics g) { Graphics 2 D g 2 = (Graphics 2 D)g; // draw rectangle g 2. draw 3 DRect(500, 100, 20, 30, true); g 2. draw. String(“my rectangle”, 500, 20); }

public void draw (Shape s) When we looked at the specification for Graphics 2 D 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/j 2 se/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){ Graphics 2 D g 2= (Graphics 2 D) g; // create the object Rectangle my. Rec = new Rectangle(50, 100, 300); // now draw it* Must create a Shape object in order to draw it g 2. draw(my. Rec); }

Some Java 2 D Shape classes………. . The java. awt. geom package offers other classes which implement Shape. These shapes can be created with dimensions which are non-integral. Rectangle 2 D. Double Ellipse 2 D. Double Line 2 D. Double Point 2 D. 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. Ellipse 2 D; // no. Double

The Line 2 D class ………. . Look at the spec for the Line 2 D class…. http: //java. sun. com/j 2 se/1. 4. 2/docs/api/index. html To use this class you must import it. : import java. awt. geom. Line 2 D;

Specifying a Line Create a line object: Line 2 D. Double myline = Line 2 D. Double(2. 0, 5. 0, 10. 0, 5. 0); To change the line position : myline. set. Line( double X 1, double Y 1, double X 1, double Y 2);

Code a paint method which draws a square w/ sid 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; Line 2 D. Double my. Line; my. Line = new Line 2 D. Double(xpos, ypos, xpos+len, ypos); g 2 obj. draw(my. Line); my. Line. set. Line(xpos+len, ypos, xpos+len, ypos + len); g 2 obj. draw(my. Line); my. Line. set. Line(xpos+len, ypos+len, xpos, ypos + len); g 2 obj. draw(my. Line); my. Line. set. Line(xpos, ypos+ len, xpos, ypos); g 2 obj. draw(my. Line);

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: set. Color(Color c) set. Font (Font font) Can a Graphics 2 D class use these methods? ? (yes) Why or why not? ? (because Graphics 2 D 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 set. Color g 2 obj. set. Color(Color. blue);

You can also create your own color objects: Color ( int red, int green, int blue) parameter values between 0 and 255 Color ( int red, int green, int blue , int alpha ) 4 th 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 0. 0 and 1. 0 good for randomizing………. .

Write applet which draws triangle which moves across screen, changing color as it does… (Class website, tri 3. java)

Text and Fonts • g 2. draw. String("Applet", 50, 100); • A font object has a: face name (Serif, Sans. Serif, Monospaced, . . . ) style (Font. PLAIN, Font. BOLD, Font. ITALIC) point size (12 point = normal size) • g 2. set. Font(new Font("Serif", Font. BOLD, 36));

Reading Text Input • Can use JOption. Pane. show. Input. Dialog 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 JOption. Pane Dialog

File Color. Applet. java import java. applet. Applet; import java. awt. Color; import java. awt. Graphics 2 D; import java. awt. Rectangle; import javax. swing. JOption. Pane; // applet that lets a user choose a color for rectangle public class Color. Applet extends Applet { private Color fill. Color;

public Color. Applet() { String input; // ask the user for red, green, blue values input = JOption. Pane. show. Input. Dialog("red: "); float red = Float. parse. Float(input); input = JOption. Pane. show. Input. Dialog("green: "); float green = Float. parse. Float(input); input = JOption. Pane. show. Input. Dialog("blue: "); float blue = Float. parse. Float(input); fill. Color = new Color(red, green, blue); }

public void paint(Graphics g){ Graphics 2 D g 2 = (Graphics 2 D)g; final int start. X = 50; final int start. Y = 50; final int sqr. Len = 50; // select color into graphics context g 2. set. Color(fill. Color); // construct and draw a filled square Rectangle square = new Rectangle( start. X, start. Y, sqr. Len); g 2. 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 Graphics 2 D), then the method can draw also • eg. ) public void xxx (Graphics g){ • g. draw. Rect(10, 200, 150); • }

The Car Drawer Applet

An object that is going to be drawn should know how to draw itself……… In the Car. Drawer 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 Car. Applet. java import java. applet. Applet; import java. awt. Graphics 2 D; //An applet that draws two cars. public class Car. Applet extends Applet { public void paint(Graphics g){ Graphics 2 D g 2 = (Graphics 2 D)g; Car car 1 = new Car (100, 100); Car car 2 = new Car (200, 200); car 1. draw(g 2); car 2. draw(g 2); }

File Car. java import java. awt. Graphics 2 D; import java. awt. geom. Ellipse 2 D; import java. awt. geom. Line 2 D; import java. awt. geom. Point 2 D; import java. awt. geom. Rectangle 2 D; //A car that can be positioned anywhere on the screen public class Car { private double x. Left; //draw position private double y. Top; //…Continue

public Car(double x, double y) { x. Left = x; y. Top = y; } //. …Continue Constructor for Car accepts start position for drawing ……

public void draw(Graphics 2 D g 2){ Rectangle 2 D. Double body; body= new Rectangle 2 D. Double(x. Left, y. Top +10, 60, 10); Ellipse 2 D. Double front. Tire; front. Tire = new Ellipse 2 D. Double( x. Left + 10, y. Top + 20, 10, 10); Ellipse 2 D. Double rear. Tire = new Ellipse 2 D. Double (x. Left + 40, y. Top + 20, 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 Point 2 D. Double r 1 = new Point 2 D. Double(x. Left + 10, y. Top + 10); // the front of the roof Point 2 D. Double r 2 = new Point 2 D. Double(x. Left + 20, y. Top); // the rear of the roof Point 2 D. Double r 3 = new Point 2 D. Double(x. Left + 40, y. Top); // the bottom of the rear windshield Point 2 D. Double r 4 = new Point 2 D. Double(x. Left + 50, y. Top + 10);

//using Point objects to create line (overloaded constructor) Line 2 D. Double front. Windshield = new Line 2 D. Double(r 1, r 2); Line 2 D. Double roof. Top = new Line 2 D. Double(r 2, r 3); Line 2 D. Double rear. Windshield = new Line 2 D. Double(r 3, r 4); //now, draw the car using the Graphics 2 D parameter g 2. draw(body); g 2. draw(front. Tire); g 2. draw(rear. Tire); g 2. draw(front. Windshield); g 2. draw(roof. Top); g 2. draw(rear. Windshield); }