GWTJep JavaScript expression parser/evaluator.

GWT applications

Java classes can be written using the Jep library and GWT's set of UI widgets, corresponding to standard HTML elements. The cross-compiled JavaScript can then be included in a web-page with the widgets inserted into the DOM. An example usage is shown

Webpage code

To include the app, include the following at the start of the webpage.

<script type="text/javascript" src="gwtjep/gwtjep.nocache.js"></script>
    

Then include the a set of HTML container elements

    <table>
      <tr>
        <td>Input</td>
        <td id="expressionFieldContainer"></td>
        <td id="calcButtonContainer"></td>
      </tr>
      <tr>
        <td>Output</td>
        <td colspan="2" id="resultFieldContainer"></td>
      </tr>
    </table>
    

When the GWTJep module is loaded these will be filled with widgets created by the GWTJep code.

Java Code

The Java code creates UI widget this code like

    final Button calcButton = new Button("Calc");
    

Attaches them to containers

    RootPanel.get("calcButtonContainer").add(calcButton);
    

And adds event handlers

    calcButton.addClickHandler(handler);
    

Jep code in the handler simply reads and writes from the widgets

    String res=null;
    try {
        final String eqn = expressionField.getText();
        final Node n = jep.parse(eqn);
        final Object r=jep.evaluate(n);
        if(r!=null)
        res = r.toString();
        else
            res = "null";
    } catch (JepException e) {
        res = e.toString();
    }
    resultField.setText(res);
    

The full Java code for this page is:

package com.singularsys.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.singularsys.jep.Jep;
import com.singularsys.jep.JepException;
import com.singularsys.jep.configurableparser.StandardConfigurableParser;
import com.singularsys.jep.parser.Node;

/**
 * A Simple GWT application.
 * <p>
 * Creates two text fields: an input expression, and the output result, and a
 * button that makes Jep parse and evaluate the expression.
 * 
 * @see <a href="../../../../index.html">Example Webpage</a>
 */
public class GWTSimple implements EntryPoint, ClickHandler, KeyUpHandler {
    private Jep jep;
    private Button calcButton;
    private TextBox expressionField;
    private TextBox resultField;

    /**
     * This is the entry point method, called by the GWT system when the webpage is
     * loaded.
     */
    @Override
    public void onModuleLoad() {
        // Create Jep instance
        jep = new Jep(new StandardConfigurableParser());

        calcButton = new Button("Calc");
        expressionField = new TextBox();
        resultField = new TextBox();
        // Set default values
        expressionField.setText("1+2+3+4+5");
        expressionField.setWidth("30em");
        resultField.setWidth("30em");
        resultField.setReadOnly(true);

        // Add the nameField and sendButton to the RootPanel
        RootPanel.get("expressionFieldContainer").add(expressionField);
        RootPanel.get("calcButtonContainer").add(calcButton);
        RootPanel.get("resultFieldContainer").add(resultField);

        // Focus the cursor on the name field when the app loads
        expressionField.setFocus(true);
        expressionField.selectAll();

        // Add self as a handler
        calcButton.addClickHandler(this);
        expressionField.addKeyUpHandler(this);
    }

    /**
     * Fired when the user clicks on the calcButton, calls calcResult()
     */
    @Override
    public void onClick(ClickEvent event) {
        calcResult();
    }

    /**
     * Fired when the user types in the nameField. calls calcResult() when enter is
     * pressed.
     */
    @Override
    public void onKeyUp(KeyUpEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
            calcResult();
        }
    }

    /**
     * Parse and evaluate the expressions, read and writing to widgets
     */
    private void calcResult() {
        String res = null;
        try {
            final String eqn = expressionField.getText();
            final Node n = jep.parse(eqn);
            final Object r = jep.evaluate(n);
            if (r != null)
                res = r.toString();
            else
                res = "null";
        } catch (JepException e) {
            res = e.toString();
        }
        resultField.setText(res);
    }

}

Compiling Modules

GWT code is organised in a set of modules. Each module needs an XML filed defining the module. The module for this application com.singularsys.GWTSimple.gwt.xml is like

<module rename-to='gwtjep'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.core.Core'/>
  <inherits name='com.google.gwt.user.User'/>
   
  <!-- Inherit the default GWT style sheet.                       -->
  <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> 

  <!-- Jep Modules                                                -->
  <inherits name='com.singularsys.JepLib'/>

  <!-- Specify the app entry point classes.                       -->
  <entry-point class='com.singularsys.client.GWTSimple'/>
  
  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>

</module>
     

Building

An ant script ant_build.xml can be used to build the module, it needs to be edited to set the location of the Googles GWT library. Alternatively the Google GWT Eclipse plugin can be used to build modules.

The build process creates translated JavaScript code in the `war/gwtjep` directory.