MathJax in GWT widgets

MathJax works in HTML-capable Google Web Tooklit (GWT) widgets, such as the InlineHTML widget (but not the Label widget, which doesn’t allow HTML code in its text). It’s actually pretty simple — working with GWT in Eclipse, here are the steps from scratch:

  1. Start by installing the Google plug-in for Eclipse
  2. Start a new GWT project (e.g. click the Google icon in the Eclipse toolbar) — for purposes here, suppose the project name is MyProject, in package named com.example.myproject
  3. Put a copy of the MathJax folder in the Eclipse folder MyProject/war (I haven’t tried just putting a link here yet, but that probably works, too)
  4. In the base HTML file MyProject.html (which is also in the MyProject/war folder), in the head, include the script tag to load the file MathJax/MathJax.js:

    <script type="text/javascript" language="javascript"
    src="MathJax/MathJax.js></script>
  5. In the base HTML, you can use MathJax as usual, but you can also use MathJax within GWT widgets that support HTML, like an InlineHTML widget — for this, first provide a place in the base HTML for the widget, with an identifier, e.g.:

    <td id="mathjaxelement"></td>
  6. Now go to the project’s Java source, in the MyProject/src folder, in the com.example.myproject package, source file MyProject.java
  7. In the Java source, make sure you import the InlineHTML type from the library:

    import com.google.gwt.user.client.ui.InlineHTML;
  8. Now create an object of type InlineHTML in the onModuleLoad() method:

    final InlineHTML mathLabel = new InlineHTML();
  9. Set the contents of the widget using the setHTML() method:

    mathLabel.setHTML("(int e^x, dx)");

    (Note that the backslashes need to be escaped here, since the string format follows Java/C string conventions.)
  10. Now include the widget in the DOM:

    RootPanel.get("mathjaxelement").add(mathLabel);
  11. Now you are ready to test using “Run As… -> Web Application” or compile for deployment using “Google -> GWT Compile” from the project’s context menu. (Note that, when you actually deploy, you may need to modify the URL that points to the MathJax.js file.)

I included some simple math using the above procedure in a quick sample page, built by adding some math in the GWT “Starter Project.” In the sample, the expression (sum 1/n) is in the base HTML (and inherits some styling from its HTML context), and the expression (int e^x, dx) is in a GWT InlineHTML widget.

4 thoughts on “MathJax in GWT widgets

  1. Hi!

    I’ve tried going through your guide, but I cannot get MathJax to render the math when I embed the HTML in a widget.
    I’m using MathJax 2.0 and GWT 2.4.
    Could you perhaps post your entire sample project? Or maybe tjeck if your above code works in MathJax 2.0 and GWT 2.4 which is the latest releases.

    Hoping to hear from you!

    /Roberto

  2. I routinely use MathJax in GWT widgets as indicated, and in fact these days I use the MathJax CDN’s latest version (now 2.0) and the latest GWT 2.4 without any problems. The original post talks about using a local install of MathJax, but that is not necessary as long as you include the CDN <script> tag in the HTML along with the <script> tag to load the compiled GWT script — the order of the tags doesn’t even seem to matter. I will post a more complete example soon.

  3. Actually, here is a link to one of my GWT applets that makes pretty extensive use of MathJax, as described in the original post: Limits

  4. For some reason, this post has been generating a lot of comment-spam over the last couple of months, and I’m not sure why. I am going to look for a way to close this discussion so that the spam will be blocked — relevant comments can be placed in later posts on related topics. I apologize for the inconvenience.

Comments are closed.