This chapter presents three example applications that apply the techniques you learned in Part V, "JavaScript Alternatives and the Future," of this book. These include the following:
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:
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.htm) 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.
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:
This is an example of using SSI to generate JavaScript. It uses the following techniques:
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:
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.
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:
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.