New subject: [xwiki-users] how to add a calculator to a xwiki-based site in one minute

11 Jun 2009

Jonathan --

See  http://nielsmayer.com/xwiki/bin/view/Sandbox/Calc and
http://nielsmayer.com/xwiki/bin/view/Sandbox/Calc?viewer=code (
http://nielsmayer.com/xwiki/bin/download/Sandbox/Calc/Sandbox.Calc.xar )

The above took about 1 minute to do, basically cutting and pasting the code
as-is from the article below into a new document, adding one line at the
beginning to get it to include the Javascript I pasted into
XWiki.JavaScriptExtension[0] in the object editor and that's it). Let me
know if you want help getting this example running on
http://jonathanmayer.info (you're going to need to see me do the
JavaScriptExtension trick at least once )... from there, you can add new
functions or whatever to learn about javascript programming on the web.

http://www.maconstateit.net/Tutorials/JSDHTML/JSDHTML09/jsdhtml09-05.htm

A Simple Calculator

Use of buttons to create a simple JavaScript calculator is demonstrated
below. The "Calculator" button opens the calculator in a ModelessDialog
window that remains on top while providing access to the underlying Web
page. The layout below shows the same calculator with a "Formula" textbox
that is normally hidden but is revealed here to show the calculations that
take place behind the scenes.

  JavaScript Calculator                Formula: *Figure 9-34.* A simple
JavaScript calculator.

The XHTML code and button event handlers are shown below. The calculator is
formatted inside a table to control its layout.

<table border="7">
<tr>
  <td colspan="4" style="font-family:comic sans ms; text-align:center;
  color:white; background-color:gray; font-size:9pt">
    JavaScript Calculator
  </td>
</tr>
<tr>
  <td colspan="3"><input id="Answer" type="text"
style="width:100px;
text-align:right"></td>
  <td><input type="button" style="width:30px"
value="="
onclick="EnterEqual()"></td>
</tr>
<tr>
  <td><input type="button" style="width:30px"
value="1"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="2"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="3"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="+"
onclick="EnterOperator(this.value)"></td>
</tr>
<tr>
  <td><input type="button" style="width:30px"
value="4"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="5"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="6"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="-"
onclick="EnterOperator(this.value)"></td>
</tr>
<tr>
  <td><input type="button" style="width:30px"
value="7"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="8"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="9"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="*"
onclick="EnterOperator(this.value)"></td>
</tr>
<tr>
  <td><input type="button" style="width:30px"
value="C"
onclick="EnterClear()"></td>
  <td><input type="button" style="width:30px"
value="0"
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="."
onclick="EnterNumber(this.value)"></td>
  <td><input type="button" style="width:30px"
value="/"
onclick="EnterOperator(this.value)"></td>
</tr>
</table>
<input id="Formula" type="hidden"/>

*Listing 9-22.* Code to format and style the calculator.

Notice the final <input id="Formula" type="hidden"/> field. The
type="hidden" attribute creates a standard textbox that is hidden from view.
In the example above, this control is given the attribute type="text" in
order to make it visible so you can see the formulas being created by the
button clicks.

Four functions are called by the buttons. All of the number keys call
function EnterNumber(), passing the number value of the button; the
arithmetic operator keys call function EnterOperator(), passing the operator
symbol; the "=" key calls function EnterEqual(); and the "C" key
calls
function EnterClear().

<script type="text/javascript">
var op = false;
var eq = false;

function EnterNumber(Number)
{
  if (op == false) {
    document.getElementById("Formula").value += Number;
    document.getElementById("Answer").value += Number; }
  else {
    document.getElementById("Answer").value = Number;
    op = false;
    if (eq == true) {
      document.getElementById("Formula").value = Number;
      eq = false; }
    else {
      document.getElementById("Formula").value += Number;
    }
  }
}

function EnterOperator(Operator)
{
  if (document.getElementById("Formula").value != "") {
    document.getElementById("Answer").value =
      eval(document.getElementById("Formula").value);
    document.getElementById("Formula").value =
      eval(document.getElementById("Formula").value) + Operator;
    op = true;
    eq = false;
  }
}

function EnterEqual()
{
  if (document.getElementById("Formula").value != "") {
    document.getElementById("Answer").value =
      eval(document.getElementById("Formula").value);
    document.getElementById("Formula").value =
      eval(document.getElementById("Formula").value);
    op = true;
    eq = true;
  }
}

function EnterClear()
{
  document.getElementById("Answer").value = "";
  document.getElementById("Formula").value = "";
  op = false;
  eq = false;
}

</script>

*Listing 9-23.* Script for the calculator.

Niels
http://nielsmayer.com