Weasel Tutorial
Introduction
(Copyright 1999-2004 Interactive Information Ltd)

Weasel is a package of software and mapping designed to make it easy for you to create sophisticated user interfaces in a Web based system.

The Structure of a Weasel Application

When you build application, you will create a number of web pages. In at least one of those pages will include some of our software: the Easel applet (a Java program which interacts with the user) and some JavaScript code that goes with it.

Building your interface is mostly a matter of writing a small amount of JavaScript to control the applet and tell it what you want displayed on the Easel applet, and how it should react to user actions such as mouse clicks.

The standard JavaScript libraries we supply with Weasel handle all the details of interacting with the applet. They provide a framework for building interfaces that lets you create sophisticated applications just by writing a few small functions in JavaScript.

The Tutorials

The tutorial also uses three smaller windows.

Explanation Window

This contains a detailed description of how the application was programmed to do what it does. For most tutorials, the Explanation Window opens automatically when the example application starts, but since this tutorial doesn't have an example application, you will only see the it if you click here.

Code Window

This displays an annotated version of the HTML and JavaScript that make up the example application

Comment Window

This will, if requested, display more detailed commentary on something in the Code Window.

Important: because the tutorials open these extra windows, your web browser may ask you if you wish to allow them to `pop-up'. Be sure to say yes.

Where the tutorial text refers to a particular feature of the application, it contains a link which will display the actual code in the Code Window. Here is an example link: [blankpage:S2], and if you have chosen to open the Explanation Window, you will see some others. Although for this tutorial those links only relate to some rather pointless text, they do show how comments in the Code Window include links (marked with More Information...) which display detailed commentary in the Comment Window.

These four windows --- the main Application Window, the Explanation Window, the Code Window and the Comment Window --- will in turn let you explore what the example application does, tell you how it was built, let you see the code that does it, and give you more details on that code.

Finally, each tutorial suggests some short exercises. Most are based on making simple changes to the tutorial examples. Doing them will help you learn how and where you can change things to achieve a particular effect. This will make it easier for you to use one or other of the examples as a starting point for building your own interfaces.

To make it easier for you do do the excercises, there is a second copy of each tutoral application in the same folder, so you can edit the copy and still have the original to hand to look at. If a file in the tutorial is called egmain.html, the copy will be called mymain.html. The only difference between the original and the copy is that the page background color in the copy is cream rather than white, so you can easily tell which you are looking at.

What To Do Now

To help you find the various files in this tutorial, the names of files you might want to view or edit are given at the bottom right of the page. The file names start from the tutorial folder below wherever you installed the Weasel distribution, using the Web convention of separating parts of the name by `/' rather than the Windows `\'. Thus this page is tutorial/intro/index.html. Make sure that you can find this file, so that you will know how to find parts of the tutorials later on.

Once you're sure you can find the files, it is time to move on to the first tutorial: