Chapter 19
Real-Life Examples IV
CONTENTS
This chapter presents three example applications that apply the
techniques you learned in Part V, "JavaScript Alternatives
and the Future," of this guide. These include the following:
- Example 1: Manipulating a Java Applet. You looked at
a simple example of accessing Java from JavaScript in Chapter
16, "Integrating JavaScript with Java." This is a more
complicated example.
- Example 2: Creating JavaScript Dynamically. This uses
SSI, which you looked at in Chapter 17, "Combining JavaScript,
CGI, and SSI," to modify a JavaScript program before the
page is sent to the browser.
- Example 3: Using an ActiveX Control. You looked at
ActiveX in Chapter 18, "Using ActiveX and Microsoft Internet
Explorer 3.0." This example uses an ActiveX control to include
a chart in a Web page.
You learned a simple example of accessing the methods of a Java
applet from within JavaScript in Chapter 16. For this example,
let's create a more complicated example with extra features. This
example demonstrates the following concepts:
- Preparing a Java program to be used from JavaScript
- Creating and compiling a Java applet
- Controlling Java from JavaScript with event handlers
For this example, I have expanded the ControlJava
applet created in Chapter 16. It now includes a new method, SetFont(),
which enables the font name and size to be changed. This is a
public method, so it can be accessed through JavaScript. The Java
source code for the applet is shown in Listing 19.1.
Listing 19.1. (ControlJava2.java) The Java source code for
the Java applet to be controlled from JavaScript.
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Font;
public class ControlJava2 extends Applet {
Font f = new Font("TimesRoman", Font.BOLD, 60);
String Message;
public void init() {
Message = new String("Java Test");
}
public void SetMessage(String MsgText) {
Message = MsgText;
repaint();
}
public void SetFont(String NewFont, int NewSize) {
f = new Font(NewFont,Font.BOLD,NewSize);
repaint();
}
public void paint(Graphics g) {
g.setFont(f);
g.drawString(Message, 15, 50);
}
}
This source code should be placed in a file called ControlJava2.java.
Once you've done that, you can compile it into a Java class with
this command:
bin\javac ControlJava2.java
| Note |
Be sure you have included the Netscape packages when you compile this applet. See Chapter 16 for details.
|
You now have a working applet that should work within any HTML
file-but to access the new options you will need JavaScript. Listing
19.2 shows the HTML document with JavaScript functions to change
the text, font, and size for the applet.
Listing 19.2. (JAVA2.asp) An HTML form and JavaScript functions
to update the Java applet.
<HTML>
<HEAD>
<TITLE>Control a Java Applet</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setfont() {
x = document.form1.font.selectedIndex;
font = document.form1.font.options[x].value;
x = document.form1.fontsize.selectedIndex;
size = document.form1.fontsize.options[x].value;
document.applet1.SetFont(font,parseInt(size));
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Control a Java Applet</H1>
<HR>
The Java applet below displays text in a large font. You can enter
new text to display in the form below, and JavaScript will call the
Java applet to change the text. You can also change the font and size.
<HR>
<FORM NAME="form1">
<INPUT TYPE="TEXT" NAME="text1">
<INPUT TYPE="BUTTON" VALUE="Change Text"
onClick="document.applet1.SetMessage(document.form1.text1.value);">
<BR>
<b>Font:</b>
<SELECT NAME="font">
<OPTION VALUE="TimesRoman">Times New Roman
<OPTION VALUE="Arial">Arial
<OPTION VALUE="Wingdings">WingDings
<OPTION VALUE="Courier">Courier New
<OPTION VALUE="Terminal">Terminal font
</SELECT>
<b>Size:</b>
<SELECT NAME="fontsize">
<OPTION VALUE="10">10
<OPTION VALUE="15">15
<OPTION VALUE="20">20
<OPTION VALUE="25">25
<OPTION VALUE="30">30
<OPTION VALUE="48">48
<OPTION VALUE="60">60
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Change Font"
onClick="setfont();">
</FORM>
<HR>
<APPLET NAME="applet1" CODE="ControlJava2.class" WIDTH=450 HEIGHT=125>
</APPLET>
<HR>
End of page.
</BODY>
</HTML>
Figure 19.1 shows this JavaScript application in action. Here
is a breakdown of how it works:
Figure 19.1 : The Java manipulating program in action.
- A new button and two select lists have been added. These enable
the user to select a new font and font size.
- The Change Text button
calls the Java applet's SetMessage
method directly to change the text.
- The Change Font button
calls a JavaScript function called setfont().
- The setfont() function
calculates the selected value for the font and size and passes
them to the Java applet's SetFont
method for processing. Like the text change, this change should
take effect immediately.
You should now have a good idea of how to manipulate a Java applet
from within JavaScript. Finally, here are a few observations about
this application:
- Notice that you had to use parseInt
to convert the font size to an integer. Java is expecting an integer
and doesn't convert as readily as JavaScript.
- Because the JavaScript select
object has no direct method or property for returning the currently
selected value, you had to calculate it using selectedIndex.
- Because the Java applet is restricted to a certain height
and width, some combinations of fonts and sizes might be cut off.
- There's no way for JavaScript to know which fonts are installed
on your computer. The fonts I included in Listing 19.2 should
be available on most Windows systems; for Macintosh and others,
you need to substitute an accurate list of your fonts.
This is an example of using SSI to generate JavaScript. It uses
the following techniques:
- Using SSI in a Web page
- Combining SSI with JavaScript
- Writing a simple Perl program
One of the most common items on the Web these days is a hit counter-a
simple counter that displays the amount of visitors a page has
received. They're a bit of a cliché right now, but many
users can't live without them.
One thing is certain about counters, though-you can't make one
using JavaScript alone, because JavaScript can't store any information
on the server. You could count how many visits a particular user
has made with cookies, but there's not much use for that.
As a solution, let's combine JavaScript with SSI. A simple SSI
program will be used to insert the counter into the page; it will
be inserted in the form of a JavaScript assignment statement,
so the counter can be used in any JavaScript function.
To begin, Listing 19.3 shows the SSI program, written in Perl,
for the counter.
Listing 19.3. (COUNT.PL) The Perl SSI program for the counter
example.
#!/usr/local/bin/perl
MAIN: {
print "Content-type:text/html\n\n";
$count = 'cat count.dat';
$count += 1;
open(LAST,">count.dat");
print LAST $count;
close LAST;
print "count = ",$count, "\n";
}
Here is a brief explanation of this program:
- The MAIN function is
the primary function for this Perl program (and the only function).
- The first print statement
provides the required MIME type for the output of the SSI program.
- The counter variable, $count,
is read from a file on the server called count.dat.
It is then incremented and output back to the same file.
- Finally, the counter is printed, with count
= before it. This will serve as the JavaScript statement
to initialize the counter.
Next, you will need a JavaScript program to use the counter. The
HTML document, complete with JavaScript and the SSI directive,
is shown in Listing 19.4.
Listing 19.4. The HTML document with JavaScript functions for
the counter example.
<HTML>
<HEAD>
<TITLE>Counter Test in JavaScript and SSI</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--#exec cgi="count.cgi"-->
</SCRIPT>
</HEAD>
<BODY>
<H1>A counter using SSI and JavaScript</H1>
<HR>
This page includes a counter using SSI, and made available to JavaScript.
<HR>
The count is:
<SCRIPT LANGUAGE="JavaScript">
document.write(count);
</SCRIPT>
<HR>
Press button for an alert with the count.
<FORM NAME="form1">
<INPUT TYPE="BUTTON" VALUE="Click for Count"
onClick="window.alert('The count is' + count);">
</FORM>
<HR>
</BODY>
</HTML>
This example is shown in Netscape in Figure 19.2. Here are a few
notes about how this program works:
Figure 19.2 : The counter example, as displayed by Netscape.
- The SSI-inserted line of JavaScript assigns the current value
to the JavaScript count variable
in the header of the program.
- The document.write method
is used to work with the counter in the body of the document.
- As a demonstration of using an event handler, the button provides
another method of displaying the count-this time with a dialog
box.
This example should give you some food for thought. By combining
SSI with JavaScript, you can combine the advantage of SSI-being
connected with the server-with the friendliness and versatility
of JavaScript.
This is an example of using an ActiveX control within a Web page,
and it will work only with Microsoft Internet Explorer 3.0. You
looked at MSIE 3.0 and ActiveX in Chapter 18. This example uses
the following techniques:
- Using the <OBJECT>
tag
- Using ActiveX controls
- Modifying a control's properties
This example uses the Chart control, provided free from Microsoft.
You may need to download this control if you don't have it already;
MSIE will prompt you if you need to. Listing 19.3 shows the example.
Listing 19.3. An example of an ActiveX control and properties
in HTML.
<HTML>
<HEAD>
<TITLE>Graph Example</TITLE>
</HEAD>
<BODY>
The following graph was created using the ActiveX
Graph control.
<HR>
<OBJECT id="iechart1" WIDTH=599 HEIGHT=203
CLASSid="CLSID:FC25B780-75BE-11CF-8B01-444553540000">
<PARAM NAME="_ExtentX" VALUE="15849">
<PARAM NAME="_ExtentY" VALUE="5371">
<PARAM NAME="Rows" VALUE="4">
<PARAM NAME="Columns" VALUE="2">
<PARAM NAME="ChartType" VALUE="14">
<PARAM NAME="Data[0][0]" VALUE="9">
<PARAM NAME="Data[0][1]" VALUE="10">
<PARAM NAME="Data[1][0]" VALUE="7">
<PARAM NAME="Data[1][1]" VALUE="11">
<PARAM NAME="Data[2][0]" VALUE="6">
<PARAM NAME="Data[2][1]" VALUE="12">
<PARAM NAME="Data[3][0]" VALUE="11">
<PARAM NAME="Data[3][1]" VALUE="13">
<PARAM NAME="HorizontalAxis" VALUE="0">
<PARAM NAME="VerticalAxis" VALUE="0">
<PARAM NAME="hgridStyle" VALUE="0">
<PARAM NAME="vgridStyle" VALUE="0">
<PARAM NAME="ColorScheme" VALUE="0">
<PARAM NAME="BackStyle" VALUE="1">
<PARAM NAME="Scale" VALUE="100">
<PARAM NAME="DisplayLegend" VALUE="0">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="ForeColor" VALUE="32768">
</OBJECT>
<HR>
Now, back to the Web page.
</BODY>
</HTML>
The <OBJECT> tag includes
quite a list of <PARAM>
tags. These specify that the chart is a bar chart with two data
items and four rows. Figure 19.3 shows this example in action
in MSIE 3.0.
Figure 19.3 : The ActiveX control example.
You can modify the <PARAM>
tags to produce exactly the type of graph you wish. You could
also use the ActiveX Control Pad, described in Chapter 18, to
modify these values easily.
|
Learn HTML
