<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d6813476980165976394\x26blogName\x3dThe+Bayesian+Conspiracy\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://bayesianconspiracy.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://bayesianconspiracy.blogspot.com/\x26vt\x3d-948109813487012623', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

The Bayesian Conspiracy

The Bayesian Conspiracy is a multinational, interdisciplinary, and shadowy group of scientists. It is rumored that at the upper levels of the Bayesian Conspiracy exist nine silent figures known only as the Bayes Council.

This blog is produced by James Durbin, a Bayesian Initiate.

Using Groovlets in jQuery tutorial.

I've been learning a little about jQuery by going through the excellent jQuery tutorial over at the jQuery Docs page. The examples use php for server side code, but since I'm more familiar with Servlets/Groovlets, I decided do the server side code as a Groovlet.
First, the setup. After installing Tomcat, I created a sub-directory under webapps called sandbox. In sandbox, I created a sandbox/WEB-INF directory with a lib sub directory. I copied all of /usr/local/groovy/lib/ to sandbox/WEB-INF/lib/, though only some of it is needed. I then put the following web.xml file under sandbox/WEB-INF/

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  version="2.5">
  <display-name>Groove</display-name>
    <servlet>
      <servlet-name>GroovyServlet</servlet-name>
      <servlet-class>groovy.servlet.GroovyServlet</servlet-class>
    </servlet>
    <servlet>
        <servlet-name>GroovyTemplate</servlet-name>
        <servlet-class>groovy.servlet.TemplateServlet</servlet-class>    
  </servlet>
    <servlet-mapping>
        <servlet-name>GroovyServlet</servlet-name>
        <url-pattern>*.groovy</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>GroovyTemplate</servlet-name>
        <url-pattern>*.gsp</url-pattern>
    </servlet-mapping>
</web-app>

This web.xml will tell Tomcat to use groovy.servlet.GroovyServlet to handle *.groovy files. From then on, any .groovy files you put under /sandbox (or any subdirectories thereof) will be compiled as a Groovlet by Tomcat.

I then downloaded the jquery-starterkit from the jquery site and unpacked it into sandbox/jqstarterkit. In jqstarterkit are a number of files, custom.js, rate.php, screen.css, and starterkit.html. You will need to download jquery itself into /sandbox/jqstarterkit/ and rename it to /sandbox/jqstarterkit/jquery.min.js. Then go through the tutorial, editing custom.js to include the custom bits of jQuery javascript in the tutorial, seeing the results in:

http://localhost:8080/sandbox/jqstarterkit/starterkit.html

When you get to the part about rate.php, simply replace rate.php with rate.groovy in the custom.js script, like so:

jQuery(document).ready(function(){
  // generate markup  $("#rating").append(" Please rate: ");

  for ( var i = 1; i <= 10; i++ )
    $("#rating").append("<a href='#'>" + i + "</a> ");

  // add markup to container and apply click handlers to anchors  $("#rating a").click(function(e){
    // stop normal link click    e.preventDefault();

    // send request    $.post("rate.groovy", {rating: $(this).html()}, function(xml) {
      // format and output result      $("#rating").html(
        "Thanks for rating, current average: " +
        $("average", xml).text() +
        ", number of votes: " +
        $("count", xml).text()
      );
    });
  });
});


Then, create a file rate.groovy with the following contents:


// Simple AJAX groovlet... takes a rating from a jQuery $.post()// saves it to a file, computes the running average, then // returns a status line in XML format...
rating = request.getParameter('rating')
f = new File('sandbox/jqstarterkit/ratings.dat')
f << "$rating\n"

// Now, read in the file and compute number of ratings// and average rating...sum = 0;
count = 0;
f.eachLine{
  sum+= (it as int)
  count++
}
avg = (double)sum/(double)count

// Report result back to jQuery
// In Groovlet, html is bound to new MarkupBuilder(out) by default// so the following bit of markup substitutes for this string://  out<<"""//  <ratings>//    <average>$avg</average>//    <count>$count</count>//  </ratings>"""// // out itself is bound to response.getOutputStream()html.ratings(){
  average("$avg")
  count("$count")
}


When a .groovy file is interpreted as a Groovlet, several variables are pre-bound. request, for example, is bound to ServeletRequest. See the full list of bindings in the Groovlet docs. It took me a bit of trial and error to get all of this right and working. Hopefully this boilerplate will help someone else get up and going even quicker.

Labels: , ,

You can leave your response or bookmark this post to del.icio.us by using the links below.

Post a Comment | Bookmark | Go to end |