Contact envelope



Simple Calculator class that evaluates expressions. Use the included CalculatorGridEditor to attach the calculator to numerical fields in the DataGrid.

Supports multiline calculation and very large numbers or numbers with long precision.

Creating the Calculator Component

The Calculator extends SkinnableComponent and can be added to any container that implements IVisualElementContainer.

Using the Calculator Component

To use, either click or type in expressions and hit the "=" button or the ENTER key. The evaluated value is available via the "value" property.


Actionscript 2.0 and Javascript can both evaluate arbitrary expressions. However, Actionscript 3.0 cannot evaluate arbitrary expressions. It would be possible to use Javascript via ExternalInterface but my belief is that using the ExternalInterface API for a simple calculator is overkill and would create unexpected issues. The upshot is that this class has to evaluate expression strings manually.

Animations & Effects

Value commits occur after a cash register type animation. Built in support for customizing the duration of the animation and the easer.


The CalculatorGridEditor class in the ardisia.components.calculator package is designed to be attached to numerical fields in a Spark DataGrid. It is useful to make quick calculations and change the data in the data cell.

Attention was paid to focus: receiving focus and returning focus to the grid based on clicks and key strokes, like the TAB and ENTER key.


Full keyboard and numpad support when the Calculator has keyboard focus. Evaluates the expression by default on the ENTER key, the "=" key, and when the calculateButtonPart is clicked.

Adding New Operators

By default, the only operators supported are ADD, SUBTACT, MULTIPLY, DIVIDE, and SQRT. To add new operators (E.G. MOD), add a button in the skin to add the new operator to the text string and in the host, extend the evaluateOperator() method.

Decimal Marks and Locale

The Calculator will display decimal marks according to the user's locale setting. For example, using a Canadian locale of "en-CA", decimal marks are displayed as a period '.' . If the user's locale setting was German "de-DE" then the Calculator would display a decimal as a comma ',' .

Selected Custom Events

Dispatched when the "value" property changes via user interaction.

Selected Custom Styles

default #C2C2C2
The color of the background.

default 1
The alpha of the background.

Themes & Skinning

Included are skins for both the Spark, London, and Stockholm themes.


See the Calculator demo application for example code.

Back To Top