zurich pic source


1. The component

You can enter input by typing it into the input field or by clicking the buttons of the calculator. Once you click the "=" sign or press the return key, the calculation tree, which is used by the logic for calculating the result is displayed below the calculator. Use the "<<" key for scrolling back to previously entered input.

JP Calculator


Generated calculation tree from what you typed in:


2. An example for input and tree display


3. Used technologies

As always: Serverside: JSF Java. Clientside: Javascript.

Calculator: JSF Facelet (Composition with one parameter: Turn on/off the SVG tree display)

Datatransfer once the calculator is displayed: Ajax. Tree Graphics: SVG elements, calculated and produced serverside (ui:repeat).

JQuery dialog: Because all data exchange including SVG elements are transmitted in Ajax post calls, the calculator component works well inside a JQuery dialog.

Minor use of Javascript required. For example the highlighting of symbols in the input text field, which have not been understood by the parser, has been realized with the help of Javascript combined with EL input filled in by JSF inside Ajax calls.

Main part of the logic consists of generating the calculation tree, which is used for the evaluation of the numeric result and which also can be visualised at the client side. The basic idea is, that the tree nodes represent operations or functions and the leafs are numeric values. The creation as well as the evaluation is done recursively.

Java Design Patterns used serverside:
DI, Hollywood, MVC

Tools used for this example:
Java JDK
Java EE including the Glassfish application server and the JavaDB (Derby).
Eclipse J2EE IDE.
JQuery Javascript framework.

Remark: All tools are freely available in the internet.

Operating systems: Linux Ubuntu 14.04, tested on Win8.1 as well. Browsers: Firefox, Chrome & latest IE.
On IE, typing the Return key will clear the input instead of starting the calculation. Click the "=" key for getting the result works.



4. Download source code (freeware)

ZIP file of this project, with an index page, where you can start the calculator inside a JQuery dialog, a short example page and one with only the calculator. Eclipse Java EE IDE for Web Developers. Version: Kepler Service Release 2, Linux version. For deployment in a Glassfish 4 application server

The WAR file of that one: Calculator.war, which also runs on this server: Calculator.war running on this server and should look somehow like this:

JSF Calculator in JQuery Dialog Example