My first wapp-lication

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">
    </table>
    </form>
    <script src='%url([wapp-param SCRIPT_NAME]/script.js)'></script>

    <p>
    Result:
    <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")+
               "&minimum="+val("minimum")+
               "&maximum="+val("maximum");
      var xhttp = new XMLHttpRequest();
      xhttp.open("POST", "%string([wapp-param SCRIPT_NAME])/acceptjson", true);
      xhttp.setRequestHeader("Content-Type",
                             "application/x-www-form-urlencoded");

      xhttp.onreadystatechange = function(){
        if(this.readyState!=4)return
        document.getElementById("insertionPoint").innerHTML = this.responseText;
        document.getElementById("insCancel").onclick = function(){
          document.getElementById("insertionPoint").innerHTML = null
        }
      }

      xhttp.send(jx);
      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\">
               <tr><th>x<th>f(x)"

  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

Category Toys

Category Internet