DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
11 Monitoring and Observability Tools for 2023
Learn more
  1. DZone
  2. Coding
  3. Frameworks
  4. Ajax with Play! Framework and Sammy.js

Ajax with Play! Framework and Sammy.js

Felipe Oliveira user avatar by
Felipe Oliveira
·
May. 02, 11 · Interview
Like (0)
Save
Tweet
Share
15.73K Views

Join the DZone community and get the full member experience.

Join For Free
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.
Framework AJAX

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Container Security: Don't Let Your Guard Down
  • GitLab vs Jenkins: Which Is the Best CI/CD Tool?
  • Cloud Performance Engineering
  • Use Golang for Data Processing With Amazon Kinesis and AWS Lambda

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: