| WebCOMAL Projects | An Example Project | Feedback |
In the first WebCOMAL Tutorial, you found out how to write a COMAL weblet and call it into action from an HTML webpage. In this tutorial, we show you how to put together the separate components, COMAL weblets, graphics files or HTML pages, of a WebCOMAL project, so that the project is tidily stored and all its parts are easy to find and maintain.
So, just what do we mean by a "project"? How is different from an ordinary "program"? In modern software development, a software package is built up out of various files, each of which might contain program code, program data, images, sounds and so on. When starting work on a new application using Delphi (Visual Pascal) or Visual C++, for example, the first thing you do is to open a new project folder to store all the different files in. WebCOMAL, now, needs at least two files to function, the HTML file and the COMAL weblet, so it makes sense to use the same approach as Delphi and parcel the files up into a project folder.
Before we go any further, it would be good to look more closely at why we're using a program language at all! After all, we can build a perfectly good Web page using just the Hypertext Markup Language, so why do need to use a more traditional program language as well? The answer can be found in the control structures which are provided with the program language, but are not available in HTML. Looping and branching are the bread-and-butter of general purpose program languages, but are not provided with HTML. So, for example, if you want to provide 3000 different, but related, items on a webpage, you have to put all 3000 of them into the HTML source code! If you use a scripting language, however, you might be able to build a loop into the script which would produce the 3000 items you want, using only one line of script. This approach lets us do things which would be time-consuming, awkward or simply impossible using HTML alone.
We're going to build a simple example project which displays a number of copies of a graphics file, arranged in a triangle, on a webpage. This example doesn't do anything useful, it's just pretty to look at! We'll need three files - a COMAL weblet to arrage the graphics images, a GIF (Graphics Interchange Format) file to use as a source for the image, and an HTML file to call the weblet into action. We'll store these files in a project folder, which we'll call "project1" (because we're too lazy to think up a more appropriate name). To build the whole project we'll only need 3 tools - Windows "Notepad" to edit the HTML file, Windows "Paint" to draw the GIF file, and UniCOMAL to make the weblet.
This is what the weblet produces:
Remembering the lazy programmer's golden rule - never type it more than once - we'll start by using Notepad to open the HTML file we used in Tutorial 1, then change it to suit. Here is the source text again, with the changes we need:
Remember! The line starting <A HREF=http:// and so on, although it appears as three lines above, MUST be all on a single line when the code is run.
Notice how we've changed both the path, and the name, of the COMAL Weblet: it's now called "tristar.cml" and it's stored in a folder called "project1" inside the C:\COMAL folder. Use "File > Save As" to make a new folder called "project1" inside your C:\COMAL folder, then SAVE the file into that folder, calling it "tristar.html". Now for the graphics file. We used Windows Paint to make a new bitmap file, 17 pixels square, and then painted in the pixels to make a three-pointed star. We saved the image, as a GIF file, into the "project1" folder, calling it "tristar.gif". The little image looks like this: We wanted to show the power of a script language compared with simple HTML for this, so we asked the COMAL weblet to draw quite a large number of these little tristars on the webpage. Here's the COMAL code:
This code should be saved into the "project1" folder along with the other project files, and named "tristar.cml". (Some programmers don't like this technique of calling all the files in a project by the same stem name and relying on the 3-character extensions to show which type of file each one is. It's all a matter of programming taste - if you prefer to give different files radically different names, that's just as good a way of doing things).
Notable points: in lines 140 to 170 we've used a fixed loop to print 20 lines of "tristars". Inside that loop, nested inside it in fact, we've used another loop, a single-line one this time, at line 150. This prints a line of tristars containing as many tristars as the outer loop has reached. It is this arrangement, together with the "<CENTER>" command at line 130, that gives the triangular pattern of tristars displayed in the final output.
Don't forget to run the WebComal Servlet by double-clicking "startcs.bat" (in your COMAL folder - remember?) first!. Then you should be able to double-click the 'tristar.html" file, which will launch your web browser and give you a link to the weblet. Click that link, and the weblet should be invoked, producing the pattern shown above.
We'd love to hear from you. If you're following these tutorials, and have questions, comments, suggestions, or WebCOMAL programs or projects that you'd like to share with others, please email webcomal@macharsoft.co.uk. Everyone's input will be acknowledged.
An Example Project
The output from the Weblet
The HTML file
<HTML>
<BODY>
<A HREF=http://localhost:8080/servlet/
comal.ComalServlet?COMAL_EXE=c:\comal\
comal.exe&COMAL_PRG=c:\comal\project1\tristar.cml>
Run the Tristar COMAL script</a> for the WebCOMAL Projects example.
</body>
</html>
The Image
The COMAL Weblet
0100 // WebCOMAL Tutorial Example 1
0110 USE internet
0120 start_html("WebCOMAL Tutorial Example 2")
0130 PRINT "<CENTER>"
0140 FOR line#:=1 TO 20 DO
0150 FOR star#:=1 TO line# DO PRINT "<IMG SRC=c:\comal\project1\tristar.gif>"
0160 PRINT "<BR>"
0170 ENDFOR line#
0180 PRINT "</CENTER>"
0190 end_html
0200 END
0210 //
0220 PROC start_html(title$)
0230 PRINT "<HTML><BODY><H1>"
0240 PRINT title$
0250 PRINT "</H1>"
0260 ENDPROC start_html
0270 //
0280 PROC end_html
0290 PRINT "</BODY></HTML>"
0300 ENDPROC end_html
Testing the Project
Feedback! Feedback!
Updated 29 Apr 2000.