In this section we cover the basics of the Netscape Navigator and Internet Explorer object hierarchy. Java applets, JavaScript and techexplorer can interact by using properties defined by various web browser objects. These properties can be used to access public interfaces exposed by Java applets, JavaScript and techexplorer. In fact, the techexplorer Web Development Kit includes the ibm.techexplorer.techexplorer Java reflection of techexplorer so that Java applets and JavaScript can access techexplorer's functionality via the web browser object hierarchy.
We provide an example that uses web browser objects, JavaScript, HTML forms, and techexplorer to implement a simple LaTeX editor. Also, we use the classic "HelloWorld!" Java applet to demonstrate communication between JavaScript, HTML forms and Java. The concepts demonstrated by these two examples form the foundation of basic techexplorer scripting.
We complete this section by describing the techexplorer plug-in and ActiveX control life cycle and detailing ways to dynamically detect whether techexplorer has been installed.
Both Netscape Navigator and Internet Explorer creates an object instance hierarchy for every HTML document. The "descendants" of the object hierarchy are document dependent and thus reflect the structure of the HTML page itself. By default, each HTML page provides objects which contain information about the Web browser (navigator object), window or frame (window object), document contained in a window (document object) and URLs (links and history object). Additional objects can be added to the hierarchy by using the NAME attribute of the HTML tag.
Object property values depend on the content of the HTML document and the order in which the document is processed. Web browsers processes the document in a top-down fashion, hence the object property values reflect only the HTML that it has encountered at any given point. Access to an object property before it has been defined will result in an error.
In the context of techexplorer scripting, the window, document, specially named, and plugin objects provide the necessary properties for connecting Java, JavaScript and techexplorer. The window object is the "parent" object for all other objects in the web browser. The document object is a direct descendant of the window object and has a number of properties that reflect the physical document including the Applet and Plugin objects.
Please review Netscape's and Internet Explorer's documentation for further information about the object hierarchy.
The ibm.techexplorer.techexplorer Java class is instantiated each time a techexplorer instance is created and represents the Java reflection of techexplorer. Since all public Java classes in the web browser environment are available to both Java and JavaScript, any applet or script has access to the ibm.techexplorer.techexplorer Java class. The ibm.techexplorer.techexplorer class exposes many public methods that allow JavaScript and Java applets to access techexplorer's functionality. Furthermore, Java applets can register themselves as techexplorer event listeners. techexplorer listeners are interfaces ( techexplorerListener, InstanceListener, MouseListener, MouseMotionListener, KeyListener, FocusListener ) implemented by a Java class that are used by techexplorer to notify Java applets of registered events. The following methods are exposed by the ibm.techexplorer.techexplorer Java class to the web browser environment:
| Method | Description |
| addtechexplorerListener( techexplorerListener listener ) | Register a techexplorer listener (all techexplorer events) with techexplorer. |
| addMouseListener( MouseListener listener ) | Register a mouse listener with techexplorer. |
| addMouseMotionListener( MouseMotionListener listener ) | Register a mouse motion listener with techexplorer. |
| addKeyListener( KeyListener listener ) | Register a key listener with techexplorer. |
| addFocusListener( FocusListener listener ) | Register a focus listener with techexplorer. |
| addInstanceListener( InstanceListener listener ) | Register an instance listener with techexplorer. |
| removetechexplorerListener( techexplorerListener listener ) | Remove a techexplorer listener from the list of techexplorer listeners. |
| removeMouseListener( MouseListener listener ) | Remove a mouse listener from the list of techexplorer listeners. |
| removeMouseMotionListener( MouseMotionListener listener ) | Remove a mouse motion listener from the list of techexplorer listeners. |
| removeKeyListener( KeyListener listener ) | Remove a key listener from the list of techexplorer listeners. |
| removeFocusListener( FocusListener listener ) | Remove a focus listener from the list of techexplorer listeners. |
| removeInstanceListener( InstanceListener listener ) | Remove a instance listener from the list of techexplorer listeners. |
| disableEvents( int eventsToDisable ) | Disables the events defined by the specified event mask parameter from being delivered to a particular techexplorer instance. |
| enableEvents( int eventsToEnable ) | Enables the events defined by the specified event mask parameter to be delivered to a particular techexplorer instance. |
| getTeXString() | Retrieve the document TeX source. |
| reloadFromTeXString(String texSource) | Replace the document with the supplied TeX source. |
| getMMLString() | Retrieve the document MathML source. |
| reloadFromMMLString(String mmlSource) | Replace the document with the supplied MathML source. |
| getWidthFromMMLString(String mmlSource) | Retrieve the width of a MathML expression. |
| getHeightFromMMLString(String mmlSource) | Retrieve the height of a MathML expression. |
| getDepthFromMMLString(String mmlSource) | Retrieve the depth of a MathML expression. |
| getWidthFromTeXString(String texSource) | Retrieve the width of a TeX expression. |
| getHeightFromTeXString(String texSource) | Retrieve the height of a TeX expression. |
| getDepthFromTeXString(String texSource) | Retrieve the depth of a TeX expression. |
| getHeightFromTeXStringAndWidth(String texSource, int width) | Retrieve the document height from the supplied TeX source. |
| addInInitialize(String mimeType) | Start/Initialize a techexplorer add-in if the corresponding add-in is not already active. |
| addInShutdown(String mimeType) | Shutdown/Destroy a techexplorer add-in. |
| addInEvaluate(String mimeType, String appInput) | Invoke the AddInEvaluate function of a techexplorer add-in. |
| addInBlockingEvaluate(String mimeType, String appInput) | Invoke the AddInBlockingEvaluate function of a techexplorer add-in. |
| addInEvaluateInstance(int addInID, String mimeType, String appInput) | Not supported. |
| addInBlockingEvaluateInstance(int addInID, String mimeType, String appInput) | Not supported. |
| addInNewInstance( String sMimeType ) | Not supported. |
| addInDestroyInstance( int addInID ) | Not supported. |
| writeStringToFile( String fileName, String outString ) | Not supported. |
We defer the discussion of the details of the techexplorer event listener mechanism to the description of the GraphIT application and the AWTEvent annotated reference. The techexplorer Java Add-in interface is explained during the development of the add-in conduit application.
Each instance of the techexplorer plug-in in a HTML document rendered in Netscape can be identified by the value of the NAME attribute of the <EMBED> tag or as an element in the window.document.embeds array . For example, the following HTML code includes the techexplorer plug-in in a document:
<EMBED SRC="math.tex" NAME="mytechexplorer" WIDTH=500 HEIGHT=200>
In the case where mytechexplorer was the first plug-in in a document, you can access techexplorer via JavaScript any of the following ways:
document.embeds[0]
document.embeds["mytechexplorer"]
document.mytechexplorer
Elements of the array can be referenced through the techexplorer name (as in an associative array) or by the ordinal number of the techexplorer window on the page (starting from zero). Note that the document.embeds.length property indicates the number of plug-ins embedded in the document.
Each instance of the techexplorer ActiveX control in a HTML document rendered in Internet Explorer can be identified by the value of the NAME or ID attribute of the <OBJECT> tag or as an element in the window.document.all array. For example, the following HTML code includes the techexplorer ActiveX control in a document:
<OBJECT ID="mytechexplorer"
CLASSID="clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4"
WIDTH=500 HEIGHT=200>
<PARAM NAME="DataType" VALUE="2">
<PARAM NAME="Data" VALUE="math.tex">
</OBJECT>
In the case where mytechexplorer was the first ActiveX Control in a document, you can access techexplorer via JavaScript any of the following ways:
document.all["mytechexplorer"]
document.all.mytechexplorer
Consider the following HTML code fragment:
<SCRIPT LANGUAGE="JavaScript">
<!--
function Submit( ) {
window.document.techexplorer.reloadFromTeXString( window.document.latex.string.value );
}
// -->
</SCRIPT>
<TABLE BORDER CELLSPACING=0 >
<TR>
<TD>
<OBJECT NAME="techexplorer"
CLASSID="clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4"
WIDTH=400 HEIGHT=100>
<PARAM NAME="DataType" VALUE="0">
<PARAM NAME="Data" VALUE="\pagecolor{white}\Large IBM techexplorer\newline Technical Publishing for the Internet">
<EMBED NAME="techexplorer"
TYPE="application/x-techexplorer"
TEXDATA="\pagecolor{white}\Large IBM techexplorer\newline Technical Publishing for the Internet"
WIDTH=400 HEIGHT=100>
</EMBED>
</OBJECT>
</TD>
</TR>
</TABLE>
<FORM NAME="latex">Enter LaTeX string:
<BR>
<TEXTAREA NAME="string" ROWS=4 COLS=40></TEXTAREA>
<INPUT TYPE="button" NAME="send" VALUE="Send to techexplorer ..." OnClick="Submit()">
</FORM>
In this example, the techexplorer plug-in and ActiveX control is identified by the techexplorer object name; the HTML FORM is identified by the latex object name; the HTML TEXTAREA is identified by the string object name; and the HTML BUTTON element is identified by the send object name. Within this hierarchy, the value of the HTML text area can be obtained by following the window.document.latex.string.value descendent chain. When the Send to techexplorer button is pressed, the corresponding HTML element calls the JavaScript Submit() function. The Submit() function subsequently calls the techexplorer reloadFromTeXString() method that replaces the document with the supplied TeX source.
The ActiveX control and plug-in will be invoked appropriately by virtue of using both the <OBJECT> and <EMBED> tag. In the case of Internet Explorer browsers, the ActiveX control will be used while in the case of Netscape, the plug-in will be used. See the HTML Elements for enabling executable content section for an overview of the <OBJECT> and <EMBED> tags.
Below is the resulting application. When you enter LaTeX source in the TEXTAREA and click on the Send to techexplorer button, the techexplorer display area will be refreshed.
|
|
Problems?
Netscape users: If a JavaScript Alert appears stating that the "Window.Document.techexplorer has not property named reloadFromTeXString", it is likely due to the fact that the class file for techexplorer was not found by Navigator. The techexplorer Java class file (NpTchExp.zip) should be with the techexplorer plug-in in Netscape's Program/PlugIns directory.
Each Java applet in a document can be identified by the value of the NAME attribute of the <APPLET> tag or the window.document.applets array. For example, consider the classic "HelloWorld!" Java applet:
import java.applet.Applet;
import java.awt.Graphics;
public class HelloWorld extends Applet {
private String outputString = "Hello world!";
public void paint(Graphics g) {
g.drawString(outputString, 50, 15);
}
public void setOutputString( String outputString ) {
this.outputString = outputString;
repaint();
}
}
The following HTML runs and displays the applet, as well as uses the NAME attribute to identify it as "HelloWorld":
<APPLET NAME="HelloWorld"
ARCHIVE="NpExamples.jar"
CODE="HelloWorld.class" CODEBASE="Java"
WIDTH=150 HEIGHT=25>
<PARAM NAME="cabbase" VALUE="AxExamples.cab">
</APPLET>
The following JavaScript and HTML code provides access to the setOutputString function.
<SCRIPT LANGUAGE="JavaScript">
<!--
function setOutputString( ) {
window.document.HelloWorld.setOutputString( window.document.form.outputstring.value );
}
// -->
</SCRIPT>
<FORM NAME="form">
Enter output string:<BR>
<INPUT TYPE="text" NAME="outputstring" SIZE=20><BR><BR>
<INPUT TYPE="button" NAME="send" VALUE="Send to HelloWorld" OnClick="setOutputString()">
</FORM>
Below is the resulting application. When you enter a message in the INPUT area and click on the Send to HelloWorld button, the HelloWorld display area will be refreshed.
The life cycle of a the techexplorer plug-in and ActiveX control is dictated by the web page that inkoes it. When the user opens a page that contains LaTeX/TeX or MathML for the first time, the web browser starts the techexplorer plug-in and/or ActiveX control and creates an instance of a techexplorer Java class. The web browser displays subsequent instances of embedded techexplorer content using the already resident techexplorer program. However, new instances of the techexplorer Java class are created for each window of techexplorer content that is displayed.
When the last instance of a techexplorer display is deleted, techexplorer is unloaded from memory. The InstanceListener interface provides a mechanism for Java applets to recieve an InstanceEvent when techexplorer is unloaded.
You can use JavaScript to determine whether a user has installed the techexplorer plug-in and ActiveX control. Netscape provides the navigator object for checking installed plug-ins while Internet Explorer provides the ActiveXObject. The following JavaScript and HTML code demonstrates the use of these objects to determine what version of techexplorer is installed.
<SCRIPT LANGUAGE="JavaScript">
<!--
function isNetscape( )
{
return navigator.appName == "Netscape"
}
function isProPluginNetscape( )
{
if ( !isNetscape() )
return false;
var techexplorerPlugin =
navigator.plugins["IBM techexplorer Hypermedia Browser, Professional Edition"];
return techexplorerPlugin != null;
}
function isIntroPluginNetscape( )
{
if ( !isNetscape() )
return false;
var techexplorerPlugin =
navigator.plugins["IBM techexplorer Hypermedia Browser, Introductory Edition"];
return techexplorerPlugin != null;
}
function isActiveXControl( )
{
if ( isNetscape() )
return false;
var techexplorerActiveX =
new ActiveXObject("techexplorer.AxTchExpCtrl.1");
return techexplorerActiveX != null;
}
function techexplorerCheck( )
{
if ( isProPluginNetscape() )
alert("IBM techexplorer Plugin, Professional Edition is installed for Netscape");
if ( isIntroPluginNetscape() )
alert("IBM techexplorer Plugin, Introductory Edition is installed for Netscape");
if ( isActiveXControl() )
alert("IBM techexplorer ActiveX control, Professional Edition is installed for Internet Explorer");
}
// -->
</SCRIPT>
<FORM>
<FORM>
<INPUT TYPE="button"
VALUE="Check for the IBM techexplorer"
OnClick="techexplorerCheck()">
</FORM>
</FORM>
In the cases where techexplorer is not installed, JavaScript can be used to dynamically change the document to display alternative information.
IBM techexplorer Hypermedia Browser is a trademark of the IBM Corporation. Send comments and questions to techexpl@us.ibm.com.