Learn Advanced JavaScript Programming

Table of Contents

The getInfo() method does not control the applet in any way. The second method we designed for JavaScript access is setFont(), which is invoked to change the current font of the text in the applet. This method receives three String arguments, specifying the name of the font, its style, and its new size. The setFont() method changes the current font by assigning those strings to the corresponding variables. Note that we could have defined setFontStyle() and setFontSize() as public methods, and added another public method setFontName(), instead of writing a general function to change all of the font attributes at once.

Last, but not least, the public method setText() receives one string and sets the applet’s text to that value. When invoking this method from JavaScript, you should hand it a JavaScript string (an instance of JavaScript’s String object). Since this method is defined to receive an instance of Java’s String object, the value is automatically converted.

Once you write some public methods for JavaScript access, you can try them out by creating an HTML document with the corresponding elements. The following is an HTML document, designed to take advantage of the modifications we made to the nervous class:

<HTML>
<HEAD>
<TITLE>NervousText #2</TITLE>
</HEAD>
<BODY onLoad="document.attributes.info.value =
document.nervousText.getInfo()">
<APPLET CODE="nervous" WIDTH=460 HEIGHT=60
NAME="nervousText">
<PARAM NAME="text" VALUE="Nervous Text">
<PARAM NAME="speed" VALUE="100">
<PARAM NAME="font" VALUE="Arial">
<PARAM NAME="size" VALUE="36">
<PARAM NAME="style" VALUE="plain">
</APPLET>
<SCRIPT LANGUAGE="JavaScript">

<!--
function getInfo() {
  document.attributes.info.value = document.nervousText.getInfo()
}

function setFont() {
  var fontSelect = document.attributes.fontName
  var fontName = fontSelect[fontSelect.selectedIndex].value
  var styleSelect = document.attributes.fontStyle
  var fontStyle = styleSelect[styleSelect.selectedIndex].value
  var sizeSelect = document.attributes.fontSize
  var fontSize = sizeSelect[sizeSelect.selectedIndex].value
  document.nervousText.setFont(fontName, fontStyle, fontSize)
}

function changeText() {
document.nervousText.setText(document.attributes.message.value)
}

// -->

</SCRIPT>

<FORM NAME="attributes">
<INPUT TYPE="button" VALUE="start"
onClick="document.nervousText.start()">
<INPUT TYPE="button" VALUE="stop"
onClick="document.nervousText.stop()">
<BR>
Font name:
<SELECT NAME="fontName" onChange="setFont()">
<OPTION VALUE="Arial" SELECTED>Arial
<OPTION VALUE="Courier">Courier
<OPTION VALUE="Helvetica">Helvetica
<OPTION VALUE="TimesRoman">Times Roman
</SELECT>
Font style:
<SELECT NAME="fontStyle" onChange="setFont()">
<OPTION VALUE="Bold">Bold
<OPTION VALUE="Italic">Italic
<OPTION VALUE="Plain" SELECTED>Plain
</SELECT>
Font size:
<SELECT NAME="fontSize" onChange="setFont()">
<OPTION VALUE="18">18
<OPTION VALUE="24">24
<OPTION VALUE="36" SELECTED>36
</SELECT>
<BR>
<INPUT TYPE="text" VALUE="Nervous Text"
NAME="message" SIZE=20>
<INPUT TYPE="button" VALUE="change text"
onClick="changeText()">
<BR>
<TEXTAREA COLS=62 ROWS=15 NAME="info">
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Example 31-4a (ex31-4.htm). An HTML document with many form elements to control the applet.

The getInfo() function invokes the getInfo() method of the nervous class, and displays the returned value in the text area (named info).

The setFont() function retrieves the value of the selected option in each select object on the page. In total, there are three select objects, each standing for one font attribute:

The font’s name
The font’s style
The font’s size

This function is invoked by the select object’s onChange event handler, so it executes whenever the user changes one of the font attributes. After gathering the essential data, setFont() calls the applet’s setFont() method, which is referenced in Java as document.nervousText.setFont().

The changeText() function is invoked by the “change text” button’s onClick event handler. It invokes the applet’s setText() method, handing it the string located in the text field named message.

Why Make an Applet Scriptable?

The prospect of scriptability should open up a new avenue for applet developers. Java programmers are no longer limited to building the entire user interface in the applet window. Applet developers can now let HTML and JavaScript authors create their own interface to an applet, matching their personal needs. With just a few HTML elements, such as tables and layers, one can redesign an applet’s interface.

LiveConnect enables JavaScript-Java integration. Java’s strength can contribute to various JavaScript applications. You can use JavaScript, for instance, to call a Java method to spell-check the content of an HTML form element. Java’s ability to read and write files on the server can add power to a simple JavaScript device. As you can see, LiveConnect has opened a whole new world for HTML, JavaScript, and Java programmers.

Controlling Plug-ins

As explained in the previous chapter, each plug-in in a document is reflected in JavaScript as an element in the document.embeds array. If the plug-in is associated with the Java class netscape.plugin.Plugin, you can access its static variables and methods in the same way you access an applet’s variables and methods. Plug-in development is beyond this book’s scope. Take a look at The LiveConnect/Plug-in Developer’s Guide at <http://home.netscape.com/eng/mozilla/3.0/ handbook/plugins/index.html>. In this section we’ll show you how JavaScript can control plug-ins that were developed with LiveConnect in mind. We’ll focus on LiveAudio and LiveVideo, because these plug-ins come bundled with Netscape Navigator.

Table of Contents