A Teaching Programming Toolkit Using Java

Rodrigue Byrne
Department of Computer Science
Memorial University of Newfoundland
St. John's, Newfoundland
A1B 3X5


A Web page describing programming can be enhanced with a Java applet that illustrates program execution. The Teaching Programming Toolkit provides a collection of Java packages that form the bases for the creation on an applet to demonstrate the execution of programs. The toolkit provides a high-level language interpreter, a code view window, an input/output window and set of miscellaneous classes. A tree of abstract syntax objects decouple the interpreter from any particular programming languages, and therefore allows the implementation of different programming languages. An applet created with the aid of the toolkit provides most of the functions of a simple Integrated Development Environment. This IDE applet can be placed on a Web page, allowing the student to directly execute sample programs.

Keywords: teaching programming, Web courses, Java applets, program interpreter toolkit

1. Introduction

The Teaching Programming Toolkit is a collection of Java packages designed to create executable programming examples and environments on a Java enabled Web browser. The toolkit provides a generic high level interpreter, a component to display the code of an executing program, a terminal emulator, a component to display the variables of the emulated program, and a parser of the Pascal programming language. The toolkit is designed to create applets that demonstrate the execution of programs on a Web page. These applets enhance the Web pages, by allowing the student to see the dynamic behaviour of an executing program. The toolkit can of course be used to craft applets for use in many other CS courses.

The first applet created using the toolkit provides most of the functionality of a simple Integrated Development Environment (IDE). The IDE applet can be used to teach many of the program concepts required for a CS1 course. The IDE applet provides a code view window, a control panel, and a terminal window. The program's source is displayed in the code view window. The program's input or output occurs in the terminal window. The control panel contains buttons that control how the program in the code view window executes. An additional window can be opened to give a trace of the program's variables.

The IDE applet created using the toolkit is described in Section 2. Section 3 discusses other possible applets used for teaching. The main architectural features of the toolkit are presented in Section 4. Section 5 describes performance and reliability issues with Java Virtual Machines. Section 6 briefly discusses the development effort, and the benefits/liabilities of Java and the JDK environment. As usual the last section gives the conclusions and the future directions for the development of the toolkit.

2. The IDE Applet

A mini-IDE created from the toolkit allows many of the concepts introduced in a CS1 course to be presented on a Web page. Figure 1 show a screen shot of the IDE applet.

Figure 1: An IDE applet

The IDE contains the following four areas: a mode selection area on the top, a status and control area on the middle left, an area to display a code view on the middle right, and a program input/output area on the bottom. The top three button select either a running/debugging mode, a compiling mode, or an editing mode. The controls on the middle left provide features typical of a GUI based debugger. A brief description of the controls is provided in the following table.
Control Description
Start/Continue Starts or continues execution of the program.
Stop Stops execution of the program, the program's execution can be continued.
Step Executes the current statement. If the statement is a routine call, then the next statement is the first statement of the routine.
Next Executes the current statement. If the statement is a routine call then, the entire routine is executed.
Reset Stops the execution and resets the program's state so that the program can start from its first statement.
Set Break Sets a break point on the currently selected statement.
Clear Break Clears a break point on the currently selected statement.
Clear Output Erases the program's input/output window.
Show Env Open a window that displays a trace of the program's variables.

Figure 2 shows the environment display window. This window shows a trace of a program's execution. Each row corresponds to the state of the program after one step. Unassigned variables are initial set to NIL.

Figure 2: A program's environment

In addition to the ability to display a trace of the program's variables, another important feature of the IDE applet is the ability to display different representations of the program's variables. This ability enables the creation of simple algorithm animation examples. Figure 3 and Figure 4 shows an array depicted as a series of balls and a series of bars respectively. This display can be used to animate sorting algorithms.

Figure 3: An array shown as a sequence of labeled balls.

Figure 4: An array shown as a sequence of bars.

The Celsius to Fahrenheit program, shown in the code view of Figure 1, is one of the classical introductory programs. Since this IDE applet can be embedded in any Web page, the applet and accompany text can be used to illustrate many of the concepts in a CS1 course. Other concepts are:
programming language constructs (e.g., the IDE loads a program with a while loop, and the text explains how the student can interact with the IDE to show the behaviour of the while statement),
specific algorithms (e.g., the quicksort algorithm),
specific data structures (e.g., a stack),
formal analysis (e.g., pre- and post- conditions), and
debugging techniques.

The following text is an example of the contents of a Web page that would accompany the Celsius to Fahrenheit program. This page could be the introductory part of a programming course.


In addition to the text on this page, there is a program contained in the IDE applet to calculate a table of Celsius to Fahrenheit conversions. The goal of this page is to introduce the operation of the IDE applet and the behaviour of the program. To see a complete execution of the Celsius to Fahrenheit program, click on the Start button in the IDE applet. The program's output should appear in the Program's Input/Output area in the IDE applet. To see the program execute only a single statement, click on the Step button. Notice that there is a mark showing the next statement to be executed.


It is important to note that knowledge of the toolkit is not necessary to use the IDE applet. A user of the applet would only need to know the Pascal programming language. The HTML tag for the IDE applet is:

<applet code=ide.class archive=Mun.zip width=550 height=500>
<param name="program_source" value="first.p"> 
<param name="display_environment" value="off">
The first.p file is the source of the sample Pascal program.

Providing an example program where some of the expressions or statements need to be filled in can be an effective teaching technique. The toolkit provides the ability to describe a program with regions that need to be completed. Figure 5 shows such a program. The text typed into these regions is complied and merged in with the data structure used to interpret the program. This feature allows the instructor to construct examples where the student must complete to create a fully functioning program. Thus, an incremental approach in teaching many programming concepts can be followed (i.e., the student can modify code snippets without having to completely master the programming language's syntax).

Figure 5: A partial program that the student must complete

3. Other Possible Applets

An IDE applet is not the only possible applet that can be created with the toolkit to aid in teaching programming. A brief description of other possibilities follow.

The IDE applet provides extensive control to the user over the program's execution. In some cases, not all of this control is required. This observation leads to the design of applets with more restrictive controls or views of the program's state. Some of the possible restricted applets are:
an applet with a code view, input/output view, and a start/stop button (e.g., this applet could be used in an introductory section to illustrate the behaviour of a simple program without having to explain the operation of the IDE),
an applet with a code view, a display of a set of variables, and a start/stop button (e.g., this applet could be used to introduce program tracing),
an applet with only an input/output view,
and an almost complete IDE applet with restrictions on the active controls (i.e., Set/Clear Break would not be available).

Restricted IDE applets allow for the creation of more specific examples that are not cluttered with extraneous details. A more gradual approach can be used, where new features are only introduced as required. An algorithm animation applet illustrates an example in which reduced control would be beneficial. The student could simply press a play button. While the applet with only an input/output view could be implemented by a Java applet directly or a Java Script program, it does allow the instructor the possibility to staying in the same framework.

Demonstrating concurrency in operating system courses can be challenging. The toolkit can construct an example containing two code views and a display of the common program variables. Many concurrency issues can be demonstrated with this applet. For example, the problem of implementing correct mutual exclusion algorithms can be demonstrated by providing a sample algorithm that the students can interactively executed to see where problems arise.

Another possible role for the toolkit is in the construction of online quizzes. Since the interpreter in the toolkit has complete control over the execution environment, a program with statements that have to be filled-in could be used as part of an online quiz. The student would have to complete the missing section, then start the interpreter, the online quiz applet could then examine the programs state and determine if the student had answered correctly. The result could be reported to the student and/or sent to a marker.

4. The Toolkit's Architecture

The Web has provided a set of standards (HTML, HTTP) that allow documents and other material to be easily distributed via the Internet. This in turn has allowed entire courses and supplementary material to be made easily available. The main goal of the teaching programming toolkit is the creation of a set of Java packages that enable the building of Java applets to teach programming skills. These applets would be part of a set of documents placed on the Web to help the students learn programming skills. The main role of the applets would be to present the dynamic behaviour of programs to complement the static description. To fulfill this role the toolkit has the following capabilities:
display the execution of a high level programming language,
display the values of the program's variables,
display an animation using the program's variables,
control the execution of a program, and
parse and compile a high level programming language.

While the current toolkit supports only the Pascal programming language, one of the design goals of the toolkit is for the easy support of other programming languages.

The main architectural feature of the toolkit is a class that represents the abstract syntax of a programming language. Derived form this class is a set of subclasses where each subclass represents a high level language construct. These classes provide the basis for a set of packages that:
display the concrete syntax of the program in a window, and
execute the behaviour associated with each construct (e.g., a for statement object will evaluated its body a fixed number of times).
In addition to the above main packages, there are classes that represent the programs environment, display the environment, control the execution of a program, parse a text file to produce the abstract syntax objects, and emulate a terminal.

The requirement of using readily available Web browsers mandated the choice of the Java programming language. The object-oriented, exception handling, and thread features of the language all proved invaluable in the system construction. As an example, controlling the execution of the interpreted program is implemented by using a thread to execute the program and a thread to control the execution.

5. Performance and Reliability Issues with Java Virtual Machines

The Java programming language and the Web browser that implement the Java Virtual Machine are still relatively new. This newness implies that the computer environment used by students who are viewing the Web pages containing the IDE applet must be tested. One of the hopes for Java is its ability to run anywhere, unfortunately this is still not universally true. The IDE applet appears to work well on Netscape 4.0 and Netscape 3.0 on a Linux machine. There are problems with Internet Explorer 3.0 on Window95.

Another issue for any Web based course where the students connect over low speed lines is the size of the applet. The IDE applet is 924517 bytes (around 11 minutes of download time for a 14.4 modem). This size can be reduced, but even with a 50 percent reduction download times would be a concern. Where download times are a problem, a copy of the applets and associated pages should be made available so that they can be downloaded once.

The IDE applet has been tested on PCs ranging from a 486/75MHz to a PentiumPro/200MHz with acceptable performance.

6. Observations on the Toolkit's Implementations

The toolkit was developed over the 12 month period from September 1996 to August 1997. The toolkit contains approximately 30,000 lines of Java code (including comments). The ANTLR parser generator by the MageLang Institute was used to generate the Pascal parser. Adding languages similar to Pascal should only require the development of parser for that language. Most of the code was written by three fourth year computer science students.

I believe the feature set of Java allowed the project to proceed fairly smoothly with relatively novice programmers. Java's threading and OO support were major assess. Threading allowed the separation of the interpreter from the debugging controller. The architecture of the interpreter depended heavily on Java's OO features.

While the Java language seems to be a very effective tool, the implementation of the development environments and API class libraries require more work. The AWT class library in particular is not very stable. Developing applets requires careful testing of AWT features on the different target browsers. Currently, developing applets that work on the most common requires the 1.02 version of Java. This is a problem since key features of the AWT class library have changed in Java 1.1 and beyond.

7. Conclusions and Future Directions

The Teaching Programming Toolkit has been used to create an IDE applet, which in turn can used to demonstrate many of the concepts required by a CS1 course. Although the system is relatively new and under development it appears to be stable. However the system has not yet been used for a course. The toolkit is available in source code form under the GNU Copy Left license from the author.

The following areas are under active development:
improvement in the handling of syntax errors,
algorithm animation support with more data viewers (e.g., linked-lists),
parsing and translation for a subset of Java, and
general code clean up.


Memorial's Dean of Science Teaching Innovation Award provided funding for this project. The following student programmers were instrumental in the development: Salimah Addetia, Scott Hutchens, and Marian Wissink. A start on the animation system was made by Mike Stewart for his honours thesis.

Name: Rodrigue Byrne
Department: Department of Computer Science
Institution: Memorial University of Newfoundland
Postal address: St. John's, Newfoundland, A1B 3X5
E-mail address: rod@cs.mun.ca
Web address: http://www.cs.mun.ca/~rod