Ajax with Play! Framework and Sammy.js

I was asked to write a demo application using the always great Play! Framework that would have some AJAX capabilities. So in one sleepless night 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:

   
       	<!-- Sammy App -->
	        ;(function($) {
	        	// Define Sammy App
	            var app = $.sammy('#main', function() {

	            	// Util Params
	              	this.debug = false;
	              	var form_fields = null;

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

	              	// Search - Application.search()
		              this.get('#/search', function() {
		              	form_fields = this.params;
		              	var action = #{jsAction @search(':search', ':startPage') /};
		                this.partial(action({search: form_fields['q'], startPage: form_fields['startPage']}));
		              });

	              	// Repository Details - Application.repository()
		              this.get('#/repository/:user/:repository', function() {
		              	form_fields = this.params;
		              	var action = #{jsAction @repository(':user', ':repository') /};
		                this.partial(action({user: form_fields['user'], repository: form_fields['repository']}));
		              });

	              	// User Details Page - Application.user()
		              this.get('#/user', function() {
			          	form_fields = 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!.

Article originally posted at http://geeks.aretotally.in/ajax-with-play-framework-and-sammy-js by Felipe Oliveira.