BISL User's Manual
Simon D. Levy
Computer Science Department
Brandeis University
Waltham, MA 02254
levy@cs.brandeis.edu

Summary

BISL (``Button-Image Scripting Language'') is a little language for writing applets on the World Wide Web. BISL provides Web-page designers with more flexibility and power than HTML, while avoiding the complexity of Java and JavaScript.

The BISL compiler, currently available for UNIX platforms only, accepts BISL code as input, and writes Java code as output. Assuming the file test.bisl exits, the command bisl test.bisl will cause the file test.java to be written; this file can then be compiled using the javac command, and the resulting test.class file can be included in the APPLET tag of an HTML document, as with any Java applet.

Design Philosophy

BISL draws on the notion of a constraint graph, defined as a set of nodes connected to one another by a set of directed edges. If an edge exists from node A to node B, we say that A constrains B in some way. For example, A might represent a region of the Web page being designed, and B might represent a hyper-link to another page. By constructing a ``click'' edge from A to B, we encode the behavior of switching to the new page when clicking on a region of the current page.

In order to construct nodes, BISL relies on the concept of a tuple (ordered set). Tuples are constructed from primitive items, like file names and integers, and from other tuples. For example, in order to read in an image (.gif) file and place it somewhere in a page, a BISL programmer would create a giff tuple using the image file name, a placement tuple using the giff tuple name, and finally an image node using the placement tuple name. This scheme helps reduce the amount of redundancy in the language; for example, a placement tuple can be used to place an image or a text string.

Type system

Substantive (``input-only'') nodes

A substantive, or ``input-only'' node is a node that allows you to do something that the user can observe, like showing an image or playing a sound. You can think of this kind of node as input-only, because there cannot be an edge exiting the node in the constraint graph.

BISL supports the following substantive node types:

Image

An image node is used to display an image on the page. The image is first read from a .gif file, put in a placement, and then displayed using the image command, as shown by the following example:


g < giff(picture.gif)
p < place(g, 100, 200)
image(p)

This example reads a GIFF from the file picture.gif, places the image at 100 pixels over and 200 pixels down from the upper-left corner of the page, and displays the image. Note the use of the identifiers g and p, which store the results of creating the tuples for the giff and the placement.

Background

A background node is used to tile a background image on the page. The image is first read from a .gif file, and then displayed using the back command, as shown by the following example:


g < giff(background.gif)
back(g)

Sound

A sound node is used to play a sound from a .au file. Typically, the playing of the sound will be constrained by some other action, such as clicking on part of an image or the background. Otherwise, as in the following example, the sound will be played as soon as the applet is launched:


sound(startup.au)

Text

A text node is used to display a single line of text. The text is specified using a string tuple, placed using a placement tuple, and then displayed by creating a text node from the placement tuple, as shown in the following example:


s < string('Hello, world!', TimesRoman, ITALIC, 24, blue)
p < place(s, 50, 120)
text(p)

In this example, the string 'Hello world!' is displayed in blue using 24-point TimesRoman font, italic style. Only the first argument of the string tuple (the string itself) is required; the others can be left blank. See section 3.2.4 for a complete description of the string tuple.

URL

A URL node is used to change to a new location on the Web. Typically, this will be done in response to some action, like clicking on part of an image. In the following example, the browser would move to a new location immediately after loading the applet -- not very useful, but provided to show the syntax of the URL command:


URL(http://www.cs.brandeis.edu)


g1 < giff(pic1.gif)
p1 < place(g1, 100, 200, 1)
image(p1)

g2 < giff(pic2.gif)
p2 < place(g2, 150, 250)
image(p2)

Depth codes the drawing order for the placed items; higher numbers indicate background and lower numbers foreground. If no value is specified the depth defaults to zero. So in the example above, the image in pic2.gif would be placed over the image in pic2.gif.

Regions

A region is a location, within an image or the background, that can be used to constrain the area over which some action will have an effect. A region can be specified with respect to a placement (image or text); if the placement is left out, the region is considered to be part of the entire page. Regions provide similar functionality to image maps in HTML, and are therefore useful for creating ``buttons'' for user interfaces.

Rectangle

A rectangle region is specified by using the rect command with an upper-left pixel coordinate, a lower-right pixel coordinate, and an optional placement name,:


g < giff(picture.gif)
p < place(g, 100, 200)
r < rect(20, 20, 80, 100, p)

This example creates a rectangle within the image loaded from picture.gif, with an upper-left corner at location (20,20) within the image, and a lower-left corner at location (80,100) within the image.

Circle

A circle region is specified by using the circ command with a center coordinate, a radius, and an optional placement name:


c < circ(50, 70, 40)

This example creates a circle within the page, centered at location (50,70), and with a radius of 40.

String

The string tuple can be used to create a one-line text string, with desired font, style, size, and color. If any of these properties is left out (via comma-delimited whitespace), BISL uses a default value. The default string properties are 14-point plain black Chicago font.

BISL uses the fonts available on whatever system you're running. Possible styles are PLAIN, BOLD, and ITALIC. Possible colors are white, black, lightGray, gray, darkGray, red, green, blue, yellow, magenta, cyan, pink, and orange. The following example shows the creation and placement of a text string:


s < string('Hello, world!', TimesRoman, ITALIC, 24, blue)
p < place(s, 50, 120)
text(p)

Constraint (``output-only'') nodes

Constraint nodes are BISL's way of handling mouse events initiated by the user. Like substantive nodes, constraint nodes are built from tuples. Unlike substantive nodes, however, constraint nodes are assigned to names, which can then be used to constrain a substantive node. You can think of the constraint node's name as an edge in the constraint graph, transmitting the value True (On) to a substantive node when some action takes place, and the value False (Off) otherwise. BISL allows constraints to be expressed not just in terms of individual edges, but also in terms of Boolean expressions over such edges. So, for example, you could specify that a given image is to appear only when the user has clicked a certain button and is moving the mouse over some region in the screen.
The following constraint types are supported:

Rollover

A rollover occurs when the mouse enters some part of the page -- an image, a line of text, or a region defined using one of the region tuples described in the section above. The rollover edge is set to True when the mouse enters the relevant area, and is set to False when the mouse leaves the area.

The following example shows a rollover being used to trigger the display of an image when the mouse enters a line of text:


s < string('Check this out', Helvetica, BOLD, 18, red)
p < place(s, 100, 120)
text(p)
r = roll(p)
g < giff(exciting.gif)
p2 < place(g, 300, 250)
image(p2, r)

Note the use of the equal sign, which is common to all edge-creating commands, and the inclusion of the identifier r in the specification of the image node. An edge identifier is the optional final argument of any node command. Including an edge in the creation of a node makes the node's behavior contingent on the action specified by the edge.

Click

A click is defined as the pressing and releasing of a mouse button on some part of the page. The press and release actions must take place within the specified area, and the cursor must not leave this area between these actions, in order for the sequence to qualify as a click. Upon release of the mouse button, the click edge is set to True.

The following example shows a click edge being used to change Web pages, via a click on a specified rectangular region of the current page


r < rect(20, 20, 80, 100)
c = click(r)
URL(http://www.cs.brandeis.edu, c)

Dclick

A dclick (``down-click'') edge is defined as the pressing of a mouse button on some part of the page. Hence, it is like a click edge, except that no release is required to set the edge to True.

Input-output nodes

A third type of node supports both incoming and outgoing edges. The only currently supported input-output node is the toggle node. A toggle examines the value of its incoming edge, and if this value is True, sets the value of its output edge value to the opposite its current value; i.e, if the outgoing edge is True, toggle sets it to False, and if it is False, toggle sets it to True. (All edges start off false when the applet is launched.)

The following example shows a toggle being used to control the playing of a sound. This would typically be done for a long sound file, which the user might not necessarily want to hear in its entirety:


g1 < giff(button.gif)
p1 < place(g1, 200, 220)
image(p1)
c = click(p1)
t = tog(c)
sound(symphony.au, t)

Semantics

This section describes how BISL handles potentially confusing situations, such as image overlap and the playing of long sound files.

Visual overlap

As described above , BISL displays images and in reverse order of the depth values specified in their placement tuples (lower depth = farther ``forward'' on screen). If two items have the same depth, they are displayed in the reverse order that their nodes are declared in the BISL code -- i.e., nodes declared earlier in the code will obscure nodes declared later, if the nodes' items overlap.

The depth parameter of the placement tuple can be used to control the ``opacity'' of a visual item: If an item is obscured by an item with a lower depth number, the obscured item will only respond to button clicks in the part of it that is visible. If an item is obscured by an item with the same depth number, the item in the foreground will be ``transparent'' to mouse events; this feature is useful for allowing a button to trigger both the showing and hiding an image that covers it.

Sounds

Whenever a sound is turned on, it is played from the beginning of the .au file, whether or not it was played earlier.

Comments

BISL allows you to insert comments anywhere in the code. Comments begin with the # character and terminate at the end of a line.

Conclusion: Writing courteous applets

BISL provides you with enough power to write applets that do things which most users would find unpleasant. For example, it is a simple matter to write an applet that changes to a new URL whenever the user rolls the cursor over some part of the page. By using a click edge as input to a sound node, you can allow the user to turn on a sound that cannot be turned off until the applet exits -- not a problem for short sound files, but a serious nuisance for long ones.

Of course, BISL provides user-friendly solutions to these problems: Potentially catastrophic changes, like hyper-linking to a new URL, should be triggered by a click-and-release edge (the click command), and the playing of long sounds should be toggled.

BISL User's Manual Simon D. Levy Computer Science Department Brandeis University Waltham, MA 02254 levy@cs.brandeis.edu