Purpose

To create nice buttons for effective user interfaces. Buttons can be of various types as follows:

rollover
the button "illuminates" when a mouse rolls over it.
toggle
the button stays down when it is clicked and must be clicked again to clear it. Toggles can have separate up and down state actions and tooltips.
grayable
the button can be grayed out.

Buttons can be created with any combination of these properties. Their properties may not be changed once they are created.

The author must provide gifs for each possible button state. The possible button states depend upon the properties chosen as shown in Table 1. gifs must be labelled as shown in the table and must be stored in the site_resources/images directory.

xx simply refers to the Base gif. For example, the TeachingMachine run button has the base gif "runButton". Since the TeachingMachine run button is a non-grayable, non-toggle, rollover button the required button gifs would be "runButtonNormal.gif", "runButtonDown.gif" and "runButtonOver.gif".

isRollover
isToggle
isGrayable
States
gifs needed
false
false
false
2
xxNormal xxDown
false
false
true
3
xxNormal xxDown xxGray
false
true
false
2
xxNormal xxDown
false
true
true
4
xxNormal xxDown xxGray xxGrayDown
true
false
false
3
xxNormal xxDown xxOver
true
false
true
4
xxNormal xxDown xxOver xxGray
true
true
false
4
xxNormal xxDown xxOver xxOverDown
true
true
true
6
xxNormal xxDown xxOver xxOverDown xxGray xxGrayDown
Table 1: Buttons states and gifs required by button type.

Available Functions


createButton(gifBase, isRollover, isToggle, isGrayable, actionString, tooltip, downActionString, downtip)

Arguments

gifBase
a string giving a unique base name for the button gifs. Actual gifs must be stored in the /site_resources/images directory and must be named gifBaseNormal.gif, gifBaseOver.gif, etc. according Table 1.
isRollover
a boolean: true makes a button that exhibits rollover behaviour.
isToggle
a boolean: true makes a button that toggles—stays down when it is pressed and must be pressed again to release it.
isGrayable
a boolean: true makes a button that can be grayed out.
actionString
a string defining the action that will be taken when the mouse goes up. The onMouseUp handler.
tooltip
a string giving a tooltip that will come up when the button is rolled over.
downActionString
a string defining the action that will be taken when the mouse goes up and the button is in the down state. The onMouseUp handler when the button starts in the down position. Only valid for toggle buttons.
downtip
a string giving a tooltip that will come up when a toggle button in the down position is rolled over. Only valid for toggle buttons.
 
Return
a reference to the button that is created is returned
Action

The button is written dynamically into the document at the point of invocation.


grayOut(gray)

Arguments

gray
a boolean: true grays out the button, false enables it. Only works for buttons that have been created as grayable.

Comment

This is a member function of class Button and so must be invoked with respect to a particular Button object.


Examples

Here is a hard-coded mockup of what insertCode creates (only the second last button is functional)

greenboard dummy_mockup.cpp
/*******  Simple Variables Demonstration ********
To demonstrate on the teaching machine the four
fundamental attributes of simple C variables
name, type, value, location

*******************************************/

#include 
using namespace std;

int main(){
    int i = 110;
    char letter;
    bool flag;
    double pi;
    
    letter = 'n';
    flag = false;
    pi = 3.14159;
    
    
    cout << "i = " << i << '\n';
    cout << "flag = " << flag << '\n';
    cout << "letter = " << letter << '\n';
    cout << "pi = " << pi << '\n';
    return 0;
}