|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..."
After this lesson you will be able to:
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 programming language 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/
|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.|
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 an APPLET tag or a parameter tag) and is the only portion displayed for a Java-disabled web browser.
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>
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.
<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 visiting 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.
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).
content and applet are displayed here
<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.
<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.
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.
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.
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> The twisted chambers here represent the air pockets preserved inside the rock when this rock blew out of a volcano.add this code:
<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)
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 topics for this lesson:
Experiment with the ImageZoom applet using one of your own images. Try to see how it works if you adjust some of the parameters.
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.
Watch out as we completely revamp everything to take advantage of the next generation of web page design... let's rev up to HTML 4.0!
Writing HTML: Lesson 29e: Small Cup of Java (to go)
©1994-2002 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
Questions? Comments? Visit our feedback center
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.