Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Jump into Java microframeworks, Part 4: Play

Matthew Tyson | March 18, 2016
A closer look at Java's original, ultra-lightweight web development stack

Now jQuery is available to our front-end. We also want to include a small jQuery plugin, serializeObject, which will help us with the form submit. Copy the source of that GitHub project into a /public/javascripts/serializeObject.js file, placing it right next to hello.js in your javascripts folder. Also include it in the main.html.scala file (along with hello.js), as shown in Listing 13.

Listing 13. Referencing serializeObject.js


<script src="@routes.Assets.versioned("javascripts/serializeObject.js")" type="text/javascript"></script>

Now we'll add our own JavaScrip, using hello.js as a base. Start by adding the JavaScript in Listing 14 to hello.js.

Listing 14. hello.js: Adding JavaScript support for addGroup


App = {
		startup: function(){
			$("#addGroupButton").click(App.addGroup);
		},
		addGroup: function(){
			var group = $('#groupForm').serializeObject();
			$.ajax({
		        url: '/group',
		        type: 'POST',
		        contentType: 'application/json',
		        data: JSON.stringify(group),
		        success: function(){
		        	//App.loadPeople();
		        },
		        error: function(xhr,err){
		        	alert("encountered a problem: ", err);
		        }
		    });
			return false;
		}
}
$( document ).ready(function() {
   App.startup();
});

Next return to index.html.scala and make the form look like what you see in Listing 15. We're adding a couple of IDs to elements in the form, which our hello.js script will use. In Listing 15, we attach an onClick handler to #addGroupButton, then use #groupForm to get the data from the form. Notice that we also remove the action for the form, since we don't need it anymore.

Listing 15. Updated Create Group form


<form method="post" id="groupForm">
	<input type="text" name="name"></input>
	<button id="addGroupButton">Create Group</button>
</form>

Now when a user clicks Add Group, the application will POST/submit a JSON object with the form data to /group. The JSON will look something like: {"name": "The Police"}.

Update the route

Next we'll change the route for /group POST. The script in Listing 16 (the route file) should replace the old /group mapping.

Listing 16. Route file update for create group with JSON


POST    /group						controllers.Application.createGroupJSON()

Finally, we'll create the new createGroupJSON() method, as in Listing 17.

Listing 17. createGroupJSON() method


 public Result createGroupJSON() {
    	Group group = Form.form(Group.class).bindFromRequest().get();
    	group.save();
    	return ok("{\"message\":\"Added a Group!\"}");
    }

Notice that Play is smart enough that we can still use the Form.form(Group.class).bindFromRequest() handler to get our Group instance from the JSON request body. We can call save() on the instance just as we did before. This will be followed by returning a status 200 with the ok() call, sending a simple JSON response body with a message field.

 

Previous Page  1  2  3  4  5  6  7  Next Page 

Sign up for CIO Asia eNewsletters.