Updated 2018-02-17 13:12:57 by arjen

Arjen Markus (17 february 2018) The publication of the wapp tool a couple of weeks ago provided me the perfect platform to experiment with an old idea. The result, while not the most beautiful or functional web application I have ever seen, is a working web application. The code was derived for the most part from the examples that come with wapp - otherwise I would have been hard put to construct a thing like this ;). I mostly built it to get some feeling for wapp - though it may be a nice project in itself to expand this first "wapp-lication" of mine ...
# This script was derived from formajax02.tcl and asks the user for a mathematical
# function expressed in x, to show a small table of values.
package require wapp

# The default page paints a form to be submitted.
# The default content-security-policy of Wapp restricts the use
# of in-line javascript, so the script content must be returned by
# a separate resource.
proc wapp-default {} {
  wapp-trim {
    <h1>Mathematical functions</h1>
    <form id="theForm">
    <table border="0">
    <tr><td align="right"><label for="expression">Function f(x) =</label>&nbsp;</td>
        <td><input type="text" id="expression" width="40">
    <tr><td align="right"><label for="minimum">Minimum x =</label>&nbsp;</td>
        <td><input type="text" id="minimum" width="10">
    <tr><td align="right"><label for="maximum">Maximum x =</label>&nbsp;</td>
        <td><input type="text" id="maximum" width="10">
    <tr><td><td><input type="submit" value="Send">
    <script src='%url([wapp-param SCRIPT_NAME]/script.js)'></script>

    <div id="insertionPoint"></div>

# This is the javascript that takes control of the form and causes form
# submissions to be send using XMLHttpRequest with urlencoded content.
proc wapp-page-script.js {} {
  wapp-mimetype text/javascript
  wapp-cache-control max-age=3600

  set script [wapp-trim {
    document.getElementById("theForm").onsubmit = function(){
      function val(id){ return encodeURIComponent(document.getElementById(id).value) }
      var jx = "expression="+val("expression")+
      var xhttp = new XMLHttpRequest();
      xhttp.open("POST", "%string([wapp-param SCRIPT_NAME])/acceptjson", true);

      xhttp.onreadystatechange = function(){
        document.getElementById("insertionPoint").innerHTML = this.responseText;
        document.getElementById("insCancel").onclick = function(){
          document.getElementById("insertionPoint").innerHTML = null

      return false

  return $script

# This page accepts a form submission and prints it on standard output.
# A real server would do something useful with the data.
proc wapp-page-acceptjson {} {
  foreach var [lsort [wapp-param-list]] {
     set $var [list [wapp-param $var]]

  set dx [expr {($maximum - $minimum) / 10.0}]

  set expression [string map {x $x} $expression]

  set table "<table border=\"1\">

  for {set i 0} {$i < 11} {incr i} {
    set x [expr {$minimum + $dx * $i}]
    set f [expr $expression]

    append table "\n<tr><td>[format "%.4f%s%12.4f" $x "<td>" $f]"
  append table "\n</table><button id=\"insCancel\">Remove</button>"

  wapp-trim $table
wapp-start $argv