GizmoButton Applet

GizmoButton was created by William Johns of Gizmology Web Development Services (www.gizmology.net).

GizmoButton is a highly configurable button that interacts with other instances of itself on the same page, allowing sets of instances to act as radio buttons. Multiple sets are possible. The appearance of the button can be controlled using graphics (skins), or the button can be allowed to render itself using user-provided text. The button can load a URL into a specified window, call a JavaScript function, or evaluate a line of JavaScript code.

A normal, a locking, and an alternating GizmoButton, using a toggle switch skin.
(Click here to reset the locking button.)

Interlocking buttons. The right two are the default image.

Usage:

	<applet code="GizmoButton" width="75" height="25" mayscript>		
	  <param name="name" value="Button A">
	  <param name="interlocking" value="Group 1">
	  <param name="locking" value="true">		
	  <param name="alternating" value="true">
	  <param name="on" value="on.gif">
	  <param name="off" value="off.gif">
	  <param name="click_on" value="click.au">
	  <param name="click_off" value="click.au">
	  <param name="text" value="Click Here">
	  <param name="function" value="Function();">
	  <param name="url" value="http://www.gizmology.net/">
	  <param name="target" value="_TOP">
	</applet>

The file size is 5,505 bytes. Most browsers will only download it once, regardless of how many instances are on the same page.

Parameters:

All parameters are optional. If none are given, the button appears as a blank gray button the size of the applet (given in the applet tag), and does nothing.

Behavior:

name: an arbitrary string used internally. It is only required for interlocking buttons. Must be unique.

interlocking: a string. If this is set, pushing this button will turn off all other buttons on the page whose interlocking parameter matches this string.

locking: "true" makes this button stay down when pushed. Does not come up when pushed again. If alternating is set to true, locking is automatically set to true.

alternating: "true" makes this a push-on-push-off button.

click_on: sound to play when turned on. Must be in AU format (8000 Hz sample rate). The virtual machine may not react fast enough to play very short clips, so be careful.

click_off: sound to play when turned off. See note above.

Appearance:

on: the filename of the image to use while on. If the applet cannot load this graphic for any reason, including the parameter not being specified, it will render itself as a rectangular, gray button. The image will not be resized to fit the applet – so the image and the applet should be the same size.

off: the filename of the image to use while off. See above note.

text: text to use on the button face when graphics are not supplied or cannot be loaded for any reason. Text will be sized to fit, to a minimum height of 4 pixels. The same text is used in both the on and off positions. If no text is provided, the button will be blank.

Actions:

url: the URL of a page to load when the button is pushed.

target: the name of the window into which the URL above is to be loaded. If the window doesn't exist, it will be created. Defaults to _SELF.

function: JavaScript that will be evaluated when the button first enters the on state. To use this, you’ll need to include the mayscript flag in the applet tag. The function is not evaluated when alternating buttons are pushed to return them to the off state.

Public Methods:

state(); Returns the state of the button - true if the button is down (on), false if it is up (off).

buttonUp(); Causes this button to return to the up (off) state.

buttonUp(String); Causes this button to return to the up (off) state if, and only if, the string in the "interlocking" parameter of this button matches String.

To access the applet methods from JavaScript, use the code:

		
function GetButtonState(button) {
		  return document.applets[button].state();
		};

		
function PopButton(button) {
		  document.applets[button].buttonUp();
		};

		
function PopButtonGroup(group) {
		  for (button=0; button < document.applets.length; button++) {
		    document.applets[button].buttonUp(group);
		  };
		};

...where button is a index of the button in the DOM's applets array - the applets are numbered sequentially, starting with 0, in the order they are encountered in the HTML.

An alternative is to state a name in the applet tag...

		
<applet code="GizmoButton" ... name="ButtonName">

...and then use the code...

		
document.applets.ButtonName.state();

...to access the applet methods.