COMAL on the Web - Directing UniCOMAL weblet output to a frame

WebCOMAL - Output to a Frame

Before tackling this section, you should have worked through the first article on WebCOMAL, webcomal.html and be able to run a COMAL weblet on your system. This present article describes how to direct the output from a COMAL weblet script to an output frame in an HTML document. Doing this allows inputs to the weblet to be placed in one frame of the document, while the outputs appear in another. This permits the input frame to be used repeatedly without being obscured by new output windows on each successive run of the weblet. You will need to know a little about FORMS and FRAMES in HTML documents to make sense of the HTML code used below.

This article assumes that you are working with a default WebCOMAL setup on a single PC, that is to say, you are NOT "running remote" as described in the article WebCOMAL - Running Remote. You should have Java ServletServer running on your PC, and the various files required for each of the two examples given should be located in the C:\COMAL folder, in two subfolders called C:\COMAL\FRAMES1 and C:\COMAL\FRAMES2. You can put the example files elsewhere on your system if you like, but you will need to change the paths in each of them to point to the new location of the files. The examples work just as well across a Local Area Network as they do on an isolated PC - in fact, they were first tested on a LAN - but there may be performance issues arising from remote operation, which we have yet to evaluate.

There are two example programs to go with this article. They are contained in the file webframe.zip on the downloads page. Each of the examples looks like this in operation:

On our local test machine, a Cyrix 300 PC, there is a delay of about 5 seconds when you click the Color Triangle link before the color triangle is displayed. Fortunately for the user, the browser reports on what is going on in the bottom status line, so the user is kept informed that his request is being dealt with! Clicking the "clear the frame" link clears the output frame instantly.

The HTML files used

Each example uses four small HTML files along with the COMAL weblet. The html files are:

index.html		This creates the framed document in which the other files are displayed.
banner.html		This displays the banner heading across the top.
input.html		This lives in the input frame, i_f, and provides input to the COMAL weblet
output.html		This lives in the output frame, o_f. It is used to provide information for the output frame before the COMAL weblet's output data is displayed there.

The "index", "banner" and "output" HTML files

These files are the same in each example.

Here is the text of index.html, line-numbered to make the explanatory notes easier:

  1   <html>
  2   <head>
  3   <title>WebCOMAL - Using a frame to display a UniCOMAL weblet's output - index file</title>
  4   </head>
  5   <frameset rows=10%,90% border=0>
  6     <frame src="banner.html">
  7     <frameset cols=40%,60% border=0 resize="no">
  8       <frame src="input.html" name="i_f" noborder>		
  9       <frame src="output.html" name="o_f" noborder>
 10     </frameset>
 11   </frameset>
 12   </html>
 13   </blockquote>

Lines 1-4 give a standard header. Line 5 sets up the "outer" frame, consisting of two horizontal frames, the top one for the banner heading and bottom one for the input and output frames. Line 7, the "inner" frameset, splits the bottom frame vertically in two equal halves, left for input and right for output.

Lines 6, 8 and 9 link each frame with an HTML file. Lines 8 and 9 also give their frames names, "i_f" and "o_f", by which they can be referred to later on.

There is nothing at all strange in either banner.html or output.html - they simply contain text to be displayed in the appropriate frame.

The GET method in the Input Frame

Frames1 illustrates the use of the GET method to send data to the servlet. The GET method is the default, so we don't need a "METHOD=GET" statement anywhere in the HTML code. While we were working on this, we found it quite tricky to position the "TARGET=o_f" statement so that the output would appear where we wanted it. Usually, the TARGET statement appears after the <A HREF= statement but in this case the various parameters for the weblet have to come at the end, so we had to put the TARGET statement in first as you can see in Line 10 below. The GET method can be used when you don't want the user to interact with the COMAL weblet, but simply need to call it into action, supplying it with any inputs it needs as parameters in the call to the weblet (this is one of these things that is a lot easier to do than it is to explain!). The text of the input.html file is as follows (note that line 10 should be a single, long, line in the source code):

 1  <html>
 2  <head>
 3  <title>WebCOMAL - Using a frame to display a UniCOMAL weblet's output - input file</title>
 4  </head>
 5  <body bgcolor=silver>
 6  <font color=brown>
 7  <h3>This is the input frame.</h3>
 8  <h3>Color Triangle COMAL Weblet</h3>
 9  <H4>Output Frame Demo using GET method</h4></font>
10  <p>Click <a target="o_f"
    HREF="http://localhost:8080/servlet/
    comal.ComalServlet?COMAL_EXE=c:\comal\comal.exe&
    COMAL_PRG=c:\comal\frames1\colortri.cml&
    name=red">here</a> to display the 
    color triangle in the output frame.
11  <p>Click <a target="o_f" href="output.html">here</a> to clear the frame again.
12  </body>
13  </html>

Lines 1 to 9 are standard HTML.
Line 10 sets up an anchor which first targets the output to the "o_f" frame, then calls the COMAL weblet "colortri.cml" with one extra parameter, called "name", which sets the colour of the ouput heading line to red. You could use as many parameters here as you want, separating each parameter with a literal "&" character. View the source text of "input.html" to see how the literal "&" characters are placed in the source.
Line 11 links to the file "output.html", targetting it into the "o_f" frame, thus providing a simple way of clearing the output frame quickly.

The POST method in the Input Frame

In subfolder "Frames2", the file "input.html" uses the POST method, in an HTML form, to let the user type in data which is then passed to the COMAL weblet. Doing this lets us use WebCOMAL interactively, just as, in command-line COMAL, we can use the INPUT command. The only difference, to the user, is the five to ten second delay between posting the input to the weblet and seeing the results appear in the output frame. The example COMAL weblet used in "frames2" is a very simple "times tables" program which only needs one input data item, the number whose multiplication table is to be displayed. Here is the source text of the "input.html" file:

 1  <html>
 2  <head>
 3  <title>WebCOMAL - Using a frame to display a UniCOMAL weblet's output - input file</title>
 4  </head>
 5  <body bgcolor=silver>
 6  <font color=brown>
 7  <h3>This is the input frame.</h3>
 8  <h3>Times Tables COMAL Weblet</h3>
 9  <H4>Output Frame Demo using POST method</h4></font>
10  <form action="http://localhost:8080/servlet/comal.ComalServlet" method="POST" target="o_f">
11  <input type="hidden" name="COMAL_EXE" value="c:\comal\comal.exe">
12  <input type="hidden" name="COMAL_PRG" value="\\cyrix300\cx_upload\webcomal\frames2\tables.cml">
13  <p>Which table would you like? 
14  <p><input name="name" size="10" value="12">
15  <input type="submit" value="Submit">
16  <input type="reset" value="Reset">
17  </form>
18  </body>
19  </html>

Lines 1 to 10 are standard HTML.
Line 10 sets up an HTML form in the input frame, directing the inputs from the form to the servlet, using the "POST" method, and targetting the outputs to the output frame "o_f".
Line 11 tells the servlet where to find the COMAL.EXE interpreter and line 12 tells the servlet which COMAL program to use as the weblet. These inputs are both "hidden" from the user.
Line 13 gives the user an input prompt to tell him what to type into the next field on the form.
Line 14 displays the input field and places a default value in it (12 in this case). This can be useful because it can prevent the weblet from crashing on an accidental null input. (There is still a lot of work needing to be done on errors in WebCOMAL and their effects.)
Lines 15 and 16 provide "Submit" and "Reset" buttons for the user.
Line 17 closes the form.

The COMAL Weblets

Here is the code for the "Times Tables" weblet, with some extra comments added to explain WebCOMAL-type points:

0100 // WebCOMAL Times Tables Sample for Frames Demo #2
0110 // (C) MacharSoft March 2000
0120 // to accompany WebCOMAL by P&D Software
0130 USE internet
0140 start_html("WebCOMAL Times Tables Framed")
     // start_html and end_html provide standard "tops and tails" for
     // the HTML output - see the PROC definitions below.
0150 table$:=get_parameter$("name")
     // This takes the input value from the parameter called "name"
     // in the form in the "input.html" file. It is a STRING value.
0160 table#:=VAL(table$)
     // This converts the string value from "name" into an integer.
     // Errors could arise here if the user doesn't type a number
     // into the form. The effects of such errors are not well known yet!
0170 PRINT "<h2>Times Table Sample</h2>"
0180 FOR row#:=1 TO 12 DO
0190   PRINT "<br>"
       // We can send any HTML tags we want to the browser. This one
       // just produces a carriage return and line feed.
0200   PRINT STR$(row#)+" X "+table$+" = "
       // We can only send string data to the output frame, so all
       // numbers have to be converted to their string form before
       // we can send them to the browser. 
0210   PRINT STR$(row#*table#)
0220 ENDFOR row#
0230 end_html
0240 END
0250   //
0260 PROC start_html(title$)
0270   PRINT "<html><head><title>"
0280   PRINT title$
0290   PRINT "</title></head><body bgcolor=magenta>"
0300   PRINT "<h3>"+title$+"</h3>"
0310 ENDPROC start_html
0320   //
0330 PROC end_html
0340   PRINT "</body>"
0350   PRINT "</html>"
0360 ENDPROC end_html

Here is a screenshot of a sample run:

The TICKETS example

The download file webframe.zip contains another example project folder called "WebTicks". It uses a COMAL weblet to generate numbered competitors' entry tickets to an imaginary hill-running event. It is very similar to the "Frames2" example and should be quite easy to follow. As well as the files in "Frames1" and "Frames2", "WebTicks" also uses a scanned photograph, saved as a JPG image, of a local hill, to decorate the ticket. Here is part of the working screen:

Updated 17 April 2000