Play framework and Twitter’s Bootstrap – tutorial


              Play is a most efficient high-productivity framework; it allows the users to develop the application in Java or Scala and both. It is purely helps to develop modern web applications in a very effective manner. I don’t want to list out the all features that are leverages on this framework.  You can refer the play framework website to know more about it. The most highlighted features that are attracted me,
  • Async HTTP Programming
  • Template Engine
  • In-built Cache
  • In-built Webservice binder
  • Easy integration with AKKA framework
  • WebSocket support
    Twitter’s Bootstrap
              Twitter’s Bootstrap provides flexible Javascript and Stylesheet.  I never ever have seen this kind of a very portable Javascripts & CSS in earlier.  All we need to do is just download and import the Bootstrap’s CSS and Javascripts in our HTML and can utilize the features. If we want to integrate the Fluid Grid,
             * Includes CSS & JavaScript files
             * Defines the Fluid Grid class in the div
          <div class="row-fluid">
            <div class="span4">...</div>
            <div class="span8">...</div>
         </div>
     
The below tutorial will explains about,

1. How to create Asynchronous HTTP method using AKKA in Play application?
2. How to expose the result in JSON response?
3. How to call the Async HTTP service from JQuery?
4. What template engine does?
5. Also, how we can effectively utilize Bootstrap’s components?

This below application has been hosted on GitHub; this sample simply shows a message on the popup message by clicking the button in the page.
        Play is a MVC framework structure, the sample project seems like

Play Package Structure

Under the “controllers”, ‘Application’ is the class which controls both the Modal and View. Controller classes has the responsibility to servers the data to the views via web service. All the web binding methods are static which emits the “Result” as a HTTP response.

   public class Application extends Controller {

	/**
	 * Home page render with the string
	 */
       public static Result index() {
         return ok(asyncworld.render("User"));
      }
       ...
   }

    
In the above method it returns ‘ok’ with string “User”. In the “views” package, you can find the file called “asyncworld.scala.html”, which will render the HTML file along with the string that gets as a response.
Below is the Html Scala template, which is tightly integrates with ‘Application.java’
  @(name: String)
<!DOCTYPE html>

<html>
    <head>
        <title>Welcome to Play Application demo</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.css")">
         ...
         ...
         <body>
	    <h2>Welcome @name!</h2>
          ...
          ...
    </html>
In the template engine of above html, @name which gets the value from the controller. You can find the return value type in the below java controller snippet.
   return ok(asyncworld.render("User"));
Asyncworld scala, which accepts String, so we are passing the string value “User” to there. At runtime @name will replace the value – “user”.
In our example, we have Welcome Message and a button in the window. By Clicking the button, JQuery will calls the service which is binded from Async method in the controller class. This method sets the response as a JSON object. Response object have the values, Sample Username and Current Timestamp. Play framework is really amazing, binding into JSON response, we no need to dependent on any third-party libraries. It has many in-built options are available. The async method in below,
     /**
   * Asynchronous method to provide the JSON result
   */
     public static Result fetchPopuMessage(final String text){
	  return async(Akka.future(new Callable<String>() {

		public String call() throws Exception {
			return text;
		}
	}).map(new Function<String, Result>() {

		@Override
		public Result apply(String data) throws Throwable {
                 Map<String,String> jsonData = new HashMap<String, String>();

                 jsonData.put(AsyncConstants.USER_NAME, data);
                 jsonData.put(AsyncConstants.CURRENT_TIME, new Date().toString());

               return ok(toJson(jsonData));
		}
	}));
  }
   
The asynchronous method, which gets the input from the service request parameter. Call() method will parse the data and send the output to Play’s Function, the Result method will binds the data as a JSON object using ‘toJson(..)’ method.
The routes file is the configuration template for the service URIs.
   GET   /                         controllers.Application.index()
   GET	 /asyncresponse/:name      controllers.Application.fetchPopuMessage(name :String)
  
Now we will see, how can consume this service and render the data in the Bootstrap’s popup using JQuery. Bootstrap’s popup div, see here.
   <!-- This is Bootstrap's modal popup plugin. Used to populate the response
                      by clicking on the button -->

       <div class="modal hide" id="profile_modal" style="width:350px;height:200px">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">x</button>
           <div class="popup_header" style="margin-top:0">
             <div id="myheader"><h4>Welcome to Play Application</h4></div>
           </div>
         </div>
         <div class="modal-body">
           <div id="mypopup"></div>
         </div>
       </div>
  
JQuery script is the important code block, which fills the data into the popup. This javascript, calls the webservice and fetch the JSON as a response data. This JSON data will be parse and render into the popup div. The javascript snippet in below,
    <script type="text/javascript">
           $(function() {
        	   $("#click").click(function(){
        		   $("#mypopup").empty();
        		   $('#profile_modal').modal('show')
        		   $.get("asyncresponse/RaghavPrabhu", function(data, textstatus){
        			   $("#mypopup").append("<h4>Hello "+ data.username+",</h4><br>");
        			   $("#mypopup").append("<h5>Current Date/Time is : "+data.currenttime+",</h5>")
        		   });

        	   });
           });
          </script>
  
      Below is the Home screen, The value “User” is being rendered from Scala template engine using  <<Welcome @name!>>
Bootstrap’s popup message output,

This is project is hosted on Github. Use this sample tutorial as a hint for your real time applications using Play and Bootstrap.
Please post your feedbacks!!!