1 / 45

Applets - PowerPoint PPT Presentation

  • Updated On :

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 ……….

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Applets' - KeelyKia

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Applets l.jpg

  • Graphical Java programs

  • Run inside web browser

  • Platform-neutral

  • Easy deployment--loads when needed

  • Secure

Web browsers accessing a web page l.jpg
Web Browsers Accessing a Web Page

User enters URL for a web site …………..

Slide5 l.jpg

  • An applet is accessed by an HTML file. by browser ..

  • 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 l.jpg
Other HTML Tags by browser ..

  • <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=">Java</a> is an . . .

  • Include an applet:

    <applet code="HamsterApplet.class"width="640" height="480"> </applet>

Slide7 l.jpg

<HTML> by browser ..

<u> here comes an applet </u>

<applet code= “file.class” width =500 height=500>



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 l.jpg
The Applet Class by browser ..

  • 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 l.jpg
Creating an Applet by browser ..

  • 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 l.jpg
An Applet by browser ..

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??

Slide11 l.jpg

Applet Coordinate System by browser ..

0,0 largest_x, 0

0,largest_y largest_x,


x increases 

y increases i

Slide12 l.jpg

public class by browser ..MyApplet extends Applet

{public void paint(Graphics g){ g.drawRect(50,50,100,100);

//draw rectangle


//draw filled in rectangle of default color



Slide13 l.jpg

public class by browser ..MyApplet extends Applet

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


Slide14 l.jpg

import java.applet.Applet; by browser ..

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 ….

Slide15 l.jpg

let’s see what methods Graphics2D has to offer… by browser ..

(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

Slide16 l.jpg

  public void paint(Graphics g) by browser ..


      Graphics2D g2 = (Graphics2D)g;

      // draw rectangle 


g2.drawString(“my rectangle”,500,20);


Slide17 l.jpg

public void draw (Shape s) by browser ..

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 l.jpg
Graphical Shapes by browser ..

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



Slide19 l.jpg

Some Java 2D Shape classes……….. by browser ..

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

Slide20 l.jpg

The Line2D class ……….. by browser ..

Look at the spec for the Line2D class….

To use this class you must import it.:

import java.awt.geom.Line2D;

Specifying a line l.jpg
Specifying a Line by browser ..

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

Slide22 l.jpg

Code a paint method which draws a square w/ side length 100, with upper left corner positioned at 200,200

Slide23 l.jpg

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


myLine.setLine(xpos+len, ypos, xpos+len, ypos + len);


myLine.setLine(xpos+len, ypos+len, xpos, ypos + len);


myLine.setLine(xpos, ypos+ len, xpos, ypos);


Slide24 l.jpg

Code for Reusability & Readability … in paint method

(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

Slide25 l.jpg

The Graphics class provides: … in paint method

setColor(Color c)

setFont (Font font)

Can a Graphics2D class use these methods?? (yes)

Why or why not?? (because Graphics2D extends from Graphics)

Slide26 l.jpg

Look at Color class specification……. … in paint method

( etc.)

Slide27 l.jpg

Look at Color class……. … in paint method

Fields exist …. ,Color.cyan

these are color objects

So they can be used as parameter to setColor


Slide28 l.jpg

You can also create your own color objects: … in paint method

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………..

Slide29 l.jpg

Write applet which draws triangle which … in paint method

moves across screen, changing color as it does…

(Class website,

Text and fonts l.jpg
Text and Fonts … in paint method

  • 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 l.jpg
Reading Text Input … in paint method

  • 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!

Slide32 l.jpg

Applet joptionpane dialog l.jpg
Applet JOptionPane Dialog … in paint method

File colorapplet java l.jpg
File … in paint method

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;

Slide35 l.jpg

   public ColorApplet()   {   … in paint method

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


Slide36 l.jpg

  public void paint(Graphics g){   … in paint method

     Graphics2D g2 = (Graphics2D)g;

final int startX = 50;

final int startY = 50;

final int sqrLen = 50;

     // select color into graphics context 


 // construct and draw a filled square

      Rectangle square = new Rectangle(

          startX, startY, sqrLen, sqrLen);



Creating an object that can draw itself l.jpg
Creating an Object that can draw itself … in paint method

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 l.jpg
The Car Drawer Applet … in paint method

Slide39 l.jpg

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 l.jpg
File draw itself………

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




File car java l.jpg
File draw itself………

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;


Slide42 l.jpg

   public Car(double x, double y) draw itself………


     xLeft = x;

     yTop = y;



Constructor for Car accepts start position for drawing ……

Slide43 l.jpg

public void draw(Graphics2D g2){ draw itself………

   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.

Slide44 l.jpg

 // the bottom of the front windshield draw itself………

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

Slide45 l.jpg

//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