Course: MCACSM-2201: Object Oriented Programming Usingjava

ALIGARH MUSLIM UNIVERSITY

Department of Computer Science

Course: MCACSM-2201: Object Oriented Programming UsingJAVA

Academic Session 2017-2018

Topic: Java Applets

Handout-13

Dr. Rafiqul Zaman Khan, Professor(Computer Science).

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Objectives:

To gain experience with:

Writing simple applets and HTML code to execute the applets
Displaying geometric shapes: rectangles, ellipses, and lines
Changing Fonts and Colors
Passing input to applets

Steps involved in writing an applet:

Write the applet program, save and compile as usual (same as applications)

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

public class HelloApplet extends Applet

{

public void paint(Graphics g)

{

Graphics2D g2 = (Graphics2D) g;

g2.drawString("Hello World", 50, 25);

}

Create a HTML file (using JCreator) to contain at least the following code:

Execute (do NOT compile) the HTML file using the execute button of JCreator.

Drawing simple graphical shapes:

To draw a graphical shape, we first create the graphic object then call the draw() or fill() method of the Graphics2D to display it on the screen.

Example#1:

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Rectangle;

import java.awt.geom.Ellipse2D;

import java.awt.geom.Line2D;

import java.awt.Color;

public class p1 extends Applet

{

public void paint(Graphics g)

{

Graphics2D g2 = (Graphics2D) g;

g2.drawString("Welcome to Aligarh Muslim University :", 50, 50);

Line2D.Double line = new Line2D.Double(50,55, 270,55);

Rectangle rectangle = new Rectangle(10,70,300,200);

Ellipse2D.Double ellipse = new Ellipse2D.Double(20,80,280, 180);

g2.draw(line);

g2.setColor(Color.green);

g2.fill(ellipse);

g2.draw(rectangle);

g2.draw(ellipse);

g2.setColor(Color.black);

g2.drawString("How are you?. ", 95, 175);

}

Sample output:

Example#1:

The following example draws various shapes on the screen.

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Rectangle;

import java.awt.geom.Ellipse2D;

import java.awt.geom.Line2D;

public class P2 extends Applet

{

public void paint(Graphics g)

{

Graphics2D g2 = (Graphics2D) g;

g2.drawString("Welcome to ICS102 :", 10, 50);

Line2D.Double line = new Line2D.Double(10,55, 120,55);

Rectangle rectangle = new Rectangle(10,70,300,200);

Ellipse2D.Double ellipse = new Ellipse2D.Double(20,80,280, 180);

g2.draw(line);

g2.draw(rectangle);

g2.draw(ellipse);

g2.drawString("Ahlan wa Sahlan", 95, 175);

}

Changing Colors and Fonts:

The Graphics2D object as seen in the above example draws and fills garphical shapes using the default color, which is black.

We can change the color by calling its setColor() method and passing to it any of the following colors pre-defined in the Color class :

Color / RGB Value / Color / RGB Value
Color.black / 0.0F, 0.0F, 0.0F / Color.magenta / 1.0F, 0.0F, 1.0F
Color.blue / 0.0F, 0.0F, 1.0F / Color.orange / 1.0F, 0.8F, 0.0F
Color.cyan / 0.0F, 1.0F, 1.0F / Color.pink / 1.0F, 0.7F, 0.7F
Color.gray / 0.5F, 0.5F, 0.5F / Color.red / 1.0F, 0.0F, 0.0F
Color.darkGray / 0.25F, 0.25F, 0.25F / Color.white / 1.0F, 1.0F, 1.0F
Color.lightGray / 0.75F, 0.75F, 0.75F / Color.yellow / 1.0F, 1.0F, 0.0F
Color.green / 0.0F, 1.0F, 0.0F

We can also creat our own color object by specifying a a float value for each of the three primary colors (Red, Green and Blue)

Color myColor = new Color(0.2F, 0.7F, 0.55F);

Similarly, the default font can be changed by creating a Font object and passing it to the setFont() method of the Graphics2D object. To create a Font object, we need to specify the font name, the style and the size. The font name can be any font available on the computer or any of the following logical names:

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 or Arial
Monospaced / A font in which all characters have the same width. e.g. Courier

The font style can be any of : Font.PLAIN, Font.BOLD, Font.ITALIC, or Font.BOLD + Fond.ITALIC

Example#2:

The following example modifies the previous by changing colors and fonts :

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Rectangle;

import java.awt.geom.Ellipse2D;

import java.awt.geom.Line2D;

import java.awt.Color;

import java.awt.Font;

public class P3 extends Applet

{

public void paint(Graphics g)

{

Graphics2D g2 = (Graphics2D) g;

Color myColor = new Color(0.0F, 0.0F, 0.0F);

Font font1 = new Font("Serif", Font.BOLD, 22);

Font font2 = new Font("SansSerif", Font.ITALIC, 30);

setBackground(Color.cyan);

g2.setColor(Color.red);

g2.setFont(font1);

g2.drawString("Welcome to CS-212 Course :", 10, 50);

Line2D.Double line = new Line2D.Double(10, 55, 210, 55);

Rectangle rectangle = new Rectangle(10,70,300,200);

Ellipse2D.Double ellipse = new Ellipse2D.Double(20,80,280, 180);

g2.setColor(Color.red);

g2.draw(line);

g2.setColor(Color.blue);

g2.fill(rectangle);

g2.setColor(Color.yellow);

g2.fill(ellipse);

g2.setColor(myColor);

g2.setFont(font2);

g2.drawString("Ahlan wa Sahlan", 50, 180);

}

Introducing the init() method :

Example#3:

In addition to the paint() method, an applet can also have the following methods: init(),start(),stop() and destroy(). The paint() method is executed each time something happens to the browser, and since we only need to create the various objects once, our applet in the above example will be more efficient if we create the objects in the init() method so that the paint() method only needs to draw or fill them. The following example illustrates this :

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Rectangle;

import java.awt.geom.Ellipse2D;

import java.awt.geom.Line2D;

import java.awt.Color;

import java.awt.Font;

public class P4 extends Applet

{

Font font1;

Font font2;

Color myColor;

Line2D.Double line;

Rectangle rectangle;

Ellipse2D.Double ellipse;

public void init()

{

myColor = new Color(0.0F, 0.0F, 0.0F);

font1 = new Font("Serif", Font.BOLD, 22);

font2 = new Font("SansSerif", Font.ITALIC, 30);

line = new Line2D.Double(10, 55, 200, 55);

rectangle = new Rectangle(10,70,300,200);

ellipse = new Ellipse2D.Double(20,80,280, 180);

}

public void paint(Graphics g)

{

Graphics2D g2 = (Graphics2D) g;

setBackground(Color.cyan);

g2.setColor(Color.red);

g2.setFont(font1);

g2.drawString("Welcome to CS-212 Course :", 10, 50);

g2.setColor(Color.red);

g2.draw(line);

g2.setColor(Color.blue);

g2.fill(rectangle);

g2.setColor(Color.yellow);

g2.fill(ellipse);

g2.setColor(myColor);

g2.setFont(font2);

g2.drawString("How are you ?", 50, 180);

}

Example#4:

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Rectangle;

import java.awt.Color;

public class p1 extends Applet

{

Color myColor;

Rectangle r1;

public void init()

{

r1 = new Rectangle(0, 0, 50, 70);

}

public void paint(Graphics g)

{

Graphics2D g2 = (Graphics2D) g;

g2.setColor(Color.red);

//g2.draw(r1);

g2.fill(r1);

g2.setColor(Color.blue);

r1.translate(50, 0);

// g2.draw(r1);

g2.fill(r1);

g2.setColor(Color.green);

r1.translate(0, 70);

// g2.draw(r1);

g2.fill(r1);

g2.setColor(Color.yellow);

r1.translate(-50, 0);

// g2.draw(r1);

g2.fill(r1);

}

Sample output:

Example#5:

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Rectangle;

import java.awt.Color;

public class p1 extends Applet

{

Color myColor;

Rectangle r1,r2,r3;

public void init()

{

r1 = new Rectangle(0, 0, 50, 70);

r2 = new Rectangle(30, 30, 70, 50);

r3 = r1.intersection(r2);

} // end of init

public void paint(Graphics g)

{

Graphics2D g2 = (Graphics2D) g;

g2.draw(r1);

g2.draw(r2);

g2.setColor(Color.green);

g2.fill(r3);

} // end of paint method

} // end of p1 class

Sample output:

Reading input into an applet:

Example#6:

One way of reading input into an applet is by using the input dialog window. To do this, we use the showInputDialog() method of the JOptionPane class, which is contained in the javax.swing package. This method returns a string, thus if we need a number, we must use the appropriate parse method.

The next example modifies the above by reading the course instead of using CS-212 Course :

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Rectangle;

import java.awt.geom.Ellipse2D;

import java.awt.geom.Line2D;

import java.awt.Color;

import java.awt.Font;

import javax.swing.JOptionPane;

public class P5 extends Applet

{

Font font1;

Font font2;

Color myColor;

Line2D.Double line;

Rectangle rectangle;

Ellipse2D.Double ellipse;

String name;

public void init()

{

name = JOptionPane.showInputDialog("Enter course name:");

myColor = new Color(0.0F, 0.0F, 0.0F);

font1 = new Font("Serif", Font.BOLD, 22);

font2 = new Font("SansSerif", Font.ITALIC, 30);

line = new Line2D.Double(10, 55, 550, 55);

rectangle = new Rectangle(10,70,300,200);

ellipse = new Ellipse2D.Double(20,80,280, 180);

}

public void paint(Graphics g)

{

Graphics2D g2 = (Graphics2D) g;

setBackground(Color.cyan);

g2.setColor(Color.red);

g2.setFont(font1);

g2.drawString("Welcome to "+name, 10, 50);

g2.setColor(Color.red);

g2.draw(line);

g2.setColor(Color.blue);

g2.fill(rectangle);

g2.setColor(Color.yellow);

g2.fill(ellipse);

g2.setColor(myColor);

g2.setFont(font2);

g2.drawString("Ahlan wa Sahlan", 50, 180);

}

Another way of reading input into an applet is to use the PARAM tag to specify the input in the HTML file. The getParameter() method is then used in the applet program to read the input from the HTML file. Again the getParameter method returns a string, thus if numbers are required, conversion must be done.

The following HTML file is used to pass the name of the user and the values for creating the color object (myColor) used in printing the “Ahlan wa Sahlan” message.

</APPLET>

To read the above parameters by the applet, the init() method is modified as follows:

public void init()

{

float red, green, blue;

name = getParameter("Name");

red = Float.parseFloat(getParameter("Red"));

green = Float.parseFloat(getParameter("Green"));

blue = Float.parseFloat(getParameter("Blue"));

myColor = new Color(red, green, blue);

font1 = new Font("Serif", Font.BOLD, 22);

font2 = new Font("SansSerif", Font.ITALIC, 30);

line = new Line2D.Double(10, 55, 300, 55);

rectangle = new Rectangle(10,70,300,200);

ellipse = new Ellipse2D.Double(20,80,280, 180);

}

Exercises

Problem#1:

Write an applet that will display the following on a greenbackground. Use the following dimension:

Rectangle: (10, 10, 300, 150), fill color: blue
Left circle: (10, 10, 150, 150), fill color: yellow
Right circle: (159, 10, 150, 150), fill color: yellow
Text: (110, 90), color: red

(Hint : Cut & Past Example#2 and modify that to get desired output)

Sample Output:

Problem#2:

Cut & Past applet program given in Examples#4 and understand it , Now modify it to read course name, two quiz grades from key board and produce sum in the following format: