Figure 1 - Interface of WebSteer's Core Controller
Jorge H. C. Fernandes <jhcf@di.ufpe.br>
Silvio Lemos Meira <srlm@di.ufpe.br>
Universidade Federal de Pernambuco
Brazil
This paper presents WebSteer: a framework for construction and delivery of interactive documentation, training, and education material over the Web. WebSteer extends the current technology of Java applets and HTML browsing by creating a highly interactive instructional setting. WebSteer is based on the laboratory metaphor in which students follow instructional modules (courseware) by interacting with informative texts and reactive instruments in a scripted environment. WebSteer allows the user to select and follow any courseware made available by providers. Courseware is composed of a (possibly open) set of HTML pages, a set of scripts, and a set of applets (instruments). The HTML pages are rendered by a special-purpose HTML browser: the Slide Projector. The instruments (applets) are laid over the Workbench and cater to the multimedia user interface. They generally simulate the workings of laboratory instruments that are manipulated by the user. The scripts are hosted in the HTML pages and written in a purpose-designed language called JetScript. This script describes how to map events that are raised by the instruments and by the Slide Projector into messages that are sent to the other instruments and to the Slide Projector.
The main differences between the WebSteer model and the Java applet model created by Sun Microsystems and supported by popular HTML browsers like Netscape Navigator and Microsoft Internet Explorer are the promotion of applets to the status of first-class Web components; and the provision of a simple, detached, and high-level event-handling mechanism between applets and HTML pages.
The intense use of the Internet and of the Web for the construction and deployment of advanced, open, and long-distance instruction tools is eagerly anticipated, and is the goal of intense research [1, 2]. While many sophisticated instruction tools available today are closed systems, sharing neither content material nor interface elements with other environments [3], the Web made available a huge and shared information base that may be successfully used for construction of open education and training tools.
Although the conventional teacher-directed instruction mode relies on this figure as the didactic knowledge dispenser, the use of networking technologies for long-distance instruction cannot rely on the teacher as sole controller of the subject matter. Long-distance instruction needs independent and highly interactive construction blocks that are directly manipulated by the student but that are also controlled to some degree by teachers and course facilitators.
The recent introduction of the Java [4] programming language and of HTML browsers that support the execution of Java applets, like Netscape Navigator, provided an innovative way to deliver dynamic information over the Web. Applets are programs written in Java that can be downloaded automatically from Web servers and executed inside browsers at the user's end. The applet code is highly portable among different computational platforms and have multimedia capability, being able to manipulate images, sound, and text. An applet is hosted inside a specific HTML page, and its graphical interface is presented in a predefined area within this HTML page's display space. The ubiquitous applet technology has already produced a foundation for the construction of interactive content that is being used for education and training purposes. For example, the Gamelan directory of educational applets [5] already had approximately five hundred entries in January 1997.
Unfortunately, the standard applet technology is prevented from providing a satisfactory level of integration with HTML by the following limitations:
The last two limitations can be partially overcome by the additional use of other browser, Web, and networking technologies like JavaScript, CGI, and interprocess communications. However, in our opinion they introduce one more element of complexity for the builder of educational content.
WebSteer solves these three problems by detaching the applet from HTML pages, and by allowing the interoperation between an arbitrary assembly of applets and the HTML.
The WebSteer approach is based on the following points:
The elements in the architecture of WebSteer are the Slide Projector, the Workbench and the Event Handling System, all under the supervision of the Core Controller.
In its external appearance (Figure 1), the Core Controller shows the list of available courseware and two buttons. It is, in fact, a Java applet, that handles events and controls how the whole system works. To experiment with WebSteer you need only access the home page[9] using some Java-enabled browser, select a courseware, and press the Load Courseware button. In Section 4 we give some information about the our available courseware.
Figure 1 - Interface of WebSteer's Core Controller
The Slide Projector (Figure 2) is a simple HTML browser that renders normal HTML text, signaling to the Core Controller when the user follows any HTML reference. In addition to rendering HTML pages, the Slide Projector allows you to step back or forward in the browsing. As the user cannot freely choose an URL to be loaded, the browsing scope is limited to a predefined set. Under the control of the Core Controller, the Slide Projector may also load any HTML page given by the courseware.
Figure 2 - Slide Projector showing an excerpt from the courseware
Learning Real Numbers
The Workbench supports the loading and execution of an arbitrary set of applets. It detaches the applets from an HTML page and aggregates them over a common interface area. By using the techniques described in Section 4, you may easily adapt any applet to raise events and receive messages, so that it may work cooperatively with the other applets. Figure 3 shows the Workbench loaded with the Segment Calculator, an instrument used in the courseware Learning Real Numbers. While the user can interact directly with the instrument's graphical user interface (GUI), some of its functions are triggered by the interaction of the user with the Slide Projector. For instance, the link Example: Formula for the Distance (underlined in the Figure 2) enables an specific mode of operation (calculating the distance between two points) of the instrument.
Figure 3 - Workbench loaded with the Segment Calculator
The invisible element that supports the architecture of WebSteer is a simple yet powerful event-handling system programmed in JetScript. Below, we explain the concepts of events, messages, and JetScript.
There are two types of events in WebSteer: slide and instrument. A slide event is raised by the Slide Projector when the user selects an HTML reference inside the document its is browsing. An instrument event is generated by instruments that are loaded on the Workbench. The WebSteer programming framework supports the easy transformation of ordinary applets into WebSteer's instruments. In the current version of the WebSteer's event system, the information contained in an event are the type of event raised (slide or instrument) and the name of the event. Some example events are:
Messages are requests for computation sent from the Core Controller to the Slide Projector and to the instruments. There are two types of programmable messages in WebSteer: slide and instrument. Slide messages are received by the Slide Projector and carry as an argument the URL of a new document that should be retrieved by the Slide Projector. Instrument messages are received by an instrument and carry a name and a possibly null arguments list. The instrument handles the messages through its handleMessage() method. Some example messages are:
Mapping between events and actions is at the heart of the control in WebSteer and is defined using the JetScript language. JetScript presents the simple declarative syntax shown below. The full syntax is described in the WebSteer Tutorial courseware.
<jetscript> ::= <jetscript <preamble><mappings> jetscript><preamble> ::= name= <script-name>;
instruments= <instrument-list>;<mappings> ::= <mapping>;<mappings>
<mapping> ::= <event> =) <message>
<event> ::= onSlideEvent(<event-name>) |
onInstrumentEvent(<instrument-name>#<event-name>)<message> ::= <slide-message> | <instrument-message>
<slide-message> ::= <url>
<instrument-message> ::= <instrument-name>#<message-name>(<args>))
The syntax above is meant only to give a general idea of JetScript. For the sake of clarity we allow a more relaxed syntax for scripts, as in the example below:
<JETSCRIPT
name = WebSteerInWebSteer;
instruments = WebSteerInWebSteer, SlideSelector;
onSlideEvent(#showWorkbench) =)
WebSteerInWebSteer#showWorkbench();
onInstrumentEvent(WebSteerInWebSteer#Back) =)
scripts/webSteerInWebSteer/BackButton.html;
Forward =)
scripts/webSteerInWebSteer/ForwardButton.html;
#showComponents =)
showSlideProj(), showWorkbench(), showCoreControl();
JETSCRIPT>
When the script above is inside an HTML page loaded by the Slide Projector, the instruments WebSteerInWebSteer and SlideSelector are loaded and laid out on the Workbench. The Controller then watches the occurrence of any of the four events defined in the script and sends the corresponding message to the instruments. The first two mappings use an explicit and longer format, and the last two are abbreviations meant to simplify the writing of scripts. The semantics of each definition is as follows:
onSlideEvent(#showWorkbench) =)
WebSteerInWebSteer#showWorkbench();
When the internal HTML reference #showWorkbench is raised by the slide projector, the message showWorkbench() is sent to the instrument WebSteerInWebSteer
onInstrumentEvent(WebSteerInWebSteer#Back) =)
scripts/webSteerInWebSteer/BackButton.html;
When the event Back is raised by the instrument WebSteerInWebSteer, the HTML page whose (relative) URL is scripts/webSteerInWebSteer/BackButton.html should be rendered by the Slide Projector;
Forward =)
scripts/webSteerInWebSteer/ForwardButton.html;
When an event Forward is raised by any instrument or by the Slide Projector, the page whose URL is scripts/webSteerInWebSteer/ForwardButton.html should be rendered by the Slide Projector;
#showComponents =)
showSlideProj(), showWorkbench(), showCoreControl();
When any event whose name is #showComponents is raised by any instrument or by the Slide Projector, the messages showSlideProj(), showWorkbench() and showCoreControl() should be sent to all the instruments loaded on the Workbench: WebSteerInWebSteer and SlideSelector.
In this section, we give Clock Lecture as an example of courseware being developed in WebSteer. This required the creation of a Java class, ClockInstrument, that defines a WebSteer instrument, and of two HTML pages, one of these hosting a script written in JetScript. This example shows how we can reuse the fully compiled code of any existing applet, such as the Clock2 applet that is in the demo directory of the distribution of the Java Development Kit 1.0.2 from JavaSoft [8]. This clock will be adapted to work as a WebSteer instrument. This is only an introduction to the language we are proposing, and knowledge of Java is not required to understand our approach [4].
public class ClockInstrument
extends Clock2
implements websteer.InstrumentInterface {
public void raise(String s) {
java.awt.Container parent = getParent();
if (parent instanceof websteer.Workbench) {
((websteer.Workbench)parent)
.raise((this.getClass()).getName(), s);
}
}
public boolean action(java.awt.Event awtEvent, Object arg) {
raise(arg.toString());
return super.action(awtEvent, arg);
}
public boolean handleMessage(websteer.Message message) {
if (message.kind().equals("show")) {
show();
return true;
} else if (message.kind().equals("hide")) {
hide();
return true;
} else if (message.kind().equals("stop")) {
stop();
return true;
} else if (message.kind().equals("start")) {
start();
return true;
}
return false;
}
public java.awt.Dimension preferredSize() {
return new java.awt.Dimension(200, 150);
}
}
Basically, a preexisting applet of any size can be adapted by creating a Java class that inherits from the original applet, implements the InstrumentInterface from WebSteer, and declares that at least these four methods: raise(), action(), handleMessage() and preferredSize(). raise() and action() are standard and should not be modified. raise() allows events to be signaled by the instrument. action() relies on raise() to signal that some user interface action was done by the user. The name of the target in the GUI action (arg.toString()) is sent as an event. handleMessage() defines how the instrument copes with the messages it receives. In this case, any ClockInstrument handles only the messages start(), stop(), hide() and show(). The method preferredSize() just returns the expected size that the instrument's GUI occupies over the Workbench.
To allow more interactivity in the courseware, we will insert an extra code that allows the instrument to raise an event named "newMinute" as each minute passes on the clock. This method relies on the updating of the GUI of Java, which automatically calls the method paint(Graphics). The code, as shown below, should be inserted in the ClockInstrument definition above in order to raise this event.
int oldMinute = new java.util.Date().getMinutes();
public void paint(java.awt.Graphics g) {
int newMinute = new java.util.Date().getMinutes();
if (newMinute != oldMinute) {
raise("newMinute");
oldMinute = newMinute;
}
super.paint(g);
}
Below, we show the source of the HTML page that raises the slide events (#stop, #start, #hide and #show). This is made by placing HREFs in the HTML code (<A HREF="#stop">, etc.). The same page contains the script that controls the interaction between the Slide Projector and the ClockInstrument.
<HTML>
<HEAD>
<TITLE>Controlling a Clock Using WebSteer>
</HEAD>
<BODY>
If you <A HREF="#stop">click here<A> the Clock stops.
To get it going again, you <A HREF="#start">click here<A>.
If you don't want to see it anymore,
just <A HREF="#hide">hide it<A>.
To see it again, all you gotta do is to
<A HREF="#show">click here<A>.
</BODY>
<JETSCRIPT
name = ClockLecture;
instruments = ClockInstrument;
#stop =) stop();
#start =) start();
#hide =) hide();
#show =) show();
newMinute =) scripts/ClockLecture/NewMinute.html;
JETSCRIPT>
</HTML>
Although the example provided may seem unnecessarily complex to produce such a result, we have learned that the consistent application of these simple techniques produces useful results. For instance, after the possible incremental definition of instruments' events and messages, it becomes very easy to alter the general behavior of the courseware. Using WebSteer and applets, we have developed courseware, interesting experiments, and useful instruments that show strong possibilities for its use in educational and training settings. As of February, 3, 1997, the current version of WebSteer is itself an applet (and a WebSteer's Instrument), and it presents the following courseware:
WebSteer was developed entirely in Java (10 Kilo Lines Of Code-KLOC), by the Recife Java team, consisting of students, teachers, and researchers from the department of information science at UFPE. We have been simplifying and experimenting with WebSteer since its creation nearly a year ago, and we are developing other applets. Some instruments employed in WebSteer are as big as the environment itself: SegmentCalulator (used in courseware Learning Real Numbers) has 6.5 KLOC and VisibleComputer has 8 KLOC. These applets were developed using the Java Development Kit v. 1.0.2. WebSteer has satisfactory performance in SparcStations, and Intel 486 (16 MB or more) machines in Windows 95, using either applet viewer or Netscape Navigator 2.02 or 3.0. When accessing WebSteer, it is very likely that you may experience some delay while the code is being downloaded over the Internet.
We are actively enhancing WebSteer, and several issues we will be tackling in the near future are:
Our findings about the WebSteer project are as follows:
We wish to express our thanks to the Recife Java team for their hard work in constructing the prototype of WebSteer and courseware; to Sun Microsystems, for providing the source code of the alpha version of the HTML browser HotJava, used as baseline for construction of the Slide Projector; and to Pedro Falcão Goncalves, for his comments and suggestions.