Notice: This material is excerpted from Special Edition Using Java, ISBN: 0-7897-0604-0. The electronic version of this material has not been through the final proof reading stage that the book goes through before being published in printed form. Some errors may exist here that are corrected before the book is published. This material is provided "as is" without any warranty of any kind.
by Jay Cross
No matter how well you know the fairly simple rules of the game 'Chess', you can not be very good at it without playing the game. Likewise, there is something reassuring about creating your own simple application to be certain that you really do have a grasp of a computer language.
Though Java is a fine object oriented language in its own right, it has come to prominence because of its usefulness in creating applets that can be run by any browser that supports Java. In this chapter we explore the creation of applets, and examine the obvious and subtle uses of Java's language and packaged features used by these applets.
In chapter 15 you learned the basics of applet construction. In this chapter you will look at three real applets, starting with a complete Hello World applet. Create a file called HelloMudvilleApplet.java with your favorite text editor, and copy listing 16.1 into it.
Listing 16.1-HelloMudvilleApplet.java source code
import java.awt.Graphics;
import java.awt.Color;
import java.awt.Font;
public class HelloMudvilleApplet extends java.applet.Applet {
Font f = new Font("Ariel", Font.BOLD, 24);
Public void paint(Graphics g) {
g.setColor(Color.blue); // Set the color
g.setFont(f); // Set the font
g.drawString("Hello Mudville!", 10, 60);
} /* end of paint method */
} /* end of HelloMudvilleApplet */
The first thing that you need to do in any java file, including this one, is to import any class files you wish to use from other packages. You can use these classes to reduce the amount of programming you need to do. In HelloMudville you need to import three classes from the java.awt package: Graphics, Color, and Font. Color and Font will be used to change the attributes of the text for "Hello Mudville". Graphics will be used to actually paint the text "Hello Mudville" onto the screen. After you have taken care of the administrative duties of importing other classes, the next thing to do is declare the class definition for HelloMudvilleApplet.
public class HelloMudvilleApplet extends java.applet.Applet {
HelloMudville is created as a public class. All applets must be declared to be public, or the browser won't be able to actually add the applet to the page. Next, note that all applets must extend java.applet.Applet.
The next step in an applet is to declare the class variables. For HelloMudville there is one variable called f. You can use f to change the font type used to display "Hello Mudville" much the same as you would change the font in a word processor. .
Once all the variables have been declared you can start declaring the methods. The only method in HelloMudvilleApplet is paint. It overrides the paint method from Applet, and is called any time your HelloMudville applet needs to be drawn on the screen.
Listing 16.2-The paint method for HelloMuddvilleApplet
public void paint(Graphics g) {
g.setColor(Color.blue); // Set the color
g.setFont(f); // Set the font
g.drawString("Hello Mudville!", 10, 60);
} /* end of paint method */
The first thing the paint method does is set the Color to blue, and change the font. In this case the font is set to f, the font variable we specified earlier. Finally, the paint method draws the string "Hello Mudville" to the screen.
Notice, that when the color and font are set, you are actually setting the attributes of g, a Graphics object. Once you have used the setColor method on a Graphics object, any thing you draw in that screen afterwards will be in that color. After the setFont method all text drawn to that graphic would be in the new font. However, if for some reason you had two Graphics objects the only one effected by this change would be g if you went to draw to the other object it would be in the old color and font.
With all the code in place, compile the HelloMudville applet with javac. To do this type:
javac HelloMudvilleApplet.java
In order to compile a Java application you must have the JDK installed.
To view the applet, you need to create an HTML file. For this applet, create a file called HelloMudville.html and copy the text from listing 16.3 into it:
Listing 16.3-HTML file for use with HelloMudville Applet <HTML> <HEAD> <TITLE>The Hello Mudville Applet:</TITLE> </HEAD> <BR> <APPLET CODE="HelloMudvilleApplet.class" WIDTH=300 HEIGHT=60> Does your browser support Java? </APPLET> </BODY> </HTML>
Now, you can run the applet using the appletviewer or Netscape. To load the applet in Netscape you will need to open the file HelloMudville.html as shown in figure 16.1. Don't open the HelloMudvilleApplet.class or HelloMudville.java files, that won't work.
Fig. 16.1 HelloMudville as seen from the Netscape Navigator
To view the HelloMudville applet with appletviewer as seen in figure 16.2 type:
appletviewer HelloMudville.html
Fig. 16.2 HelloMudville as seen from appletviewer.
Java can be used to do nearly anything that can be done with a computer. On the other hand, you may not want to go to the trouble to create an applet that does something much more easily done some other way. For example, HTML (HyperText Markup Language) already provides an excellent and easy facility for displaying static text. HTML easily accomodates displaying static images, loading text files, running applications such as ftp, or collecting user information through static forms.
Java is especially good for handling moving, or highly interactive components of Web page. Java applets can also be very simple, as seen above. If you are new to object oriented programming you should probably start small. As a beginner you would probably benefit from studying the source code of as many applets as you have time for, looking for techniques to handle common situations.
The following applet shown in listing 16.4 was written by Arthur van Hoff as a simple example of a Java applet. This one is a bit more complex than the "HelloMudville" applet above. It shows a few more techniques that make up useful applets.
Production--the below source code may be switched at pages. Please leave this marker in so I know where to find it. Thanks. EB
Listing 16.4-Blink.java-Source code for Blink applet
import java.awt.*;
import java.util.StringTokenizer;
public class Blink extends java.applet.Applet implements Runnable {
Thread blinker; // declare an uninitialized Thread
String lbl; // declare an uninitialized String variable
Font font; // declare an uninitialized Font object
int speed; // declare a 32 bit integer speed = 0
public void init() {
// The font is not a runtime parameter.
font = new java.awt.Font("TimesRoman", Font.PLAIN, 24);
// get the blink speed from HTML or set to default.
String att = getParameter("speed");
speed = (att == null) ? 400 : (1000 / Integer.valueOf(att).intValue());
// get the text to display from HTML or set to "Blink"
att = getParameter("lbl");
lbl = (att == null) ? "Blink" : att;
}
public void start() {
blinker = new Thread(this);
blinker.start();
}
public void paint(Graphics g) {
// declare and initialize some variables.
int x = 0, y = font.getSize(), space;
int red = (int)(Math.random() * 50);
int green = (int)(Math.random() * 50);
int blue = (int)(Math.random() * 256);
Dimension d = size();
// set Font and Color, and get letter sizes.
g.setColor(Color.black);
g.setFont(font);
FontMetrics fm = g.getFontMetrics();
space = fm.stringWidth(" ");
// go through a loop to place the words, and
// set their color.
for (StringTokenizer t = new StringTokenizer(lbl) ; t.hasMoreTokens() ; ) {
String word = t.nextToken();
// will the word fit on this line? If not, new line.
int w = fm.stringWidth(word) + space;
if (x + w > d.width) {
x = 0;
y += font.getSize();
}
if (Math.random() < 0.5) {
g.setColor(new java.awt.Color((red + y * 30) % 256, (green + x / 3) % 256, blue));
} else {
g.setColor(Color.lightGray); // invisible
}
g.drawString(word, x, y);
x += w;
}
}
public void stop() {
blinker.stop();
}
public void run() {
while (true) {
try {Thread.currentThread().sleep(speed);}
catch (InterruptedException e){}
repaint();
}
}
}
As with HelloMudville, the first thing that you need to do in the Blink applet is import the classes which you intend to borrow. With Blink, a number of the elements in the java.awt package are used, so rather than importing each of them individually, the entire package is installed, by importing java.awt.*
The variables declared for Blink, are very similar to those for HelloMudville, however we have added one significant one: Thread blinker. Since Blink will be doing more than displaying information once, we need to create a Thread in which to process our work.
The first method that Blink has is the init method. init is over ridden from Applet, and is called the first time the applet is started.
Usually, init is used to set up information specific about the applet. Blink's init method is no exception. Blink uses the init method to set the font variable, which in HelloMudville was set right with the variable instantiation. Next Blink retrieves information from it's HTML file. This is done with the getParameter method. As you will see in listing 16.5, the speed of the applet can be configured in the Web page. Using getParameter and the HTML file to set variables makes it possible to configure an Applet with out having to actually change the code, and recompile the applet each time.
In case the parameter is not actually placed in the HTML file, it is necessary to make sure that getParameter actually returned a value, and if not set it to a default value. This is what is what is accomplished in the line.
speed = (att == null) ? 400 : (1000 / Integer.valueOf(att).intValue());
If your familiar with C or C++ this line will make perfect sense to you. If not, this is what happens: speed is set to the value produced by the ? operator. The ? operator evaluates att==null (if no parameter is present getParameter will return null), and if it is true it will return the first parameter, so speed will be set to 400. If att==null is false, the ? operator will return the second parameter so speed will be set to 1000 divided by the value from the HTML file.
The second method in Blink is the start method. Once again start is over ridden from the Applet class. start is called each time your program is rerun. This happens each time a user leaves a Web page and comes back to it, as well as a number of other times. In Blink the only thing that is done in the start method is to create and start a Thread.
The third method in Blink is paint. paint is over ridden from Applet (are you seeing a pattern here?). The paint method in Blink is much more complicated from the one in HelloMudville. First, Blink's has half a dozen variables. These are used for various reasons through out the paint method. The variables x,y and space are used to position the text; red, green and blue are used to set the color of the text, and d stores the size of the applet, so your text won't run outside the boundary.
The most significant thing to happen occurs in the for loop. Here, the entire string is tokenized. In other words, each of the words in the string is broken out into it's own token.
A check is then made to make sure that the word won't go outside of the window. After all, you want to be able to see the entire word. The color is then set and the text is drawn to the screen.
The fourth method in Blink is stop. stop is called any time some one switches off of the web page. All stop actually does is stop the Thread for Blink. However, this is an important step, it is very irresponsible to have your applet continue to run when the user can't see it, and may not even return. Unless you have a really good reason not to, all applets should stop their Threads in the stop method.
The fifth and final method in Blink is run. run is an important method because it is where the actual processing for our Thread takes place. It is also the first one we have encountered which is not over ridden from the Applet class. run is however required for any class which implements Runnable. The run method of Blink is a very simple one. The run method simply goes to sleep for a time, and then calls repaint which in turn will cause the paint method to be called.
That is the end of the Applet source code. To try it, create the Blink.class file by compiling Blink.java using javac.
javac Blink.java
You must also create the HTML file. Copy the following into a file called Blink.html. This can then be viewed with either Netscape or appletviewer as seen in figure 16.3. Notice the string "Oh, somewhere . . ." This is the line that will be displayed by Blink. Right below that you should see the <param> tag for speed which was discussed when you looked at the init method.
Listing16.4-HTML file for use with Blink. **listing 16.4: Blink.html** <title>Blinking Text</title> <hr> <applet code="Blink.class" width=300 height=100> <param name=lbl value="Oh, somewhere in this favored land the sun is shining bright; The band is playing somewhere, and somewhere hearts are light."> <param name=speed value="4"> </applet> <hr> <a href="Blink.java">The source.</a>
Fig. 16.3 Blink as seen when run from Netscape
The applet liveButton shown in listing 16.5 is a bit more complicated applet. The liveButton applet pays attention to such things as, when the mouse moves into the field of view of the applet. The mouse button being clicked on the applet, or the mouse being dragged across the applet (with the button down). It is also an example of how data can be changed at any time, and needs to be synchronized.
Listing 16.5-liveButton.java
/* ----------------------------------------------------------------
* liveButton , Copyright (c) 1995 MagnaStar Inc, All Rights Reserved.
* Permission to use, copy, modify, and distribute this software and its
* documentation for NON-COMMERCIAL purposes and without fee is hereby
* granted, provided that this copyright notice and appropiate documention
* appears in all software that contains this code, or is derived from it.
*
* MagnaStar Inc. MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT THE
* SUITABILITY OF THE SOFTWARE, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT
* LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
* PARTICULAR PURPOSE, OR NON-INFRINGEMENT. MagnaStar Inc. SHALL NOT BE LIABLE
* FOR ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT OF USING, MODIFYING OR
* DISTRIBUTING THIS SOFTWARE OR ITS DERIVATIVES.
*
* You may reach MagnaStar Inc. at info@magnastar.com
* P.O. Box 70, Waupun, WI 53963
*
* For more information see:
* http://www.magnastar.coma */
import java.awt.*;
import java.applet.*;
import java.net.URL;
public class liveButton extends java.applet.Applet implements Runnable {
//Normal is the image which is displayed normally
Image Normal;
//Live is the image which moves, once the mouse first enters the applet
Image Live;
//theSound is a sound that is played the first time the mouse enters the applet
AudioClip theSound;
//status is true when the mouse is in the button area
boolean status;
//Tracker is used to monitor the loading of the images
MediaTracker Tracker;
//This thread is where we process the animation
Thread thisThread;
//locationX,locationY, goDown and goRight track the live image
int locationX=0,locationY=0;
boolean goDown=true, goRight=true;
public void init(){
String param;
status=false;
Tracker = new MediaTracker(this);
//Get the normal gif, by default we will take Normal.gif
param=getParameter ("normal");
if (param==null)
Normal=getImage(getDocumentBase(),"Normal.gif");
else
Normal=getImage (getDocumentBase(),param);
Tracker.addImage(Normal,0);
//Get the live gif, but default we will take Live.gif
param=getParameter ("live");
if (param==null)
Live=getImage(getDocumentBase(),"Live.gif");
else
Live=getImage (getDocumentBase(),param);
Tracker.addImage(Live,1);
//Get the sound byte, by default it is welcome.au
param=getParameter("sound");
if (param==null)
theSound=getAudioClip(getDocumentBase(),"welcome.au");
else
theSound=getAudioClip(getDocumentBase(),param);
}
public void start(){
thisThread = new Thread(this);
thisThread.start();
}
public synchronized void paint(Graphics g){
g.drawImage(Normal,0,0,size().width,size().height,null);
if(status)
g.drawImage(Live,locationX,locationY,null);
}
public void update(Graphics g){
paint(g);
}
public void stop(){
thisThread.stop();
}
public synchronized boolean mouseEnter(Event e,int x, int y){
if (!status){
status=true;
theSound.play();
}
repaint();
return false;
}
public synchronized boolean mouseDown(Event e,int x, int y){
locationX=x;
locationY=y;
return true;
}
public synchronized boolean mouseDrag(Event e,int x, int y){
if(x>locationX)
goRight=true;
else
goRight=false;
if(y>locationY)
goDown=true;
else
goDown=false;
locationX=x;
locationY=y;
return true;
}
public void run(){
//start all the images downloading
while (!Tracker.checkAll(true)){
repaint();
try{
thisThread.sleep(100);
} catch(Exception e){}
}
repaint();
//once the images have been loaded go through the following loop to animate
//the Live image if the mouse is over the button
while (true){
if (status){
if (goDown){
if((locationY+=3)>(size().height-Live.getHeight(null)))
goDown=false;
}
else{
if ((locationY-=3)<0)
goDown=true;
}
if (goRight){
if((locationX+=3)>(size().width-Live.getWidth(null)))
goRight=false;
}
else{
if((locationX-=3)<0)
goRight=true;
}
repaint();
}
try{
thisThread.sleep(50);
}catch(Exception e){}
}
}
}//end class liveButton
As with the rest our applets, the first thing that liveButton does is import several classes. Notice that, like Blink, liveButton imports whole packages of classes. This eliminates the need to specify each and every class from a particular class which you want to add. However, it does slightly increase the load on the virtual machine because it must keep track of all of them, even the ones which are not in use. Because of this, since only one class is used from the java.net package, liveButton only imports java.net.URL rather than the entire package.
liveButton declares a number of variables for the class. The advantage of declaring variables in the class scope, is that they can be used by any of the methods directly. However, it is also a good idea not to abuse this technique.
The init method for liveButton is very similar to the one you looked at from Blink. Several variables are fixed based on parameter values in the HTML file. However, in the case of liveButton these values are the names of graphic and sound files. These names can not be used directly though, they must be converted into a URL. Take a look at a snippet from the init method shown in listing 16.6.
Listing 16.6-Code snippet from init method of liveButton
param=getParameter ("normal");
if (param==null)
Normal=getImage(getDocumentBase(),"Normal.gif");
else
Normal=getImage (getDocumentBase(),param);
Tracker.addImage(Normal,0);
In the Blink example, since all that you were getting from the <param> tag was the string which you would display, there was not much that you did with it in the init. In this case, you want to actually get the image which is specified by the parameter. To do this the getImage method from Applet is called.
So what is the getDocumentBase() doing in there? Well, the odds are you don't want to have to type the complete URL for the image in the HTML file. Why not use the relative URL of the HTML page? getDocumentBase() allows you to do just that. By using getDocumentBase() in conjunction with the file name, you can type:
<param name=normal value="MyGif.gif">
Rather than having to type:
<param name=normal value="http://www.mycorp.com/theDoc/dir/MyGif.gif"> The paint method for liveButton is actually much simpler than that for Blink, since much less is done here. The background image (Normal) is drawn, and then the Live image is drawn on top of it. The next method after paint is update. update works much the same as paint. However, there are two important differences. First, paint is called each time the applet appears for the first time, or is partially revealed (such as when you page up and down on a Web page, and part of the applet disappears). update is called every other time the applet needs to be painted (for "update" changes). By default update clears the applet and then calls paint. The problem with this is that it causes a really nasty flicker. To over come this, liveButton over rides the update method from applet, and with out erasing the panel, calls paint.
If you look down a few more methods from update, you will see several methods called mouseEnter, mouseDown and mouseDrag. Each of these methods is called when an appropriate action occurs. In the case of mouseDown this is called each time the mouse button is pressed with in the applet, mouseDrag is called each time the mouse is moved with the mouse button down. mouseEnter is called each time the mouse arrow enters the Applet. The mouse button does not need to be pressed in order for mouseEnter to be called. However, for a reason which I'm sure made sense to Sun, each time the mouse button is pressed, before mouseDown is called, the mouseExit and mouseEnter methods are called too. While this is occasionally useful, more often it means you can not do as much with the mouseEnter method as you might like to.
Each of the mouse methods cause something to happen to the live image. Before the mouse first enters the applet, the live image is not even drawn (go back and look at the paint method). When the mouse button is pressed the live image moves to where the user has clicked, and as the mouse is dragged the image follows. So what is the key word synchronized doing in the declaration for each of these methods? Since all these methods are changing information, it is important to make sure that they don't change it while paint is trying to use it. In the case of liveButton, changing information in the middle of the paint would not really cause much of a problem, however in bigger applications it can cause chaos.
The last method for liveButton is run. As with all Runnable classes, run is the method where all the work must take place. The liveButton run method is no different. The first thing that is done in the run method is a block that looks like this:
//start all the images downloading
while (!Tracker.checkAll(true)){
repaint();
try{
thisThread.sleep(100);
} catch(Exception e){}
}
This block has been added to illustrate the use of the ImageTracker. In Java, when the getImage method is called (as you did back in the init method) the Image is not actually downloaded immediately. The system actually waits until the graphic is needed before it starts to download it. In addition, even after it is drawn, there is no guarantee that it is all there. To handle this situation, the MediaTracker class was added to the java.awt package. You actually created a MediaTracker object called Tracker back in the init method, but we didn't talk about it there. In the run method you will use the Tracker object to find out when all of the images have completed loading. Until they all have loaded, you keep repainting, which has the effect of redrawing the image onto the screen as it loads.
Once, all the images have been loaded, the run method enters a loop where it moves the Live image around. This is mostly a logical event, so it is left to you to muddle through it except for one thing. If you look into the loop, you will see two references to Live.getHeight(null) and Live.getWidth(null). Live is an Image, and to obtain it's height and width you need to use these methods from the Image class. However, if you had not waited for all the images to be completely loaded, there is a chance that the height and width would not be available. In this case the method would return a -1. Because this can happen (image information being requested, when it's not yet available) there is an interface called ImageObserver which can be used to monitor the state of the image as it downloads. It is important to realize what the null parameter is doing in ImageObeserver. You are telling the method that you don't want to be informed when the height and width information is available, and it should be sent to no one (null). You can do this because we already know the graphics are available, and so should their information. However, this will not always be the case in your own applets.
To compile the liveButton applet, once again you must use javac.
javac liveButton.java
The HTML file for liveButton is shown in listing 16.7. Aside from the different parameter names, the HTML file for liveButton is almost exactly the same as the one you created for Blink.
Listing 16.7-HTML file for use with liveButton applet <applet code="liveButton.class" width=424 height=99> <param name=normal value="banner.gif"> <param name=live value="sunbrst.gif"> <param name=sound value="welcome.au"> <param name=link value="http://www.magnastar.com"> </applet>
Fig. 16.4 liveButton as seen when run from Netscape on a UNIX machine.
For technical support for our books and software contact support@mcp.com
Copyright ©1996, Que Corporation