DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Join us tomorrow at 1 PM EST: "3-Step Approach to Comprehensive Runtime Application Security"
Save your seat
  1. DZone
  2. Coding
  3. Frameworks
  4. Responsive Web Design using Twitter Bootstrap, Spring MVC

Responsive Web Design using Twitter Bootstrap, Spring MVC

Krishna Prasad user avatar by
Krishna Prasad
·
Feb. 13, 13 · Interview
Like (0)
Save
Tweet
Share
23.37K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Responsive web design mobile app Bootstrap (front-end framework) Design Spring Framework

Published at DZone with permission of Krishna Prasad, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Exploring the Benefits of Cloud Computing: From IaaS, PaaS, SaaS to Google Cloud, AWS, and Microsoft
  • Best Practices for Writing Clean and Maintainable Code
  • AIOps Being Powered by Robotic Data Automation
  • Do Not Forget About Testing!

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: