Design Science MathFlow Premium Support

This document describes how to use the InputControl within an ASP.NET environment. The lessons learned here can be applied to the other WebEQ controls as well. This technical notice is targeted for the Internet Explorer browser.

Overview

The InputControl is a Java Applet that allows a user to create math equations using a graphical user interface. Since it is built using Java technology, it is not possible to directly access various features of the control using any of the normal .NET languages (such as C#,VB,etc..). However, it is possible to use JavaScript to interact with the InputControl, so we can use this feature to pass data from the applet to an ASP.NET textbox, and from the ASP.NET textbox we can then manipulate it however we choose. In most situations, the MathML string will be stored in a database, but there may be many other possibilities. Our example will simply place the MathML we captured into an ASP.NET Label so we can see the result.

Requirements

You will need Microsoft Visual Studio .NET with a correctly configured web server such as IIS in order to run this example. You will also need basic familiarity with C#, but the example can be refactored into any .NET language. Also, you should understand the basic use of JavaScript. You will also need a copy of the WebEQApplet.jar that comes with the WebEQ Developers Suite. The example code is set to automatically download a version of Java if you don't already have it.

Setting up your system

Open up Visual Studio .NET 2003, and select File->New->Project from the menu. You can use your .NET language of choice, but this example will be using C#. This is not a tutorial for C# and the example does not require any special knowledge of that language. So go ahead and select the C# project type and select ASP.NET Web Application icon and give your project a name. I used CSharpWebApp1 as the project name, but feel free to use whatever name you would like. Now click OK.

A word of caution:

I found that placing an applet or object tag into a web form would cause Visual Studio's graphical web page designer to freeze with the IDE taking 100% CPU utilization, which required the IDE to be forcibly quit. Therefore it is best to avoid using the graphical designer for this example. We will be using the HTML editor throughout this example. To ensure that the IDE does not try to open the page in Design mode upon startup, choose Tools->Options... from the menu bar. In the resulting dialog, select HTML Designer, and make sure that all of the options are set to HTML View.

Making Changes to the Project

Once you have a project, you can begin to edit the existing pages. First we will start with the WebForm1.aspx file. If it is not already open, double click the file called WebForm1.aspx in the Solution Explorer. Make sure you are in HTML mode, and then remove the existing contents of the HTML body. The item you are removing should be an empty form element. In its place, put the following HTML...

<%-- This form will display the InputControl applet as well as controls that will manipulate the applet --%>

<%-- This tag shows how to load the InputControl applet. Here is a brief description of various elements and attributes...

name and PARAM name="name": This value will be used to refer to the Applet in JavaScript

classid and codebase: These values are used to dynamically determine the Java version that the applet needs to function, and the URL that will be used to auto download the correct version of Java if needed.

PARAM name="code": This value is the fully qualified name of the Java class to load

PARAM name="archive": This value is the location to where the Java Jar file resides

PARAM name="codebase": This value is the prefix that is apppended as a path to the code

PARAM name="type": This value is the mime type for a java applet

PARAM name="eq": This value is MathML. Note that it is not required to supply a value

PARAM name="scriptable": This value indicates if the applet can be acessed via scripting languages

--%>

No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!!

</OBJECT>

<%-- This textbox is used for inserting valid MathML --%>

<p>MathML: <input type="text" name="mml">

<%-- This button will initiate the insertion of the MathML string stored in the "mml" textbox. Note that both the text box and button are standard HTML elements and not ASP.NET controls. --%>

<%-- This ASP.NET button executes the JavaScript code and Button1_Click event that is defined in the codebehind =(i.e. WebForm1.aspx.cs). --%>

<asp:Button id="Button1" Runat="server" Text="Send MML"></asp:Button>

<p>

<%-- The JavaScript code grabs the MathML and places it into this textbox for storeage so that the ASP.NET code can access it. The field is made invisible by placing it inside a DIV and setting it's style to "display: none". --%>

<%-- This label is used simply to display the results of grabbing the MathML from the InputControl. In a real system, the MathML could be stored in a database. --%>

<asp:Label id="Label1" runat="server" Width="600px" Height="16px"></asp:Label>

</form>

This code creates the user interface for our example. It creates an instance of the InputControl using the object tag and includes several HTML and ASP.NET form controls. Be sure to read the comments for each element, since it describes what each item is used for.

Next we are going to modify the "codebehind", which is the server side code that will be called when the page loads and ASP.NET buttons are clicked. To modify this code, right click on the WebForm1.aspx file in the Solution Explorer and select View Code, which should open a file called WebForm1.aspx.cs. Select the entire contents of this file, and replace it with the following code...

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

namespace CSharpWebApp1

{

/// <summary>

/// Summary description for WebForm1.

/// </summary>

public class WebForm1 : System.Web.UI.Page

{

// This label is used to show the results of grabbing the MathML

protected System.Web.UI.WebControls.Label Label1;

// This button is used to initiate the "sending" of MathML to the server

protected System.Web.UI.WebControls.Button Button1;

// This is a hidden textbox that is used as temporary storeage for the MathML string

protected System.Web.UI.WebControls.TextBox storedMML;

private void Page_Load(object sender, System.EventArgs e)

{

// The following lines will build the javascript string that will be inserted into the page...

string aJSFunction = "<script language=JavaScript>";

// This javascript function will insert a MathML equation into the editor from a text field called "mml"

aJSFunction += "function insertMML(){var eq = document.applet;var mml = document.Form1.mml.value;eq.insertMathMLAtCursor(mml);}";

// This javascript function will take the MathML equation stored inside the editor and place it into the

// a hidden asp:TextBox called "storedMML". Once the value is stored in the text field, we can extract the

// the value using .NET and do whatever we want with it.

aJSFunction += "function submitMML(){var eq = document.applet;document.Form1.storedMML.value = eq.getMathML();}";

// This javascript code will be executed each time the page loads. It will take the MathML text stored within

// the hidden asp:TextBox called "storedMML" and place it into the editor. This is necessary because

// each time the user does a postback, the Applet reloads itself, which erases the formula.

aJSFunction += "var eq = document.applet;eq.insertMathMLAtCursor(document.Form1.storedMML.value);";

aJSFunction += "</script>";

// This will insert the javascript into the page. This register version ensures that all of the

// form elements have been rendered and are therefore accessible to the javascript code.

Page.RegisterStartupScript("StartUp",aJSFunction);

// This just shows how to programmatically insert an onclick attribute. This could have been done

// directly in the HTML code.

Button1.Attributes.Add("OnClick","submitMML();");

}

#region Web Form Designer generated code

override protected void OnInit(EventArgs e)

{

// CODEGEN: This call is required by the ASP.NET Web Form Designer.

InitializeComponent();

base.OnInit(e);

}

/// <summary>

/// Required method for Designer support - do not modify

/// the contents of this method with the code editor.

/// </summary>

private void InitializeComponent()

{

this.Button1.Click += new System.EventHandler(this.Button1_Click);

this.Load += new System.EventHandler(this.Page_Load);

}

#endregion

public void Button1_Click(Object sender, EventArgs e)

{

// When the button is clicked, the javascript code should have placed the MathML

// into the storedMML TextBox. Once we have the text we can do whatever we want with it.

// For example, we could store the value in a database. However in this example we just

// display the value in a label so we can see the result.

Label1.Text = "The following text could have been saved to a database..." + Server.HtmlEncode(storedMML.Text);

}

Once you have placed this code into the editor, you may need to change the namespace from CSharpWebApp1 to the name of your project, but only do this if you used a project name other than CSharpWebApp1. Again, make sure that you read the comments for the code so that you get an idea of what the code does.

In order for the web browser to find the Java applet, you must place the WebEQApplet.jar file into the same directory as WebForm1.aspx. If you are running the example from your own PC using IIS, then the JAR file should be placed into C:\Inetpub\wwwroot\CSharpWebApp1. Again, if you named your project differently, you will need to place it into the correct directory. It is also possible to specify the location of the JAR using the archive parameter. In a real deployment it is best to place the JAR in a single location and then all pages that need to reference the JAR will point to this single location. There are two benefits of doing it this way. The first is that it simplifies upgrades when a new version of WebEQ becomes available, since you would only need to update the JAR in one location. The second benefit comes when the user downloads the JAR to their machine for execution. When a page references the JAR, it is downloaded and cached for current and future use. If you were to upgrade the JAR, the Java plugin will automatically determine that a newer version is available on the server and will download it automatically. So in summary, one location for the JAR results in a one time download for the user, even if you reference the JAR from many web pages.

Once you have made the changes outlined above you need to indicate which page should automatically execute when you press the play button. To do this, right click on the web page and select "Set As Start Page". Now you can run the example by pressing the start button in the toolbar, or by choosing the Debug->Start menu item. When you run the application, you should see the InputControl applet load. You can now either enter MathML into the textbox below the InputControl and click Insert, which should result in an equation within the InputControl (assuming that you have entered valid MathML). Or you can simply enter an equation into the input control and then hit "Send MML", which will result in the MathML for the equation being output at the bottom of the web page. Both of these examples show how to interact with the InputControl.

Details of the Code

This example shows several different things that are important to know when combining the WebEQ controls with ASP.NET. First of all, it shows how to use JavaScript in combination with ASP.NET. In this example, the JavaScript is inserted into the web page using the Page.RegisterStartupScript() method when the page is loaded by building a string containing the JavaScript code. Please note that It is also possible to place the JavaScript directly into the webpage, but the example shows how to do it using server side code. The JavaScript will be invoked when one of the two buttons is pushed as described above. There is also a bit of JavaScript that is executed every time the page is loaded. This code is necessary because when ever the user presses an ASP.NET button (as opposed to a regular HTML button) the server side C# code is executed. This action submits information to the server, and then causes the page to reload. Whenever a web page is loaded, this causes the Java applet to initialize itself, which results in the equation being lost in the InputControl. So to prevent the loss of the equation, we make a JavaScript call to insertMathMLAtCursor() using the MathML that is stored in a hidden textbox on the page. The hidden textbox is filled with the MathML when the user presses the "Send MML" button, using JavaScript. The "Send MML" button also generates a server side event which executes the Button1_Click() method, which simply takes the MathML from the hidden text field and places it into a ASP.NET label. You could do anything you want with the MathML on the server side, such as place the information into a database.

Keep in mind that anytime you use a ASP.NET button, it will cause a round trip to the server to execute the server side code. Sometimes this is not necessary, especially when you want to provide the the user with a way to interact with one of the WebEQ controls. For example, the "Insert" button simply needs to take a value from a standard HTML textbox and insert the value into the InputControl. There is no need for a round trip to the server in this instance.

Also note that the <div style="DISPLAY: none"> tag around the ASP.NET textbox called "storedMML". This is how we make the textbox hidden from the user. If we were to set the visible attribute of the ASP.NET textbox to false, that would simply prevent the textbox from being rendered, which would in turn prevent the JavaScript code from saving the MathML, since the textbox would be unavailable. The div tag solves this problem by making the textbox invisible to the user, but visible to JavaScript.

The last thing to mention about the example is the use of the object tag. Technically this tag is preferred by the W3C, and provides a mechanism to autodownload Java. However, Design Science prefers to use the older applet tag to provide the best compatibility with older browsers. For more information, please refer to the documentation, which should be located at C:\Program Files\WebEQ\3.7\docs\applets\Deployment\classinstall.html. Please note that the path to the documentation assumes a default install.

Conclusion

As was stated earlier, the InputControl allows a developer to interact with it using JavaScript. This example shows just two ways to interact with the InputControl. Each of the WebEQ controls can be manipulated in similar ways, using the public API for each control. For a detailed list of API calls available for each control, consult the WebEQ Developers Suite online documentation. The API reference is located under the Programmer Documentation->WebEQ Controls API.

How to use the InputControl with ASP.NET

The information in this document applies to:

Summary