INFORMATION & COMPUTER SCIENCE DEPARTMENT, KFUPM

ICS102, SECTIONS 52, 54 & 55  (001 Semester)

INTRODUCTION TO COMPUTING

LAB  #03 Introduction to HTML and Applets

 

Instructor: Bashir M. Ghandi

 


Objectives:

To gain experience with:

 

1.  Brief Introduction to Classes and Objects

In Java, except for the primitive data types, everything is represented as an object.  Hence, Java is called an Object-Oriented language. To understand what an Object is, we first need to understand what a class is.

 

Class:  A Class is a general description of an entity in which the properties (called fields) and behaviours (called methods) of such entity are defined.

Examples of a class are: Teacher, Student, University, Car, etc.

Teacher is an entity which has fields such as name, department, field of specialization, etc.

Teacher also has methods such as Teaching, Research, Solving Problems, etc.

 

Object:  An Object is a particular instance of a certain class.

Example of a Teacher object is “Mr. Ghandi”.

He has specific name field, “Bashir M. Ghandi” and specific methods such as “SolvingJavaProblems”.

 

In real life, if we have a problem to solve, we take it to the person who knows how to solve such a problem.

Similarly, to solve a problem in Java, we create an object that has a method that can solve the problem.

 

Creating Object:

The format for creating an object from a class is as follows:

ClassName objectReference = new ClassName(parameters);

 

e.g. Lecturer ghandi = new Lecturer(“B.M. Ghandi”);

 

Once an object is created, we can call any of its method in the form:

 

ghandi.solvingJavaProblems(myProblem).

 

2.  What is an Applet?

An applet is a Java program that runs inside a web browser (e.g. Internet Explorer). 

Like any Java program, 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.  The standard Applet class is contained in the package called java.applet and must be imported at the beginning of each applet program.

 

Unlike java applications, applets do not have main method.  Instead, 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.

 

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 a class contained in a package called java.awt (Advanced Windowing Toolkit) and must be imported at the beginning of each applet.  There are many other classes in the java.awt package which we shall discuss later.

 

Example 1: The following is a simple applet to display the message “Hello Word”.

import java.applet.Applet;

import java.awt.Graphics;

 

public class HelloApplet extends Applet {

    public void paint(Graphics g) {

        g.drawString("Hello world!", 50, 25);

    }

}

3.  Brief Introduction to HTML.

Applets are designed to run on a web-browser and web-browsers only understand a language called HyperText Markup Language (HTML).  Thus, to instruct a web-browser to display our applet, we need to understand few things about this language.

HTML consists of codes (also called tags), which are used to instruct a web-browser on how to display information.  Most tags are in pairs and are used to enclose a text.

Example:                                                         Java is an <I> Object-oriented </I> language

is displayed by the browser as:                 Java is an Object-oriented language. 

Obviously, the pair <I> and </I> are used to indicate italics.

The following are some of the basic HTML tags that we need to know to be able to write a HTML file to display our applet:

<HTML> …</HTML>:  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.

<HEAD> …</HEAD>:  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.

<TITLE> …</TITLE>: 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.

<BODY> …</BODY>: 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.  

<APPLET CODE = “appletFile” WIDTH = pixels  HEIGHT = pixels>  . . . </APPLET> : This is used to instruct the browser to load an applet.  Notice that the applet tag has additional specifications, namely, 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.
 
Example 2: 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>

To run the above html file using Internet explorer, we save it with .html extension and double-click on it from My Computer or Windows Explorer.

To run it using Applet viewer from within JCreator, we save it with .html extension and execute it using the Execute File command.

The following are sample output we get when we execute file in Windows explorer and Applet viewer:

We shall talk more about HTML in Lab 04 but for now these are all we need to know.  If you are interested in creating your personal Home page, then you need to know more about HTML.  In this case the tutorial, Page Tutor, which you can access on my home page, or on the Internet using www.pagetutor.com is very easy to follow.

4.  Drawing Simple graphical shapes

As stated earlier, we use an object of type Graphics inside the paint method to draw graphic shapes such as lines and ellipses.

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. 

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

            . . .

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

 

4.1  Drawing a rectangle:

To draw a rectangle, we need to crate an object of class Rectangle 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 3:  The following applet draws a 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);

      }    

}

Note:  If we replace the g2.draw(rectangle); with  g2.fill(rectangle); in the above example, we get a solid rectangle.

 

4.2  Drawing an Ellipse.

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.

 

Similar to drawing rectangle, 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 it.

 

Example 4:  The following example draws two concentric circles.

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

  }  

}

4.3.  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 4:  The following applet draws a Triangle.

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

  }  

}

 

5.  Working with Colors

By default, all drawing is done in black pen.  However, we can change this by creating an object of class Color and passing it to the setColor method of the Graphics2D object.

Java uses the RGB color model, where colors are specified by giving the amount of the primary colors –Red, Green, and Blue- that make up the color.

The amounts are given in float values and range from 0.0F (no color present) to 1.0F (maximum color present). The following table list the pre-defined colors that are available by default.

Color

RGV Value

Color.black

0.0F,  0.0F,  0.0F

Color.blue

0.0F,  0.0F,  1.0F

Color.cyan

0.0F,  1.0F,  1.0F

Color.gray

0.5F,  0.5F,  0.5F

Color.darkGray

0.25F,  0.25F,  0.25F

Color.lightGray

0.75F,  0.75F,  0.75F

Color.green

0.0F,  1.0F,  0.0F

Color.magenta

1.0F,  0.0F,  1.0F

Color.orange

1.0F,  0.8F,  0.0F

Color.pink

1.0F,  0.7F,  0.7F

Color.red

1.0F,  0.0F,  0.0F

Color.white

1.0F,  1.0F,  1.0F

Color.yellow

1.0F,  1.0F,  0.0F

 

Example 5: The following applet draws three rectangles in 3 different colors, one of which are standard.

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Rectangle;

import java.awt.Color;

 

public class ColoredRectanglesApplet extends Applet

{

      public void paint(Graphics g)

      {     Graphics2D g2 = (Graphics2D)g;

     

            Color myColor = new Color(0.25F, 0.5F, 0.75F);

            Rectangle rectangle1 = new Rectangle(10, 10, 70,30);

            Rectangle rectangle2 = new Rectangle(10, 50, 70,30);

            Rectangle rectangle3 = new Rectangle(10, 90, 70,30);

           

            g2.setColor(Color.blue);

            g2.fill(rectangle1);

            g2.setColor(myColor);

            g2.fill(rectangle2);

            g2.setColor(Color.red);

            g2.fill(rectangle3);

      }    

}

 

6.  Working with Fonts, Styles and Font Sizes

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 or any of the logical names shown in the table below. 

Name

Description.

Serif

A font with small segments at the end, e.g. Times New Roman

SansSerif

A font without small segments. e.g. Helvetica

Monospaced

A font in which all characters have the same width. e.g. Courier

Dialog

A screen font suitable for labels in dialogs

DialogIput

A screen font suitable for user input in text field

 

Note: Using the logical name is recommended since it makes the applet more portable.

 

Example 6: The following prints the word Applet in large SansSerif font.

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Font;

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

      }    

}

 

 

7.  Assignments

1.        Write a program that draws your name in a Bold, Serif font of size 28.  The name should be in drawn in red color inside a blue rectangle.

 

2.        Draw a set of concentric circles in alternating black and white colors. Hint: Fill a black circle, then a white circle on top, etc.

3.        Write a program that draws the picture of a house as shown below.  First draw the house on a sheet of paper to determine the appropriate dimension.