1 Introduction to Applets Overview l What is an Applet? l Steps for creating an applet l What is HTML? l Basic HTML tags l Drawing Simple Graphical shapes »Rectangle »Ellipse »Lines l Preview: More on Applets

2 What is an Applet? l An applet is a program that runs in a World Wide Web browser when an HTML document containing the applet is loaded into the browser. l The code for an applet is enclosed in a class, which is declared as public and as an extension of a standard class called Applet. l You run applets within a page on internet(browser) or within another program called appletviewer. l Unlike java applications, applets do not have main method. l The standard Applet class is contained in the package called java.applet and must be imported at the beginning of each applet program l Applets can do most of the things that applications can do but limited by some security restrictions.

3 Steps for creating and executing an applet l When you create an applet, you do the following: 1. Write the applet in the Java programming language, and save it with a.java file extension, just as when you write an application 2. Compile the applet into bytecode using the javac command, just as when you do with an application 3. Write an HTML document that includes a statement to call your compiled java class 4. Load the HTML document into a Web browser(such as Internet Explorer or, Netscape Navigator)

4 What is HTML? l HTML or Hypertext Markup Language is a simple language used to create Web pages for the Internet. l It contains many commands that allow you to format text on a Web page, import graphic images, and link your page to other Web pages. l These commands are case insensitive and are usually called HTML Tags. l You can always identify a tag by the brackets( ) that enclose the tag name. Example: The sentence: Java is an Object-oriented language. is displayed by the browser as: Java is an Object-oriented language. Obviously, the pair and are used to indicate italics.

5 Basics HTML tags l The following are some of the basic HTML tags that we need load our applet: l … : These are used to indicate the beginning and the end of a HTML document. The entire content of a HTML file should be enclosed in these pair of codes. l … : A HTML file consists of a head and a body and these tags are used to indicate the beginning and end of the head part. l … : This should appear inside the head part of a HTML file and is used to specify the information to be displayed on the browser’s title bar. For our case, this is the only tag that we need to include in the head part. l … : These are used to indicate the beginning and end of the body part of a HTML file. Almost all the contents of a html document appear within these pair of tags.

6 Basics HTML tags (Cont’d)... : This is used to instruct the browser to load an applet. l Notice the additional specifications the applet tag: CODE, WIDTH and HEIGHT. These are called attributes of the tag. There are many other attributes for the Applet tag but these are the required ones. The CODE is used to specify the applet file (.class file), while WIDTH and HEIGHT are used to specify the size of the window in which the applet is displayed. The following is a simple applet to display the message “Hello World” import java.applet.Applet; import java.awt.Graphics; public class HelloApplet extends Applet { public void paint(Graphics g) { g.drawString("Hello world!", 50, 25); }

7 Basics HTML tags (Cont’d) The following is a sample HTML file, which may be used to load the HelloApplet example. A Simple Program l The following are sample output when the applet is loaded in Windows explorer and Applet viewer:

8 Drawing simple graphical shapes l Java provides a package (java.awt) called the Abstract Window Toolkit(AWT) to facilitate graphics and GUI programming. l When you wish to draw graphics, you must import the AWT this package. l An applet has a paint method, which is executed by the browser each time the applet is displayed. There are few other methods that an applet may have which will be discussed later. l The paint method receives an object of class Graphics and is used to draw lines, ellipses etc. on a web page. It is also use to set font sizes and colors. Graphics is one of the classes in the java.awt package. l However, recent versions of Java come with another graphics class called Graphics2D, which is better than the previous one. We shall be using this new class instead.

9 Drawing simple graphical shapes (cont’d) l To use the Graphics2D, we only need to convert the object of class Graphics, which is passed to the paint method into an object of class Graphics2D using casting. public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g... l In drawing graphics, the browser’s page is considered as a drawing board with the top right-hand corner as the origin (0, 0). The size of the graphic shape that we wish to draw should be specified relative to this origin

10 Drawing a rectangle l To draw a rectangle, we need to create an object of class Rectangle of the java.awt package and then draw it using the draw method of the Graphics2D object. l To create an object of class Rectangle, we need to specify the following parameters: »The top-left corner of the rectangle (x, y co-ordinates) »The width of the rectangle »The height of the rectangle. import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Rectangle; public class RectangleApplet extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; Rectangle rectangle = new Rectangle(10,10,50,50); g2.draw(rectangle); }

11 Drawing Ellipse l To draw an Ellipse, we need to import the Ellipse2D class of the java.awt.geom. package. l The Ellipse2D class contained two Ellipse classes, Ellipse2D.Float which uses float coordinates and Ellipse2D.Double uses double coordinates. We shall be using Ellipse2D.Double l Again, we need to create an object of class Ellipse2D.Double and then use the draw method of the Graphics2D object to draw it. import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.Ellipse2D; public class CircleApplet extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; Ellipse2D.Double circle1 = new Ellipse2D.Double(10,10,50,50); Ellipse2D.Double circle2 = new Ellipse2D.Double(20,20,30,30); g2.draw(circle1); g2.draw(circle2); }

12 Drawing lines l To draw a line, we need to create an object of class Line2D.Double of the java.awt.geom. package. To create such object, we need to specify the two end-points the line. This can be done in two ways: l By giving the x and y coordinates of both points as in: Line2D.Double line = new Line2D(x1, y1, x2, y2); l Or we can specify each point as an object as: Point2D.Double from = new Point2D.Double(x1, y1); Point2D.Double to = new Point2D.Double(x2, y2); Line2D.Double line = new Line2D.Double(from, to); l The latter method is more object-oriented and more useful particularly if the point objects need to be re-used.

13 Drawing lines (Cont’d) import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.Ellipse2D; import java.awt.geom.Line2D; import java.awt.geom.Point2D; public class TriangleApplet extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; Point2D.Double pointA = new Point2D.Double(30,10); Point2D.Double pointB = new Point2D.Double(10,50); Point2D.Double pointC = new Point2D.Double(50,50); Line2D.Double lineAB = new Line2D.Double(pointA, pointB); Line2D.Double lineBC = new Line2D.Double(pointB, pointC); Line2D.Double lineCA = new Line2D.Double(pointC, pointA); g2.draw(lineAB); g2.draw(lineBC); g2.draw(lineCA); }