Responsive Web Design using Twitter Bootstrap, Spring MVC
Join the DZone community and get the full member experience.
Join For Freeintroduction
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.
Published at DZone with permission of Krishna Prasad, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments