Download Lab Objectives • Writing HTML Code • Writing simple

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts
no text concepts found
Transcript
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
,
, );