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

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.