Hi Niels, This is cool. What would be great would to post this on code.xwiki.org as a snippet. Is that something you could do? Thanks -Vincent On Jun 11, 2009, at 2:33 AM, Niels Mayer wrote:

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 _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users