2f

Advanced Placement

Computer Science Lab

 

 

Introduction to Applets, Graphics & Methods

 

 

 

Introduction

 

One of the reasons for the success of Java as programming language is related to its use in applets.  Applets are Java programs that run within the context of web pages.  Java applications and applets share many things in common but there are also so notable differences.  The first is that applets do not have a main() method.  The second is that output from an applet must be displayed in a graphical environment.  Even text must be displayed in a graphical mode.  Fortunately, Java provides many tools for graphical displays.

 

 

 

Since applets must be displayed from within a web page, we will also have to learn some HTML (Hyper Text Mark-up Language) to display our applets.  The following is an example of HTML code that we will use to test out applets.  Web pages can get considerably more complex than this but this but this will be sufficient to display an applet.  The code inside the brackets, e.g. <HTML>  is called a tag.  Note that most tags are paired, i.e. if there is an <HTML>  there is also a </HTML> .  The first is the opening tag and the second is the closing tag. In an HTML document that is displayed in a browser (i.e. Netscape or Internet Explorer) all code must be between <HTML> and </HTML>.  Following the <HTML>  there is a <HEAD> and </HEAD> and within the <HEAD> tag there is a <TITLE> and </TITLE>.  These must appear in all HTML documents. The title of the page can be placed between <TITLE> and </TITLE>. Also required is the <BODY> and </BODY> tags.  Contained within the <BODY> and </BODY> tags is the material that is actually going to be displayed on the page. The <H1> and </H1> indicate the size of the font to use with the text to be displayed.  The <HR> tag refers to a horizontal rule placed on the page. Within the <APPLET> and </APPLET> tags we place the information that tells the page where to find the Java code and the size of the box within which to put the output.  Note that the Java code is a class file so we must compile our code before we test within a browser. Also note that the HTML file and the *.class file have to be in the same directory unless you specify a path to the *.class file.

 

 

 

 

           

 

<HTML>

<HEAD>

<TITLE>(Title of page goes here)</TITLE>

</HEAD>

<BODY>

<H1>(Name of applet goes here)</H1>

<HR>

<APPLET

   CODE=(Name of class file of applet goes here; e.g.

     "Something.class".  File name should be in quotes and have class file extension)

   WIDTH=300

   HEIGHT=300>

</APPLET>

<HR>

</BODY>

</HTML>

 

 

Simple Java code for the applet would look like the following:

 

 

 

 

 

/*

Einstein - Applet

Version 1.0 (xx/xx/xx)

Program displays text and shapes in applet viewer

*/

 

import java.awt.*;

import java.applet.*;

 

public class Einstein extends Applet

{

     public void init()

     {

          resize(300,300);

     }

 

     public void paint(Graphics g)

     {

          g.drawLine (10, 10, 150, 130);

          g.drawRect(30, 30, 90, 120);

          g.drawRect(40, 30, 100, 100);

          g.drawRect(50, 30, 110, 110);

          g.drawRect(60, 30, 120, 120);

          g.drawRect(70, 30, 130, 130);

          g.drawString("Hello Einstein!", 20, 20);

     }

}

 

 

 

 

 

Note the import statement.  This tells the compiler to use existing Java code in this program.  The existing code in this case is found in the Graphics class.  You can use the methods in the Graphics class in your own program.  This is an example of reusability, i.e. the same program written once and used be many.  Reusability is one of the characteristics of the Java language.

 

The public void init method provides a place for the applet to start although it is not necessary.  The method which begins public void paint(Graphics g) creates or instantiates an object of the Graphics class which is labeled “g”.  We will talk more about this later but for the time being, by creating an object of the Graphics class, we can now access the methods of the class,  We do so by using the g.* where the “*” is a wild card of the methods in the Graphics class that are listed above.

 

Every applet that displays graphics must have a paint method.  This is large because applets in the Web environment are in a graphical environment in which virtually everything must be displayed as a graphic element, even text.

 

Also note the keyword extends.  We will talk more about this later, but what this does is that it makes the Einstein class an extension of an exiting class, namely the Applet class.  This is an example of what is called inheritance and is a feature of the Java language and object oriented programming.

 

 

 

 

 

Applets can do quite a bit to extend the capability of a web page but they also have some limitations.  First, applets cannot initiate programs on the client computer.  The client computer is the computer that downloads a page from the webserver.  If an applet could initiate programs on the client, it could present a real problem.  Also, applets cannot read to or write from files held on the client.  Both of these limitations are related to security concerns and protect the client computer from malicious programs.

 

 

 

 

 

Procedure

 

A.  Building an Applet

 

1.         Open JCreator.  Open the Chapter2 workspace.

 

2.         Make a new project but instead of an application, select the icon that says Basic Java Applet as shown below and then click on the Next button.

 

3.         A new dialog box titled Project Paths will appear asking you to input the name of the project.  Type Einstein. This will generate the directories that will have all the files related to the project. As in the previous exercises, change all of the path listings to your travel drive.  At this point click Finish.

 

4.         Select File  à  Open  à  src  à  Einstein.java.  This will open a file that contains an applet template.  Replace the template code with the source code from above. Compile the file.  Attempt to execute the file.  Why will it not execute?

 

5.         Double click on the project to show all the files of the project.  One of the files should be Einstein.htm. Open this file.  Replace the HTML code that is seen with code shown above.  Change the title to Einstein.  Change the <H1>…</H1> line to <H1> Einstein Applet </H1> .  Change the CODE line in the applet tag to "Einstein.class ".

 

6.         While Einstein.htm is the active file in the workspace, go to Build menu and click on the Execute File menu item.  JCreator should open two windows.  One is a Windows window and remains blank.  The other is an Applet Viewer window in which your applet is now being run.  This is how you can test your applet.  Before running your applet again be sure to close both windows.

 

 

B.  The Graphics Class and Graphics Elements in an Applet

 

1.         The applet can be modified to incorporate various other graphic elements.  The following is a listing of graphic methods in the graphic class.  Since the graphic class is derived from the java.awt package which we imported at the beginning of the applet, all of the following are available to you.

 

 

 

 

 

 

void drawArc (int x, int y, int width, int height, int startAngle, int arcAngle)

//Paints an arc along the oval bounded by a rectangle defined by x,y

//position of upper left hand corner, width and height.  The arc

//starts at startAngle and extends for a distance defined by arcAngle

 

void drawLine (int x1, int y1, int x2, int y2)

//Paints a line from x1, y1 to x2, y2

 

void drawOval (int x, int y, int width, int height)

//Paints an oval bounded by a rectangle defined by x,y position of the //upper left hand corner and dimensions of width and height.

 

void drawRect (int x, int y, int width, int height)

//Paints a rectangle bounded with position defined by the x,y position //of the upper left hand corner and dimensions of width and height.

 

void drawString (String str, int x, int y)

//Paints a rectangle bounded with position defined by the x,y position //of the upper left hand corner and dimensions of width and height.

 

void fillArc (int x, int y, int width, int height, int startAngle, int arcAngle)

//Same as drawArc but filled with foreground color.

 

void fillOval (int x, int y, int width, int height)

//Same as drawOval but filled with foreground color.

 

void fillRect (int x, int y, int width, int height)

//Same as fillOval but filled with foreground color.

 

void setColor (Color color)

//Sets foreground color

//Use would be like “g.setColor(Color.red)”

 

}

 

 

 

 

 

2.         Compare the listing in Einstein.java and the use of the graphics methods to the listing above.  Modify the program to include additional elements and/or move elements around.  Where is the point 0,0 located in the applet window?

 

 

            Predefined colors of the color class are listed below:  These can be used to change the color of the objects that you draw.

 

           

Color

Object

RGB Value

black

Color.black

0,0,0

blue

Color.blue

0,0,255

cyan

Color.cyan

0,255,255

gray

Color.gray

128,128,128

dark gray

Color.darkGray

64,64,64

light gray

Color.lightGray

192,192,192

green

Color.green

0,255,0

magenta

Color.magenta

255,0,255

orange

Color.orange

255,200,0

pink

Color.pink

255,175,175

red

Color.red

255,0,0

white

Color.white

255,255,255

yellow

Color.yellow

255,255,0

 

 

 

 

 

Programming Assignment

 

Write an applet program that will produce an image in a web page.  You must use all of the graphic elements listed above and your program must include at least ten graphic elements. Your graphic image must be unique with respect to the rest of the class.  Turn in a print out your source code, your HTML file and a sample of the output.