This tip shows you how to use
eComet with a Java applet. To best demonstrate this process, we chose a Java
applet that displays a bar graph. To make things interesting, we wrote an MTB
program that reads the bar chart data from a Comet file and merges it into an
HTML template file – old hat for the XAP aficionados reading this. As you will
soon see, the HTML template passes this data to the Java applet, which then
displays a bar graph based on values from a Comet data file.

If you understood that first
paragraph, you’re probably thinking, “Hey, that’s pretty cool…” If you didn’t
understand it, you will by the time you’re done reading this tip.

In either case, please look at the
results first. Click on this link to see the sample program in action. Don’t
forget to come back to this page when you’re done.

This example was easy to create.
In fact, very little programming was required on our part. The Java applet came
from Sun Microsystems (by the way, it was free). Even though Sun included the
Java source code, we didn’t need it; we simply used their compiled applet with
our data. We did write two small MTB programs – one to merge the data with an
HTML template file and another to allow the user to edit the data – and created
two HTML template files.

Background
information

Java is a
programming language that was invented by Sun Microsystems in 1995. When a Java
source file is compiled, it becomes an “applet.” Unlike many other programming
languages, though, a Java applet is not comprised of hardware-specific machine
instructions. Instead, an applet is machine-independent “byte code” that can be
interpreted by software running on a wide variety of platforms. This software
is called a “Java Virtual Machine” (JVM). For example, both of the major web browsers
now include a JVM, which makes it very easy to integrate applets with web
pages. Also, a number of hardware companies are including a JVM in their
portable electronic devices (cell phones, PDA’s, etc.).

Java applets
are typically stored on web servers. When an HTML file calls for an applet (see
details below), the applet is transferred from the server to the client and is
executed in the JVM on the client. That’s exactly what happens with the
BARCHART example.

When you
compile a Java source file, the Java compiler creates a “class” file (another
name for “applet”). The applet in the BARCHART example is a 6K program named Chart.class
(and the source file is named Chart.java). As we mentioned above, this
applet was written by Sun Microsystems, probably as a way to demonstrate some
of Java’s capabilities. Sun now distributes this applet for free. We found it
on a web site that contains many other freeware and shareware Java applets. The
site is http://www.javaboutique.internet.com/.
Take a look at this site and let us know if you find any other useful tools for
your XAP applications.

In a way, you
can think of an applet as a “compiled subroutine” for an HTML document. You
call the subroutine by including an <APPLET> tag in the HTML file. Some
applets are designed so the HTML document can pass arguments to them – this is
accomplished with the <PARAM> tag. These tags are explained in detail
below.

The BARCHART demo program uses
four technologies: HTML, JavaScript, XAP (eComet), and Java.

·The HTML code defines
the text and form controls (radio buttons) on the sample page.

·The JavaScript code
streamlines one facet of the sample page – the radio buttons. The sample page
contains radio buttons, but does not contain a “submit” button. When the user
clicks on a radio button, the form data is immediately submitted to the server.
This is accomplished by adding a JavaScript event handler named onClick
to the HTML tag for each radio button. The code (a combination of HTML and
JavaScript) looks like this:

<FORM METHOD="POST" ACTION="XAP-server-name/BARCHART">

<INPUT TYPE="radio"
NAME="YEAR" VALUE="1988" onClick="submit()">

<INPUT TYPE="radio"
NAME="YEAR" VALUE="1989" onClick="submit()">

<INPUT TYPE="radio"
NAME="YEAR" VALUE="1990" onClick="submit()">

<INPUT TYPE="radio"
NAME="YEAR" VALUE="1991" onClick="submit()">

etc.

</FORM>

By the way,
JavaScript was invented by Netscape Corporation (not Sun Microsystems). It is a
scripting language that enhances the capabilities of HTML. It is not the same
thing as Java, despite the fact that the products are named so similarly.

·Clicking one of the radio buttons causes the form data
to be sent to the BARCHART program (an MTB object program) on the XAP server named in the ACTION parameter of the FORM
tag. For example, if you want to send the data to Signature's XAP server (using
port 8080), the FORM tag would look like this:

<FORM METHOD="POST" ACTION="http://signature.net:8080/xap/BARCHART">

Or, if you wanted to run this
example on a local XAP server (using port 80, the default), the FORM tag would
look like this:

<FORM METHOD="POST" ACTION="http://127.0.0.1/xap/BARCHART">

The BARCHART program performs the
following steps:

1.Retrieve the data from the HTML form (the YEAR and ORIENTATION
fields) by reading the CGI interface file

2.Open the Comet data file containing the data to be graphed

3.Read a record from that file (the key of which is the YEAR
field)

4.Close the data file

5.Set the values of the merge fields (including the colors for
the bars in the graph)

6.Merge the data with an XAP HTML template file

Clicking on the “Edit” button
causes the form data to be sent to another MTB program on the XAP server. This
program is named BAREDIT, and it lets you edit the temperature data for a given
year.

·The Java applet draws
the bar graph. To use this applet, include an <APPLET> tag in your HTML
file. You'll need to specify information about the Java program as well as the
data values needed by that program. For example:

The above tag tells the browser
that it will be executing a Java applet named Chart.class
which is located at http://www.signature.net/javademo,
and that the applet's output will be displayed on a section of the web page
measuring 300 x 500 pixels.

The Chart.class
applet requires certain parameters, including general information about the bar
graph as well as the data values that are to be drawn. These values are
specified with the <PARAM> tag within the <APPLET> section. Here's
a sample:

Follow these instructions to
install the BARCHART files on a local XAP system (IP address of 127.0.0.1):

1.Unzip
the BARCHART.ZIP files as follows:

·Put the HTML template files (barchart.htm
and baredit.htm) in a working directory such as
c:\html

·Put the MTB source programs (barchart.mtb
and baredit.mtb) in a Comet directory (the
examples contain a directory name of “MSC”)

·Put the Comet data file (bardata
and bardata.i00) in a Comet directory

·Put the eComet object programs (barchart.obj and baredit.obj) in
the XAP directory

·Put the Java applet (Chart.class)
in a working directory such as c:\html

·The Java source code (Chart.java)
is not required

2.Using a text editor, open the barchart.mtb source code. Look for the SET statements
that set the following symbolic constants:

HTMLPATH$

XAPCODEBASE$

JAVACODEBASE$

Set these values to match the
locations where you installed the barchart.obj
file (HTMLPATH$), the barchart.htm template
file (XPACODEBASE$), and the Chart.class Java
applet (JAVACODEBASE$). See the MTB source program for the required formats.

3.Verify that the conditional compile
directive (at the beginning of the program) is set to compile on a local
system. Compile barchart.mtb, making sure to
put the object program in the XAP directory.

4.Using
a text editor, open the baredit.mtb source
code, looking for the following symbolic constants:

HTMLPATH$

XAPCODEBASE$

Set these values to match the
locations where you installed the baredit.obj
file (HTMLPATH$) and the baredit.htm template
file (XPACODEBASE$). See the MTB source program for the required formats.

5.Verify that the conditional compile directive (at the
beginning of the program) is set to compile on a local system. Compile baredit.mtb, making sure to put the object program in
the XAP directory.

6.Start the XAPMON program on your local eComet server.

7.From a web browser, launch the BARCHART program, as follows:

http://127.0.0.1/xap/barchart

Behind the scenes

To fully understand how these
programs and templates interact with each other, look at the following files:

·Study the barchart.htm
template file. Notice all of the merge fields, some of which are parameters for
the radio buttons and associated <FORM> tag, and others of which are
parameters for the Java applet. All of these merge fields are replaced by
actual values that are determined by the barchart.obj
program.

·Study the barchart.mtb
source program to see how the merge field values are determined. When this
program starts, it attempts to read the YEAR and ORIENTATION fields from the
CGI interface file. If these values are not found (indicating that the program
running for the first time), default values of “2000” and “H” are set. This
program then reads data from the “BARDATA” file, in order to get the average
monthly temperatures for the given year. The subsequent statements determine the
values of and write the merge fields to the CGI interface file.

Besides writing the monthly
temperatures, the program also writes other values such as the bar chart
colors, the bar labels (“January” vs. “Jan”), orientation (“horizontal” vs.
“vertical”). The program also writes “CHECKED” next to the appropriate radio
buttons (one for the year, one for the orientation), which provides a way for
the user to know which value was selected and which value will be submitted
when another radio button is clicked.

Finally, this program merges the
HTML template file with the CGI interface file, which displays the web page.
(Of course, the web page contains an <APPLET> tag, which executes the Chart.class applet and displays the bar graph.)

·Study baredit.htm and baredit.mtb to see how the editing routine works. The
baredit.htm program is multi-purpose; it is
designed to read a data record and merge the contents into a template file, as
well as read the data from the CGI interface file and update the data file.

·If you're curious, take a look at the Java source code Chart.java. Even if you don't know Java, you can
easily see the parameters and their values, along with the general organization
of the code.