使用 Bootstrap 和 Spring MVC 实现响应式 Web 设计 已翻译 100%

oschina 投递于 2013/02/14 10:28 (共 4 段, 翻译完成于 02-15)
阅读 22849
收藏 96
7
加载中

简介

响应式Web设计是一种创建Web应用程序的新方法。一旦采用响应式Web设计创建出应用程序,那么该Web应用程序将能轻而易举地运行于包括移动和手持设备在内的任意设备之上。Twitter公司开源了他们的Twitter Bootstrap框架,该框架支持响应式Web设计Responsive Web Design,简称RWD)。Kickstrap是Twitter Bootstrap的一个变种。我将在本博文中演示,如何创建一个基于Spring MVC的应用,该应用采用jquery-tmpl创建了基于RWD的JSON。

我们将要涉及的用例(use case)是一个简单的航班订票系统。在该系统中给定始发地、目的地、始发和到达日期,将返回所有航班。当选定某一航班后,将在目标位置列出所有的交易。

着急的人可以先到 @ Github上获得代码和步骤

fbm
fbm
翻译于 2013/02/14 23:39
2

响应式Web设计

有三个关键的技术特性,是响应式Web设计的核心:

灵活的基于网格的布局:在移动设备上查看页面时,如果设备的朝向从横向改为竖向时,页面布局会自动地调整并在新布局中展开内容进行显示,这就是灵活的基于网格的布局。在Twitter Bootstrap中,可以使用如下的CSS标签(tag)来实现:

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

灵活的图像:动态调整图像的尺寸

媒介查询:这个是CSS3的特性,该特性可以通过查询媒介设备将适当的CSS返回给浏览器。使用到的HTML标签如下例所示:

<!-- 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">
fbm
fbm
翻译于 2013/02/15 00:04
2

Spring MVC和Twitter Bootstrap

整体的数据流如下图所示。(图丢了!!!

使用Spring MVC和Twitter Bootstrap进行响应式Web设计

在这个例子中,我们采用Twitter BootstrapJQuery-tmpl创建了一个单页Web站点。在前端,数据是用以下的方式提交的:

$('#searchResults').click(function(){
var origin =&nbsp; $("#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;
}
这里执行了JQuery,获得了以JSon对象形式存储的航班列表。

JQuery-tmpl插件用来绑定flightList.html,从而实现单页面Web站点设计。flightList.html文件内容如下所示:

<tr>
<td>${startTime}</td>
<td>${startAirport}</td>
<td>${endTime}</td>
<td><a href="#" onclick="return getDetails('${endAirport}')">${endAirport}</a></td>
</tr>
Spring MVC侧,需要添加Maven依赖并调用相关方法,可从该 链接获得更详细的讲解。

控制器(controller)的代码如下所示:

@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);
}
上面的例子中, @ResponseBody用于将JSon响应返回到客户端。


fbm
fbm
翻译于 2013/02/15 00:23
2

结论

我在本博文中演示了如何创建能够适应并运行于任何设备之上的Web应用。另外还展示了从基于Spring MVC的web应用中返回JSon响应的方法。

我希望该文能够帮到你。

fbm
fbm
翻译于 2013/02/15 00:29
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(16)

hans汉斯
hans汉斯
支持楼上的观点,也只是分享下自己使用这2款工具的过程而已,何必较真。
黄金Object
黄金Object
原博文下面也有很多评论,我就没见到像上面的评论。我自认为我没到master的地步无法评价别人博文的内容有没有价值,但是否定别人努力成果的看客们无疑都是群自己不舒服也让大家陪着一起不舒服的垃圾。
VipinChan
VipinChan
整一个标题党,内容毫无价值。。
whboschina
whboschina
这和响应式Web有毛关系?
刘江涛

引用来自“天天天”的评论

引用来自“liefdiy”的评论

引用来自“天天天”的评论

不就是json数据前端展示,用extjs吧

顶起。但是extjs收费。

不用的哦

extjs太庞大了,做企业级开发挺好
z
zero
亮点在哪里?
天天天
天天天

引用来自“liefdiy”的评论

引用来自“天天天”的评论

不就是json数据前端展示,用extjs吧

顶起。但是extjs收费。

不用的哦
l
liefdiy

引用来自“天天天”的评论

不就是json数据前端展示,用extjs吧

顶起。但是extjs收费。
官方入员
官方入员

引用来自“ikai”的评论

JQuery官方已不再维护JQuery-tmpl.失败.
bootstrap用的2.0.1.失败.
代码臃肿.失败.
情人节一个人过的.失败..

标题党!
enixyu
enixyu

引用来自“ikai”的评论

JQuery官方已不再维护JQuery-tmpl.失败.
bootstrap用的2.0.1.失败.
代码臃肿.失败.
情人节一个人过的.失败..

回复的真搞笑
返回顶部
顶部