Download A First Applet

A Simple Applet
1
Applets and applications

An applet is a Java program that runs on a web page



Applets can be run within any modern browser
To run modern Java applets, old browsers need an up-to-date
Java plugin
appletviewer is a program that can run applets



When you download the Java SDK, appletviewer comes with it
appletviewer is always up-to-date with your Java system
An application is a Java program that runs all by itself
2
Packages and classes





Java supplies a huge library of pre-written “code,”
ready for you to use in your programs
Code is organized into classes
Classes are grouped into packages
One way to use this code is to import it
You can import a single class, or all the classes in a
package
3
AWT and Swing

There are two ways to build Graphical User Interfaces
(GUIs):



AWT, the “Abstract Window Toolkit,” is the original way
Swing is the new way (since Java 1.2)
Swing is built “on top of” the AWT
 When you build an AWT GUI, you use only AWT
methods
 When you build a Swing GUI, you typically use
both AWT methods and Swing methods
 However, there are some incompatibilities you will
need to learn about (later)
4
The Applet and JApplet classes

To create an applet, you must import either the Applet
class (to write an AWT applet) or the JApplet class (to
write a Swing applet)





The Applet class in in the java.awt package
The JApplet class is in the javax.swing package
Both Applet and JApplet contain code that works with
a browser to create a display window
We will use Swing (hence, JApplet) in this example
Capitalization matters!

Japplet and JApplet are different names
5
Importing the JApplet class

Here is the directive that you need:
import javax.swing.JApplet;






import is a keyword
javax.swing is the name of the package
A dot ( . ) separates the package from the class
JApplet is the name of the class
There is a semicolon ( ; ) at the end
This directive should be before your class definitions

Only the package directive, if you have one, goes before
the import directives
6
The java.awt package


“awt” stands for “Abstract Window Toolkit”
The java.awt package includes classes for:






Drawing lines and shapes
Drawing letters
Setting colors
Choosing fonts
Swing builds on the AWT, it doesn’t replace it
If it’s drawn on the screen, then java.awt is
probably involved!
7
Importing the java.awt package

Since you may want to use many classes from the
java.awt package, simply import them all:
import java.awt.*;


The asterisk, or star (*), means “all classes”
The import directives can go in any order, but must be
the first lines in your program

...unless you have a package directive, which must precede
your import directives
8
C and C++ programmers only





C and C++ have an #include directive that copies a
library function into your program
This makes your program bigger
Java’s import gives you access to the library
It does not make your program bigger
It’s OK to use lots of import directives!
9
The applet so far
import javax.swing.JApplet;
import java.awt.*;
10
Comments



A comment adds information for the reader
Java ignores everything inside comments
There are three kinds of comments:
// starts a comment that goes to the end of the line
/* starts a comment that can extend over many lines,
and ends at */
/** is a “javadoc” comment that can be extracted
from your program and used in documentation */
11
Classes

In Java, all code occurs in classes





Except for the package and import directives
We will talk about package some day
The code that you import is in classes
Your code will also be in classes
For now, a class is a bundle of code

We will talk about what it really is very soon
12
Your first class

public class Drawing extends JApplet {
…the code for your class goes in here…
}
public says your class is not hidden



This makes your class visible to “the whole world”
We will talk later about why we hide code
class says we are making a class (Duh!)
13
Your first class, part 2

public class Drawing extends JApplet {
…
}
Drawing is the name of your class


extends JApplet says that our Drawing is a kind of
JApplet, but with added capabilities



Class names should always be capitalized
Java’s JApplet just makes an empty window
We are going to draw in that window
The only way to make an applet is to extend Applet
or JApplet
14
Your first class, part 3
public class Drawing extends JApplet {
…the code for your class goes in here…
}

The braces, { }, mark the beginning and ending of
your code
15
The applet so far
import javax.swing.JApplet;
import java.awt.*;
// CIT 591 example
public class Drawing extends JApplet {
…we still need to put some code in here...
}
16
Methods

A method is a group of commands that tell the
computer to do something


C programmers: methods are similar to functions
A method takes information in, does something with
it, and returns a result


The input information is called the method’s parameters,
or arguments
The result is just called a result
17
The paint method



Our applet is going to have a method to paint some
colored rectangles on the screen
This method must be named paint
paint needs to be told where on the screen it can draw


This will be the only parameter it needs
paint doesn’t return any result
18
The paint method, part 2

public void paint(Graphics g) { … }



public says that anyone can use this method
void says that it does not return a result
paint is the name of the method



Method names should begin with a lowercase letter
The argument, or parameter (there’s only one) is
inside parentheses
The method’s commands are inside braces
19
By the way…names

( ) are parentheses

{ } are braces

[ ] are brackets
20
The paint method, part 3


public void paint(Graphics g) { … }
A Graphics (short for “Graphics context”) is an object
that holds information about a painting




It remembers what color you are using
It remembers what font you are using
You can “paint” on it (but it doesn’t remember what you
have painted)
In this program,


The type of the parameter is Graphics
The name of the parameter is g
21
The applet so far
import javax.swing.JApplet;
import java.awt.*;
// CIT 591 example
public class Drawing extends JApplet {
public void paint(Graphics g) {
…we still need to put some code in here…
}
}
22
Colors


The java.awt package defines a class named Color
There are 13 predefined colors—here are their fully-qualified names:
Color.BLACK
Color.DARK_GRAY
Color.GRAY
Color.LIGHT_GRAY
Color.WHITE

Color.PINK
Color.RED
Color.ORANGE
Color.YELLOW
Color.MAGENTA
Color.GREEN
Color.CYAN
Color.BLUE
For compatibility with older programs (before the naming
conventions were established), Java also allows color
names in lowercase: Color.black, Color.darkGray, etc.
23
New colors






Every color is a mix of red, green, and blue
You can make your own colors:
new Color( red , green , blue )
Amounts range from 0 to 255
Black is (0, 0, 0), white is (255, 255, 255)
We are mixing lights, not pigments
Yellow is red + green, or (255, 255, 0)
24
Setting a color


To use a color, we tell our Graphics g what color we
want:
g.setColor(Color.RED);
g will remember this color and use it for everything
until we tell it some different color
25
The paint method so far
public void paint(Graphics g) {
g.setColor(Color.BLUE);
…draw a rectangle…
g.setColor(Color.RED);
…draw another rectangle…
}
}
26
Pixels

A pixel is a picture (pix) element



one pixel is one dot on your screen
there are typically 72 to 90 pixels per inch
java.awt measures everything in pixels
27
Java’s coordinate system
(0, 0)
(0, 0)(50, 0)
(50, 0)
(0, 20)
(50, 20)
(0, 20)
(50, 20)
(w-1, h-1)





Java uses an (x, y) coordinate system
(0, 0) is the top left corner
(50, 0) is 50 pixels to the right of (0, 0)
(0, 20) is 20 pixels down from (0, 0)
(w - 1, h - 1) is just inside the bottom right corner, where w
is the width of the window and h is its height
28
Drawing rectangles

There are two ways to draw rectangles:
g.drawRect( left , top , width , height );

g.fillRect(left , top , width , height );

29
Drawing strings

A String is a sequence of characters enclosed in double
quote marks


A double quote mark in a String must be preceded by a
backslash ( \ )




"Hello, World!"
"He said, \"Please don't go!\" "
To draw a string, you need to specify not only what you want
to say, but where to say it
g.drawString( string, left, top );
For example,

g.drawString("Example JApplet", 20, 80);
30
The complete applet
import javax.swing.JApplet;
import java.awt.*;
// CIT 591 example
public class Drawing extends JApplet {
public void paint(Graphics g) {
g.setColor(Color.BLUE);
g.fillRect(20, 20, 50, 30);
g.setColor(Color.RED);
g.fillRect(50, 30, 50, 30);
g.setColor(Color.BLACK);
g.drawString("Example JApplet", 20, 80);
}
}
31
Some more java.awt methods








g.drawLine( x1 , y1 , x2 , y2 );
g.drawOval( left , top , width , height );
g.fillOval( left , top , width , height );
g.drawRoundRect( left , top , width , height );
g.fillRoundRect( left , top , width , height );
g.drawArc( left , top , width , height ,
startAngle , arcAngle );
g.drawPolygon( xPoints, yPoints, n );
g.fillPolygon( xPoints, yPoints, n );

xPoints and yPoints are int arrays of size n
32
The HTML page


You can only run an applet from an HTML page
The HTML looks something like this:


<html>
<body>
<h1>Drawing Applet</h1>
<applet code="Drawing.class"
width="100" height="150">
</applet>
</body>
</html>
BlueJ will create this HTML for you
33
The End
34