Responsive Web Design using Twitter Bootstrap, Spring MVC

Introduction

Responsive Web Design is a new way of building web application. Once you build a application using Responsive Web Design, you will be easily able to make this web application work on any device including Mobile and Handheld devices. Twitter the company open sourced their Twitter Bootstrap framework which supports Responsive Web Design(RWD). Kickstrap is another variant of Twitter Bootstrap. In this blog, I will demonstrate how we will build a Spring MVC based application that uses jquery-tmpl to build a JSON based RWD.

The use case we cover is a simple Airline reservation system, where in for a given origin, destination, the start and end date, we return all the flights. When we select a flight, we show all the deals in the target location.

For people in hurry get the code and the steps from @ Github.

Responsive Web Design

There are 3 key technical features that are heart of Responsive Web design:

Flexible grid-based layout: When you are viewing the page on a mobile devices, when you change the device to landscape or portrait, the page layout automatically adjusts and flows to display within the layout, this is Flexible grid-based layout. In Twitter Bootstrap, it can be achieved using CSS tags as below,

<div class="row-fluid"><!-- put some HTML stuff --></div>

Flexible images: dynamic resizing of images

Media queries: This is CSS3 feature, where in the CSS is returned to the Browser based on querying the Media device. Typical HTML tag you use for this as below,

<!-- for iPad, this is how the media query looks like -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Spring MVC and Twitter Bootstrap

The overall data flow is as below,

Responsive Web Design using Twitter Bootstrap, Spring MVC

Responsive Web Design using Twitter Bootstrap, Spring MVC

In this example we build a Single Page Website using Twitter Bootstrap and JQuery-tmpl. On the frontend side, the data is submitted as below,


$('#searchResults').click(function(){
var origin =  $("#origin option:selected").val();
var destination = $("#destination option:selected").val();
var startDate= $("#startDate").val();
var endDate = $("#endDate").val();

$.get("resources/datatemplates/flightList.html", function (template){
$.get("/air/searchResultsJson?leavingFrom=" + origin + "&goingTo=" + destination + "&startDate=" + startDate + "&endDate=" + endDate, function (data){
$("#dataRegion").html("");
$.tmpl(template, data).appendTo("#dataRegion");
});
});
return false;
}

This executes a JQuery and gets the list of flights in the form as JSon objects.

The JQuery-tmpl plugin is used to bind the flightList.html to achieve Single Page Webpage design. The flightList.html looks as below,

<tr>
<td>${startTime}</td>
<td>${startAirport}</td>
<td>${endTime}</td>
<td><a href="#" onclick="return getDetails('${endAirport}')">${endAirport}</a></td>
</tr>

On the Spring MVC side, we need to add the Maven dependency and call the method, refer this link for more details.

The controller code looks as below,

@RequestMapping(value = "searchResultsJson", method = RequestMethod.GET)
public @ResponseBody
List searchResultsJson(@RequestParam String leavingFrom,
@RequestParam String goingTo, @RequestParam String startDate,
@RequestParam String endDate) {
Form form = new Form();

form.setOrigin(leavingFrom);
form.setDestination(goingTo);
form.setStartDate(startDate);
form.setReturnDate(endDate);

return locationService.selectFlights(form);
}

In the above example @ResponseBody help in returning the JSon response to the client.

Conclusion

In this blog I demonstrated, how we can build a web application, that can be adapted to work on any device. It also show how to return JSon response from a Spring MVC based web application.

I hope it helps you.

About these ads

4 thoughts on “Responsive Web Design using Twitter Bootstrap, Spring MVC

  1. PD

    Excellent article. Downloaded the src code from GitHub and worked as clean as a whistle!

    However had a query w.r.t Flexible images: dynamic resizing of images –
    How does the rendering of images to the respective Mobile’s image spec happen ?
    How does the application read the specs of the mobile device to dynamically resize the image?
    Is it got from the Request Header?

    Cheers,
    PD

    Reply
  2. GoSmarter Post author

    PD, as far the images goes, we dont need to tie the images to the device. As per this design, they say that express image width as the percentage.

    An alternative is crop where in you apply overflow:hidden it allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.

    Refer this link for more details: http://msdn.microsoft.com/en-us/magazine/hh653584.aspx, Flexible Images and Media section.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s