Button Actions

This dialogue box is shown when you right-click over a button object and select Properties. The dialogue can take one of two forms depending on whether the button is a pushButton or an imageButton.

  

Every screen object has a unique ID and a name. Buttons are no exception. The ID value is determined by the system and cannot be changed. The name of the object is for the author's own reference. The name should comprise alphanumeric characters and should be, but need not be, unique.

The Left, Top, Width and Height properties indicate the position and size of the object in pixels. Position is relative to the top-left corner of the working page. Adjusting these values and clicking the Apply button can make fine adjustments.

When a button is first added to a page it is displayed with it default size. The width and height properties can then be changed and the button will stretch to the new dimensions.

The value of the Layer property is used to determine the position (depth) of the object relative to other objects on the page. Objects of higher value will be 'on top' and will catch the user clicks in preference to objects on lower layers. All objects drawn directly on the page should be at layers 1 and above; otherwise they may interfere with system objects such as the page itself.

The class property determines the style of the object as it may be described in the system specification. For button objects there are relatively few options; the caption fonts and border styles vary.

Buttons have two states; they can be set enabled (state 1) or disabled (state 0). When the page is entered the state is set to the value of the Initial state property.

Buttons can have a text caption. Setting the Captn property specifies this. The caption will be arranged over one or more lines depending on the dimensions of the button.

If the Initially visible property is not set, the button will be hidden when the page is entered in student mode. The group can be shown later using a system command placed on a button

Push buttons may be transparent. Also, the width of the border may be changed. (Note that, because of the way Internet Explorer 5.5 and later works, clicking over the transparent part of transparent push-buttons will not activate the button if there is an object beneath the button - this is a nuisance when making a hotspots e.g. over an image - instead use image buttons with a transparent .gif).

PushButtons have a conventional Windows style. The text caption, which is normally set to the colour specified by the Font colour: Off property, changes colour to the colour specified by the Rollover property when the mouse rolls over the button. Clicking on the coloured panels and changing values in the standard Windows dialog change these colours. The background colour is set by the value of the Fill colour property. The value of the padding property determines the size of the internal margin ('padding') with which the caption text is placed in the button area. Typically, this value is used to centre the text in the button area.

ImageButtons have up to four images. The Imgs property gives a list of the names of the associated image files, and the Diry property indicates the name of the sub-directory in which they are found. If the files are to be changed, then the Edit image option must be selected instead from the popup menu. The four images correspond to the button states mouse-over, mouse-out, button-down and disabled.  The text caption is set to the colour specified by the Font colour property and is drawn over the top of the images.

Both types of button have an action list which is specified in the value of the Actions property. This list is scanned each time there is a click event (onClick, onClickOn, onClickOff ), a mouse-enter event (onEnter), and a mouse-leave event (onLeave). The buttons toggle on and off, and whereas onClick fires at every click of the button, onClickOn and onClickOff fire alternatively (starting with onClickOn).

There are normally five items specified on each line in the action list.

<event>,<object ref>,<to state>,<to position>,<delay>

The first is the button event that fires off the action. The second is a reference to the object which is to carry out the action. The reference is made up from the characters 'Cel', for a cel, or 'Btn', for an action button, followed by the ID of the object. (Note that case is important.) The third item is an integer and indicates the state which is to be taken (=0,1,2,3,4 ... for cels, = 0,1 for buttons), and the fourth item is an integer which indicates the position (=0,1,2,3,4... for cels, =0 for buttons). Finally, the fifth item is an integer indicating the time delay, in 1/1000 sec., before the action takes place.

Alternatively, a 'null' value can be specified for the state of a cel, and this switches the cel into 'repeat' mode.

There is an additional form, which can be used for the actions. A line can contain two items,

<event>, <command line>

In this case a Javascript command line is executed. Examples of this form are

onClick,goPage(9)

which would always send the user to the page with id 9, and

onClick,alert('Now go to the diagnostics page');goPage(9)

which would display a message and then go to the page with id 9. The onclick command can also be used to open a hyperlink in a new window.  The following example:

onClick,goHyperLink('www .e2train.com')

would open a new window for the requested hyperlink.

Take care if the Javascript option is not the last one on the list, because object references may be affected. For example, if you move to another page, then the current references will no longer apply and a runtime error will occur.

Finally, the Cancel button cancels the property changes, and the Apply button can be used to 'try out' the changes before clicking OK and accepting them.