Up until now, we've only made Java applications. Users have only interacted with our programs through a text-based interface. Today, we get a glimpse of an alternative. There are two main types of Java programs: applications and applets. A Java applet is a program intended to be transported across the web, primarily to be used by web browsers. Java applets are a great way to provide executable programs through common world wide web software. Since we're dealing with the web, though, presentation is everything and we're going to need graphics.
A Java applet is intended to be executed within a typical HTML web page. Therefore we no longer need the usual main method to always start everything. We do however need a method to allow us to draw graphics. Thus, the quintessential method for applets is the paint method. It needs to be public and it needs to take in a Graphics object. This object is going to be what we use to draw everything. Here's a small example:
import java.applet.Applet;
import java.awt.*;
public class FirstApplet extends Applet {
public void paint(Graphics page){
page.drawRect(20, 20, 150, 100);
}
}
Notice that I had to use two import statements to get my code to work. The first is needed to get the code for the Applet class which we need to make any applet we want to create. Note that our class definition header is a little different, too. Now we've got the text extends Applet added. This says that we're referencing parts of the Applet class through something called inheritance. We won't be covering the big topic of inheritance in this course. Lastly, the other import statement is used to get us all of the graphic stuff we need from the awt package. The "*" symbol says to just import everything from that package.
We've covered what's different for this applet, but what did that program do? The drawRect method takes in four integer values to specify the rectangle that it will draw: the x-coordinate of the top-left corner, the y-coordinate of the top-left corner, the width, and the height. Why did it use these values to specify a rectangle? Because this is the way the coordinate system works for computer windows. We start with the top-left corner of the window being assigned the coordinate (0,0). As we move right across the window, the x-coordinate increases. As we move down the window the y-coordinate increases. Having the y-coordinate increase as you move down may take some getting used to since this is different from the standard coordinate system in math class.
What are these coordinates representing? Pixels. The entire screen is divided into tiny pixels which each represent a small bit of color. When viewed together they create all of the detailed images we see on computers (and in digital photos). This leads to how color is represented on computers. Every color on a computer can be expressed as a mixture of 3 primary colors: red, green, and blue. By keeping a score for each primary color (typically from 0 to 255) we know the intensity of each primary in the given color being represented. A higher value for red means that red shows up more in the color we're representing. These scores are known as RGB values - the same as we used for representing colors in our HTML and CSS code.
So given that RGB values are a common way of representing colors, how do we represent color in Java? Since Java is object-oriented we naturally do it using a class called Color. Every object of this type stores it's own RGB values and thus represents a single color. Color objects are immutable - like strings - so once we set the RGB values when the object is first created those values aren't going to change. So, using these Color objects, we can now use the setColor method to add some color to our drawing.
public void paint(Graphics page){
page.setColor(Color.red);
page.fillRect(20, 20, 150, 100);
}
The Color class definition holds several class variables, each referencing a different Color object. This gives us a quick way to get a few basic colors without having to create our own Color objects. If the basic colors aren't enough, we can certainly make our own.
public void paint(Graphics page){
Color oddGreen = new Color(12, 156, 33);
page.setColor(oddGreen);
page.fillRect(20, 20, 150, 100);
}
In the above example I also used the fillRect method instead so that my rectangle was filled in rather than just drawn as an outline. Here is a listing of some basic graphical drawing methods:
drawRect(int x, int y, int width, int height)x,y)
and having width of width and a height of heightfillRect(int x, int y, int width, int height)x,y) and having
width of width and a height of heightdrawOval(int x, int y, int width, int height)width and a height of height. Consider the smallest rectangle that could be drawn around that oval. That bounding rectangle's upper-left corner would be at coordinate (x,y).fillOval(int x, int y, int width, int height)width and a height of height. Consider the smallest rectangle that could be drawn around that oval. That bounding rectangle's upper-left corner would be at coordinate (x,y).drawArc(int x, int y, int a, int b, int c, int d)
In order to creat more interesting designs in our applet window, we need to be able to modify the size of that window to our needs. This can be done each time the paint method is called, but re-sizing every time is unnecessary. For things that only need to be called once before the applet starts, the init method should be used. This method is called once before the applet is created, then never again. It's a great way to initialize our window size with the setSize method, or the window's background color with the setBackground method. The typical act of initializing variables can also be done here.
Now that I can enlarge my window to make room, I'm ready for bigger designs. While I was able to draw a few simple shapes just within the paint method, creating more complex designs can get messy. Just like with the main method from before, we don't want to cram everything we need into one method. In the example code below, I create a method that will draw a Smiley face of a certain size with certain colors. The only parameters that this method takes in is the Graphics object (needed for drawing), and two int numbers to say the coordinate location where this smiley face will be centered. This drawSmiley() method will then be called from the initial paint() method as many times as I like. This permits me to easily maintain a complex design, to quickly create several copies, and to move them around to different locations.
import java.applet.Applet;
import java.awt.*;
public class SmileyApplet extends Applet {
public void paint(Graphics page){
page.drawRect(20, 20, 150, 100);
drawSmiley(page, 100, 50);
}
//--------------------------------------------------------------------
// draws a smiley face centered at the given coordinates
public void drawSmiley(Graphics page, int xCoord, int yCoord){
int headSize = 150;
int eyeSize = 16;
int vertEyeOffset = 25;
int horizEyeOffset = 30;
page.setColor(Color.YELLOW);
page.fillOval(xCoord-headSize/2, yCoord-headSize/2, headSize, headSize);
page.setColor(Color.BLACK);
page.fillOval(xCoord-eyeSize/2-horizEyeOffset, yCoord-eyeSize/2-vertEyeOffset, eyeSize, eyeSize);
page.fillOval(xCoord-eyeSize/2+horizEyeOffset, yCoord-eyeSize/2-vertEyeOffset, eyeSize, eyeSize);
page.drawArc(xCoord-50, yCoord-25+20, 100, 50, 190, 160);
page.drawArc(xCoord-50, yCoord-40+20-5, 100, 80, 200, 140);
}
}