Applets and HTML

1
Applets and HTML

• MSTU 4031 Programming I

2
Applets

• Applets are programs that run inside a web
  browser.
• The code for an applet is stored on a web server
  and downloaded into the browser whenever you
  access a web page with an applet.
• Applets are programmed as a class.

3
Sample Applets

• Heart Simulator
• http//www.columbia.edu/ccnmtl/projects/heart/sim.
  html
• Rice Virtual Statistics Lab
• http//www.ruf.rice.edu/lane/stat_sim/descriptive
  /index.html
• Final Projects (Fall 2003)
• http//www.columbia.edu/lwk2103/mstu4031/Seasons/
  WinterOuter.html
• http//www.columbia.edu/yw2009/HealthEducation/
• http//www.columbia.edu/jh2284/mstu4031/finalproj
  ect/curve.html

4
The Process of Creating and Displaying an Applet
Creates
Run Display
.java
.class
.html
Compiler
Browser
Embed
Compile
5
Applets Security

• Applets run in a sandbox, where it can display
  information and get user input, but cant read or
  touch anything on the users computer.
• You can give an applet more privileges (reading
  and writing local files), if you notify your
  browser that the applet is trusted.
• Applets can carry a certificate or signatures
  from an authentication firm (VeriSign) to tell
  you where the applet came from.

6
Difference between Applets and Console
Applications

• Console
• Runs from command line
• Text based
• Terminal window
• public static void main(String args)

• Applets
• Runs from browser
• Web based
• Graphical
• No main() method
• Reserved methods for Applets.
• init() like a no parameter constructor
• paint() method is called whenever the surface of
  the applet needs to be filled in.

7
java.applet Package

• import java.applet.Applet
• public void init()
• public void paint(Graphics g)

8
java.awt Package

• java.awt package (abstract windowing toolkit)
• Defines many classes for graphics programming,
  mechanism for event handling, and a set of user
  interface components.
• java.awt.Graphics
• java.awt.Graphics2D

9
Writing Text to the Screen

• Console
• (java.io.PrintStream)
• method
• println()

• Applets
• (java.awt.Graphics2D)
• method
• drawString()

10
import java.applet.Applet
import java.awt.Graphics
public class MyApplet extends
Applet
import java.awt.Graphics2D
public void paint (Graphics g)
Graphics2D g2 (Graphics2D) g
g2.drawString ("Floor plan of a diner", 145, 20)
11
Graphics2D Class

• Use the drawString () method to draw a string,
  starting at its basepoint.
• Use draw() method of the Graphics2D class to draw
  shapes such as rectangles, ellipses, line
  segments, polygons, and arcs.

12
Applet Display Properties

• Applet canvas is measured width and height
  (defined in ltappletgt tag in HTML)
• ltapplet code MyClass.class width300
  height300gt lt/appletgt
• Screen coordinates (x, y) and canvas size are
  measured in pixels.
• A pixel (picture element) is a dot on the screen.
• (10, 20) or (x, y ) is 10 pixels to the right
  and 20 pixels down from the top left corner of
  the panel.

13
My Floor plan
Basepoint
14
Graphical Shapes

• Rectangles
• Ellipses
• Lines
• Arcs
• Example Floor Plan

15
import java.applet.Applet import
java.awt.Graphics import java.awt.Graphics2D
public class MyApplet extends
Applet
import java.awt.Rectangle
public void paint (Graphics g)
Graphics2D g2 (Graphics2D) g
Rectangle outerborder new Rectangle (5, 30,
400, 300)
g2.draw(outerborder)
16
import java.applet.Applet import
java.awt.Graphics import java.awt.Graphics2D
public class MyApplet extends
Applet
import java.awt.geom.Ellipse2D
public void paint (Graphics g)
Graphics2D g2 (Graphics2D) g
Ellipse2D.Double seat1 new Ellipse2D.Double
(50, 125, 20, 20)
g2.draw(seat1) g2.drawString("S1",55,138)
17
import java.applet.Applet import
java.awt.Graphics import java.awt.Graphics2D
public class MyApplet extends
Applet
import java.geom.Line2D
public void paint (Graphics g)
Graphics2D g2 (Graphics2D) g
Line2D.Double myline new Line2D.Double(5,50,400,
50)
g2.draw(myline)
18
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
// x, y, w, h, start angle, arc
angle g2.drawArc(300, 100, 50, 50, 90, 90)
19
About Web Pages

• Web pages are written in Hypertext Markup
  Language (HTML)
• HTML files are made up of tags to format text
  (and include images, applets, audio and video
  files) that tell the browser how to render the
  text.

20
HTML

• Most HTML tags come in pairs with an opening and
  closing tag.
• Each pair applies to the text between the two
  tags.
• The closing tag is just like the opening tag, but
  it is prefixed by a slash (/).

21
Sample HTML Page

• lthtmlgt
• lttitlegtTitle Herelt/titlegt
• lth3gtText Herelt/h3gt
• ltbodygt
• lt/bodygt
• lt/htmlgt

22
Running an Applet

• To run an applet you need an HTML page with the
  applet tag.
• ltapplet code .class width heightgt
  lt/appletgt
• The applet tag include the applet in a web page
• Tell the browser where to find the applet code

23
Sample HTML Page With ltappletgt

• lthtmlgt
• lttitlegtMy First Applet! lt/titlegt
• ltapplet code My.class width400
  height400gt lt/appletgt
• lth3gtLook at my applet!lt/h3gt
• ltbodygt
• lt/bodygt
• lt/htmlgt

24
Browser Compatibility

• For applets to work on the latest versions of IE
  and Netscape you can not use the
  ltappletgtlt/appletgt tags.
• Instead, insert this code http//java.sun.com/pro
  ducts/plugin/1.3/docs/tags.htmlAny

25
Using Parameters

• HTML
• ltPARAM NAMEmyText VALUEHello!gt
• JAVA
• init()
• This method is called when the applet is first
  loaded into the browser. It is used to perform
  applet initialization, in preference to a
  constructor method. You can either use a
  constructor or the init(). Create all GUI
  components in the either the constructor or init.
• If you use a constructor, it must be a
  no-argument constructor. An applet gets its
  arguments from ltPARAMgt tags in the HTML file.
• getParameterInfo()
• this method is called to obtain information about
  the parameters to which the applet responds.
  Returns a String that describes the
  parameters.
• getParameter()
• This method looks up and returns the value of the
  named parameter, specified with a ltPARAMgt tag in
  the HTML file that contains the applet.

26
Sample Floor Plans

• Floor Plans
• http//www.columbia.edu/rh506/mstu4031/hw7/FloorP
  lan.html
• http//www.columbia.edu/sc472/mstu4031/hw7/FloorP
  lan.html
• http//www.columbia.edu/mk2379/mstu4031/hw07/Floo
  rPlan.html
• http//www.columbia.edu/lwk2103/mstu4031/hw7/Floo
  rPlan.html