Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
King Fahd University of Petroleum and Minerals INFORMATION & COMPUTER SCIENCE DEPARTMENT, KFUPM ICS 102 SECTION 54 & 57 (002 Spring-Semester) INTRODUCTION TO COMPUTING LAB #4 Introduction to Applets Instructor: Mustafa A. Abuosba Lab Objectives • Writing HTML Code • Writing simple Applets • Writing simple graphics programs containing points, lines, circles and rectangle Introduction to Applets 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 lThe code for an applet is enclosed in a class, which is declared as public and as an extension of a standard class called Applet. lYou run applets within a page on internet(browser) or within another program called appletviewer lUnlike java applications, applets do not have main method. lThe standard Applet class is contained in the package called java.applet and must be imported at the beginning of each applet program lApplets can do most of the things that applications can do but limited by some security restrictions Example1: Applet ============== import java.applet.Applet; import java.awt.Graphics; public class HelloApplet extends Applet { public void paint(Graphics g) { g.drawString("Hello world!", 50, 25); } } ===================== Save this file HelloAplet.java then compile javac HelloApplet.java You need to create an HTML file to tell the browser where to get the Java applet and how to run it 1 HTML FILE file must be provided. The minimum information that must always be provided in the APPLET element: • the name of the applet class file(code attribute) • the size of the applet in pixels(width and height attributes) w height =h> </APLET> The following is a sample HTML file, which may be used to load the HelloApplet example. =================== <HTML> <HEAD> <TITLE> A Simple Program </TITLE> </HEAD> <BODY> <APPLET CODE="HelloApplet.class" WIDTH=150 HEIGHT=40> </APPLET> </BODY> </HTML> =========== Save as HelloApplet.html. Use browser appletviewer HelloApplet.html ============================= You must know the size of you drawing surface and how to reference the individual picture elements (called pixels) on it. You can visualize a drawing surface as an x-y grid of pixels. Assume that your surface has the dimension 400 x 300. (0,0) <====== x ====================è (400,0) ↓ y (0,300) (400,300) The pixel at the top left corner has x-y coordinates(0,0), and the position at the top-right corner has x-y coordinates(400,0) 2 Method paint has a single argument, object g of class Graphics. This object will be called upon to do the actual drawing using methods defined in class Graphics like (setColor, drawLine and so on). Drawing Rectangles You can use method drawRect(defined in class Graphics) to draw a retangle on the screen. The statement: g.drawRect(x1,y1,100,50); draws a rectangle that has point (x1,y1) as its top left corner and has a width of 100 pixels and a height of 50 pixels (x1,y1) =====è x <======= (x1+100,y1) ↓ y ↑ (x1,y1+50) (x1+100,y1+50) DrawLine ( ) The drawLine( ) method draws a line from point(x0,y0) to point (x1,y1). Example import java.applet.Applet; import java.awt.*; public class Lines extends Applet{ public void paint(Graphics g){ g.drawLine(20,120,100,50); } } 3 DrawRect( ) and fillRect( ) The drawRect() and fillRect() methods, respectively, draw and fill rectangles. Example g.drawRect(20,20,100,80); g.fillRect(20,20,100,80); The paint( ) method import java.applet.Applet; import java.awt.*; public class SimplePaint extends Applet{ public void paint(Graphics g){ g.setColor(Color.black); g.fillRect(0,0,300,300); g.setColor(Color.white); g.fillOval(30,30,50,50); } } html file <title> Simple Paint</title> <ht> <applet code="SimplePaint.class" width=300 height=200> </applet> <hr> <a href="Intersection.java">The source.>/a> * If you click on this text in a browser, you will be taken to the source file for the applet drawString( ) The drawString( ) method paints a string of text. It can be used to output any text. Exercise #1 Run the following code: =================== import java.applet.Applet; import java.awt.*; public class WLine extends Applet{ public void paint(Graphics g){ Font font= new Font("Serif", Font.PLAIN,24); g.setFont(font); g.drawString("I like Java Applets",20,50); g.setColor(Color.darkGray); g.drawLine(20,50,150,50); } } 4 setColor setColor sets the color to be used by all drawing methods until the next call to setColor occurs. g.setColor(Color.black) There are 13 constant colors (black, blue cyan, darkGray, gray , green, lightGray, magenta, orange, pink, red, white, yellow) setBackground(Color.blue); you can change the background color of the applet by using setBackground method. Example import java.applet.*; import java.awt.*; public class DemoRectangles extends Applet{ public void paint(Graphics g) { g.setColor(Color.red); setBackground(Color.blue); g.fillRect(20,20,120,120); g.clearRect(40,40,50,50); } } Exercise #2 Write an applet that draws triangle like this 5 Exercise #3 Study the following applet code. Example Painted House Consider the following example =================== import java.awt.*; import java.applet.Applet; public class House extends Applet{ // 4 corner points for the house int x1=100; int y1=200; // lower-left of the roof int x2=300; int y2=100; // peak of roof int x3=500; int y3=200; //lower-right corner of roof corner points for door int x4=500; int y4=400;//bottom right cornter of house int x5=275; int y5=325; //top-left corner door int x6=325; int y6=400; //bottom-right corner of door public void paint(Graphics g){ // Draw the roof g.drawLine(x1,y1,x2,y2); g.drawLine(x2,y2,x3,y3); //Draw the house as a box g.drawRect(x1,y1,x4 - x1,y4 - y1); //draw a door. g.drawRect(x5,y5,x6 - x5,y6- y5); //label the corner points. g.drawString("(x1,y1)",x1,y1); g.drawString("(x2,y2)",x2,y2); g.drawString("(x3,y3)",x3,y3); g.drawString("(x4,y4)",x4,y4); g.drawString("(x5,y5)",x5,y5); g.drawString("(x6,y6)",x6,y6); // paint g.setColor(Color.blue); g.fillRect(x1,y1,x4 - x1,y4 - y1); // paint door gray g.setColor(Color.gray); g.fillRect(x5,y5,x6-x5,y6-y5); } } 6 Exercise #4 Write an applet that display the following intersection lines with blue color the other with black. Hint : Use drawLine method g.setColor(Color.black); g.drawLine(0,0,300,200); 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); } } 7 Drawing Ellipse lTo draw an Ellipse, we need to import the Ellipse2D class of the java.awt.geom. package. lThe Ellipse2D class contained two Ellipse classes, Ellipse2D.Float which uses float coordinates and Ellipse2D.Double uses double coordinates. We shall be using Ellipse2D.Double lAgain, 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); } } Exercise #5 Use Rectangle2D.Double and Ellipse2D.Double objects to draw an automobile like this : Hint:the following will draw 2 rectangles do the same to draw the Ellipse import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.Rectangle2D; public class Recta extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; Rectangle2D.Double r1 = new Rectangle2D.Double( , , , ); Rectangle2D.Double r2 = new Rectangle2D.Double( , g2.draw(r1); g2.draw(r2); } } 8 , , );