Interfacing with JavaScript (Java)

JavaScript can greatly extend the power and flexibility of your button applet. The following deals with the Java version of 1 Cool Button Tool. It covers the Java/JavaScript interface which operates in both directions:

  • Java calling JavaScript
    Where the button applet calls a JavaScript function in response to some event such as a mouse click.

JavaScript calling Java:

1 Cool Button Tool provides a number of public methods for controlling a button applet. You can change a button's state (up, down or mouse-over), a button's visibility (hidden or visible), and a button's size and position.

A Simple Example:
It is very easy to call methods of a Java applet from JavaScript, as this three line example illustrates:

<script language="JavaScript">
document.BtnPlayer.setVisible("hide me", 0);
</script>

When this script is executed, the setVisible() method of the BtnPlayer applet is called, with the first parameter being the name of the button, and the second parameter the visibility state of the button -- where 0 means hide the button, and 1 means show the button. So this example hides the button called "hide me".

Another Example:
This example illustrates calling a button applet method from an HTML hyperlink:

<a href="javascript:document.BtnPlayer.setVisible('hide me', 0);">
Click Here to Hide the Button
</a>

This is a standard HTML hyperlink which calls a method of the button applet, rather than linking to another HTML document. When the link is clicked, the setVisible() method of the BtnPlayer applet is called as in the previous example.

Note:
In this example the string hide me must be in single-quotes because the entire href is enclosed in double-quotes.

Applet Method Reference:

The following covers the button applet methods accessible from JavaScript:

Set/Get the button state:

Where sButtonName is the name of the Button you want to change, or query.

int document.BtnPlayer.getState(String sButtonName)
void document.BtnPlayer.setState(String sButtonName, int iState)

and iState values have the following meaning:

iState = 0: The button is in the up state.
iState = 1: The button is in the mouse-over state.
iState = 2: The button is in the down state.

Set/Get the visibility of a button:

Where sButtonName is the name of the Button you want to change, or query.

int document.BtnPlayer.getVisible(String sButtonName)
void document.BtnPlayer.setVisible(String sButtonName, int iState)

and iState values have the following meaning:

iState = 0: The button is hidden.
iState = 1: The button is visible.

Set the position and size of a button:

Sets the position and size of a button. Where sButtonName is the name of the Button you want to change.

void document.BtnPlayer.setRect(String sButtonName, int iLeft, int iTop, int iWidth, int iHeight)

iLeft is the x-coordinate of the top-left corner of the button.
iTop is the y-coordinate of the top-left corner of the button.
iWidth is the width of the button in pixels.
iHeight is the height of the button in pixels.

Get an attribute of a button:

Gets an attribute of a button. Where sButtonName is the name of the Button you want to query.

int document.BtnPlayer.getAttrib(String sButtonName, int iAttrib)

and iAttrib values have the following meaning:

iAttrib = 0: Returns the x-coordinate of the top-left corner of the button.
iAttrib = 1: Returns the y-coordinate of the top-left corner of the button.
iAttrib = 2: Returns the width of the button in pixels.
iAttrib = 3: Returns the height of the button in pixels.

Example:
This assigns the width of Button 1 to the variable iWidth.
var iWidth = document.BtnPlayer.getAttrib("Button 1", 2);

Set an attribute of a button:

Sets some attribute of a button. Where sButtonName is the name of the Button you want to change.

Void document.BtnPlayer.setAttrib(String sButtonName, int iAttrib, int iValue)

and iAttrib values have the following meaning:

iAttrib = 0: Sets the x-coordinate of the top-left corner of the button.
iAttrib = 1: Sets the y-coordinate of the top-left corner of the button.
iAttrib = 2: Sets the width of the button in pixels.
iAttrib = 3: Sets the height of the button in pixels.

Example:
T this sets the height of Button 1 to 30 pixels.
document.BtnPlayer.setAttrib("Button 1", 3, 30);

Perform an Action:

Performs the action specified by the sActionString. The action string is used exactly as it is in the 1 Cool Button Tool application.

Void document.BtnPlayer.performAction(String sActionString)

Example:
This moves Button 1 across the applet area over 20 frames.
document.BtnPlayer.performAction("Move Button 1: 100+,100+,20,5");

The Significance of the Applet Name:

Updated in Version 4.5

On the Build Applet Tab you have the option to set an Applet Name. This is useful if you have more than one button applet in a single HTML page. The applet name allows you to distinguish between the button applets.

By default now, the applet name is the same as the project name.

Example:
If you had two button applets, one called MenuApplet and one called ButtonApplet, you can call methods in the two applets like this:

document.MenuApplet.setVisible("Button 1",0);
Hides Button 1 in MenuApplet

document.ButtonApplet.setVisible("Button 1",1);
Shows Button 1 in ButtonApplet

Java calling JavaScript:

Updated in Version 4.5

Your button applet can call a JavaScript function in two ways:

  • By using a javascript: URL

    When a button is clicked, and the Link URL begins with "javascript:" a JavaScript function will be called.

    The syntax for a JavaScript URL is:
    javascript:functionName([param1], [param2], ...);

    Example:
    The URL javascript:add(a, b); will call the function add and pass the parameters a and b.

  • By using a Call action

    When some event happens (such as entering a button) and a Call action is specified, a JavaScript function will be called.

    The syntax for a Call action is:
    Call functionName([param1], [param2], ...)

    Example:
    The action Call add(a, b) will call the function add and pass the parameters a and b.

Working with older browsers:

Internet Explorer 3.x does not support Java applets calling JavaScript functions.

The code is as follows:

<script language="javascript">
<!--
function InitJSCaller()
{
if (navigator.appName.indexOf("Microsoft") != -1 &&
parseFloat(navigator.appVersion) < 4.0)
JSCaller();
}
function JSCaller()
{
if (document.BtnPlayer != null)
while ((sEval = document.BtnPlayer.getJS()) != null)
eval(sEval);
setTimeout("JSCaller()", 200);
}
// -->
</script>

For this code to work correctly, you MUST call InitJSCallerfrom the body tag of your HTML file, like so:

<body onload="InitJSCaller();">

How does JSCaller work?

First the function InitJSCaller checks whether the browser is Internet Explorer 3.0. If IE3 is running this script, InitJSCaller calls JSCaller, otherwise it exits immediately.

The function JSCaller then checks whether the button applet is up and running (by comparing document.BtnPlayer with null). If the applet is not running, JSPlayer sets a timer for 200 milliseconds (on fifth of a second), during which the script is "asleep", then calls JSCaller again. This process is repeated until the button applet is up and running.

Once the button applet is running, JSCaller calls the getJS() method of the button applet. If the button applet has attempted to call a JavaScript function in the preceding 200 millisecond interval getJS() will return the name of the function to call, and any parameters. For example, getJS() may return "add(a, b);".

If getJS() returns a non-null string, the JavaScript function is executed using the eval() function. This is repeated until all queued function calls have been executed, and getJS() returns null. JSCaller() then goes to sleep for another 200 milliseconds, and the process starts again.

This technique is not perfect, but it does ensure that the Java to JavaScript interface works across all popular browsers -- Netscape 3/4, and Internet Explorer 3/4. The major flaw in this technique is a lag of up to 200 milliseconds before a JavaScript function is called. You can reduce this lag by reducing the length of the timer interval, but it is inadvisable to make the interval too short, or the browser will spend all its time executing JSCaller.