您的位置：寻梦网首页＞编程乐园＞HTML园地＞HOME page制作初步
Writing HTML | About | FAQ | References | Tags | Lessons | previous | next |

29e. Small Cup of Java (to go)

cup of coffee J A V A
Just a small cup, I need to watch my caffeine intake. Oh yes, it does energize me, but I also get the shakes... in my web page? Of course, why not? Everyone uses it..."

Objectives

After this lesson you will be able to:

  • Identify the benefits of using Java applets
  • Describe the issues related to using Java in your web page
  • Write the HTML to insert a Java applet into your web page
  • Write the HTML to display a message if a visitor to a site cannot view a Java applet
  • Create a framed page that uses JavaScript to dynamically create the HTML for the Java applet

Lesson

The promise of Java, when introduced by Sun Microsystems in the early 1990s, was huge and some may say, "hyped". In about as brief as we can try to state it, Java is a new programming langauge that allows someone to create applications, or "applets" that can run on any system, any place, that supports the "Java Platform":

With JavaTM technology, you can use the same application from any kind of machine -- a PC, a Macintosh computer, a network computer, or even new technologies like Internet screen phones.

So a Java applet does not need any extra software to run, when it is requested, all of its functional pieces are sent over a network to whomever/whatever requested it, and then the Java runtime technology on the receiving end then runs it.

For more about Java, see http://java.sun.com/

media type: java
what it does well: tools, data manipulation, charts and graphs, interactive navigation controls, dynamic text, image alteration effects.
issue to consider rating comments
"hurdle" or barrier for creating media low high
----		 To build your own Java applets you must have an understanding of the programming language or have access to some of the visual type application builder tools. There are, however, many online repositories of Java applets that you can download and use.
"breadth" of audience that can view media narrow wide
----		 Java is well-supported on most web browsers beyond version 3.x, although it tends to run more slowly and less reliably on Macintosh computers. There can be a long delay and an empty white space while the browser reads "Java loading"
bandwidth consumption low high
----		 Quite variable as it depends on the type of interaction and the complexity of the task performed. When a page includes a Java applet, it must download anywhere from a few to 30 or more small files all of which must be received before the page is functional.

As we mentioned in lesson 27, despite the name similarity, Javascript-- a browser scripting language, is quite different from Java, a computer programming language. JavaScript is literally interpreted line by line as the browser accesses it. Java applets are written as line computer code which is then "compiled" or converted to a run-time application. A compiled application can be more powerful, secure, and faster than interpreted script, but is also more complex to create.

Unfortunately, beyond a number of well-integrated uses of Java, the most common use you will find on the web is a Java applet to display a scrolling banner of text, which may roll horizontally or vertically (see lesson 17 for our thoughts on this!), or the common effect of adding ripples to an image.

Like we saw in our previous lesson on Shockwave, the Java files tend to be closed black boxes that we do not even worry about how they work. With some applets we can alter or control their functions through information we send the applet from our HTML code.

This lesson will not cover the creation aspects of Java programing, but will show you how to add an existing applet to your web site.

The simple HTML code for including a Java applet is


  <APPLET CODE=MyApplet.class WIDTH=XX HEIGHT=YY>
  </APPLET>

where MyApplet.class is the file name of a compiled Java applet file, and WIDTH and HEIGHT are the pixel dimensions that the applet occupies on screen. Quite often, you may include other information that are sent to the applet via parameters:


  <APPLET CODE=MyApplet.class WIDTH=XX HEIGHT=YY>
  <param name="param1" value=my1Value>
  <param name="param2" value=my2Value>
  </APPLET>

where each parameter has a name the applet is looking for and some value, which may be a string of text or a number:


  <APPLET CODE=MyApplet.class WIDTH=XX HEIGHT=YY>
  <param name="param1" value="The Meaning of Life is Cheese;
  <param name="param2" value=129;
  </APPLET>

Finally, you can include text that will be displayed only if the web browser does not support Java (remember, the browser will ignore anything inside tags it does not understand), similar to using the ALT option for <img ...> tags (lesson 7a) or the <NOFRAMES> tag for frames (lesson 26).


  <APPLET CODE=MyApplet.class WIDTH=XX HEIGHT=YY>
  <param name="param1" value=my1Value>
  <param name="param2" value=my2Value>
  Sorry, but it looks as thought your web browser cannot 
  display this cool Java applet.
  </APPLET>

So any string of text inside the <APPLET>...</APPLET> tags is ignored by a Java-enabled browser since it is not written as am applet tag or a parameter tag) and is the only portion displayed for a Java-disabled web browser.

Adding Java

Note: If you do not have the working documents from the previous lessons, download them now.

In this lesson we are going to use a Java applet that allows us to send it an image file, and in our web page, allow the viewer to zoom in and out. The pictures we are going to use are of volcanic rocks taken with a special microscope that allows us to see the minerals and structures in the rock. In our web page, we can use the Java applet to act like a virtual microscope.

The Java applet used here is called "ImageZoom" and more information is available from http://www.vivaorange.com/ImageZoom/. This applet is free for non-commercial use (we found it from using one of the Java resource sites listed below).

The general HTML for using this applet is:

<applet code="ImageZoom.class" width="[width]" height="[height]">
  <param name="IMAGE" value="[image file]">
  <param name="ZoomLevel" value="[zoom level]">
  <param name="PanSpeed" value="[speed]">
  <param name="Cursor" value="[cursor]">
  <param name="Preload" value="[preload]">
</applet>

where:

  • [width] is the width of the image in pixels
  • [height] is the height of the image in pixels
  • [image file] is the file location of the image file
  • [zoom level] is the number of zoom levels allowed, from 1 to 10
  • [speed] is the speed of moving when the image is panned, from 1 to 10.
  • [cursor] is the type of cursor; 1=a hand cursor and 2=a cross-hair cursor
  • [preload] is the preload mode for faster image zooming. Value is either 襉N" or OFF"

The applet file, ImageZoom.class itself is only 5k in size, and the image it uses is read in as a parameter, as well as the other options listed above. Check the source web site for more information about this applet.

  1. First create a new folder/directory in your workspace named scope
  2. Go to the Lesson 29e Image Studio to download four images taken from a petrographic microscope. Save these inside your scope folder.
  3. Now you will have to get a copy of the applet file.

    1. To do this you will need to access the "secret" menu by either right mouse clicking (Windows, Unix) or clicking and holding the mouse down (Macintosh) on this link to the Java Applet file (ImageZoom.class) until you see a pop-up menu.
    2. From the menu that appears, select Save this Link As... or Save Target As...
    3. When a dialog box appears, be sure to select Source if there is menu labeled Format
    4. Save it as a file named ImageZoom.class inside your scope folder


  4. Create a new file in your text editor, name it javascope.html, and save it in your scope folder

  5. Enter the following HTML in this new file: 
    <html>
<head>
  <title>Java Microscope</title>
</head>
<body bgcolor="#000000" text="#EEEEEE">
<center>
<applet code="ImageZoom.class" width=400 height=265 vspace=14>
    <param name="IMAGE" value="pw_vis.jpg">
    <param name="ZoomLevel" value="6">
    <param name="PanSpeed" value="4">
    <param name="cursor" value="1">
    <param name="Preload" value="on">
Sorry, but your web browser cannot load this Java Applet :-(
<p>Here at least is a picture of the sample:<br>
<img src="pw_vis.jpg" width=400 height=265><p>
</applet>
<font face="verdana,helvetica" size="2">
<br>BISHOP TUFF: Partly Welded (Visible Light)
click to zoom, move mouse to edge to pan
</center>
</body>
</html>
    NOTE: We are only using one of our image files here; later we will show you a more dynamic way to use this applet. We have also added a parameter vspace in the applet tag to allow for 14 pixels of vertical "padding" above and below the applet on the page. (This is similar to what we did with images in lesson 20)

    The width and height of the images file are 400 pixels wide and 265 pixels high. We set the other parameters to have 6 levels of zooming, a panning speed of 4, and the cursor option to use a hand cursor. Also note the text we inserted inside the applet tag to provide feedback if the person vising this site does not have a Java enabled browser. This way, they at least can see the content, even if they cannot zoom in on the image. You can test this if you look in your web browser preferences and find the option to turn Java off (be sure to turn it back on!).

    Also, on some computers (especially Macintosh computers), Java applets quite often will convert the cursor used in NetScape even when you are finished with the applet.
  6. Save and Load this html file in your web browser. Verify that the Java applet loads and plays. Click on the image several times to see that it enlarges the image and then move the cursor to an edge (you may have to leave it there a few seconds) to verify that the image "pans" or slides across the viewing region.
NOTE: If your web page does not work as expected, compare your HTML to the source of the example page.

We now have seen how to load the ImageZoom applet with a defined image so you can zoom and pan as if you were using a microscope (actually the image would be much more clear at high magnifications on a real microscope; on the computer we are simply enlarging it and we start to see the artifacts of square image pixels).

But we can do something more flexible by using some JavaScript to dynamically create the HTML for the applet, allowing us to choose from a series of images to load in the applet. For more on this aspect of JavaScript, review lesson 27b. To set this up, we are going to create a framed web page (see lesson 26) that will look like:

"stage" frame

content and applet are displayed here
"controls" frame

drop down menu and JavaScript code write content to the top frame
  1. Create a new file in your text editor, name it index.html, and save it in your scope folder
  2. Write this HTML in this new file to create the frameset page (refer to lesson 26 if you need a refresher on frames) 
    <html>
<head>
    <title>Volcanic Rock Microscope</title>
</head>
<frameset rows="*,70" border=0>
    <frame src="stage.html" name="stage" 
           marginheight="12" marginwidth="12" 
           scrolling="auto" noresize>
           
    <frame src="controls.html" 
           marginheight="8" marginwidth="8"
           scrolling="no" noresize>
</frameset>
<noframes>
<h2 align=center>NOTE: This site uses frames, but apparently 
your browser does not support this feature.</h2> 
</noframes>
</html>
    NOTE: This sets up a framed web page that has a bottom frame 70 pixels high and the top frame uses the rest of the window space. Also note the parameters marginheight and marginwidth that allows you to define the amount of "padding" or extra space between the content of a frame and its edge.
  3. Save this html file.

  4. Create a new file in your text editor, name it stage.html, and save it in your scope folder. This is the page loaded in the top frame.
  5. Write this HTML in this new file: 
    <html>
<head>
    <title>Microscope Stage</title>
</head>
<body bgcolor="#000000" text="#FFFF00">
<center>
<table width=80% height=80% border=0 align=center>
<tr>
<td align=center>
<h1>Volcanic Rock Microscope</h1>
<font face="verdana,helvetica" size=3>Select a rock sample from the 
menu below to view it as it would appear in a petrographic microscope.
<p>
Each time you click the mouse it will zoom in. Move the mouse to 
the edge of the image to pan across  the view (Panning will work 
only when the image has been magnified at least once).
<p>
The microscope requires a Java-enabled web browser.
</td>
</tr>
</table>
</center>
</body>
</html>
    NOTE: This is just static content for the first view of the whole page. Note how we used the table sizing technique introduced at the end of lesson 21 to center the content.
  6. Save this html file.

  7. Create a new file in your text editor, name it controls.html, and save it in your scope folder. This is the page loaded in the bottom frame and contains JavaScript code to activate a drop down menu and to generate content into the top frame
    8. <html>
<head>
<script language="JavaScript">
<!--
function scope( rockmenu ) {
// Called from menu to either load static content into the top frame
// or to dynamically write code for embedding a Java applet

// rock identifies the file name, blurb is  the caption
  rock = rockmenu[rockmenu.selectedIndex].value;
  blurb = rockmenu[rockmenu.selectedIndex].text;
  
  if (rock != "") {
    // ignore blank menu values and reselect the first menu item
      rockmenu.selectedIndex = 0;
      
    if (rock== "help") {
      // selected help, load the opening page
      parent.frames[0].location.href="stage.html";
      rockmenu.selectedIndex = 0;
      
    } else if (rock== "close")  {
        // call function to close the microscope
      close_scope();
      rockmenu.selectedIndex = 0;
      
    } else {
      // load applet with selected image
      with (parent.frames[0]) {
        document.write('<html><head><title>' + blurb + '</title></head>');
        document.write('<body bgcolor="#000000" text="#EEEEEE">');
        document.write('<center><applet code="ImageZoom.class"');
        document.write(' width=400 height=265 vspace=14>');
        document.write('<param name="IMAGE" value="'+ rock +'.jpg">');
        document.write('<param name="ZoomLevel" value="6">');
        document.write('<param name="PanSpeed" value="4">');
        document.write('<param name="cursor" value="1">');
        document.write('<param name="Preload" value="on">' );
        document.write('Sorry, but your web browser cannot load this Java Applet :-(');
        document.write('<p>Here at least is a picture of the sample:<br>');
        document.write('<img src="'+ rock +'.jpg" width=400 height=265><p>');
        document.write('</applet>');
        document.write('<font face="verdana,helvetica" size="2">');
        document.write('<br>BISHOP TUFF: ' + blurb);
        document.write('click to zoom, move mouse to edge to pan</center>');
        document.write('</body></html>');
        document.close();
      }
    }
  }
}

function close_scope() {
// provide a confirmation dialog box before closing the window
  if ( confirm( "Are you sure that you want to close the microscope?" ) )  {
    parent.close();
  }
}

//-->
</script>
</head>
<body bgcolor=#333333 text=#FFFFFF link="#CCFFFF" vlink="#FFCC99">
<center>
<form>
<font face="verdana,helvetica" size=1>java microscope viewer</font><br>
<select name="rock" onChange="scope(this)">
<option value="">Select a sample...
<option value="dw_vis">Densely Welded Bishop Tuff (visible light)
<option value="dw_pol">Densely Welded Bishop Tuff (polarized light)
<option value="pw_vis">Partly Welded Bishop Tuff (visible light)
<option value="pw_pol">Partly Welded Bishop Tuff (polarized light)
<option value="">------------------
<option value="close">Close Microscope
<option value="help">Help
</select>
</form>
</center>
</body>
</html>
    NOTE: We have quite a bit of code here! The menu created in the body of the document sends a message each time it is changed, sending a reference to the menu. The Javascript function looks at the value of the selected item. If it is empty, then we do nothing. If it is "help", we simply load the first page into the top frame. If it is "close" we call a JavaScript function that first displays a confirmation dialog box, and if the viewer click OK, it closes the entire window.

    All of the major work is done when the menu sends the file name of an image. We then re-write all of the HTML in the top frame to load the applet with the specified file name, and write a caption using the text from the menu itself.
  8. Save this html file.
  9. Load the index.html file into your web browser and check its functionality. If nothing happens when you change the menu in the bottom frame, triple-check your HTML with the sample code here.

Once our java page is working, we need to add a link that will open it in its own browser window, like we have done in the previous multimedia lessons.

  1. Open the file intro.html in your text editor.
  2. At the bottom of the section with the header "Volcanic Rocks" add this HTML after the sentence that reads: 
    A <b>thin section</b> is a layer of the rock cut so 
thin that the light from a microscope shines through, 
allowing us to see the structure of the rock.
<p>
<br clear=right>
    so that it now reads: 
    A <b>thin section</b> is a layer of the rock cut so 
thin that the light from a microscope shines through, 
allowing us to see the structure of the rock.
<p>
To see a more detailed view of volcanic rocks, 
try our <a href="../scope/index.html" onClick="window.open('../scope/index.html', 
'scope', 'width=540,height=480,status,menubar'); return false" 
onMouseOver="window.status='open the volcanic rock microscope'; 
return true">Volcanic Rock Microscope</a> (requires Java)
<br clear=right>
  3. Save and Reload in your web browser. Test this and make sure it opens a browser window that then loads the Java equipped page.

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. Compare your work to the HTML of the samples (look for something like Source from your browser's View menu).

Review

Review topics for this lesson:

  1. What are some of the things you can do with a Java applet that make it useful?
  2. What are some of the limitations of using Java?
  3. What is the HTML for including a Java applet file? Why might one applet use different set of parameter tags?
  4. How can you address situations where the person visiting your site cannot see the Java applet?
  5. What is the benefit of using JavaScript to write the HTML for the Java applet?

Independent Practice

Experiment with the ImageZoom applet using one of your own images. Try to see how it works if you adjust some of the parameters.

More Information

Although Java may be a high-level computer programming language, you can find many web sites that provide free applets that you can use in your own pages.