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
1 INFORMATION & COMPUTER SCIENCE DEPARTMENT, KFUPM ICS102, SECTIONS 57, 58 (001 Semester) INTRODUCTION TO COMPUTING LABWORK #03: Introduction to HTML and Applets Objectives: To gain experience with: writing simple applets writing basic HTLM codes to execute applets displaying graphics such as rectangles, ellipses and lines using colors and fonts HTML (Hypertext Markup Language): A language used to define Web pages. Web browser: A Web browser is a software that retrieves HTML documents across network connections and formats them for viewing. A browser is the primary vehicle for accessing the World-wide web. Java application: A Java program that can be run without the use of a Web browser. Applet: A Java program that is linked into an HTML document. It is retrieved and executed using a web browser. Applets do not usually have main( ) method; instead they have a function called init( ) which, like main( ) is invoked by the execution environment. A Java applet must be compiled into bytecode before it can be used in a Web page. It is this bytecode that is linked to an HTML document and sent across the Web. A version of the Java interpreter embedded in the Web browser is then used to execute the applet once it reaches its destination. Applets are placed on a web page using the <APPLET> tag. The purpose of <APPLET> is to place an applet on a Web page and control how it looks in relation to other parts of the page. Example: <APPLET CODE= “AppletName.class” WIDTH=600 HEIGHT=100> </APPLET> In this example, the <APPLET> tag includes three attributes: CODE Specifies the name of the applet’s main class file WIDTH Specifies the width of the applet window on the Web page. HEIGHT Specifies the height of the applet window The class file indicated by the CODE attribute must be in the same folder as the Web page containing the applet, unless you use a CODEBASE attribute to specify a different folder. It is customary (but not necessary) to give the HTML file the same name as that of the applet class inside. Appletviewer: An appletviewer is a utility used to display an applet as it would be seen in the browser; but without displaying any of the HTML document itself. There are two ways in which you can run an applet: 1. Executing the applet within a Java-compatible Web browser, such as Internet explorer or netscape 2. Using an applet viewer, such as the standard JDK tool appletviewer. 2 INHERITANCE In Java, it is possible for a class to inherit the characteristics of another class. A class that is inherited is called a superclass. The class that does the inheriting is called a subclass. A subclass inherits all instance variables and methods defined in the superclass and adds its own variables and/or methods. superclass subclass A superclass and its subclass define an “is-a” relationship. A subclass is a superclass (with some additional characteristics). For example, the class Student is a subclass of the class Person. A student is a person. In Java, the keyword extends is used to denote inheritance. The general form of a subclass inheriting another class is: class subclassName extends superclassName { . . . } All applets are subclasses of the Applet class contained in the java.applet package. Applets interact with the user through the Abstract Window toolkit (AWT) classes. The AWT contains support for a window-based, graphical interface. Thus the general form of an Applet is: import java.awt.*; import java.applet.*; public class AppletName extends Applet { . . . } Note: 1. The class Applet name must be declared public; because it will be accessed by code that is outside the program (i.e., the browser or applet viewer). 2. The class Applet has a subclass called JApplet that is contained in the javax.swing package. JApplet has more functionality than Applet. Applets that are subclasse of JApplet have the general form: import java.awt.*; import javax.swing.*; class AppletNamePanel extends JPanel { . . . } public class AppletName extends JApplet { . . . } We will not study JApplets in ICS 102. 3 A portion of the java.awt class hierarchy, relevant to our discussion on Applets, is given below. Note that all the classes shown in the hierarchy are in the java.awt package except Object and JApplet. Object, a class inherited by all other classes, is in the java.lang package. JApplet is in the javax.swing package. Object Color Font FontMetrics Component Container Graphics Graphics2D Panel Applet JApplet Class Color contains methods and constants for manipulating colors. Class Font contains methods and constants for manipulating fonts. Class FontMetrics contains methods for obtaining font information. Class Graphics contains methods for drawing strings, lines, rectangles, ellipses, and other shapes. Class Graphics2D adds extensive new functionality to the Graphics class. OVERRIDING METHODS A method is a superclass is overridden in a subclass if the subclass has a method with the same name, return type, and parameter list as the method. A call to the overridden method from within the subclass will always refer to the version of that method defined by the subclass. The method defined by the superclass will be hidden to the subclass. Example: class Display1 { int x = 50 ; int y = 30 ; void printMe( ) { System.out.println(“ x = ” + x + “ , y = ” + y); } } public class Display2 extends Display1 { int z = 3 ; 4 void printMe( ) { System.out.println(“ x = ” + x + “ , z = ” + z); } public static void main(String[ ] args) { Display2 myObject = new Display2( ); MyObject.printMe( ) ; } } The output of the above program is: x = 50 , z = 3 indicating that it is the printMe( ) method of Displa2 that is invoked. This is because when an object’s method is called, Java starts to look for that method’s definition in the object’s class. Only if it does not find the definition does it pass the method call up the class hierarchy until the method definition is found. AN APPLET SKELETON All but the most trivial applets override a set of methods that provide the basic mechanism by which the browser or applet viewer interfaces to the applet and controls its execution. Four of these methods – init( ), start( ), stop( ), and destroy( ) are defined in the class Applet. Another method , paint( ), is defined in the AWT Component class. Default implementations for all these methods are provided. APPLETS DO NOT NEED TO OVERRIDE THOSE METHODS THEY DO NOT USE. In the simple applets we will write, we will override paint( ) and sometimes the init( ) method. The general structure of an applet is: import java.awt.*; import java.applet.*; public class AppletName extends Applet { public void init( ) { . . . } public void start( ) { . . . } public void stop( ) { . . . } public void destroy( ) { . . . } public void paint(Graphics g ) { . . . } } 5 Applet initialization and termination When an applet begins, the AWT calls the following methods, in this sequence: 1. init( ) 2. start( ) 3. paint( ) When an applet is terminated, the following sequence of methods takes place: 1. stop( ) 2. destroy( ) init( ) This method is called by the execution environment (i.e., the applet viewer or browser) when an applet begins execution. It is the first method called for any applet. This method is called only once during the run time of your applet. This is where you should initialize variables and set the background and foreground colors of the applet. start( ) This method is called by the execution environment (i.e., the applet viewer or browser) when an applet should start or resume execution. It is automatically called after init( ) when an applet first begins. stop( ) This method is called by the execution environment (i.e., the applet viewer or browser) to suspend execution of the applet. Once stopped, an applet is restarted when the execution environment calls start( ). destroy( ) This method is called by the execution environment (i.e., the applet viewer or browser) just before the applet is terminated. Your applet should override this method if it needs to perform any cleanup prior to its destruction. paint( ) The paint method is called by the execution environment (i.e., the applet viewer or browser) each time your applet’s output must be redrawn. This situation can occur for several reasons. For example, the window in which the applet is running may be covered by another window and then uncovered. Or the applet window may be minimized and then restored. paint( ) is also called when the applet begins execution. The paint method that is inherited from the class Applet is an empty method. In order for anything to be displayed on the applet window, the paint( ) method must be overridden, in your Applet subclass, with behavior to display text, graphics, and other things. The paint method takes an object of class Graphics as an argument. The Graphics object is passed to the paint method by the execution environment (i.e., the applet viewer or browser). It is the AWT that takes care of creating the Graphics object passed to paint. An object of class Graphics represents a particular drawing surface and it contains methods for drawing, font manipulation, color manipulation, etc. Since an object of class Graphics is passed to paint( ), to use the functionality provided by the Graphics2D class, the object must be converted to a Graphics2D object. This is done by a type cast: public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g ; . . . } Colors The class Color defines several static variables that hold references to various Color objects. These variables are: black, blue, cyan, dark gray, gray, green, lightGray, magenta, orange, pink, red, white, and yellow. Because the variables are static, they can be referenced using the class name, example: Color.red All colors can be specified as a mix of three primary colors: red, green, and blue. Java uses the RGB color model, where colors are specified by giving the amount of the primary colors that make up the color. A particular color can be specified by either three integers, each between 0 and 255, or by three float values, each between 0.0 and 1.0. The integer values specify the color as a mix of red, green, and blue. The float values specify the relative mix of red, green, and blue. 6 Color Color.black Color.blue Color.cyan Color.gray Color.darkGray Color.lightGray Color.green Color.magenta Color.orange Color.pink Color.red Color.white Color.yellow RGB Value (Float) 0.0F, 0.0F, 0.0F 0.0F, 0.0F, 1.0F 0.0F, 1.0F, 1.0F 0.5F, 0.5F, 0.5F 0.25F, 0.25F, 0.25F 0.75F, 0.75F, 0.75F 0.0F, 1.0F, 0.0F 1.0F, 0.0F, 1.0F 1.0F, 0.8F, 0.0F 1.0F, 0.7F, 0.7F 1.0F, 0.0F, 0.0F 1.0F, 1.0F, 1.0F 1.0F, 1.0F, 0.0F RGB Value (Integer) 0, 0, 0 0, 0, 255 0, 255, 255 128, 128, 128 64, 64, 64 192, 192, 192 0, 255, 0 255, 0, 255 255, 200, 0 255, 175, 175 255, 0, 0 255, 255, 255 255, 255, 0 Because the value of each primary color contribution can range from 0 to 255, we can define over 16 million different colors (2553). The differences between some of these colors are so subtle that it is difficult to distinguish between them. You can create your own color objects, using one of the following Color constructors: Color(int red, int green, int blue) Color(float red, float green, float blue) Example: import java.awt.Color; . . . Color c1 = new Color(255, 100, 18); Color c2 = new Color(0.2F, 0.6F, 0.3F); . . . By default, displays on the applet window are in black on a light gray background. This default can be changed by using the methods: setBackground( ), setForeground( ), setColor( ). These methods set the background color of the display surface, the foreground color of the display surface, and the foreground color of the displayed object respectively. Note that the foreground color of the display surface will be the display color of any object drawn on the display surface, if there is no call to setColor( ). The general forms of these methods are: void void void setBackground(Color newColor) setForeground(Color newColor) setColor(Color newColor) Although it is possible to set the background and foreground colors in the paint( ) method, a good place to set these colors is in the init( ) method. Example: The following Applet outline shows how to set colors. import java.awt.*; import java.applet.*; public class MyApplet extends Applet { public void init( ) { setBackground(Color.blue) ; setForeground(Color.yellow) ; } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g ; // Objects displayed here will use the foreground color yellow 7 g2.setColor(Color.red) ; // Objects displayed here will use the color red g2.setColor(Color.magenta) ; // Objects displayed here will use the color magenta Color c1 = new Color(255, 100, 18); g2.setColor(c1) ; // Objects displayed here will use the color c1 } } Note: It is possible to set the color c1 in the above example without explicitly creating the color object c1: g2.setColor(new Color(255, 100, 18) ) ; It is possible to obtain the current settings for the background and foreground colors by calling getBackground( ) and getForeground( ), respectively: Color getBackground( ) Color getForeground( ) A Graphics object coordinate system A graphics object, such as the parameter g for the paint( ) method can be thought of as an area of the screen. Within this area of the screen, you use x- and y-coordinates to refer to a particular spot. A graphics object has a coordinate system that is illustrated below: (0, 0) x y The origin point (0, 0) is the upper left-hand corner of the graphics object. The x-coordinate is positive and increasing to the right. The y-coordinate is positive and increasing in a downward direction. Displaying messages in the applet window To output a string to an applet, use the drawString( ) method. It has the following general form: void drawString(String message , int x , int y) where message is the string to be output beginning at the point (x , y) Note: The drawString( ) method does not recognize the new line character ‘\n’. 8 Example : The following applet displays the message: Hello Word in black on a light gray background. import java.applet.*; import java.awt.*; public class HelloApplet extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g2 ; g2.drawString("Hello world!", 50, 25); } } Example: The following applet displays strings in various colors on a blue background: import import java.awt.*; java.applet.*; public { class public { MyApplet void extends Applet init( ) setBackground(Color.blue) ; setForeground(Color.yellow) ; } public { void paint(Graphics Graphics2D g2 = g) (Graphics2D) g ; g2.drawString("A yellow string", 50, 10); g2.setColor(Color.red) ; g2.drawString("A red string", 50, 50); g2.drawString("Another red string", 50, 90); g2.setColor(Color.magenta) ; g2.drawString("A magenta string", 50, 130); g2.setColor( getForeground( ) ) ; g2.drawString("Another yellow string", 50, 170); } } Displaying messages in the status window In addition to displaying information in its window, an applet can also output a message to the status window of the browser or applet viewer on which it is running. To do so, call showStatus( ) with the string you want displayed. The status window is a good place to give the user feedback about what is occurring in the applet, or possibly report some types of errors. Example: import import java.awt.*; java.applet.*; public class StatusWindow extends Applet 9 { public void init( ) { setBackground(Color.cyan) ; } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g ; g2.drawString("This is in the applet window", 10, 20); showStatus(“This is shown in the status window.”); } } Displaying messages in the console window If an applet has a System.out.println( ) or System.out.print( ), then the output for that statement is not in the applet window but rather to the console window. Example: import import java.awt.*; java.applet.*; public { class ConsoleWindow extends Applet public void init( ) { setBackground(Color.cyan) ; } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g ; g2.drawString("This is in the applet window", 10, 20); System.out.prinln(“This is shown in the console window.”); } } Fonts and Font metrics By default, strings are drawn using the default font, plain style and default font size. To change the font, style or size, we need to create an object of class Font and pass it to the setFont method of the Graphics2D object. To create such object, we need to specify the following parameters: The font name The Style (Font.PLAIN, Font.BOLD, Font.ITALIC, or Font.BOLD + Fond.ITALIC) The point Size The font name can be the name of any font available on the particular computer (such as: TimesRoman, Courier, Helvetica etc.,) or any of the logical names shown in the table below: Name Serif SansSerif Monospaced Dialog DialogIput Description. A font with small segments at the end, e.g. Times New Roman A font without small segments. e.g. Helvetica A font in which all characters have the same width. e.g. Courier A screen font suitable for labels in dialogs A screen font suitable for user input in text field Note: Using the logical name is recommended since it makes the applet more portable. 10 Example: The following prints the word Applet in large SansSerif font. import import import import import java.applet.Applet; java.awt.Graphics; java.awt.Graphics2D; java.awt.Font; java.awt.Color; public class BigFontApplet extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; final int SIZE = 48; Color myColor = new Color(0.25F, 0.5F, 0.75F); Font myFont = new Font("SansSerif", Font.BOLD, SIZE); g2.setColor(myColor); g2.setFont(myFont); g2.drawString("Applet",5,60); } } Note: Although it is possible to create Font objects in the paint( ) method, as in the above example, a good place to do so is in the init( ) method. Example: import import import import import java.applet.Applet; java.awt.Graphics; java.awt.Graphics2D; java.awt.Font; java.awt.Color; public class FontsApplet extends Applet { private Font font1, font2, font3; public void init( ) { setBackground(Color.yellow); font1 = new Font("TimesRoman", Font.BOLD, 12); font2 = new Font("Courier", Font.BOLD + Font.ITALIC, 24); font3 = new Font("Helvetica", Font.PLAIN, 14); } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; g2.setColor(Color.blue); g2.setFont(font1); g2.drawString("I like ICS 102 very much", 20, 20); g2.setColor(Color.red); g2.setFont(font2); g2.drawString("I also like to do the homework", 20, 40); g2.setColor(Color.black); g2.setFont(font3); g2.drawString("I also like applets !", 20, 60); 11 } } Note: The instance variables font1, font2, and font3 are declared as private. This means they cannot be accessed outside their class. Drawing lines. 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: By giving the x and y coordinates of both points as in: Line2D.Double line1 = new Line2D(x1, y1, x2, y2); Or we can specify each point as an object as in, Point2D.Double from = new Point2D.Double(x1, y1); Point2D.Double to = new Point2D.Double(x2, y2); Line2D.Double line1 = new Line2D.Double(from, to); The latter method is more object-oriented and more useful particularly if the point objects need to be re-used. Example : The following applet draws a Triangle. import import import import import import java.applet.Applet; java.awt.Graphics; java.awt.Graphics2D; java.awt.geom.Ellipse2D; java.awt.geom.Line2D; 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); } } Drawing a rectangles To draw a rectangle, we need to crate an object of class Rectangle2D and then draw it using the draw method of the Graphics2D object. 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. Example : The following applet draws a rectangle import import import import public { java.applet.Applet; java.awt.Graphics; java.awt.Graphics2D; java.awt.Rectangle; class RectangleApplet extends Applet 12 public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; Rectangle2D.Double rectangle = new Rectangle2D.Double(10,10,50,50); g2.draw(rectangle); } } Note: If we replace the g2.draw(rectangle); with g2.fill(rectangle); in the above example, we get a solid rectangle. Drawing Ellipses. To draw an Ellipse, we need to import the Ellipse2D class of the java.awt.geom. package. However, the Ellipse2D class contained two Ellipse classes, Ellipse2D.Float which uses floating point coordinates and Ellipse2D.Double which stores its co-ordinates in double. Since double is the default for floating point representation in Java, we shall be using Ellipse2D.Double. Similarly to draw a circle, we need to create an object of class Ellipse2D.Double and then use the draw method of the Graphics2D object to draw it. To create such object, we need to specify the parameters for the rectangle bounding the circle. Example : The following example draws two concentric circles. import import import import java.applet.Applet; java.awt.Graphics; java.awt.Graphics2D; 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); } }