If you are not familiar with the use of HTML (Hypertext Markup Language) for creating Web pages, you should pick up a book on HTML to get an idea of how this markup works. And even if you are an expert in HTML, you may not have seen the HTML extension that Sun Microsystems has created to support Java applets on Web pages. So, in this article, you not only will have the chance to see Java applets up and running but also will learn how to add them to your Web pages.
The Sample Java Applets
The Java Developer's Kit (JDK) includes many sample applets that you can test in your Web pages. (The HotJava browser, too, comes with a few of these sample applets.). As soon as you install the JDK, you're will ready to start experimenting with Java applets. In this section, you will use the Appletviewer tool-which comes with the JDK-to get a quick look at some applets. A following section, "Adding Applets to an HTML Document," will show you how to add an applet to a Web page.
The Appletviewer Tool
The truth is that you can write and run applets without even having a Java-compatible browser. This is thanks to the Appletviewer tool that comes as part of the JDK. Appletviewer is a Windows application (unless you're using a non-Windows version of the JDK) that you run from a DOS command line. Part of the command line is the applet that you want to run. When Appletviewer appears, the applet appears in the viewer's main window.
To run the Appletviewer application, first bring up an MS-DOS window by selecting the MS-DOS Prompt command from Programs on the Start menu. Then, switch to the folder containing the applet you want to run and type the command line C:\JAVA\BIN\APPLETVIEWER DOC.htmL.
In the preceding command line, DOC.htmL is the name of an HTML document that contains the tag for the applet you want to see.
Example: Running TicTacToe
Suppose you want to run the TicTacToe demo applet that comes with the JDK. To do this, just follow these steps:
- Select the Start/Programs/MS-DOS Prompt command. The DOS window appears.
- Change to the directory containing the TicTacToe applet
- Type the command line C:\JAVA\BIN\APPLETVIEWER EXAMPLE1.htmL.The
Appletviewer runs, loading and displaying the TicTacToe.
- Now that you have the applet started, try a few games of TicTacToe against the computer. To place an X, click the square you want. You'll quickly discover that the computer player is as dumb as yogurt. Let's just say that you don't have to be a rocket scientist to win.
If you want to avoid typing the full path name for Appletviewer every time you run it, type the command PATH=C:\JAVA\BIN at the MS-DOS prompt to add Appletviewer's directory to your path. (Of course, if you've installed the JDK somewhere else on your hard drive, you'll have to use a different path in the command.) After you type this command, MS-DOS will be able to find Appletviewer without your having to type the full path. For example, you'll be able to run TicTacToe by switching to the TicTacToe directory and simply typing APPLETVIEWER EXAMPLE1.htmL. You can also add Appletviewer's path to the PATH statement in your AUTOEXEC.BAT file and thus avoid having to type it in by hand every time you start your system and want to use Appletviewer.
The Animator Applet
Another applet that demonstrates some interesting facets of Java programming is the Animator applet, which not only displays various animation sequences, but also plays sound effects simultaneously. To run the Animator applet, switch to the C:\JAVA\DEMO\ANIMATOR folder and type the command line APPLETVIEWER EXAMPLE1.htmL. (The previous command line assumes that you've set your path to the JAVA\BIN directory.). (Yep, it's the ubiquitous Duke, waving at you from his very own applet.)
Animator is an example of a configurable applet. That is, by modifying the HTML tag that loads and runs the applet, the user can display his or her own custom animation sequence and sound effects. For now, though, it's enough for you to know that Java is capable of adding both animation sequences and sound effects to your Web pages.
If you'd like to see what the applet's HTML tag looks like, select Appletviewer's Applet,Tag command.
The BarChart Applet
BarChart, another configurable applet, is especially useful when you need to graphically display data values in a Web page. To check out BarChart, switch to the JAVA\DEMO\BARCHART folder and type the command line APPLETVIEWER EXAMPLE1.htmL.
Because BarChart is configurable, you can create all sorts of different bar charts in your Web pages just by specifying different parameters in the applet's HTML tag. As you can see, applets can be powerful tools for creating dynamic and useful Web pages. (Try out Appletviewer's Applet,Tag command to see the code that specifies how the bar chart appears.)
Other Demo Applets
The DEMO folder contains many sample applets that you can experiment with using Appletviewer. All of the demo applets are run from HTML documents with names such as EXAMPLE1.htmL, EXAMPLE2.htmL, and so on. All demo applets have at least the EXAMPLE1.htmL document, while others have additional examples. To run any demo applet, change to the applet's folder and type APPLETVIEWER EXAMPLE1.htmL (assuming that you've set your path to the Appletviewer application). Use the DIR command to display the contents of an applet's directory in order to discover whether the applet features additional example HTML files.
Remember that the HotJava browser cannot load and run newer applets like those that come with the latest version of the JDK.
Adding Applets to an HTML Document
If you've created Web pages before, you know that you use HTML to create a template for the page. The commands in the template tell a Web browser how to display the Web page. When Sun Microsystems developed Java, they also had to come up with an extension to HTML that would enable Web pages to contain Java applets. That extension is the <applet> tag, which Sun Microsystems defines as shown in Listing 1.
Listing 1: The <applet> Tag Definition.
In the preceding tag, the text in normal characters is typed literally; the text shown in italics is replaced by whatever is appropriate for the applet you're including in the document. As you can see, the <applet> tag is similar to other HTML tags with which you may be familiar. For example, the tag starts with <applet attributes> and ends with </applet>, which is not unlike the format of other HTML tags. The first and last lines are required. Other lines in the tag are optional.
The attributes section of the <applet> tag contains important information about the tag, including the associated .CLASS file and the Applet's width and height. The last line tells the browser that it has reached the end of the tag. You can load and run the TicTacToe applet, for example, with the <applet> tag shown in Listing 2.
Listing 2: A Tag for Loading and Running TicTacToe.
In the preceding example, the code attribute is the name of the .CLASS file for the applet. The .CLASS file holds the applet's byte-code representation, which can be run by the Java interpreter. The width and height attributes control the size of the applet.
The TicTacToe tag above is the simplest <applet> tag you can write. That is, the code, width, andheight attributes are all required, as is the final </applet> line.
Optional Attributes for Applets
There are several optional attributes you can use with the <applet> tag. The first is codebase, which specifies the applet's base folder or URL (Uniform Resource Locator). This folder or URL is used in combination with the file specified in the code attribute to find the applet's code. In the case of a folder, the codebase attribute is relative to the location of the HTML document containing the applet's tag. In Listing 2, because the codebase attribute is missing, the Web browser will look for the applet's files in the same folder as the HTML document. The <applet> tag in Listing 2 looks like Listing 3 when using the codebase attribute. (Don't try to use run this HTML code, as it's only an example of the attribute's format and may not run.)
Listing 3: Using the codebase Attribute.
The preceding tag tells the browser that the TicTacToe.class file is located in a folder called TICTACTOE. This folder must be on the same level in the directory tree as the HTML file. That is, if the HTML file is in the folder JAVA\DEMO, then the path for the .CLASS file should be JAVA\DEMO\TICTACTOE\TicTacToe.class. You can also use an URL, such as http://www.provider.com/my_pages/tictactoe, for the codebase attribute. This causes the applet to be loaded from the specified site.
Other optional attributes you can use with the <applet> tag are alt, align, name, hspace, and vspace. The alt attribute enables you to specify text that will be displayed by text-only browsers, whereas the name attribute gives the applet a symbolic name that's used to reference the applet (used when you need to communicate between applets).
The align, hspace, and vspace attributes all work together to position the applet within the text flow of the HTML document. These attributes work exactly as they do with the <img> tag that's used to display images in Web pages. The align attribute can be one of these values: left, right, middle, absmiddle, bottom, absbottom, baseline, top, or texttop. The hspace and vspace attributes control the amount of white space around the applet when align is set to left or right.
Listing 4 shows the script for a simple Web page using the <applet> tag.
Listing 4: A Simple HTML Document Using the <applet> Tag.
This is a bunch of text whose sole purpose is to demonstrate the placement
alt="This is the TicTacToe applet."
of the TicTacToe applet within the text flow of an HTML document.
To load an HTML document into a browser, select the File, Open File command or press Ctrl+O. Then select the file in the dialog box that appears.
As you know, many Java applets are configurable, meaning that the applet user can specify certain values that the applet will use when it starts. A good example is the BarChart applet you saw earlier in this article. When you need to specify parameters for an applet, you use the <param> tag. The <param> tags, one for each parameter you want to set, are placed after the starting <applet> tag and before the ending </applet> tag. For example, Listing 5 shows parameters being set for the BarChart applet.
As you can see from the listing, each parameter has two parts, the parameter name and the value to which it should be set.
Listing 5: Using Parameters with Applets.
<param name=title value="Sales">
<param name=orientation value="vertical">
<param name=scale value="5">
<param name=columns value="3">
<param name=c1_style value="solid">
<param name=c1 value="10">
<param name=c1_color value="blue">
<param name=c1_label value="Jan">
<param name=c2_style value="solid">
<param name=c2 value="12">
<param name=c2_color value="green">
<param name=c2_label value="Feb">
<param name=c3_style value="solid">
<param name=c3 value="15">
<param name=c3_color value="red">
<param name=c3_label value="Mar">
You may wonder what happens when a browser that's not Java-compatible finds an applet in an HTML document. In this case, as is standard behavior for browsers, the non-Java browser simply ignores the tags it doesn't recognize. However, you may want to provide a more user-friendly response to users who are trying to view your applets with non-Java browsers. You can do this easily by placing alternate content right before the ending </applet> tag. Listing 6, for example, shows the HTML script for running the TicTacToe applet with alternate content for browsers that don't support Java.
Listing 6: Supplying Alternate Content for TicTacToe.
<b>If you had a Java-compatible browser,
you'd be playing TicTacToe right now!</b>
The alternate content you provide can comprise any standard HTML commands and is ignored by Java-compatible browsers. That is, the alternate content appears only in non-Java browsers.
Example: A Java-Powered Home Page
In the previous example, you saw a sample HTML document that contains an applet. Now you'll use what you've learned to create your own "appletized" home page. To do this, you must first write your home page's HTML file. Then you must set your browser's home-page property, which determines the document the browser displays at startup. Just follow the steps below to accomplish these tasks:
1. Create a folder called HOMEPAGE in your C: drive's root directory.
2. Type Listing 3 and save it as an ASCII file called HOMEPAGE.htmL in your HOMEPAGE directory.
3. Copy the entire TICTACTOE folder (not just the folder's contents) from your JAVA\DEMO folder to your HOMEPAGE folder.
4. Start up your browser, and click browser’s stop button to stop loading the currently set home page.
5. Select Options, General Preferences from browser's menu bar.
6. Enter C:\HOMEPAGE\HOMEPAGE.htmL into the Start With text box.
7. Click the Home button to load your new TicTacToe home page.
Listing 7: An HTML Script for a Home Page.
<title>My Home Page</title>
<h1>The TicTacToe Home Page</h1>
This may be a dumb home page, but it gives
you a chance to play the TicTacToe applet
every time you start your browser!<h>
alt="This is the TicTacToe applet."
The TicTacToe applet seems to respond slowly to mouse clicks at first. If the applet doesn't respond right away, try moving your mouse pointer off the applet.
This trick wakes things up most of the time.