Ajax with Play! Framework and Sammy.js

I have been extremely busy with a couple of consulting projects that never seem to end, I am actually getting flashbacks from the late 90s, I am using (what I really mean is I am having to) go through JBoss’ MDBs to store and query data from the database that are called from a Play! application with a heavily customized CRUD module and persistence library. I basically re-wrote Play!’s entire JPA code to send messages back and forth to these MDBs. Ok, Enough about my problems, so in between one of the thousands of ant builds and waiting for JBoss to restart I will quickly write about a demo application I wrote in one sleepless night. I really really hoped I had done more, breaks my heart to even think about it but we gotta do what we gotta do to support our families.

Basically I wrote an application that would talk to GitHub’s API with some client code I wrote, expose the POJOs with a RESTful API using Play!’s RESTEasy module. On the frontend I used Play! and its very sweet jsAction in combination with Sammy.js. I was asked by someone why did I use Sammy.js and I couldn’t come up with an answer but here is, I used Sammy.js for the same reason I use Play!. I can use JSPs or Struts to code my Web UI, like I can use JQuery and manipulate DOM objects – but why? Why waiting for re-deploys? Why having to code getters and setters all over your data classes? Why having to change XML and Java files for each modification? Play! makes life so much easier, it’s a productive framework just like Sammy.js is for AJAX.

So let me the explain the setup real quick because it seems those EJBs finally re-deployed. I used Play!’s main layout file to include JQuery, Sammy.js and define the application code, it looks something this:

;(function($) { // Define Sammy App var app = $.sammy('#main', function() { // Util Params this.debug = false; var formfields = null; // Home - Application.searchForm() this.get('#/', function() { var action = #{jsAction @searchForm() /} this.partial(action()); }); // Search - Application.search() this.get('#/search', function() { formfields = this.params; var action = #{jsAction @search(':search', ':startPage') /}; this.partial(action({search: formfields['q'], startPage: formfields['startPage']})); }); // Repository Details - Application.repository() this.get('#/repository/:user/:repository', function() { formfields = this.params; var action = #{jsAction @repository(':user', ':repository') /}; this.partial(action({user: formfields['user'], repository: formfields['repository']})); }); // User Details Page - Application.user() this.get('#/user', function() { formfields = this.params; var action = #{jsAction @user(':userName') /}; this.partial(action({userName: form_fields['userName']})); }); }); $(function() { app.run('#/'); }); })(jQuery);

That’s the one-page Sammy.js setup, notice that when you get a request on the homepage Sammy.js will invoke the following code:

// Home - Application.searchForm() this.get('#/', function() { var action = #{jsAction @searchForm() /} this.partial(action()); });

Play! will convert “#{jsAction @searchForm() /}” into a function that constructs an url that would invoke searchForm() on whatever controller you are using, Application on my case. Then Sammy.js uses that function to invoke the controller, get the response back in HTML. Just remember to remove extends from the first line of the view so the header doesn’t get included twice, remember the page isn’t getting refreshed, just the interior content.

That’s pretty much it!

For a complete example with a fully functional demo please fork the code on GitHub.

Hopefully this is going to be helpful to you! Let me get back to restart JBoss, I got a huge deadline to make tomorrow and I am dead tired.

Live demo is available here.

Now Go Play!.