Scripting the techexplorer Hypermedia Browser

The Spring Mass Application

This section describes a fictitious on-line course module for understanding an important application of "initial value problem" theory, namely, mechanical and electrical oscillations. This example puts into practice the techexplorer Document Object Model (DOM) Java API as well as leverages many of the connections between JavaScript, techexplorer, and HTML constructs.

In this section we will touch on the important aspects of the LaTeX and HTML source of the SpringMass module as well as describe the usage of the Document Object Model API in the SpringMass Applet. Once we are done, try out the SpringMass course module!

The SpringMass LaTeX Source

The LaTeX source of the course module uses a \docLink to start a new web browser window containing the SpringMass Java applet. Here is the \docLink source:

\centerline{ \docLink{javascript:if ( open( 'Springs.html', 'target', 'width=325, height=325, resizable=0, status=0, menubar=0, scrollbars=0' ) ) ; } {\includegraphics{Springs.jpg}} }

The contents of the \docLink URL is JavaScript code for loading the Springs.html page into a new window named target. When the user clicks on the image of the SpringMass Java applet,

the JavaScript code is executed.

The SpringMass HTML Source

The HTML source of the SpringMass applet plays an important role by providing hooks to the web browser object model. Here is the source:

<HTML>
<HEAD>
   <TITLE>IBM techexplorer Hypermedia Browser - Spring Mass Example
</HEAD>
<script>
   function begin()
   {
      var opendoc = window.opener.document;

      if ( opendoc.TEPlugin )
         document.applets["SpringMass"].setPlugin( opendoc.TEPlugin );
      if ( opendoc.TEControl )
         document.applets["SpringMass"].setControl( opendoc.TEControl );
   }
   window.opener.onunload = kill;
   function kill()
   {
      window.close();
   }
</script>
<BODY BGCOLOR="#FFFFFF" ONLOAD="begin()">
   <TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>
      <TR>
      <TD>
      <APPLET NAME="SpringMass"
         ARCHIVE="NpSpringMass.jar"
         CODE="SpringMass.class"
         WIDTH=300 HEIGHT=300 MAYSCRIPT>
         <PARAM NAME="cabbase" VALUE="AxSpringMass.cab">
      </APPLET>
      </TD>
      </TR>
   </TABLE>
</BODY>
</HTML>

First, the window will automatically close when the techexplorer page is unloaded. Second, a JavaScript function provides access to the techexplorer Java instance. The SpringMass applet uses this instance to change the initial conditions in the LaTeX document when a user changes the spring elongations.

The SpringMass Java Applet

The SpringCanvas class houses the necessary code for obtaining access to the Document Object Model hierarchy as well as code for searching and updating the initial conditions. Here is the code for obtaining a reference to the Document class:

   public void getDocument()
   {
      document = (TEDocument) techexplorer.getDocumentNode();
   }

Notice that the getDocumentNode() method is used to obtain a reference to the techexplorer Document node. When a blue or red "mass" is dragged, the SpringMass applet uses the following method to update the initial conditions in the document using objects and methods defined by the Document Object Model API.

   public void mouseDragged(MouseEvent evt)
   {
      int y = evt.getY();
      if (selectedBlock == 1) {
         currentVals[0] = (y - slength - mheight/2)/20.0;
         initVals[0] = currentVals[0];

         /*
         * Update the initial conditions via the Document Object Model
         */

         Node centerLine = findFirstNodeFromName( (Node) document, "centerline" );
         Node inlineMath = findFirstNodeFromName( (Node) centerLine.getNextSibling().getNextSibling(), "inline-math" );
         NodeList nodeList = inlineMath.getChildNodes();
         Text text = (Text) nodeList.item(2); 
         text.setData( formatInit(initVals[0]) );

         nodeList = inlineMath.getNextSibling().getNextSibling().getChildNodes();
         text = (Text) nodeList.item(2); 

         text.setData( formatInit(initVals[2]) );

         document.recomposeAndRedraw();      
         repaint();
      }
      ...
   }

The findFirstNodeFromName utility method uses the Document Object Model Node interface to traverse the document tree recursively in search of the first node that has the given name.

   private Node findFirstNodeFromName( Node node, String name )
   {
      Node inlineMathNode = null;

      if ( node != null )
      {
         if ( node.getNodeType() == Node.TEXT_NODE )
         if ( node.getNodeName().compareTo( name ) != 0 )
         {
            if ( node.hasChildNodes() )
            {
               NodeList nodeList = node.getChildNodes();
               for( int i=0; i<nodeList.getLength(); i++ )
               {
                  inlineMathNode = findFirstNodeFromName( nodeList.item( i ), name );
                  if ( inlineMathNode != null )
                     break;  
               }
            }
            else
               if (debug)  System.out.println( "findFirstNodeFromName: current node no children" );
         }
         else
            inlineMathNode = node;
      }

      return inlineMathNode;
   }

IBM techexplorer Hypermedia Browser is a trademark of the IBM Corporation.
Send comments and questions to techexpl@us.ibm.com.
Visit the official techexplorer home page at http://www.software.ibm.com/techexplorer/.