Scripting the techexplorer Hypermedia Browser

LaTeX/MathML Editor

In this section, we build on the LaTeX editor developed in the Getting Started section to create a simple web application that allows the translation between some LaTeX math markup and the World Wide Web Consortium Mathematical Markup Language (MathML). While this version of techexplorer includes complete support for the MathML 1.01 specification, the routines in this example support only a subset so the conversion will not always be complete.

The development of the LaTeX/MathML translator and editor begins with the definition of various JavaScript support functions that make use of several methods of the techexplorerPlugin class. A combination of an embedded techexplorer instance and HTML elements will provide the application control panel. Using these JavaScript functions and HTML elements, the application can fetch input, translate LaTeX/MathML, and render the results in a techexplorer display region. In the end, we assemble the pieces and give our web application a test run.

The JavaScript functions

In this example, we use three JavaScript functions: updateAll(), submitTeX() and submitMML().

	<SCRIPT LANGUAGE="JavaScript">
	function updateAll() {
	 window.document.LaTeXForm.LaTeXString.value = window.document.techexplorer.convertMMLtoTeX(  );
	 window.document.MMLForm.MMLString.value = window.document.techexplorer.convertTeXtoMML( );
	}

	function submitTeX( ) {
	 window.document.techexplorer.reloadFromTeXString( window.document.LaTeXForm.LaTeXString.value );
 	 updateAll();
	}

	function submitMML( ) {
	 window.document.techexplorer.reloadFromMMLString( window.document.MMLForm.MMLString.value );
	 updateAll();
	}

	function clearAll() {
	 window.document.LaTeXForm.LaTeXString.value = "";
 	window.document.MMLForm.MMLString.value = "";
 	window.document.techexplorer.reloadFromTeXString( "\\pagecolor{white}\\color{blue}\\Large\\centering IBM techexplorer\\newline\\it Technical Publishing for the Internet" );
	}
	</SCRIPT>

The updateAll() function refreshes the LaTeX and MathML HTML text areas. This is acomplished by setting the "value" attribute of the TEXTAREA to the document source string. For example, the

	window.document.LaTeXForm.LaTeXString.value = window.document.techexplorer.convertMMLtoTeX(  );

JavaScript statement in the updateAll() function retrieves the HTML TEXTAREA LaTeXString and sets the "value" attribute to the ASCII representation of the techexplorer document. In this example, the HTML name of the techexplorer instance is techexplorer. The techexplorerPlugin convertMMLtoTeX method returns the LaTeX string representation of the document.

submitTeX() and submitMML() are JavaScript functions that replace the techexplorer document source with a LaTeX or MathML string, respectively. After replacing the document source by calling either the techexplorerPlugin reloadFromTeXString or reloadFromMMLString method, the updateAll() JavaScript function is called to propagate the changes through the different components.

clearAll() is used to clear the HTML text areas and refresh the techexplorer display region. A call to this function is placed at the end of the HTML document so that reload operations result in refreshed display areas.

Building the control panel

We now use the HTML elements, JavaScript functions and techexplorer to build the control panel for the LaTeX/MathML editor and translator.

	<OBJECT NAME="techexplorer"
		CLASSID="clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4"
		WIDTH=500 HEIGHT=80>
	<PARAM NAME="DataType" VALUE="0">
	<PARAM NAME="Data" VALUE="\pagecolor{white}\color{blue}\Large\centering IBM techexplorer\newline\it Technical Publishing for the Internet">

		<EMBED NAME="techexplorer"
			TYPE="application/x-techexplorer"
			TEXDATA="\pagecolor{white}\color{blue}\Large\centering IBM techexplorer\newline\it Technical Publishing for the Internet"
			WIDTH=500 HEIGHT=80>
		</EMBED>
	</OBJECT>
	
	<FORM NAME="LaTeXForm">
		<TEXTAREA NAME="LaTeXString" ROWS=19 COLS=45></TEXTAREA>
		<INPUT TYPE="button" NAME="LaTeXSend"
			VALUE="Render in techexplorer" OnClick="submitTeX()">
	</FORM>
	...
	<FORM NAME="MMLForm">
		<TEXTAREA NAME="MMLString" ROWS=19 COLS=45></TEXTAREA>
		<INPUT TYPE="button" NAME="MMLSend" VALUE="Render in techexplorer"
			OnClick="submitMML()">
	</FORM>

In this example, the techexplorer plug-in is identified by the techexplorer object name; the HTML LaTeX and MathML FORM is identified by the LaTeXForm and MMLForm object names respectively; the HTML LaTeX and MathML TEXTAREA is identified by the LaTeXString and MMLString object name respectively; and similarly the HTML LaTeX and MathML render buttons are identified by the LaTeXSend and MMLSend object names respectively. When a Render in techexplorer button is pressed, the corresponding HTML element calls the appropriate JavaScript function. For example, in the case of the LaTeX button, the submitTeX() function is invoked. This function subsequently calls the techexplorer reloadFromTeXString() method that replaces the document with the supplied TeX source, performs the translation and updates all of the display regions.

Test the LaTeX/MathML editor and translator!

Below is the resulting LaTeX/MathML editor and translator. You can input LaTeX or MathML source in the appropriate TEXTAREA. When you click on the corresponding Render in techexplorer button, the source will be translated, the techexplorer display area refreshed, and text areas updated!

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/.