Scripting the techexplorer Hypermedia Browser

HTML Elements for enabling executable content


The feature described is only available in the Professional Edition of techexplorer.

The techexplorer scripting environment allows connections between HTML elements, Java, JavaScript, and techexplorer. This section is a guide to understanding the HTML elements used for enabling scripting interactions. We assume that the reader understands the basics of HTML, Java and JavaScript. For reference purposes, a good starting point to understanding the HTML used on the World Wide Web is the NCSA Beginner's Guide to HTML. The Java Tutorial: Object-Oriented Programming for the Internet is an online guide to writing programs using the Java platform. Netscape maintains a site that features JavaScript resources and examples.

In what follows, we describe how the <EMBED>, <OBJECT>, <APPLET> and <SCRIPT> tags are used to augment an HTML document by connecting techexplorer, Java and JavaScript.

Using the <EMBED> and <OBJECT> tag to include a reference to a techexplorer document.

An instance of a techexplorer document can have one of three display modes: embedded in a web page and visible; embedded in a web page and hidden; and displayed as a full page in its own window. Version 3.0 of techexplorer provides both a web browser plug-in and ActiveX Control. As a result, web page designers and developers can use both versions of techexplorer for creating cross web browser Java and JavaScript enabled content. Netscape users will make use of the plug-in for both embedded and full page interactive techexplorer documents, while Internet Explorer users will use the ActiveX control.

Note that the techexplorer plug-in can also be used with Internet Explorer, however the JavaScript and Java programing interfaces are only available when using the ActiveX control.

A combination of the <EMBED> and <OBJECT> tag can be used for including a reference to a techexplorer document embedded in a web page. The definition of the <EMBED> tag follows:

Name <EMBED>
Functionality Embed an object in a document
Attributes ALIGN, BORDER, HEIGHT, HIDDEN, HSPACE, NAME, PALETTE, PLUGINSPAGE, SRC, TYPE, UNITS, VSPACE, WIDTH

The <EMBED> tag is used to embed an instance of the techexplorer plug-in in an HTML document and will work for both Netscape and Internet Explorer. The SRC attribute gives the relative or absolute URL (location) of the file to be displayed. The WIDTH and HEIGHT attributes assert the desired size of the plug-in window, in pixels or percentage of the screen size. For example:

    <EMBED SRC="math.tex" WIDTH=500 HEIGHT=200>

Note that the SRC attribute name is used to tell the web browser where to obtain the source markup. You can also specify the TeX (TEXDATA) or MathML (MMLDATA) markup directly inline. For example,

    <EMBED TYPE="application/x-techexplorer"
        TEXDATA="\pagecolor{silver}$$\pmatrix{2&\sqrt{3}&\alpha\cr\beta&4&5}$$"
        PLUGINSPAGE="http://www.software.ibm.com/techexplorer/"
        HEIGHT=100 WIDTH=200 NAME="matrix">
    </EMBED>           

The TYPE attribute explicitly indicates the MIME type of the embedded object. The URL for the techexplorer web site can be specified by setting the PLUGINSPAGE attribute. The NAME attribute allows you to label the embed techexplorer object for later reference by other elements in your document, including Java, JavaScript and other plug-ins. Note that the <NOEMBDED> tag allows alternate content to be displayed for users that do not have the techexplorer plug-in installed.

The definition of the <OBJECT> tag follows:

Name <OBJECT>
Functionality Insert an object into an HTML page
Attributes ACCESSKEY,ALIGN,CLASS,CLASSID,CODE,CODEBASE,CODETYPE,CONTENTEDITABLE, DATA,DATAFLD,DATASRC,DIR,DISABLED,HEIGHT,HSPACE,ID,LANG,LANGUAGE, NAME,STYLE,TABINDEX,TITLE,TYPE,UNSELECTABLE,VSPACE,WIDTH

The <OBJECT> tag is used to embed an instance of the techexplorer ActiveX control in an HTML document and will only work in Internet Explorer. For example:

    <OBJECT ID="matrix" HEIGHT=100 WIDTH=200
        CLASSID="clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4">
        <PARAM NAME="AutoSize" VALUE=TRUE>
        <PARAM NAME="DataType" VALUE="0">
        <PARAM NAME="Data" VALUE="\pagecolor{silver}$$\pmatrix{2&\sqrt{3}&\alpha\cr\beta&4&5}$$">          
    </OBJECT>

The CLASSID parameter is used to specify the class identifier for the techexplorer ActiveX control (always clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4). The Data parameter gives the URL or the actual data of the document to be displayed. The DataType parameter specifies the value of the Data parameter, possible values include:

Data Type Value Data Type
0 TeX or LaTeX data
1 MathML data
2 URL to a TeX or LaTeX document
3 URL to a MathML document

The WIDTH and HEIGHT attributes assert the desired size of the ActiveX control window, in pixels or percentage of the screen size. The AutoSize parameter can be used to indicate that techexplorer should only allow enough space for the displayed expression. You can use this parameter to ensure that inline techexplorer ActiveX control equations embedded in HTML remain "scroll bar free"!

When creating techexplorer content that can be scripted by both Netscape and Internet Explorer, the <EMBED> tag must be wrapped by an <OBJECT> tag. This way the ActiveX control will be used for the Internet Explorer web browser and the plug-in will be used for Netscape.

    <OBJECT ID="matrix" HEIGHT=100 WIDTH=200
        CLASSID="clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4">
        <PARAM NAME="AutoSize" VALUE=TRUE>
        <PARAM NAME="DataType" VALUE="0">
        <PARAM NAME="Data" VALUE="\pagecolor{silver}$$\pmatrix{2&\sqrt{3}&\alpha\cr\beta&4&5}$$">
        <EMBED TYPE="application/x-techexplorer"
            TEXDATA="\pagecolor{silver}$$\pmatrix{2&\sqrt{3}&\alpha\cr\beta&4&5}$$"
            PLUGINSPAGE="http://www.software.ibm.com/techexplorer/"
            HEIGHT=100 WIDTH=200 NAME="matrix">
        </EMBED>           
    </OBJECT>

Click to see a techexplorer document embedded in HTML.

Using the <APPLET> tag to load Java applets.

The <APPLET> tag is used to name the Java applet that the browser should download and execute, as well as to define the applet's display region. The definition of the <APPLET> tag is

Name <APPLET>
Functionality Insert and application into the document
Attributes ALIGN, ALT, ARCHIVE, CODE, CODEBASE, HEIGHT, HSPACE, MAYSCRIPT, NAME, TITLE, VSPACE, WIDTH

The CODE and CODEBASE attribute are used to specify the file name of the Java class and provide an alternate URL from which the browser will fetch an applet, respectively. The WIDTH and HEIGHT attributes define the size of the applet's display region. The NAME attribute allows for supplying a unique identifier for a particular instance of the code. The MAYSCRIPT attribute is required for accessing methods within the Java applet.

The <PARAM> tag can be used to supply parameters to Java applets. Consider a general purpose graphing applet that has an interface allowing remote control. The following HTML source starts an instance of the GraphIT and GraphITControl Java applets.

    <APPLET CODE="GraphIT.class" WIDTH=300 HEIGHT=300 NAME="graphit" MAYSCRIPT></APPLET>
    <APPLET CODE="GraphITControl.class" WIDTH=300 HEIGHT=50 NAME="graphit" MAYSCRIPT>
        <PARAM NAME="graphitname" VALUE="graphit"></APPLET>

The GraphITControl applet can obtain the name of the GraphIT applet from the <PARAM> tag. This name is used by GraphITControl to retrieve a handle to the GraphIT applet for inter-applet communication. Since both applets contain the MAYSCRIPT attribute, they can participate in the interactive browser environment. The full GraphIT application is explained in more detail in a latter section.

Embedding JavaScript code via the <SCRIPT> tag.

JavaScript is a scripting language that can use the native functionality of the web browser. JavaScript statements can appear throughout an HTML document as blocks of code or single statements attached to individual tags. The definition of the <SCRIPT> tag is

Name <SCRIPT>
Functionality Define an executable script
Attributes LANGUAGE, SRC

Everything between the <SCRIPT></SCRIPT> tags are processed by the browser. Browsers that do not support the <SCRIPT> tag will process the contents of the tag as regular HTML. For this reason, the script source code is usually enclosed within an HTML comment as follows:

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function Submit( ) {
        window.document.techexplorer.reloadFromTeXString( "techexplorer",
            window.document.latex.string.value);
    }
    // -->
    </SCRIPT>

This JavaScript function is a part of the Simple LaTeX editor example. Note that the <NOSCRIPT> tag allows alternate content to be displayed for users that do not have a browser that supports the <SCRIPT> tag.


Click here to to view the previous section. Click here to to view the next section.

IBM techexplorer Hypermedia Browser is a trademark of the IBM Corporation. Send comments and questions to techexpl@us.ibm.com.